rsuite 5.56.0 → 5.58.0

package/dist/rsuite.js

@@ -6399,25 +6399,113 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/Cascader/Cascader.tsx":
+/***/ "./src/CascadeTree/CascadeTree.tsx":
+/*!*****************************************!*\
+  !*** ./src/CascadeTree/CascadeTree.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\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _useMap = __webpack_require__(/*! ../utils/useMap */ \"./src/utils/useMap.ts\");\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ./TreeView */ \"./src/CascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ./SearchView */ \"./src/CascadeTree/SearchView.tsx\"));\nvar _hooks = __webpack_require__(/*! ./hooks */ \"./src/CascadeTree/hooks/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CascadeTree/CascadeTree.tsx\",\n  _this = void 0;\n/**\n * CascadeTree is a component that displays tree-structured data in columns.\n *\n * @see https://rsuitejs.com/components/cascade-tree\n */\nvar CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? [] : _props$data,\n    defaultValue = props.defaultValue,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    valueProp = props.value,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    columnWidth = props.columnWidth,\n    columnHeight = props.columnHeight,\n    searchable = props.searchable,\n    renderTreeNode = props.renderTreeNode,\n    renderColumn = props.renderColumn,\n    onSelect = props.onSelect,\n    onSearch = props.onSearch,\n    onChange = props.onChange,\n    getChildren = props.getChildren,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"defaultValue\", \"className\", \"classPrefix\", \"childrenKey\", \"valueKey\", \"labelKey\", \"value\", \"disabledItemValues\", \"columnWidth\", \"columnHeight\", \"searchable\", \"renderTreeNode\", \"renderColumn\", \"onSelect\", \"onSearch\", \"onChange\", \"getChildren\"]);\n  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _ref[0],\n    setValue = _ref[1]; // Store the children of each node\n  var childrenMap = (0, _useMap.useMap)();\n\n  // Store the parent of each node\n  var parentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getParentMap)(data, function (item) {\n      var _childrenMap$get;\n      return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];\n    });\n  }, [childrenMap, childrenKey, data]);\n\n  // Flatten the tree data\n  var flattenedData = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.flattenTree)(data, function (item) {\n      var _childrenMap$get2;\n      return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];\n    });\n  }, [childrenMap, childrenKey, data]);\n\n  // The selected item\n  var selectedItem = flattenedData.find(function (item) {\n    return item[valueKey] === value;\n  });\n\n  // Callback function after selecting the node\n  var onSelectCallback = function onSelectCallback(node, event) {\n    var isLeafNode = node.isLeafNode,\n      cascadePaths = node.cascadePaths,\n      itemData = node.itemData;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);\n    if (isLeafNode) {\n      var nextValue = itemData[valueKey];\n      setValue(nextValue);\n    }\n  };\n  var _useSelect = (0, _hooks.useSelect)({\n      value: value,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      childrenMap: childrenMap,\n      selectedItem: selectedItem,\n      getChildren: getChildren,\n      onChange: onChange,\n      onSelect: onSelectCallback\n    }),\n    activeItem = _useSelect.activeItem,\n    loadingItemsSet = _useSelect.loadingItemsSet,\n    handleSelect = _useSelect.handleSelect;\n  var _usePaths = (0, _hooks.usePaths)({\n      data: data,\n      activeItem: activeItem,\n      selectedItem: selectedItem,\n      getParent: function getParent(item) {\n        return parentMap.get(item);\n      },\n      getChildren: function getChildren(item) {\n        var _childrenMap$get3;\n        return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];\n      }\n    }),\n    columns = _usePaths.columns,\n    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix());\n  var onSearchCallback = (0, _react.useCallback)(function (value, _items, event) {\n    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n  }, [onSearch]);\n  var _useSearch = (0, _hooks.useSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      parentMap: parentMap,\n      flattenedData: flattenedData,\n      onSearch: onSearchCallback\n    }),\n    items = _useSearch.items,\n    searchKeyword = _useSearch.searchKeyword,\n    setSearchKeyword = _useSearch.setSearchKeyword,\n    handleSearch = _useSearch.handleSearch;\n  var handleSearchRowSelect = (0, _utils.useEventCallback)(function (item, items, event) {\n    var _item$childrenKey;\n    var node = {\n      itemData: item,\n      cascadePaths: items,\n      isLeafNode: !((_item$childrenKey = item[childrenKey]) !== null && _item$childrenKey !== void 0 && _item$childrenKey.length)\n    };\n    handleSelect(node, event);\n    setSearchKeyword('');\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes\n  }, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 133,\n      columnNumber: 5\n    }\n  }), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n    data: items,\n    searchKeyword: searchKeyword,\n    valueKey: valueKey,\n    labelKey: labelKey,\n    parentMap: parentMap,\n    disabledItemValues: disabledItemValues,\n    onSelect: handleSearchRowSelect,\n    onSearch: handleSearch,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 135,\n      columnNumber: 9\n    }\n  }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n    columnWidth: columnWidth,\n    columnHeight: columnHeight,\n    disabledItemValues: disabledItemValues,\n    loadingItemsSet: loadingItemsSet,\n    valueKey: valueKey,\n    labelKey: labelKey,\n    childrenKey: childrenKey,\n    classPrefix: classPrefix,\n    data: columns,\n    cascadePaths: pathTowardsActiveItem,\n    activeItemValue: value,\n    onSelect: handleSelect,\n    renderColumn: renderColumn,\n    renderTreeNode: renderTreeNode,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 147,\n      columnNumber: 9\n    }\n  }));\n});\nCascadeTree.displayName = 'CascadeTree';\nvar _default = CascadeTree;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/CascadeTree.tsx?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/SearchView.tsx":
+/*!****************************************!*\
+  !*** ./src/CascadeTree/SearchView.tsx ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CascadeTree/utils.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CascadeTree/SearchView.tsx\";\nfunction SearchView(props) {\n  var _this = this;\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 ? 'cascade-search-view' : _props$classPrefix,\n    className = props.className,\n    searchKeyword = props.searchKeyword,\n    labelKey = props.labelKey,\n    valueKey = props.valueKey,\n    parentMap = props.parentMap,\n    data = props.data,\n    focusItemValue = props.focusItemValue,\n    disabledItemValues = props.disabledItemValues,\n    inputRef = props.inputRef,\n    renderSearchItem = props.renderSearchItem,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"searchKeyword\", \"labelKey\", \"valueKey\", \"parentMap\", \"data\", \"focusItemValue\", \"disabledItemValues\", \"inputRef\", \"renderSearchItem\", \"onSearch\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    rootPrefix = _useClassNames.rootPrefix;\n  var classes = merge(className, withClassPrefix());\n  var _useCustom = (0, _utils.useCustom)('Picker'),\n    locale = _useCustom.locale;\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var items = (0, _treeUtils.getPathTowardsItem)(item, function (item) {\n      return parentMap.get(item);\n    });\n    var formattedNodes = items.map(function (itemData) {\n      var _extends2;\n      var label = (0, _utils2.highlightLabel)({\n        item: itemData,\n        labelKey: labelKey,\n        searchKeyword: searchKeyword,\n        render: function render(patch, index) {\n          return /*#__PURE__*/_react.default.createElement(\"span\", {\n            key: index,\n            className: prefix('match'),\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 54,\n              columnNumber: 11\n            }\n          }, patch);\n        }\n      });\n      return (0, _extends3.default)({}, itemData, (_extends2 = {}, _extends2[labelKey] = label, _extends2));\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return formattedNodes.some(function (itemData) {\n        return itemData[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('row', {\n      'row-disabled': disabled,\n      'row-focus': item[valueKey] === focusItemValue\n    });\n    var label = formattedNodes.map(function (itemData, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 72,\n          columnNumber: 7\n        }\n      }, itemData[labelKey]);\n    });\n    var handleCheck = function handleCheck(event) {\n      if (!disabled) {\n        onSelect(item, items, event);\n      }\n    };\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"treeitem\",\n      \"aria-disabled\": disabled,\n      \"aria-label\": item[labelKey],\n      key: key,\n      \"data-key\": item[valueKey],\n      className: itemClasses,\n      tabIndex: -1,\n      onClick: handleCheck,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 84,\n        columnNumber: 7\n      }\n    }, renderSearchItem ? renderSearchItem(label, items) : label);\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({\n    className: classes\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 100,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n    onChange: onSearch,\n    value: searchKeyword,\n    inputRef: inputRef,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 101,\n      columnNumber: 7\n    }\n  }), searchKeyword !== '' && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('panel'),\n    \"data-layer\": 0,\n    role: \"tree\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 108,\n      columnNumber: 9\n    }\n  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(prefix('none'), rootPrefix('picker-none')),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 112,\n      columnNumber: 13\n    }\n  }, locale.noResultsText)));\n}\nvar _default = SearchView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/SearchView.tsx?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/TreeView.tsx":
+/*!**************************************!*\
+  !*** ./src/CascadeTree/TreeView.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\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CascadeTree/TreeView.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar TreeView = /*#__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    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'tree' : _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$columnWidth = props.columnWidth,\n    columnWidth = _props$columnWidth === void 0 ? 140 : _props$columnWidth,\n    _props$columnHeight = props.columnHeight,\n    columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$cascadePaths = props.cascadePaths,\n    cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,\n    loadingItemsSet = props.loadingItemsSet,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    style = props.style,\n    renderColumn = props.renderColumn,\n    renderTreeNode = props.renderTreeNode,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"activeItemValue\", \"classPrefix\", \"className\", \"childrenKey\", \"disabledItemValues\", \"columnWidth\", \"columnHeight\", \"valueKey\", \"data\", \"cascadePaths\", \"loadingItemsSet\", \"labelKey\", \"style\", \"renderColumn\", \"renderTreeNode\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, prefix('items'));\n  var rootRef = (0, _react.useRef)();\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useCombobox = (0, _Picker.useCombobox)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType;\n  (0, _react.useEffect)(function () {\n    var _rootRef$current;\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      var activeItem = column.querySelector(\".\" + prefix('item-focus'));\n      if (!activeItem) {\n        activeItem = column.querySelector(\".\" + prefix('item-active'));\n      }\n      if (activeItem) {\n        var position = (0, _getPosition.default)(activeItem, column);\n        // Let the active option scroll into view.\n        if (position !== null && position !== void 0 && position.top) {\n          (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);\n        }\n      }\n    });\n  }, [prefix]);\n  var getCascadePaths = function getCascadePaths(layer, node) {\n    var paths = [];\n    for (var i = 0; i < data.length && i < layer; i += 1) {\n      if (i < layer - 1 && cascadePaths) {\n        paths.push(cascadePaths[i]);\n      }\n    }\n    paths.push(node);\n    return paths;\n  };\n  var handleSelect = (0, _utils.useEventCallback)(function (layer, itemData, event) {\n    var isLeafNode = (0, _isNil.default)(itemData[childrenKey]);\n    var cascadePaths = getCascadePaths(layer + 1, itemData);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect({\n      itemData: itemData,\n      cascadePaths: cascadePaths,\n      isLeafNode: isLeafNode\n    }, event);\n  });\n  var renderCascadeNode = function renderCascadeNode(nodeProps) {\n    var _loadingItemsSet$has;\n    var itemData = nodeProps.itemData,\n      index = nodeProps.index,\n      layer = nodeProps.layer,\n      focus = nodeProps.focus,\n      size = nodeProps.size;\n    var children = itemData[childrenKey];\n    var value = itemData[valueKey];\n    var label = itemData[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, value);\n    });\n    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(itemData)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;\n\n    // Use `value` in keys when If `value` is string or number\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;\n    return /*#__PURE__*/_react.default.createElement(_Picker.ListItem, {\n      as: 'li',\n      role: \"treeitem\",\n      \"aria-level\": layer + 1,\n      \"aria-setsize\": size,\n      \"aria-posinset\": index + 1,\n      \"aria-label\": typeof label === 'string' ? label : undefined,\n      classPrefix: \"cascade-tree-item\",\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, itemData, event);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 133,\n        columnNumber: 9\n      }\n    }, renderTreeNode ? renderTreeNode(label, itemData) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: loading,\n      \"data-testid\": \"spinner\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 13\n      }\n    }) : null);\n  };\n  var cascadeNodes = data.map(function (children, layer) {\n    var onlyKey = layer + \"_\" + children.length;\n    var parentItem = cascadePaths[layer - 1];\n    var childNodes = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (itemData, index) {\n      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], itemData[valueKey]);\n      return renderCascadeNode({\n        itemData: itemData,\n        index: index,\n        layer: layer,\n        focus: focus,\n        size: children.length\n      });\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: \"group\",\n      \"data-layer\": layer,\n      \"data-type\": 'column',\n      key: onlyKey,\n      className: prefix('column'),\n      style: {\n        height: columnHeight,\n        width: columnWidth\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 173,\n        columnNumber: 9\n      }\n    }, renderColumn ? renderColumn(childNodes, {\n      items: children,\n      parentItem: parentItem,\n      layer: layer\n    }) : childNodes);\n  });\n  var styles = (0, _extends2.default)({}, style, {\n    width: data.length * columnWidth\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"tree\",\n    id: id ? id + \"-\" + popupType : undefined,\n    \"aria-labelledby\": labelId\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 191,\n      columnNumber: 7\n    }\n  }), cascadeNodes);\n});\nTreeView.displayName = 'TreeView';\nvar _default = TreeView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/TreeView.tsx?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/hooks/index.ts":
+/*!****************************************!*\
+  !*** ./src/CascadeTree/hooks/index.ts ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useSearch = exports.useSelect = exports.usePaths = void 0;\nvar _usePaths = _interopRequireDefault(__webpack_require__(/*! ./usePaths */ \"./src/CascadeTree/hooks/usePaths.ts\"));\nexports.usePaths = _usePaths.default;\nvar _useSelect = _interopRequireDefault(__webpack_require__(/*! ./useSelect */ \"./src/CascadeTree/hooks/useSelect.ts\"));\nexports.useSelect = _useSelect.default;\nvar _useSearch = _interopRequireDefault(__webpack_require__(/*! ./useSearch */ \"./src/CascadeTree/hooks/useSearch.ts\"));\nexports.useSearch = _useSearch.default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/hooks/index.ts?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/hooks/usePaths.ts":
+/*!*******************************************!*\
+  !*** ./src/CascadeTree/hooks/usePaths.ts ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.usePaths = usePaths;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _treeUtils = __webpack_require__(/*! ../../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/CascadeTree/utils.ts\");\n/**\n * A Hook to get the selected path of Tree.\n *\n * - The columns of items to be displayed\n * - The path towards the current focused item\n * - The path towards the current selected item (referred to by Cascader's value)\n *\n */\nfunction usePaths(_ref) {\n  var data = _ref.data,\n    activeItem = _ref.activeItem,\n    selectedItem = _ref.selectedItem,\n    getParent = _ref.getParent,\n    getChildren = _ref.getChildren;\n  var pathTowardsSelectedItem = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getPathTowardsItem)(selectedItem, getParent);\n  }, [getParent, selectedItem]);\n  var _useMemo = (0, _react.useMemo)(function () {\n      return (0, _utils.getColumnsAndPaths)(data, activeItem, {\n        getParent: getParent,\n        getChildren: getChildren\n      });\n    }, [data, activeItem, getParent, getChildren]),\n    columns = _useMemo.columns,\n    pathTowardsActiveItem = _useMemo.path;\n  return {\n    columns: columns,\n    pathTowardsSelectedItem: pathTowardsSelectedItem,\n    pathTowardsActiveItem: pathTowardsActiveItem\n  };\n}\nvar _default = usePaths;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/hooks/usePaths.ts?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/hooks/useSearch.ts":
+/*!********************************************!*\
+  !*** ./src/CascadeTree/hooks/useSearch.ts ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nfunction useSearch(props) {\n  var _useState = (0, _react.useState)(''),\n    searchKeyword = _useState[0],\n    setSearchKeyword = _useState[1];\n  var labelKey = props.labelKey,\n    childrenKey = props.childrenKey,\n    parentMap = props.parentMap,\n    flattenedData = props.flattenedData,\n    parentSelectable = props.parentSelectable,\n    onSearch = props.onSearch;\n  var someKeyword = function someKeyword(item, keyword) {\n    if (item[labelKey].match(new RegExp((0, _utils.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {\n      return true;\n    }\n    var parent = parentMap.get(item);\n    if (parent && someKeyword(parent)) {\n      return true;\n    }\n    return false;\n  };\n  var getSearchResult = function getSearchResult(keyword) {\n    var items = [];\n    var result = flattenedData.filter(function (item) {\n      if (!parentSelectable && item[childrenKey]) {\n        return false;\n      }\n      return someKeyword(item, keyword);\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  };\n  var handleSearch = (0, _utils.useEventCallback)(function (value, event) {\n    var items = getSearchResult(value);\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, items, event);\n  });\n  return {\n    searchKeyword: searchKeyword,\n    setSearchKeyword: setSearchKeyword,\n    items: getSearchResult(),\n    handleSearch: handleSearch\n  };\n}\nvar _default = useSearch;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/hooks/useSearch.ts?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/hooks/useSelect.ts":
+/*!********************************************!*\
+  !*** ./src/CascadeTree/hooks/useSelect.ts ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _reactUseSet = __webpack_require__(/*! react-use-set */ \"./node_modules/react-use-set/dist/index.js\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n/**\n * Hook for handling the state after the option is selected\n */\nvar useSelect = function useSelect(props) {\n  var value = props.value,\n    onSelect = props.onSelect,\n    getChildren = props.getChildren,\n    valueKey = props.valueKey,\n    onChange = props.onChange,\n    childrenKey = props.childrenKey,\n    selectedItem = props.selectedItem,\n    childrenMap = props.childrenMap; // The item that focus is on\n  var _useState = (0, _react.useState)(selectedItem),\n    activeItem = _useState[0],\n    setActiveItem = _useState[1];\n  var isMounted = (0, _utils.useIsMounted)();\n  var loadingItemsSet = (0, _reactUseSet.useSet)();\n  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {\n    var _itemData$childrenKey;\n    var itemData = node.itemData,\n      isLeafNode = node.isLeafNode;\n    setActiveItem(itemData);\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_itemData$childrenKey = itemData[childrenKey]) === null || _itemData$childrenKey === void 0 ? void 0 : _itemData$childrenKey.length) === 0 && !childrenMap.has(itemData)) {\n      loadingItemsSet.add(itemData);\n      var children = getChildren(itemData);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          if (isMounted()) {\n            loadingItemsSet.delete(itemData);\n            childrenMap.set(itemData, data);\n          }\n        });\n      } else {\n        loadingItemsSet.delete(itemData);\n        childrenMap.set(itemData, children);\n      }\n    }\n    if (isLeafNode) {\n      var nextValue = itemData[valueKey];\n      if (!(0, _utils.shallowEqual)(value, nextValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      }\n    }\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, event);\n  });\n  return {\n    loadingItemsSet: loadingItemsSet,\n    activeItem: activeItem,\n    setActiveItem: setActiveItem,\n    handleSelect: handleSelect\n  };\n};\nvar _default = useSelect;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/hooks/useSelect.ts?");
+
+/***/ }),
+
+/***/ "./src/CascadeTree/index.tsx":
 /*!***********************************!*\
-  !*** ./src/Cascader/Cascader.tsx ***!
+  !*** ./src/CascadeTree/index.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\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _reactUseSet = __webpack_require__(/*! react-use-set */ \"./node_modules/react-use-set/dist/index.js\");\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ./TreeView */ \"./src/Cascader/TreeView.tsx\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/Cascader/utils.ts\");\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _useMap = __webpack_require__(/*! ../utils/useMap */ \"./src/utils/useMap.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Cascader/Cascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `Cascader` component displays a hierarchical list of options.\n * @see https://rsuitejs.com/components/cascader\n */\nvar Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\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    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    valueProp = props.value,\n    inline = props.inline,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    menuWidth = props.menuWidth,\n    menuHeight = props.menuHeight,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    parentSelectable = props.parentSelectable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    id = props.id,\n    renderMenuItem = props.renderMenuItem,\n    renderSearchItem = props.renderSearchItem,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    onEnter = props.onEnter,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    onSearch = props.onSearch,\n    onClose = props.onClose,\n    onOpen = props.onOpen,\n    getChildren = props.getChildren,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"childrenKey\", \"valueKey\", \"labelKey\", \"defaultValue\", \"placeholder\", \"disabled\", \"disabledItemValues\", \"appearance\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"value\", \"inline\", \"menuClassName\", \"menuStyle\", \"menuWidth\", \"menuHeight\", \"searchable\", \"parentSelectable\", \"placement\", \"id\", \"renderMenuItem\", \"renderSearchItem\", \"renderValue\", \"renderMenu\", \"renderExtraFooter\", \"onEnter\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"onClose\", \"onOpen\", \"getChildren\"]); // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    searchInput = _usePickerRef.searchInput;\n  var _ref = (0, _utils2.useControlled)(valueProp, defaultValue),\n    value = _ref[0],\n    setValue = _ref[1];\n  var isMounted = (0, _utils2.useIsMounted)();\n  var loadingItemsSet = (0, _reactUseSet.useSet)();\n  var asyncChildrenMap = (0, _useMap.useMap)();\n  var parentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getParentMap)(data, function (item) {\n      var _asyncChildrenMap$get;\n      return (_asyncChildrenMap$get = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get !== void 0 ? _asyncChildrenMap$get : item[childrenKey];\n    });\n  }, [asyncChildrenMap, childrenKey, data]);\n  var flattenedData = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.flattenTree)(data, function (item) {\n      var _asyncChildrenMap$get2;\n      return (_asyncChildrenMap$get2 = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get2 !== void 0 ? _asyncChildrenMap$get2 : item[childrenKey];\n    });\n  }, [asyncChildrenMap, childrenKey, data]);\n\n  // The item that focus is on\n  var _useState2 = (0, _react.useState)(),\n    activeItem = _useState2[0],\n    setActiveItem = _useState2[1];\n  var _usePaths = (0, _utils.usePaths)({\n      data: data,\n      activeItem: activeItem,\n      selectedItem: flattenedData.find(function (item) {\n        return item[valueKey] === value;\n      }),\n      getParent: function getParent(item) {\n        return parentMap.get(item);\n      },\n      getChildren: function getChildren(item) {\n        var _asyncChildrenMap$get3;\n        return (_asyncChildrenMap$get3 = asyncChildrenMap.get(item)) !== null && _asyncChildrenMap$get3 !== void 0 ? _asyncChildrenMap$get3 : item[childrenKey];\n      }\n    }),\n    columnsToDisplay = _usePaths.columnsToDisplay,\n    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,\n    pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;\n  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = pathTowardsSelectedItem.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState3 = (0, _react.useState)(''),\n    searchKeyword = _useState3[0],\n    setSearchKeyword = _useState3[1];\n  var someKeyword = function someKeyword(item, keyword) {\n    if (item[labelKey].match(new RegExp((0, _utils2.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {\n      return true;\n    }\n    var parent = parentMap.get(item);\n    if (parent && someKeyword(parent)) {\n      return true;\n    }\n    return false;\n  };\n  var getSearchResult = function getSearchResult(keyword) {\n    var items = [];\n    var result = flattenedData.filter(function (item) {\n      if (!parentSelectable && item[childrenKey]) {\n        return false;\n      }\n      return someKeyword(item, keyword);\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n      rtl: rtl,\n      data: flattenedData,\n      valueKey: valueKey,\n      defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,\n      target: function target() {\n        return overlay.current;\n      },\n      getParent: function getParent(item) {\n        return parentMap.get(item);\n      },\n      callback: (0, _react.useCallback)(function (value) {\n        setActiveItem(flattenedData.find(function (item) {\n          return item[valueKey] === value;\n        }));\n      }, [flattenedData, setActiveItem, valueKey])\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  var handleSearch = (0, _utils2.useEventCallback)(function (value, event) {\n    var items = getSearchResult(value);\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n    if (!value || items.length === 0) {\n      setFocusItemValue(undefined);\n      return;\n    }\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  });\n  var handleEntered = (0, _utils2.useEventCallback)(function () {\n    if (!target.current) {\n      return;\n    }\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleExited = (0, _utils2.useEventCallback)(function () {\n    if (!target.current) {\n      return;\n    }\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n    setSearchKeyword('');\n  });\n  var handleClose = (0, _utils2.useEventCallback)(function () {\n    var _trigger$current, _target$current, _target$current$focus;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n  var handleClean = (0, _utils2.useEventCallback)(function (event) {\n    if (disabled || !target.current) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);\n  });\n  var handleMenuPressEnter = (0, _utils2.useEventCallback)(function (event) {\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var isLeafNode = focusItem && !focusItem[childrenKey];\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      if (pathTowardsActiveItem.length) {\n        setLayer(pathTowardsActiveItem.length - 1);\n      }\n      if (!(0, _shallowEqual.default)(value, focusItemValue)) {\n        onSelect === null || onSelect === void 0 ? void 0 : onSelect(focusItem, pathTowardsActiveItem, event);\n        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n      handleClose();\n    }\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSelect = (0, _utils2.useEventCallback)(function (node, cascadePaths, isLeafNode, event) {\n    var _node$childrenKey, _trigger$current2;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    setActiveItem(node);\n    var nextValue = node[valueKey];\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0 && !asyncChildrenMap.has(node)) {\n      loadingItemsSet.add(node);\n      var children = getChildren(node);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          if (isMounted()) {\n            loadingItemsSet.delete(node);\n            asyncChildrenMap.set(node, data);\n          }\n        });\n      } else {\n        loadingItemsSet.delete(node);\n        asyncChildrenMap.set(node, children);\n      }\n    }\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose();\n      setValue(nextValue);\n      if (!(0, _shallowEqual.default)(value, nextValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      }\n      return;\n    }\n\n    /** When the parent is optional, the value and the displayed path are updated. */\n    if (parentSelectable && !(0, _shallowEqual.default)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // Update menu position\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.updatePosition();\n  });\n\n  /**\n   * The search structure option is processed after being selected.\n   */\n  var handleSearchRowSelect = (0, _utils2.useEventCallback)(function (node, nodes, event) {\n    var nextValue = node[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  });\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var regx = new RegExp((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');\n    var nodes = (0, _treeUtils.getPathTowardsItem)(item, function (item) {\n      return parentMap.get(item);\n    });\n    var formattedNodes = nodes.map(function (node) {\n      var _extends2;\n      var labelElements = [];\n      var a = node[labelKey].split(regx);\n      var b = node[labelKey].match(regx);\n      for (var i = 0; i < a.length; i++) {\n        labelElements.push(a[i]);\n        if (b && b[i]) {\n          labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n            key: i,\n            className: prefix('cascader-search-match'),\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 446,\n              columnNumber: 13\n            }\n          }, b[i]));\n        }\n      }\n      return (0, _extends3.default)({}, node, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2));\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return formattedNodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    var label = formattedNodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 467,\n          columnNumber: 7\n        }\n      }, node[labelKey]);\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"treeitem\",\n      key: key,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      className: itemClasses,\n      tabIndex: -1,\n      onClick: function onClick(event) {\n        if (!disabled) {\n          handleSearchRowSelect(item, nodes, event);\n        }\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 473,\n        columnNumber: 7\n      }\n    }, renderSearchItem ? renderSearchItem(label, nodes) : label);\n  };\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      role: \"tree\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 498,\n        columnNumber: 7\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 502,\n        columnNumber: 11\n      }\n    }, locale.noResultsText));\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var _ref2 = positionProps || {},\n      left = _ref2.left,\n      top = _ref2.top,\n      className = _ref2.className;\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: styles,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 514,\n        columnNumber: 7\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 522,\n        columnNumber: 11\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      disabledItemValues: disabledItemValues,\n      loadingItemsSet: loadingItemsSet,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnsToDisplay,\n      cascadePaths: pathTowardsActiveItem,\n      activeItemValue: value\n      // FIXME make onSelect generic\n      ,\n      onSelect: handleSelect,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 532,\n        columnNumber: 11\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (pathTowardsSelectedItem.length > 0) {\n    selectedElement = [];\n    pathTowardsSelectedItem.forEach(function (item, index) {\n      var key = item[valueKey] || item[labelKey];\n      selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 562,\n          columnNumber: 28\n        }\n      }, item[labelKey]));\n      if (index < pathTowardsSelectedItem.length - 1) {\n        selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: key + \"-separator\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 565,\n            columnNumber: 11\n          }\n        }, ' / '));\n      }\n    });\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, pathTowardsSelectedItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design\n  //       consider an isolated Menu component\n  if (inline) {\n    return renderTreeView();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 597,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 607,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 608,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCascader.displayName = 'Cascader';\nCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  cleanable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderSearchItem: _propTypes.default.func,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  searchable: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  parentSelectable: _propTypes.default.bool\n});\nvar _default = Cascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _CascadeTree = _interopRequireDefault(__webpack_require__(/*! ./CascadeTree */ \"./src/CascadeTree/CascadeTree.tsx\"));\nvar _default = _CascadeTree.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/index.tsx?");
 
 /***/ }),
 
-/***/ "./src/Cascader/TreeView.tsx":
+/***/ "./src/CascadeTree/utils.ts":
+/*!**********************************!*\
+  !*** ./src/CascadeTree/utils.ts ***!
+  \**********************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAndPaths;\nexports.highlightLabel = highlightLabel;\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n/**\n * Calculate columns to be displayed:\n *\n * - Every ancestor level of activeItem should be displayed\n * - The level that activeItem is at should be displayed\n * - If activeItem is a parent node, its child level should be displayed\n *\n * @param items\n * @param value\n * @param options\n * @returns\n */\nfunction getColumnsAndPaths(items, pathTarget, options) {\n  var getParent = options.getParent,\n    getChildren = options.getChildren;\n  if (!pathTarget) {\n    return {\n      columns: [items],\n      path: []\n    };\n  }\n  var columns = [];\n  var path = [pathTarget];\n  var children = getChildren(pathTarget);\n  if (children && children.length > 0) {\n    columns.unshift(children);\n  }\n  for (var parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {\n    var _getChildren;\n    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);\n    path.unshift(parent);\n  }\n  columns.unshift(items);\n  return {\n    columns: columns,\n    path: path\n  };\n}\n\n/**\n * Highlight the search keyword in the label\n */\nfunction highlightLabel(props) {\n  var item = props.item,\n    searchKeyword = props.searchKeyword,\n    labelKey = props.labelKey,\n    render = props.render;\n  var regx = new RegExp((0, _utils.getSafeRegExpString)(searchKeyword), 'ig');\n  var labelElements = [];\n  var strArr = item[labelKey].split(regx);\n  var highStrArr = item[labelKey].match(regx);\n  for (var i = 0; i < strArr.length; i++) {\n    labelElements.push(strArr[i]);\n    if (highStrArr !== null && highStrArr !== void 0 && highStrArr[i]) {\n      labelElements.push(render(highStrArr[i], i));\n    }\n  }\n  return labelElements;\n}\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/utils.ts?");
+
+/***/ }),
+
+/***/ "./src/Cascader/Cascader.tsx":
 /*!***********************************!*\
-  !*** ./src/Cascader/TreeView.tsx ***!
+  !*** ./src/Cascader/Cascader.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\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Cascader/TreeView.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar TreeView = /*#__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    loadingItemsSet = props.loadingItemsSet,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    style = props.style,\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\", \"loadingItemsSet\", \"labelKey\", \"style\", \"renderMenu\", \"renderMenuItem\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, prefix('items'));\n  var rootRef = (0, _react.useRef)();\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useCombobox = (0, _Picker.useCombobox)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType;\n  (0, _react.useEffect)(function () {\n    var _rootRef$current;\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      var activeItem = column.querySelector(\".\" + prefix('item-focus'));\n      if (!activeItem) {\n        activeItem = column.querySelector(\".\" + prefix('item-active'));\n      }\n      if (activeItem) {\n        var position = (0, _getPosition.default)(activeItem, column);\n        // Let the active option scroll into view.\n        if (position !== null && position !== void 0 && position.top) {\n          (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);\n        }\n      }\n    });\n  }, [prefix]);\n  var getCascadePaths = function getCascadePaths(layer, node) {\n    var paths = [];\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    paths.push(node);\n    return paths;\n  };\n  var handleSelect = (0, _utils.useEventCallback)(function (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  var renderCascadeNode = function renderCascadeNode(nodeProps) {\n    var _loadingItemsSet$has;\n    var node = nodeProps.node,\n      index = nodeProps.index,\n      layer = nodeProps.layer,\n      focus = nodeProps.focus,\n      size = nodeProps.size;\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    });\n    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;\n\n    // Use `value` in keys when If `value` is string or number\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;\n    return /*#__PURE__*/_react.default.createElement(_Picker.ListItem, {\n      as: 'li',\n      role: \"treeitem\",\n      \"aria-level\": layer + 1,\n      \"aria-setsize\": size,\n      \"aria-posinset\": index + 1,\n      \"aria-label\": typeof label === 'string' ? label : undefined,\n      classPrefix: \"picker-cascader-menu-item\",\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: 137,\n        columnNumber: 9\n      }\n    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: loading,\n      \"data-testid\": \"spinner\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 155,\n        columnNumber: 13\n      }\n    }) : null);\n  };\n  var cascadeNodes = cascadeData.map(function (children, layer) {\n    var onlyKey = layer + \"_\" + children.length;\n    var parentNode = cascadePaths[layer - 1];\n    var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {\n      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);\n      return renderCascadeNode({\n        node: item,\n        index: index,\n        layer: layer,\n        focus: focus,\n        size: children.length\n      });\n    }));\n    return /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: \"group\",\n      \"data-layer\": layer,\n      \"data-type\": 'column',\n      key: onlyKey,\n      className: prefix('column'),\n      style: {\n        height: menuHeight,\n        width: menuWidth\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 176,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n  });\n  var styles = (0, _extends2.default)({}, style, {\n    width: cascadeData.length * menuWidth\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"tree\",\n    id: id + \"-\" + popupType,\n    \"aria-labelledby\": labelId\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 7\n    }\n  }), cascadeNodes);\n});\nTreeView.displayName = 'TreeView';\nvar _default = TreeView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/TreeView.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/TreeView */ \"./src/CascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/SearchView */ \"./src/CascadeTree/SearchView.tsx\"));\nvar _hooks = __webpack_require__(/*! ../CascadeTree/hooks */ \"./src/CascadeTree/hooks/index.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _useMap = __webpack_require__(/*! ../utils/useMap */ \"./src/utils/useMap.ts\");\nvar _useActive2 = _interopRequireDefault(__webpack_require__(/*! ./useActive */ \"./src/Cascader/useActive.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Cascader/Cascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `Cascader` component displays a hierarchical list of options.\n * @see https://rsuitejs.com/components/cascader\n */\nvar Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\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    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    valueProp = props.value,\n    popupClassName = props.popupClassName,\n    popupStyle = props.popupStyle,\n    columnHeight = props.columnHeight,\n    columnWidth = props.columnWidth,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    parentSelectable = props.parentSelectable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    id = props.id,\n    renderColumn = props.renderColumn,\n    renderTreeNode = props.renderTreeNode,\n    renderSearchItem = props.renderSearchItem,\n    renderValue = props.renderValue,\n    renderExtraFooter = props.renderExtraFooter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    onSearch = props.onSearch,\n    getChildren = props.getChildren,\n    DEPRECATED_menuClassName = props.menuClassName,\n    DEPRECATED_menuStyle = props.menuStyle,\n    DEPRECATED_menuWidth = props.menuWidth,\n    DEPRECATED_menuHeight = props.menuHeight,\n    DEPRECATED_renderMenuItem = props.renderMenuItem,\n    DEPRECATED_renderMenu = props.renderMenu,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"childrenKey\", \"valueKey\", \"labelKey\", \"defaultValue\", \"placeholder\", \"disabled\", \"disabledItemValues\", \"appearance\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"value\", \"popupClassName\", \"popupStyle\", \"columnHeight\", \"columnWidth\", \"searchable\", \"parentSelectable\", \"placement\", \"id\", \"renderColumn\", \"renderTreeNode\", \"renderSearchItem\", \"renderValue\", \"renderExtraFooter\", \"onEntered\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"getChildren\", \"menuClassName\", \"menuStyle\", \"menuWidth\", \"menuHeight\", \"renderMenuItem\", \"renderMenu\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    searchInput = _usePickerRef.searchInput;\n  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _ref[0],\n    setValue = _ref[1]; // Store the children of each node\n  var childrenMap = (0, _useMap.useMap)();\n\n  // Store the parent of each node\n  var parentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getParentMap)(data, function (item) {\n      var _childrenMap$get;\n      return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];\n    });\n  }, [childrenMap, childrenKey, data]);\n\n  // Flatten the tree data\n  var flattenedData = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.flattenTree)(data, function (item) {\n      var _childrenMap$get2;\n      return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];\n    });\n  }, [childrenMap, childrenKey, data]);\n\n  // The selected item\n  var selectedItem = flattenedData.find(function (item) {\n    return item[valueKey] === value;\n  });\n\n  // Callback function after selecting the node\n  var onSelectCallback = function onSelectCallback(node, event) {\n    var _trigger$current;\n    var isLeafNode = node.isLeafNode,\n      cascadePaths = node.cascadePaths,\n      itemData = node.itemData;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);\n    var nextValue = itemData[valueKey];\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose();\n      setValue(nextValue);\n      return;\n    }\n\n    //  When the parent is optional, the value and the displayed path are updated.\n    if (parentSelectable && !(0, _utils.shallowEqual)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // Update menu position\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.updatePosition();\n  };\n  var _useSelect = (0, _hooks.useSelect)({\n      value: value,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      childrenMap: childrenMap,\n      selectedItem: selectedItem,\n      getChildren: getChildren,\n      onChange: onChange,\n      onSelect: onSelectCallback\n    }),\n    activeItem = _useSelect.activeItem,\n    setActiveItem = _useSelect.setActiveItem,\n    loadingItemsSet = _useSelect.loadingItemsSet,\n    handleSelect = _useSelect.handleSelect;\n  var _usePaths = (0, _hooks.usePaths)({\n      data: data,\n      activeItem: activeItem,\n      selectedItem: selectedItem,\n      getParent: function getParent(item) {\n        return parentMap.get(item);\n      },\n      getChildren: function getChildren(item) {\n        var _childrenMap$get3;\n        return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];\n      }\n    }),\n    columns = _usePaths.columns,\n    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,\n    pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = pathTowardsSelectedItem.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var onFocusItemCallback = (0, _react.useCallback)(function (value) {\n    setActiveItem(flattenedData.find(function (item) {\n      return item[valueKey] === value;\n    }));\n  }, [flattenedData, setActiveItem, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n      rtl: rtl,\n      data: flattenedData,\n      valueKey: valueKey,\n      defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,\n      target: function target() {\n        return overlay.current;\n      },\n      getParent: function getParent(item) {\n        return parentMap.get(item);\n      },\n      callback: onFocusItemCallback\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  var onSearchCallback = function onSearchCallback(value, items, event) {\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n    if (!value || items.length === 0) {\n      setFocusItemValue(undefined);\n      return;\n    }\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  };\n  var _useSearch = (0, _hooks.useSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      parentMap: parentMap,\n      flattenedData: flattenedData,\n      parentSelectable: parentSelectable,\n      onSearch: onSearchCallback\n    }),\n    items = _useSearch.items,\n    searchKeyword = _useSearch.searchKeyword,\n    setSearchKeyword = _useSearch.setSearchKeyword,\n    handleSearch = _useSearch.handleSearch;\n  var _useActive = (0, _useActive2.default)({\n      onEntered: onEntered,\n      onExited: onExited,\n      target: target,\n      setSearchKeyword: setSearchKeyword\n    }),\n    active = _useActive.active,\n    handleEntered = _useActive.handleEntered,\n    handleExited = _useActive.handleExited;\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _target$current, _target$current$focus;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || !target.current) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);\n  });\n  var handleMenuPressEnter = (0, _utils.useEventCallback)(function (event) {\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var isLeafNode = focusItem && !focusItem[childrenKey];\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      if (pathTowardsActiveItem.length) {\n        setLayer(pathTowardsActiveItem.length - 1);\n      }\n      if (!(0, _utils.shallowEqual)(value, focusItemValue)) {\n        onSelect === null || onSelect === void 0 ? void 0 : onSelect(focusItem, pathTowardsActiveItem, event);\n        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n      handleClose();\n    }\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n\n  /**\n   * The search structure option is processed after being selected.\n   */\n  var handleSearchRowSelect = (0, _utils.useEventCallback)(function (itemData, nodes, event) {\n    var nextValue = itemData[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, nodes, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  });\n  var renderCascadeColumn = function renderCascadeColumn(childNodes, column) {\n    var items = column.items,\n      parentItem = column.parentItem,\n      layer = column.layer;\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    } else if (typeof DEPRECATED_renderMenu === 'function') {\n      return DEPRECATED_renderMenu(items, childNodes, parentItem, layer);\n    }\n    return childNodes;\n  };\n  var renderCascadeTreeNode = function renderCascadeTreeNode(node, itemData) {\n    var render = typeof renderTreeNode === 'function' ? renderTreeNode : DEPRECATED_renderMenuItem;\n    if (typeof render === 'function') {\n      return render(node, itemData);\n    }\n    return node;\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var _ref2 = positionProps || {},\n      left = _ref2.left,\n      top = _ref2.top,\n      className = _ref2.className;\n    var styles = (0, _extends2.default)({}, DEPRECATED_menuStyle, popupStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('popup-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: styles,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 431,\n        columnNumber: 7\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      data: items,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      parentMap: parentMap,\n      disabledItemValues: disabledItemValues,\n      focusItemValue: focusItemValue,\n      inputRef: searchInput,\n      renderSearchItem: renderSearchItem,\n      onSelect: handleSearchRowSelect,\n      onSearch: handleSearch,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 439,\n        columnNumber: 11\n      }\n    }), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      columnWidth: columnWidth !== null && columnWidth !== void 0 ? columnWidth : DEPRECATED_menuWidth,\n      columnHeight: columnHeight !== null && columnHeight !== void 0 ? columnHeight : DEPRECATED_menuHeight,\n      disabledItemValues: disabledItemValues,\n      loadingItemsSet: loadingItemsSet,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'cascade-tree',\n      data: columns,\n      cascadePaths: pathTowardsActiveItem,\n      activeItemValue: value,\n      onSelect: handleSelect,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 455,\n        columnNumber: 11\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (pathTowardsSelectedItem.length > 0) {\n    selectedElement = [];\n    pathTowardsSelectedItem.forEach(function (item, index) {\n      var key = item[valueKey] || item[labelKey];\n      selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 484,\n          columnNumber: 28\n        }\n      }, item[labelKey]));\n      if (index < pathTowardsSelectedItem.length - 1) {\n        selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: key + \"-separator\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 487,\n            columnNumber: 11\n          }\n        }, ' / '));\n      }\n    });\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, pathTowardsSelectedItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: handleEntered,\n    onExited: handleExited,\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 513,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 523,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 524,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCascader.displayName = 'Cascader';\nCascader.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  onSelect: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  cleanable: _propTypes.default.bool,\n  renderColumn: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderSearchItem: _propTypes.default.func,\n  columnWidth: _propTypes.default.number,\n  columnHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  parentSelectable: _propTypes.default.bool,\n  inline: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use `<CascadeTree>` instead.'),\n  renderMenu: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"renderColumn\" property instead.'),\n  renderMenuItem: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"renderTreeNode\" property instead.'),\n  menuWidth: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use \"columnWidth\" property instead.'),\n  menuHeight: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use \"columnHeight\" property instead.')\n});\nvar _default = Cascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
 
 /***/ }),
 
@@ -6432,14 +6520,14 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/Cascader/utils.ts":
-/*!*******************************!*\
-  !*** ./src/Cascader/utils.ts ***!
-  \*******************************/
+/***/ "./src/Cascader/useActive.ts":
+/*!***********************************!*\
+  !*** ./src/Cascader/useActive.ts ***!
+  \***********************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAndPaths;\nexports.usePaths = usePaths;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n/**\n * Calculate columns to be displayed:\n *\n * - Every ancestor level of activeItem should be displayed\n * - The level that activeItem is at should be displayed\n * - If activeItem is a parent node, its child level should be displayed\n *\n * @param items\n * @param value\n * @param options\n * @returns\n */\nfunction getColumnsAndPaths(items, pathTarget, options) {\n  var getParent = options.getParent,\n    getChildren = options.getChildren;\n  if (!pathTarget) {\n    return {\n      columns: [items],\n      path: []\n    };\n  }\n  var columns = [];\n  var path = [pathTarget];\n  var children = getChildren(pathTarget);\n  if (children && children.length > 0) {\n    columns.unshift(children);\n  }\n  for (var parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {\n    var _getChildren;\n    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);\n    path.unshift(parent);\n  }\n  columns.unshift(items);\n  return {\n    columns: columns,\n    path: path\n  };\n}\n/**\n * Caculate following 3 things\n *\n * - The columns of items to be displayed\n * - The path towards the current focused item\n * - The path towards the current selected item (referred to by Cascader's value)\n *\n * @param params\n * @returns\n */\nfunction usePaths(_ref) {\n  var data = _ref.data,\n    activeItem = _ref.activeItem,\n    selectedItem = _ref.selectedItem,\n    getParent = _ref.getParent,\n    getChildren = _ref.getChildren;\n  var pathTowardsSelectedItem = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getPathTowardsItem)(selectedItem, getParent);\n  }, [getParent, selectedItem]);\n  var _useMemo = (0, _react.useMemo)(function () {\n      return getColumnsAndPaths(data, activeItem, {\n        getParent: getParent,\n        getChildren: getChildren\n      });\n    }, [data, activeItem, getParent, getChildren]),\n    columnsToDisplay = _useMemo.columns,\n    pathTowardsActiveItem = _useMemo.path;\n  return {\n    columnsToDisplay: columnsToDisplay,\n    pathTowardsSelectedItem: pathTowardsSelectedItem,\n    pathTowardsActiveItem: pathTowardsActiveItem\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Cascader/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ../utils/useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nvar useActive = function useActive(props) {\n  var onOpen = props.onOpen,\n    onClose = props.onClose,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    target = props.target,\n    setSearchKeyword = props.setSearchKeyword; // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var handleEntered = (0, _useEventCallback.default)(function (node) {\n    onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);\n    if (!target.current) {\n      return;\n    }\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleExited = (0, _useEventCallback.default)(function (node) {\n    onExited === null || onExited === void 0 ? void 0 : onExited(node);\n    if (!target.current) {\n      return;\n    }\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n    setSearchKeyword('');\n  });\n  return {\n    active: active,\n    handleEntered: handleEntered,\n    handleExited: handleExited\n  };\n};\nvar _default = useActive;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/useActive.ts?");
 
 /***/ }),
 
@@ -6450,7 +6538,7 @@ eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAnd
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckPicker/CheckPicker.tsx\",\n  _this = void 0,\n  _templateObject;\nvar emptyArray = [];\n/**\n * A component for selecting checkable items in a dropdown list.\n * @see https://rsuitejs.com/components/check-picker\n */\nvar CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    virtualized = props.virtualized,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    overrideLocale = props.locale,\n    placeholder = props.placeholder,\n    disabled = props.disabled,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    sticky = props.sticky,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    groupBy = props.groupBy,\n    listProps = props.listProps,\n    id = props.id,\n    sort = props.sort,\n    searchBy = props.searchBy,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    renderValue = props.renderValue,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    onGroupTitleClick = props.onGroupTitleClick,\n    onSearch = props.onSearch,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    onClose = props.onClose,\n    onOpen = props.onOpen,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"classPrefix\", \"countable\", \"data\", \"disabledItemValues\", \"valueKey\", \"labelKey\", \"searchable\", \"virtualized\", \"cleanable\", \"placement\", \"menuAutoWidth\", \"menuMaxHeight\", \"menuClassName\", \"menuStyle\", \"locale\", \"placeholder\", \"disabled\", \"toggleAs\", \"style\", \"sticky\", \"value\", \"defaultValue\", \"groupBy\", \"listProps\", \"id\", \"sort\", \"searchBy\", \"renderMenuItem\", \"renderMenuGroup\", \"renderValue\", \"renderExtraFooter\", \"renderMenu\", \"onGroupTitleClick\", \"onSearch\", \"onEnter\", \"onEntered\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onClose\", \"onOpen\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue || []),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value === null || value === void 0 ? void 0 : value[0], {\n      data: data,\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(data, {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    filteredData = _useSearch.filteredData,\n    handleSearch = _useSearch.handleSearch,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay; // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1]; // A list of shortcut options.\n  // when opened again, the selected options are displayed at the top.\n  var _useState2 = (0, _react.useState)([]),\n    stickyItems = _useState2[0],\n    setStickyItems = _useState2[1];\n  var initStickyItems = function initStickyItems() {\n    if (!sticky) {\n      return;\n    }\n    var nextStickyItems = [];\n    if (data && value.length) {\n      nextStickyItems = data.filter(function (item) {\n        return value.some(function (v) {\n          return v === item[valueKey];\n        });\n      });\n    }\n    setStickyItems(nextStickyItems);\n  };\n  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue([]);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    handleChangeValue([], event);\n  });\n  var handleMenuPressEnter = function handleMenuPressEnter(event) {\n    var nextValue = (0, _clone.default)(value);\n    if (!focusItemValue) {\n      return;\n    }\n    if (!nextValue.some(function (v) {\n      return (0, _utils.shallowEqual)(v, focusItemValue);\n    })) {\n      nextValue.push(focusItemValue);\n    } else {\n      (0, _remove.default)(nextValue, function (itemVal) {\n        return (0, _utils.shallowEqual)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _utils.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    setValue(nextValue);\n    handleSelect(nextValue, focusItem, event);\n    handleChangeValue(nextValue, event);\n  };\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onMenuPressBackspace: handleClean,\n    onClose: function onClose() {\n      setFocusItemValue(null);\n    }\n  }, rest));\n  var handleSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);\n  });\n  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var nextValue = (0, _clone.default)(value);\n    if (checked) {\n      nextValue.push(nextItemValue);\n    } else {\n      (0, _remove.default)(nextValue, function (itemVal) {\n        return (0, _utils.shallowEqual)(itemVal, nextItemValue);\n      });\n    }\n    setValue(nextValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(nextValue, item, event);\n    handleChangeValue(nextValue, event);\n  });\n  var handleEntered = (0, _utils.useEventCallback)(function () {\n    setActive(true);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  });\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    resetSearch();\n    setFocusItemValue(null);\n    setActive(false);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  });\n  var selectedItems = data.filter(function (item) {\n    return value === null || value === void 0 ? void 0 : value.some(function (val) {\n      return (0, _utils.shallowEqual)(item[valueKey], val);\n    });\n  }) || [];\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = selectedItems.length > 0 || (value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      prefix: prefix,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 280,\n        columnNumber: 9\n      }\n    });\n  }\n  if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('check-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData;\n    var filteredStickyItems = [];\n    if (stickyItems) {\n      filteredStickyItems = (0, _treeUtils.filterNodesOfTree)(stickyItems, function (item) {\n        return checkShouldDisplay(item);\n      });\n      items = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n        return checkShouldDisplay(item) && !stickyItems.some(function (v) {\n          return v[valueKey] === item[valueKey];\n        });\n      });\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-check-menu',\n      listItemAs: _Picker.ListCheckItem,\n      activeItemValues: value,\n      focusItemValue: focusItemValue,\n      data: [].concat(filteredStickyItems, items)\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 323,\n        columnNumber: 11\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 345,\n        columnNumber: 11\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 349,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 358,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      appearance: appearance,\n      classPrefix: classPrefix,\n      cleanable: cleanable,\n      countable: countable,\n      hasValue: hasValue,\n      name: 'check'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(initStickyItems, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 382,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 393,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: handleClean,\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 394,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCheckPicker.displayName = 'CheckPicker';\nCheckPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  sticky: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = CheckPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckPicker/CheckPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckPicker/CheckPicker.tsx\",\n  _this = void 0,\n  _templateObject;\nvar emptyArray = [];\n/**\n * A component for selecting checkable items in a dropdown list.\n * @see https://rsuitejs.com/components/check-picker\n */\nvar CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    virtualized = props.virtualized,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    overrideLocale = props.locale,\n    placeholder = props.placeholder,\n    disabled = props.disabled,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    sticky = props.sticky,\n    valueProp = props.value,\n    defaultValue = props.defaultValue,\n    groupBy = props.groupBy,\n    listProps = props.listProps,\n    id = props.id,\n    sort = props.sort,\n    searchBy = props.searchBy,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    renderValue = props.renderValue,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    onGroupTitleClick = props.onGroupTitleClick,\n    onSearch = props.onSearch,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"classPrefix\", \"countable\", \"data\", \"disabledItemValues\", \"valueKey\", \"labelKey\", \"searchable\", \"virtualized\", \"cleanable\", \"placement\", \"menuAutoWidth\", \"menuMaxHeight\", \"menuClassName\", \"menuStyle\", \"locale\", \"placeholder\", \"disabled\", \"toggleAs\", \"style\", \"sticky\", \"value\", \"defaultValue\", \"groupBy\", \"listProps\", \"id\", \"sort\", \"searchBy\", \"renderMenuItem\", \"renderMenuGroup\", \"renderValue\", \"renderExtraFooter\", \"renderMenu\", \"onGroupTitleClick\", \"onSearch\", \"onEnter\", \"onEntered\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue || []),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value === null || value === void 0 ? void 0 : value[0], {\n      data: data,\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(data, {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    filteredData = _useSearch.filteredData,\n    handleSearch = _useSearch.handleSearch,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay; // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1]; // A list of shortcut options.\n  // when opened again, the selected options are displayed at the top.\n  var _useState2 = (0, _react.useState)([]),\n    stickyItems = _useState2[0],\n    setStickyItems = _useState2[1];\n  var initStickyItems = function initStickyItems() {\n    if (!sticky) {\n      return;\n    }\n    var nextStickyItems = [];\n    if (data && value.length) {\n      nextStickyItems = data.filter(function (item) {\n        return value.some(function (v) {\n          return v === item[valueKey];\n        });\n      });\n    }\n    setStickyItems(nextStickyItems);\n  };\n  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue([]);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    handleChangeValue([], event);\n  });\n  var handleMenuPressEnter = function handleMenuPressEnter(event) {\n    var nextValue = (0, _clone.default)(value);\n    if (!focusItemValue) {\n      return;\n    }\n    if (!nextValue.some(function (v) {\n      return (0, _utils.shallowEqual)(v, focusItemValue);\n    })) {\n      nextValue.push(focusItemValue);\n    } else {\n      (0, _remove.default)(nextValue, function (itemVal) {\n        return (0, _utils.shallowEqual)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _utils.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    setValue(nextValue);\n    handleSelect(nextValue, focusItem, event);\n    handleChangeValue(nextValue, event);\n  };\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onMenuPressBackspace: handleClean\n  }, rest));\n  var handleSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);\n  });\n  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var nextValue = (0, _clone.default)(value);\n    if (checked) {\n      nextValue.push(nextItemValue);\n    } else {\n      (0, _remove.default)(nextValue, function (itemVal) {\n        return (0, _utils.shallowEqual)(itemVal, nextItemValue);\n      });\n    }\n    setValue(nextValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(nextValue, item, event);\n    handleChangeValue(nextValue, event);\n  });\n  var handleEntered = (0, _utils.useEventCallback)(function () {\n    setActive(true);\n  });\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    resetSearch();\n    setFocusItemValue(null);\n    setActive(false);\n  });\n  var selectedItems = data.filter(function (item) {\n    return value === null || value === void 0 ? void 0 : value.some(function (val) {\n      return (0, _utils.shallowEqual)(item[valueKey], val);\n    });\n  }) || [];\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = selectedItems.length > 0 || (value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      prefix: prefix,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 273,\n        columnNumber: 9\n      }\n    });\n  }\n  if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('check-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData;\n    var filteredStickyItems = [];\n    if (stickyItems) {\n      filteredStickyItems = (0, _treeUtils.filterNodesOfTree)(stickyItems, function (item) {\n        return checkShouldDisplay(item);\n      });\n      items = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n        return checkShouldDisplay(item) && !stickyItems.some(function (v) {\n          return v[valueKey] === item[valueKey];\n        });\n      });\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-check-menu',\n      listItemAs: _Picker.ListCheckItem,\n      activeItemValues: value,\n      focusItemValue: focusItemValue,\n      data: [].concat(filteredStickyItems, items)\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 316,\n        columnNumber: 11\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 338,\n        columnNumber: 11\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 342,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 351,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      appearance: appearance,\n      classPrefix: classPrefix,\n      cleanable: cleanable,\n      countable: countable,\n      hasValue: hasValue,\n      name: 'check'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(initStickyItems, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 375,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 386,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: handleClean,\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 387,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCheckPicker.displayName = 'CheckPicker';\nCheckPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  sticky: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = CheckPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckPicker/CheckPicker.tsx?");
 
 /***/ }),
 
@@ -6494,7 +6582,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nvar CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    style = props.style,\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$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    searchKeyword = props.searchKeyword,\n    showIndentLine = props.showIndentLine,\n    overrideLocale = props.locale,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    disabled = props.disabled,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    placeholder = props.placeholder,\n    controlledValue = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    listProps = props.listProps,\n    renderMenu = props.renderMenu,\n    getChildren = props.getChildren,\n    renderExtraFooter = props.renderExtraFooter,\n    onEntered = props.onEntered,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onExited = props.onExited,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onOpen = props.onOpen,\n    onScroll = props.onScroll,\n    onExpand = props.onExpand,\n    renderValue = props.renderValue,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"style\", \"appearance\", \"cleanable\", \"countable\", \"searchBy\", \"toggleAs\", \"searchKeyword\", \"showIndentLine\", \"locale\", \"cascade\", \"disabled\", \"valueKey\", \"labelKey\", \"placement\", \"childrenKey\", \"placeholder\", \"value\", \"defaultValue\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onOpen\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    activeNode = _useState2[0],\n    setActiveNode = _useState2[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'check-tree'),\n    checkTreePrefix = _useClassNames2.prefix,\n    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState3 = (0, _react.useState)(null),\n    focusItemValue = _useState3[0],\n    setFocusItemValue = _useState3[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      uncheckableItemValues: uncheckableItemValues,\n      callback: function callback(nodes) {\n        // after flattenData, always unSerialize check property value\n        unSerializeList({\n          nodes: nodes,\n          key: 'check',\n          value: value,\n          cascade: cascade,\n          uncheckableItemValues: uncheckableItemValues\n        });\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,\n    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,\n    unSerializeList = _useFlattenTreeData.unSerializeList;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  /**\n   * get formatted nodes for render tree\n   * @params render - renderNode function. only used when virtualized setting false\n   */\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        cascade: cascade,\n        searchKeyword: searchKeywordState\n      }).filter(function (item) {\n        return item.visible;\n      });\n    }\n    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer) {\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      layer: layer,\n      focus: focusItemValue === node[valueKey],\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return item === node[valueKey];\n      }),\n      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {\n        disabledItemValues: disabledItemValues,\n        valueKey: valueKey\n      }),\n      nodeData: node,\n      checkState: node.checkState,\n      uncheckable: (0, _utils2.isNodeUncheckable)(node, {\n        uncheckableItemValues: uncheckableItemValues,\n        valueKey: valueKey\n      }),\n      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),\n      onSelect: handleSelect,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  (0, _react.useEffect)(function () {\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: value,\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    forceUpdate();\n  }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);\n  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (cascade && currentNode) {\n      if (!checked) {\n        currentNode.check = checked;\n        currentNode.checkAll = checked;\n      } else {\n        if ((0, _utils2.isEveryChildChecked)(nodes, currentNode)) {\n          currentNode.check = true;\n          currentNode.checkAll = true;\n        } else {\n          currentNode.check = false;\n          currentNode.checkAll = false;\n        }\n      }\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  });\n  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (!currentNode) {\n      return;\n    }\n    currentNode.check = isChecked;\n    if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {\n      currentNode.checkAll = false;\n    } else {\n      currentNode.checkAll = isChecked;\n      currentNode[childrenKey].forEach(function (child) {\n        toggleDownChecked(nodes, child, isChecked);\n      });\n    }\n  });\n  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {\n    var nodes = (0, _cloneDeep2.default)(flattenNodes);\n    toggleDownChecked(nodes, node, isChecked);\n    node.parent && toggleUpChecked(nodes, node.parent, isChecked);\n    var values = serializeListOnlyParent(nodes, 'check');\n    // filter uncheckableItemValues\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  });\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {\n    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;\n    if (!node || !currentNode) {\n      return;\n    }\n    var selectedValues = toggleChecked(node, !currentNode.check);\n    if (!isControlled) {\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: selectedValues,\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n      setValue(selectedValues);\n    }\n    setActiveNode(node);\n    setFocusItemValue(node[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$open;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$clo, _target$current;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setFocusItemValue(null);\n    setActive(false);\n\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setActiveNode(null);\n    setFocusItemValue(null);\n    if (!isControlled) {\n      setValue([]);\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: [],\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + checkTreePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + checkTreePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = function selectActiveItem(event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  };\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, layer) {\n    var visible = node.visible,\n      refKey = node.refKey; // when searching, all nodes should be expand\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = checkTreePrefix('open');\n      var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 651,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 652,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 653,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child) {\n        return renderNode(child, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: checkTreePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 656,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      key: node[valueKey],\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 667,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      refKey = node.refKey,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      style: style,\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 700,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderCheckTree = function renderCheckTree() {\n    var _merge2, _merge3;\n    var classes = merge(withCheckTreeClassPrefix({\n      'without-children': !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey),\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    if (!formattedNodes.some(function (v) {\n      return v !== null;\n    })) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('none'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 717,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n    var treeNodesClass = merge(checkTreePrefix('root'), (_merge3 = {}, _merge3[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge3));\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style)\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      multiselectable: true,\n      treeRootClassName: treeNodesClass,\n      className: classes,\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 741,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 750,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 755,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = (0, _classnames.default)(className, menuClassName, prefix('check-tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 780,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 789,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedItems = (0, _react.useMemo)(function () {\n    return (0, _utils2.getSelectedItems)(flattenNodes, value);\n  }, [flattenNodes, value]);\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 812,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      countable: countable,\n      cleanable: cleanable,\n      disabled: disabled,\n      hasValue: hasValidValue,\n      name: 'check-tree'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderCheckTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 847,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 859,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 860,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  locale: _propTypes.default.any,\n  cascade: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  defaultExpandAll: _propTypes.default.bool,\n  containerPadding: _propTypes.default.number,\n  disabledItemValues: _propTypes.default.array,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  searchBy: _propTypes.default.func,\n  onScroll: _propTypes.default.func\n});\nvar _default = CheckTreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nvar CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    style = props.style,\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$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    searchKeyword = props.searchKeyword,\n    showIndentLine = props.showIndentLine,\n    overrideLocale = props.locale,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    disabled = props.disabled,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    placeholder = props.placeholder,\n    controlledValue = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    listProps = props.listProps,\n    renderMenu = props.renderMenu,\n    getChildren = props.getChildren,\n    renderExtraFooter = props.renderExtraFooter,\n    onEntered = props.onEntered,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onExited = props.onExited,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onScroll = props.onScroll,\n    onExpand = props.onExpand,\n    renderValue = props.renderValue,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"style\", \"appearance\", \"cleanable\", \"countable\", \"searchBy\", \"toggleAs\", \"searchKeyword\", \"showIndentLine\", \"locale\", \"cascade\", \"disabled\", \"valueKey\", \"labelKey\", \"placement\", \"childrenKey\", \"placeholder\", \"value\", \"defaultValue\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onExited\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    activeNode = _useState2[0],\n    setActiveNode = _useState2[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'check-tree'),\n    checkTreePrefix = _useClassNames2.prefix,\n    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState3 = (0, _react.useState)(null),\n    focusItemValue = _useState3[0],\n    setFocusItemValue = _useState3[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      uncheckableItemValues: uncheckableItemValues,\n      callback: function callback(nodes) {\n        // after flattenData, always unSerialize check property value\n        unSerializeList({\n          nodes: nodes,\n          key: 'check',\n          value: value,\n          cascade: cascade,\n          uncheckableItemValues: uncheckableItemValues\n        });\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,\n    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,\n    unSerializeList = _useFlattenTreeData.unSerializeList;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  /**\n   * get formatted nodes for render tree\n   * @params render - renderNode function. only used when virtualized setting false\n   */\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        cascade: cascade,\n        searchKeyword: searchKeywordState\n      }).filter(function (item) {\n        return item.visible;\n      });\n    }\n    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer) {\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      layer: layer,\n      focus: focusItemValue === node[valueKey],\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return item === node[valueKey];\n      }),\n      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {\n        disabledItemValues: disabledItemValues,\n        valueKey: valueKey\n      }),\n      nodeData: node,\n      checkState: node.checkState,\n      uncheckable: (0, _utils2.isNodeUncheckable)(node, {\n        uncheckableItemValues: uncheckableItemValues,\n        valueKey: valueKey\n      }),\n      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),\n      onSelect: handleSelect,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  (0, _react.useEffect)(function () {\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: value,\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    forceUpdate();\n  }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);\n  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (cascade && currentNode) {\n      if (!checked) {\n        currentNode.check = checked;\n        currentNode.checkAll = checked;\n      } else {\n        if ((0, _utils2.isEveryChildChecked)(nodes, currentNode)) {\n          currentNode.check = true;\n          currentNode.checkAll = true;\n        } else {\n          currentNode.check = false;\n          currentNode.checkAll = false;\n        }\n      }\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  });\n  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (!currentNode) {\n      return;\n    }\n    currentNode.check = isChecked;\n    if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {\n      currentNode.checkAll = false;\n    } else {\n      currentNode.checkAll = isChecked;\n      currentNode[childrenKey].forEach(function (child) {\n        toggleDownChecked(nodes, child, isChecked);\n      });\n    }\n  });\n  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {\n    var nodes = (0, _cloneDeep2.default)(flattenNodes);\n    toggleDownChecked(nodes, node, isChecked);\n    node.parent && toggleUpChecked(nodes, node.parent, isChecked);\n    var values = serializeListOnlyParent(nodes, 'check');\n    // filter uncheckableItemValues\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  });\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {\n    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;\n    if (!node || !currentNode) {\n      return;\n    }\n    var selectedValues = toggleChecked(node, !currentNode.check);\n    if (!isControlled) {\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: selectedValues,\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n      setValue(selectedValues);\n    }\n    setActiveNode(node);\n    setFocusItemValue(node[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    focusActiveNode();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _target$current;\n    setSearchKeyword('');\n    setFocusItemValue(null);\n    setActive(false);\n\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setActiveNode(null);\n    setFocusItemValue(null);\n    if (!isControlled) {\n      setValue([]);\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: [],\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + checkTreePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + checkTreePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = function selectActiveItem(event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  };\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, layer) {\n    var visible = node.visible,\n      refKey = node.refKey; // when searching, all nodes should be expand\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = checkTreePrefix('open');\n      var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 644,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 645,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 646,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child) {\n        return renderNode(child, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: checkTreePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 649,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      key: node[valueKey],\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 660,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      refKey = node.refKey,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      style: style,\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 693,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderCheckTree = function renderCheckTree() {\n    var _merge2, _merge3;\n    var classes = merge(withCheckTreeClassPrefix({\n      'without-children': !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey),\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    if (!formattedNodes.some(function (v) {\n      return v !== null;\n    })) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('none'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 710,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n    var treeNodesClass = merge(checkTreePrefix('root'), (_merge3 = {}, _merge3[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge3));\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style)\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      multiselectable: true,\n      treeRootClassName: treeNodesClass,\n      className: classes,\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 734,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 743,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 748,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = (0, _classnames.default)(className, menuClassName, prefix('check-tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 773,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 782,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedItems = (0, _react.useMemo)(function () {\n    return (0, _utils2.getSelectedItems)(flattenNodes, value);\n  }, [flattenNodes, value]);\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 805,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      countable: countable,\n      cleanable: cleanable,\n      disabled: disabled,\n      hasValue: hasValidValue,\n      name: 'check-tree'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderCheckTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 840,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 852,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 853,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  locale: _propTypes.default.any,\n  cascade: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  defaultExpandAll: _propTypes.default.bool,\n  containerPadding: _propTypes.default.number,\n  disabledItemValues: _propTypes.default.array,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  searchBy: _propTypes.default.func,\n  onScroll: _propTypes.default.func\n});\nvar _default = CheckTreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
 
 /***/ }),
 
@@ -6780,7 +6868,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _delay = _interopRequireDefault(__webpack_require__(/*! lodash/delay */ \"./node_modules/lodash/delay.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\nvar _MonthDropdown = __webpack_require__(/*! ../Calendar/MonthDropdown */ \"./src/Calendar/MonthDropdown.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\");\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    calendarDefaultDate = props.calendarDefaultDate,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    idProp = props.id,\n    isoWeek = props.isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    ranges = props.ranges,\n    valueProp = props.value,\n    showMeridian = props.showMeridian,\n    showWeekNumbers = props.showWeekNumbers,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    DEPRECATED_disabledDate = props.disabledDate,\n    DEPRECATED_disabledHours = props.disabledHours,\n    DEPRECATED_disabledMinutes = props.disabledMinutes,\n    DEPRECATED_disabledSeconds = props.disabledSeconds,\n    shouldDisableDate = props.shouldDisableDate,\n    shouldDisableHour = props.shouldDisableHour,\n    shouldDisableMinute = props.shouldDisableMinute,\n    shouldDisableSecond = props.shouldDisableSecond,\n    onChange = props.onChange,\n    onChangeCalendarDate = props.onChangeCalendarDate,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onNextMonth = props.onNextMonth,\n    onOk = props.onOk,\n    onOpen = props.onOpen,\n    onPrevMonth = props.onPrevMonth,\n    onSelect = props.onSelect,\n    onToggleMonthDropdown = props.onToggleMonthDropdown,\n    onToggleTimeDropdown = props.onToggleTimeDropdown,\n    onShortcutClick = props.onShortcutClick,\n    renderCell = props.renderCell,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"editable\", \"defaultValue\", \"disabled\", \"readOnly\", \"plaintext\", \"format\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"size\", \"caretAs\", \"disabledDate\", \"disabledHours\", \"disabledMinutes\", \"disabledSeconds\", \"shouldDisableDate\", \"shouldDisableHour\", \"shouldDisableMinute\", \"shouldDisableSecond\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onClose\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onOpen\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\", \"onShortcutClick\", \"renderCell\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1];\n  var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),\n    calendarDate = _useCalendarDate.calendarDate,\n    setCalendarDate = _useCalendarDate.setCalendarDate,\n    resetCalendarDate = _useCalendarDate.resetCalendarDate;\n  var _useState = (0, _react.useState)(false),\n    showMonthDropdown = _useState[0],\n    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n  var showMonth = onlyShowMonth || showMonthDropdown;\n  var isDateDisabled = function isDateDisabled(date) {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    if (typeof DEPRECATED_disabledDate === 'function') {\n      return DEPRECATED_disabledDate(date);\n    }\n    return false;\n  };\n  var isErrorValue = function isErrorValue(value) {\n    if (!(0, _dateUtils.isValid)(value)) {\n      return true;\n    } else if (value && isDateDisabled(value)) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  var handleMoveForward = (0, _utils.useEventCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  var handleMoveBackward = (0, _utils.useEventCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  var handleDateChange = (0, _utils.useEventCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  });\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  var handleChangeTime = (0, _utils.useEventCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function () {\n    var hours = (0, _dateUtils.getHours)(calendarDate);\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);\n    handleChangeTime(nextDate);\n  });\n  var updateValue = function updateValue(event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    var value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n  });\n\n  /**\n   * Get the corresponding container based on date selection and month selection\n   */\n  var getOverlayContainer = function getOverlayContainer() {\n    return showMonth ? document.getElementById(id + \"-calendar-month-dropdown\") : document.getElementById(id + \"-calendar-table\");\n  };\n\n  /**\n   * Check whether the date is focusable\n   */\n  var checkFocusable = function checkFocusable(date) {\n    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;\n    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);\n    var container = getOverlayContainer();\n    var dateElement = container === null || container === void 0 ? void 0 : container.querySelector(\"[aria-label=\\\"\" + ariaLabel + \"\\\"]\");\n    if ((dateElement === null || dateElement === void 0 ? void 0 : dateElement.getAttribute('aria-disabled')) === 'true') {\n      return false;\n    }\n    return true;\n  };\n\n  /**\n   * Focus on the currently selected date element\n   */\n  var focusSelectedDate = function focusSelectedDate() {\n    (0, _delay.default)(function () {\n      var container = getOverlayContainer();\n      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected=\"true\"]');\n      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();\n    }, 1);\n  };\n\n  /**\n   * Focus on the input element\n   */\n  var focusTargetInput = (0, _utils.useEventCallback)(function () {\n    (0, _delay.default)(function () {\n      var _target$current;\n      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    }, 1);\n  });\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n    focusTargetInput();\n  });\n\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    updateValue(event, null);\n    resetCalendarDate(null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {\n    var delta = 0;\n    var step = showMonth ? 6 : 7;\n    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        delta = step;\n      },\n      up: function up() {\n        delta = -step;\n      },\n      right: function right() {\n        delta = 1;\n      },\n      left: function left() {\n        delta = -1;\n      },\n      enter: function enter() {\n        handleOK(event);\n      }\n    });\n    var nextDate = changeDateFunc(calendarDate, delta);\n    if (checkFocusable(nextDate)) {\n      setCalendarDate(nextDate);\n      focusSelectedDate();\n    }\n  });\n\n  /**\n   * The callback triggered after the month selection box is opened or closed.\n   */\n  var handleToggleMonthDropdown = (0, _utils.useEventCallback)(function (toggle) {\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);\n    setShowMonthDropdown(toggle);\n  });\n  var handleClick = (0, _utils.useEventCallback)(function () {\n    if (editable) {\n      return;\n    }\n    focusSelectedDate();\n  });\n\n  /**\n   * Callback after the date is selected.\n   */\n  var handleSelect = (0, _utils.useEventCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    setCalendarDate(\n    // Determine whether the current value contains time, if not, use calendarDate.\n    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _dateUtils.copyTime)({\n      from: calendarDate,\n      to: nextValue\n    }));\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n      focusTargetInput();\n    }\n  });\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  var handleChangeMonth = (0, _utils.useEventCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n      focusTargetInput();\n    }\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!isErrorValue(value)) {\n      handleSelect(value, event);\n    }\n    updateValue(event, value, false);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref.open;\n        if (open) {\n          if ((0, _dateUtils.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {\n            updateValue(event);\n            focusTargetInput();\n          }\n        } else {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n\n  // Check whether the time is within the time range of the shortcut option in the toolbar.\n  var disabledToolbarHandle = function disabledToolbarHandle(date) {\n    var _DEPRECATED_disabledD;\n    var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;\n    var allowTime = (0, _dateUtils.disabledTime)(props, date);\n    return allowDate || allowTime;\n  };\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  var isOKButtonDisabled = function isOKButtonDisabled(selectedDate) {\n    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {\n      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);\n    }\n    return disabledToolbarHandle(selectedDate);\n  };\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var _splitRanges = (0, _utils3.splitRanges)(ranges),\n    sideRanges = _splitRanges.sideRanges,\n    bottomRanges = _splitRanges.bottomRanges;\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('popup-date'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      style: styles,\n      target: trigger,\n      onKeyDown: handlePickerPopupKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 633,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 643,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 645,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 657,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n      targetId: id,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      showMeridian: showMeridian,\n      disabledDate: isDateDisabled,\n      disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,\n      disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,\n      disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      format: formatStr,\n      isoWeek: isoWeek,\n      calendarDate: calendarDate,\n      renderCellOnPicker: renderCell,\n      onMoveForward: handleMoveForward,\n      onMoveBackward: handleMoveBackward,\n      onSelect: handleSelect,\n      onToggleMonthDropdown: handleToggleMonthDropdown,\n      onToggleTimeDropdown: onToggleTimeDropdown,\n      onChangeMonth: handleChangeMonth,\n      onChangeTime: handleChangeTime,\n      onToggleMeridian: handleToggleMeridian,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 658,\n        columnNumber: 15\n      }\n    })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disabledOkBtn: isOKButtonDisabled,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 683,\n        columnNumber: 15\n      }\n    }))));\n  };\n  var hasValue = (0, _dateUtils.isValid)(value);\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'date',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var handleTriggerClose = (0, _utils.useEventCallback)(function (cause) {\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setShowMonthDropdown(false);\n  });\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onClose: handleTriggerClose,\n    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),\n    onExited: (0, _utils.createChainedFunction)(onClose, onExited),\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 731,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 741,\n      columnNumber: 9\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 747,\n      columnNumber: 13\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    onClick: handleClick,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 749,\n      columnNumber: 13\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 759,\n      columnNumber: 15\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : formatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 762,\n      columnNumber: 15\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 778,\n      columnNumber: 15\n    }\n  }))));\n});\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  disabledHours: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableHour\" property instead.'),\n  disabledMinutes: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableMinute\" property instead.'),\n  disabledSeconds: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableSecond\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  shouldDisableHour: _propTypes.default.func,\n  shouldDisableMinute: _propTypes.default.func,\n  shouldDisableSecond: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _delay = _interopRequireDefault(__webpack_require__(/*! lodash/delay */ \"./node_modules/lodash/delay.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _useCalendarDate2 = _interopRequireDefault(__webpack_require__(/*! ../Calendar/useCalendarDate */ \"./src/Calendar/useCalendarDate.ts\"));\nvar _MonthDropdown = __webpack_require__(/*! ../Calendar/MonthDropdown */ \"./src/Calendar/MonthDropdown.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\");\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/DatePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nvar DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    calendarDefaultDate = props.calendarDefaultDate,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    idProp = props.id,\n    isoWeek = props.isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    ranges = props.ranges,\n    valueProp = props.value,\n    showMeridian = props.showMeridian,\n    showWeekNumbers = props.showWeekNumbers,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    DEPRECATED_disabledDate = props.disabledDate,\n    DEPRECATED_disabledHours = props.disabledHours,\n    DEPRECATED_disabledMinutes = props.disabledMinutes,\n    DEPRECATED_disabledSeconds = props.disabledSeconds,\n    shouldDisableDate = props.shouldDisableDate,\n    shouldDisableHour = props.shouldDisableHour,\n    shouldDisableMinute = props.shouldDisableMinute,\n    shouldDisableSecond = props.shouldDisableSecond,\n    onChange = props.onChange,\n    onChangeCalendarDate = props.onChangeCalendarDate,\n    onClean = props.onClean,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onNextMonth = props.onNextMonth,\n    onOk = props.onOk,\n    onPrevMonth = props.onPrevMonth,\n    onSelect = props.onSelect,\n    onToggleMonthDropdown = props.onToggleMonthDropdown,\n    onToggleTimeDropdown = props.onToggleTimeDropdown,\n    onShortcutClick = props.onShortcutClick,\n    renderCell = props.renderCell,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"calendarDefaultDate\", \"cleanable\", \"editable\", \"defaultValue\", \"disabled\", \"readOnly\", \"plaintext\", \"format\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"appearance\", \"placement\", \"oneTap\", \"placeholder\", \"ranges\", \"value\", \"showMeridian\", \"showWeekNumbers\", \"style\", \"size\", \"caretAs\", \"disabledDate\", \"disabledHours\", \"disabledMinutes\", \"disabledSeconds\", \"shouldDisableDate\", \"shouldDisableHour\", \"shouldDisableMinute\", \"shouldDisableSecond\", \"onChange\", \"onChangeCalendarDate\", \"onClean\", \"onEntered\", \"onExited\", \"onNextMonth\", \"onOk\", \"onPrevMonth\", \"onSelect\", \"onToggleMonthDropdown\", \"onToggleTimeDropdown\", \"onShortcutClick\", \"renderCell\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1];\n  var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),\n    calendarDate = _useCalendarDate.calendarDate,\n    setCalendarDate = _useCalendarDate.setCalendarDate,\n    resetCalendarDate = _useCalendarDate.resetCalendarDate;\n  var _useState = (0, _react.useState)(false),\n    showMonthDropdown = _useState[0],\n    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n  var showMonth = onlyShowMonth || showMonthDropdown;\n  var isDateDisabled = function isDateDisabled(date) {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    if (typeof DEPRECATED_disabledDate === 'function') {\n      return DEPRECATED_disabledDate(date);\n    }\n    return false;\n  };\n  var isErrorValue = function isErrorValue(value) {\n    if (!(0, _dateUtils.isValid)(value)) {\n      return true;\n    } else if (value && isDateDisabled(value)) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  var handleMoveForward = (0, _utils.useEventCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  var handleMoveBackward = (0, _utils.useEventCallback)(function (nextPageDate) {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  var handleDateChange = (0, _utils.useEventCallback)(function (nextValue, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);\n  });\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  var handleChangeTime = (0, _utils.useEventCallback)(function (nextPageTime) {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function () {\n    var hours = (0, _dateUtils.getHours)(calendarDate);\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);\n    handleChangeTime(nextDate);\n  });\n  var updateValue = function updateValue(event, nextPageDate, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;\n    setCalendarDate(nextValue || new Date());\n    setValue(nextValue);\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    var value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n  });\n\n  /**\n   * Get the corresponding container based on date selection and month selection\n   */\n  var getOverlayContainer = function getOverlayContainer() {\n    return showMonth ? document.getElementById(id + \"-calendar-month-dropdown\") : document.getElementById(id + \"-calendar-table\");\n  };\n\n  /**\n   * Check whether the date is focusable\n   */\n  var checkFocusable = function checkFocusable(date) {\n    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;\n    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);\n    var container = getOverlayContainer();\n    var dateElement = container === null || container === void 0 ? void 0 : container.querySelector(\"[aria-label=\\\"\" + ariaLabel + \"\\\"]\");\n    if ((dateElement === null || dateElement === void 0 ? void 0 : dateElement.getAttribute('aria-disabled')) === 'true') {\n      return false;\n    }\n    return true;\n  };\n\n  /**\n   * Focus on the currently selected date element\n   */\n  var focusSelectedDate = function focusSelectedDate() {\n    (0, _delay.default)(function () {\n      var container = getOverlayContainer();\n      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected=\"true\"]');\n      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();\n    }, 1);\n  };\n\n  /**\n   * Focus on the input element\n   */\n  var focusTargetInput = (0, _utils.useEventCallback)(function () {\n    (0, _delay.default)(function () {\n      var _target$current;\n      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    }, 1);\n  });\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    updateValue(event);\n    onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);\n    focusTargetInput();\n  });\n\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    updateValue(event, null);\n    resetCalendarDate(null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {\n    var delta = 0;\n    var step = showMonth ? 6 : 7;\n    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        delta = step;\n      },\n      up: function up() {\n        delta = -step;\n      },\n      right: function right() {\n        delta = 1;\n      },\n      left: function left() {\n        delta = -1;\n      },\n      enter: function enter() {\n        handleOK(event);\n      }\n    });\n    var nextDate = changeDateFunc(calendarDate, delta);\n    if (checkFocusable(nextDate)) {\n      setCalendarDate(nextDate);\n      focusSelectedDate();\n    }\n  });\n\n  /**\n   * The callback triggered after the month selection box is opened or closed.\n   */\n  var handleToggleMonthDropdown = (0, _utils.useEventCallback)(function (toggle) {\n    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);\n    setShowMonthDropdown(toggle);\n  });\n  var handleClick = (0, _utils.useEventCallback)(function () {\n    if (editable) {\n      return;\n    }\n    focusSelectedDate();\n  });\n\n  /**\n   * Callback after the date is selected.\n   */\n  var handleSelect = (0, _utils.useEventCallback)(function (nextValue, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    setCalendarDate(\n    // Determine whether the current value contains time, if not, use calendarDate.\n    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _dateUtils.copyTime)({\n      from: calendarDate,\n      to: nextValue\n    }));\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n      focusTargetInput();\n    }\n  });\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  var handleChangeMonth = (0, _utils.useEventCallback)(function (nextPageDate, event) {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && onlyShowMonth) {\n      updateValue(event, nextPageDate);\n      focusTargetInput();\n    }\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!isErrorValue(value)) {\n      handleSelect(value, event);\n    }\n    updateValue(event, value, false);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref.open;\n        if (open) {\n          if ((0, _dateUtils.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {\n            updateValue(event);\n            focusTargetInput();\n          }\n        } else {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n\n  // Check whether the time is within the time range of the shortcut option in the toolbar.\n  var disabledToolbarHandle = function disabledToolbarHandle(date) {\n    var _DEPRECATED_disabledD;\n    var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;\n    var allowTime = (0, _dateUtils.disabledTime)(props, date);\n    return allowDate || allowTime;\n  };\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  var isOKButtonDisabled = function isOKButtonDisabled(selectedDate) {\n    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {\n      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);\n    }\n    return disabledToolbarHandle(selectedDate);\n  };\n  var calendarProps = (0, _react.useMemo)(function () {\n    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {\n      return function (next, date) {\n        var _disabledOrHiddenTime;\n        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;\n      };\n    });\n  }, [props]);\n  var _splitRanges = (0, _utils3.splitRanges)(ranges),\n    sideRanges = _splitRanges.sideRanges,\n    bottomRanges = _splitRanges.bottomRanges;\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(menuClassName, className, prefix('popup-date'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      style: styles,\n      target: trigger,\n      onKeyDown: handlePickerPopupKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 630,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 640,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 642,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 654,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n      targetId: id,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      showMeridian: showMeridian,\n      disabledDate: isDateDisabled,\n      disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,\n      disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,\n      disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      format: formatStr,\n      isoWeek: isoWeek,\n      calendarDate: calendarDate,\n      renderCellOnPicker: renderCell,\n      onMoveForward: handleMoveForward,\n      onMoveBackward: handleMoveBackward,\n      onSelect: handleSelect,\n      onToggleMonthDropdown: handleToggleMonthDropdown,\n      onToggleTimeDropdown: onToggleTimeDropdown,\n      onChangeMonth: handleChangeMonth,\n      onChangeTime: handleChangeTime,\n      onToggleMeridian: handleToggleMeridian,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 655,\n        columnNumber: 15\n      }\n    })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disabledOkBtn: isOKButtonDisabled,\n      disabledShortcut: disabledToolbarHandle,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 680,\n        columnNumber: 15\n      }\n    }))));\n  };\n  var hasValue = (0, _dateUtils.isValid)(value);\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'date',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var handleTriggerClose = (0, _utils.useEventCallback)(function (cause) {\n    var _props$onClose;\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setShowMonthDropdown(false);\n    (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);\n  });\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onClose: handleTriggerClose,\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 730,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 740,\n      columnNumber: 9\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 746,\n      columnNumber: 13\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    onClick: handleClick,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 748,\n      columnNumber: 13\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 758,\n      columnNumber: 15\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : formatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 761,\n      columnNumber: 15\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 777,\n      columnNumber: 15\n    }\n  }))));\n});\nDatePicker.displayName = 'DatePicker';\nDatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  calendarDefaultDate: _propTypes.default.instanceOf(Date),\n  defaultValue: _propTypes.default.instanceOf(Date),\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  disabledHours: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableHour\" property instead.'),\n  disabledMinutes: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableMinute\" property instead.'),\n  disabledSeconds: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableSecond\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  shouldDisableHour: _propTypes.default.func,\n  shouldDisableMinute: _propTypes.default.func,\n  shouldDisableSecond: _propTypes.default.func,\n  format: _propTypes.default.string,\n  hideHours: _propTypes.default.func,\n  hideMinutes: _propTypes.default.func,\n  hideSeconds: _propTypes.default.func,\n  isoWeek: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onChangeCalendarDate: _propTypes.default.func,\n  onNextMonth: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  onPrevMonth: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onToggleMonthDropdown: _propTypes.default.func,\n  onToggleTimeDropdown: _propTypes.default.func,\n  oneTap: _propTypes.default.bool,\n  ranges: _propTypes.default.array,\n  showMeridian: _propTypes.default.bool,\n  showWeekNumbers: _propTypes.default.bool,\n  value: _propTypes.default.instanceOf(Date)\n});\nvar _default = DatePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
 
 /***/ }),
 
@@ -6879,7 +6967,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    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    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getDateRangeString = function getDateRangeString(nextValue) {\n    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],\n      startDate = _ref4[0],\n      endDate = _ref4[1];\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n      return /*#__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: 370,\n          columnNumber: 11\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: 372,\n          columnNumber: 11\n        }\n      }));\n    }\n    return rangeFormatStr;\n  };\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (isSelectedIdle && oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      setSelectedIdle(false);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleSingleCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var handleSingleCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disabledByBetween = function disabledByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disabledOkButton = function disabledOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disabledShortcutButton = function disabledShortcutButton(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref5.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: function disabledDate(date, values, type) {\n        return isDateDisabled(date, {\n          selectDate: values,\n          selectedDone: isSelectedIdle,\n          target: type\n        });\n      },\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarMonth: handleSingleCalendarMonth,\n      onChangeCalendarTime: handleSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 784,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 793,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 794,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 796,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 809,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 810,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      \"data-testid\": \"daterange-header\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 812,\n        columnNumber: 19\n      }\n    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 816,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 819,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 820,\n        columnNumber: 21\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 821,\n        columnNumber: 42\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      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 825,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),\n    onExited: (0, _utils.createChainedFunction)(onClose, onExited),\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 897,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 907,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 913,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 915,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 924,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 927,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 945,\n      columnNumber: 13\n    }\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([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getDateRangeString = function getDateRangeString(nextValue) {\n    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],\n      startDate = _ref4[0],\n      endDate = _ref4[1];\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n      return /*#__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: 368,\n          columnNumber: 11\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: 370,\n          columnNumber: 11\n        }\n      }));\n    }\n    return rangeFormatStr;\n  };\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (isSelectedIdle && oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      setSelectedIdle(false);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleSingleCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var handleSingleCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disabledByBetween = function disabledByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disabledOkButton = function disabledOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disabledShortcutButton = function disabledShortcutButton(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref5.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('popup-daterange'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: function disabledDate(date, values, type) {\n        return isDateDisabled(date, {\n          selectDate: values,\n          selectedDone: isSelectedIdle,\n          target: type\n        });\n      },\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarMonth: handleSingleCalendarMonth,\n      onChangeCalendarTime: handleSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 782,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 791,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 792,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 794,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 807,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 808,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      \"data-testid\": \"daterange-header\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 810,\n        columnNumber: 19\n      }\n    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 817,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 818,\n        columnNumber: 21\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 819,\n        columnNumber: 42\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      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 823,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExited: onExited,\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 895,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 905,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 911,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 913,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 922,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 925,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 943,\n      columnNumber: 13\n    }\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([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -7011,7 +7099,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _useRenderDropdownItem = __webpack_require__(/*! ./useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../utils/warnOnce */ \"./src/utils/warnOnce.ts\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _DropdownSeparator = _interopRequireDefault(__webpack_require__(/*! ./DropdownSeparator */ \"./src/Dropdown/DropdownSeparator.tsx\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownItem.tsx\",\n  _this = void 0;\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  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _dropdown$onSelect;\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);\n\n  // If using <Dropdown.Item> within <Nav>\n  // Suggest <Nav.Item>\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: 143,\n        columnNumber: 14\n      }\n    }));\n  }\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _extends2.default)({\n      as: \"li\"\n    }, (0, _pick.default)(props, ['data-testid']), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 148,\n        columnNumber: 9\n      }\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  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: 162,\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    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\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: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)\n      }), children)\n    }));\n  });\n});\nDropdownItem.displayName = 'Dropdown.Item';\nDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, (0, _propTypes2.oneOf)(['click', 'hover'])]),\n  open: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _propTypes2.deprecatePropType)(_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\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ../utils/useInternalId */ \"./src/utils/useInternalId.ts\"));\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _useRenderDropdownItem = __webpack_require__(/*! ./useRenderDropdownItem */ \"./src/Dropdown/useRenderDropdownItem.tsx\");\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../utils/warnOnce */ \"./src/utils/warnOnce.ts\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _Text = _interopRequireDefault(__webpack_require__(/*! ../Text */ \"./src/Text/index.tsx\"));\nvar _DropdownSeparator = _interopRequireDefault(__webpack_require__(/*! ./DropdownSeparator */ \"./src/Dropdown/DropdownSeparator.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Dropdown/DropdownItem.tsx\",\n  _this = void 0;\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    shortcut = props.shortcut,\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\", \"shortcut\", \"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  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var handleSelectItem = (0, _react.useCallback)(function (event) {\n    var _dropdown$onSelect;\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);\n\n  // If using <Dropdown.Item> within <Nav>\n  // Suggest <Nav.Item>\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: 154,\n        columnNumber: 14\n      }\n    }));\n  }\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _extends2.default)({\n      as: \"li\"\n    }, (0, _pick.default)(props, ['data-testid']), {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 159,\n        columnNumber: 9\n      }\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  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: 173,\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    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {\n      dataAttributes['data-event-key-type'] = typeof eventKey;\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: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)\n      }), /*#__PURE__*/_react.default.createElement(_Text.default, {\n        as: \"span\",\n        className: prefix('content'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 207,\n          columnNumber: 17\n        }\n      }, children), shortcut && /*#__PURE__*/_react.default.createElement(_Text.default, {\n        as: \"kbd\",\n        className: prefix('shortcut'),\n        muted: true,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 211,\n          columnNumber: 19\n        }\n      }, shortcut))\n    }));\n  });\n});\nDropdownItem.displayName = 'Dropdown.Item';\nDropdownItem.propTypes = {\n  as: _propTypes.default.elementType,\n  divider: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),\n  panel: _propTypes.default.bool,\n  trigger: _propTypes.default.oneOfType([_propTypes.default.array, (0, _propTypes2.oneOf)(['click', 'hover'])]),\n  open: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),\n  active: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  pullLeft: (0, _propTypes2.deprecatePropType)(_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?");
 
 /***/ }),
 
@@ -7356,6 +7444,50 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Heading/Heading.tsx":
+/*!*********************************!*\
+  !*** ./src/Heading/Heading.tsx ***!
+  \*********************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Heading/Heading.tsx\",\n  _this = void 0;\n/**\n *\n * The `Heading` component is used to display a heading.\n *\n * @see https://rsuitejs.com/components/heading\n */\nvar Heading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var as = props.as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'heading' : _props$classPrefix,\n    className = props.className,\n    _props$level = props.level,\n    level = _props$level === void 0 ? 3 : _props$level,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"level\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix());\n  var Component = as || \"h\" + level;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 29,\n      columnNumber: 12\n    }\n  }));\n});\nHeading.displayName = 'Heading';\nHeading.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  as: _propTypes.default.elementType,\n  level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6])\n};\nvar _default = Heading;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Heading/Heading.tsx?");
+
+/***/ }),
+
+/***/ "./src/Heading/index.tsx":
+/*!*******************************!*\
+  !*** ./src/Heading/index.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\");\nexports.__esModule = true;\nexports[\"default\"] = exports.HeadingProps = void 0;\nvar _Heading = _interopRequireWildcard(__webpack_require__(/*! ./Heading */ \"./src/Heading/Heading.tsx\"));\nexports.HeadingProps = _Heading.HeadingProps;\nvar _default = _Heading.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Heading/index.tsx?");
+
+/***/ }),
+
+/***/ "./src/HeadingGroup/HeadingGroup.tsx":
+/*!*******************************************!*\
+  !*** ./src/HeadingGroup/HeadingGroup.tsx ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _createComponent = _interopRequireDefault(__webpack_require__(/*! ../utils/createComponent */ \"./src/utils/createComponent.tsx\"));\n/**\n * HeadingGroup is a group of headings.\n * @see https://rsuitejs.com/components/heading\n */\nvar HeadingGroup = (0, _createComponent.default)({\n  name: 'HeadingGroup',\n  componentAs: 'hgroup'\n});\nvar _default = HeadingGroup;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/HeadingGroup/HeadingGroup.tsx?");
+
+/***/ }),
+
+/***/ "./src/HeadingGroup/index.tsx":
+/*!************************************!*\
+  !*** ./src/HeadingGroup/index.tsx ***!
+  \************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _HeadingGroup = _interopRequireDefault(__webpack_require__(/*! ./HeadingGroup */ \"./src/HeadingGroup/HeadingGroup.tsx\"));\nvar _default = _HeadingGroup.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/HeadingGroup/index.tsx?");
+
+/***/ }),
+
 /***/ "./src/IconButton/IconButton.tsx":
 /*!***************************************!*\
   !*** ./src/IconButton/IconButton.tsx ***!
@@ -7550,7 +7682,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4;\nvar convertSize = function convertSize(size) {\n  switch (size) {\n    case 'lg':\n      return 'lg';\n    case 'sm':\n    case 'xs':\n      return 'sm';\n    default:\n      return 'md';\n  }\n};\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"open\", \"placeholder\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onOpen\", \"onClose\", \"onBlur\", \"onFocus\", \"searchBy\", \"placement\"]);\n  var _useContext = (0, _react.useContext)(_InputPickerContext.default),\n    multi = _useContext.multi,\n    tagProps = _useContext.tagProps,\n    trigger = _useContext.trigger,\n    disabledOptions = _useContext.disabledOptions,\n    onTagRemove = _useContext.onTagRemove,\n    renderCheckbox = _useContext.renderCheckbox;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var inputRef = (0, _react.useRef)();\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    triggerRef = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list;\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)(100),\n    maxWidth = _useState2[0],\n    setMaxWidth = _useState2[1];\n  var _useState3 = (0, _react.useState)([]),\n    newData = _useState3[0],\n    setNewData = _useState3[1];\n  var _useState4 = (0, _react.useState)(defaultOpen),\n    uncontrolledOpen = _useState4[0],\n    setOpen = _useState4[1];\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var cloneValue = function cloneValue() {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n      data: getAllDataAndCache(),\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword, value]);\n  var getDataItem = function getDataItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n  var getInput = function getInput() {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  };\n  var focusInput = function focusInput() {\n    var _getInput;\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  };\n  var blurInput = function blurInput() {\n    var _getInput2;\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = function createOption(value) {\n    var _ref2;\n    if (groupBy) {\n      var _ref;\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  };\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleRemoveItemByTag = (0, _utils.useEventCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  });\n  var handleTagKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var data = getAllData();\n    if (!focusItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  var handleMenuItemKeyPress = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _utils.useEventCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  });\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    trigger: triggerRef,\n    target: target,\n    overlay: overlay\n  }, events, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  });\n  var handleFocus = (0, _utils.useEventCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    focusInput();\n    setOpen(true);\n  });\n  var handleExit = (0, _utils.useEventCallback)(function () {\n    blurInput();\n    setOpen(false);\n  });\n  var renderListItem = function renderListItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 550,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDataItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDataItem = getDataItem(tag),\n        isValid = _getDataItem.isValid,\n        itemNode = _getDataItem.itemNode,\n        activeItem = _getDataItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: convertSize(rest.size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 595,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 642,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox: renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 646,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 670,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 674,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var editable = searchable && !disabled && !rest.loading;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n      plaintextProps.childrenRenderMode = 'clone';\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 734,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: multi,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 743,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 756,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 763,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && multi,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 783,\n      columnNumber: 11\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _InputPickerContext = _interopRequireDefault(__webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3,\n  _templateObject4;\nvar convertSize = function convertSize(size) {\n  switch (size) {\n    case 'lg':\n      return 'lg';\n    case 'sm':\n    case 'xs':\n      return 'sm';\n    default:\n      return 'md';\n  }\n};\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$cacheData = props.cacheData,\n    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    _props$data = props.data,\n    controlledData = _props$data === void 0 ? [] : _props$data,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    defaultValue = props.defaultValue,\n    _props$defaultOpen = props.defaultOpen,\n    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    controlledOpen = props.open,\n    placeholder = props.placeholder,\n    groupBy = props.groupBy,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    creatable = props.creatable,\n    shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    virtualized = props.virtualized,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    listProps = props.listProps,\n    id = props.id,\n    tabIndex = props.tabIndex,\n    sort = props.sort,\n    renderMenu = props.renderMenu,\n    renderExtraFooter = props.renderExtraFooter,\n    renderValue = props.renderValue,\n    renderMenuItem = props.renderMenuItem,\n    renderMenuGroup = props.renderMenuGroup,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onCreate = props.onCreate,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onBlur = props.onBlur,\n    onFocus = props.onFocus,\n    searchBy = props.searchBy,\n    size = props.size,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"cleanable\", \"cacheData\", \"classPrefix\", \"data\", \"disabled\", \"readOnly\", \"plaintext\", \"defaultValue\", \"defaultOpen\", \"disabledItemValues\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"open\", \"placeholder\", \"groupBy\", \"menuClassName\", \"menuStyle\", \"menuAutoWidth\", \"menuMaxHeight\", \"creatable\", \"shouldDisplayCreateOption\", \"value\", \"valueKey\", \"virtualized\", \"labelKey\", \"listProps\", \"id\", \"tabIndex\", \"sort\", \"renderMenu\", \"renderExtraFooter\", \"renderValue\", \"renderMenuItem\", \"renderMenuGroup\", \"onEnter\", \"onEntered\", \"onExit\", \"onExited\", \"onChange\", \"onClean\", \"onCreate\", \"onSearch\", \"onSelect\", \"onBlur\", \"onFocus\", \"searchBy\", \"size\", \"placement\"]);\n  var _useContext = (0, _react.useContext)(_InputPickerContext.default),\n    multi = _useContext.multi,\n    tagProps = _useContext.tagProps,\n    trigger = _useContext.trigger,\n    disabledOptions = _useContext.disabledOptions,\n    onTagRemove = _useContext.onTagRemove,\n    renderCheckbox = _useContext.renderCheckbox;\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  var inputRef = (0, _react.useRef)();\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    triggerRef = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list;\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n    locale = _useCustom.locale;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState = (0, _react.useState)(controlledData),\n    uncontrolledData = _useState[0],\n    setData = _useState[1];\n  var _useState2 = (0, _react.useState)(100),\n    maxWidth = _useState2[0],\n    setMaxWidth = _useState2[1];\n  var _useState3 = (0, _react.useState)([]),\n    newData = _useState3[0],\n    setNewData = _useState3[1];\n  var _useState4 = (0, _react.useState)(defaultOpen),\n    uncontrolledOpen = _useState4[0],\n    setOpen = _useState4[1];\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var cloneValue = function cloneValue() {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);\n  });\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n      data: getAllDataAndCache(),\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onKeyDown = _useFocusItemValue.onKeyDown;\n  var handleSearchCallback = (0, _utils.useEventCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: handleSearchCallback\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    resetSearch = _useSearch.resetSearch,\n    checkShouldDisplay = _useSearch.checkShouldDisplay,\n    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword, value]);\n  var getDataItem = function getDataItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n  var getInput = function getInput() {\n    var _inputRef$current;\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  };\n  var focusInput = function focusInput() {\n    var _getInput;\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  };\n  var blurInput = function blurInput() {\n    var _getInput2;\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  var createOption = function createOption(value) {\n    var _ref2;\n    if (groupBy) {\n      var _ref;\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  };\n  var handleChange = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleRemoveItemByTag = (0, _utils.useEventCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  var handleSelectItem = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  var handleCheckTag = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {\n    var val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  });\n  var handleTagKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    var val = cloneValue();\n    var data = getAllData();\n    if (!focusItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  var handleMenuItemKeyPress = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    });\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  var removeLastItem = (0, _utils.useEventCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  });\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _utils.useEventCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    trigger: triggerRef,\n    target: target,\n    overlay: overlay\n  }, events, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n  });\n  var handleFocus = (0, _utils.useEventCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    focusInput();\n    setOpen(true);\n  });\n  var handleExit = (0, _utils.useEventCallback)(function () {\n    blurInput();\n    setOpen(false);\n  });\n  var renderListItem = function renderListItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 548,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    var dataItem = getDataItem(value);\n    var itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n    var _tagProps$closable = tagProps.closable,\n      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n      onClose = tagProps.onClose,\n      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDataItem = getDataItem(tag),\n        isValid = _getDataItem.isValid,\n        itemNode = _getDataItem.itemNode,\n        activeItem = _getDataItem.activeItem;\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: convertSize(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 593,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 640,\n          columnNumber: 16\n        }\n      });\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox: renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 644,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 668,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 672,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _checkValue = checkValue(),\n    isValid = _checkValue.isValid,\n    itemNode = _checkValue.itemNode;\n  var tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'input',\n      cleanable: cleanable\n    })),\n    pickerClasses = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + \"-\" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var editable = searchable && !disabled && !rest.loading;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n  if (plaintext) {\n    var plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n      plaintextProps.childrenRenderMode = 'clone';\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: multi,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 742,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 755,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 762,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && multi,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 783,\n      columnNumber: 11\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -7704,7 +7836,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Loader/Loader.tsx\",\n  _this = void 0;\n/**\n * The `Loader` component is used to indicate the loading state of a page or a section.\n * @see https://rsuitejs.com/components/loader\n */\nvar Loader = /*#__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 ? 'loader' : _props$classPrefix,\n    className = props.className,\n    inverse = props.inverse,\n    backdrop = props.backdrop,\n    _props$speed = props.speed,\n    speed = _props$speed === void 0 ? 'normal' : _props$speed,\n    center = props.center,\n    vertical = props.vertical,\n    content = props.content,\n    size = props.size,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"inverse\", \"backdrop\", \"speed\", \"center\", \"vertical\", \"content\", \"size\"]);\n  var hasContent = !!content;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, prefix('wrapper', \"speed-\" + speed, size, {\n    'backdrop-wrapper': backdrop,\n    'has-content': hasContent,\n    vertical: vertical,\n    inverse: inverse,\n    center: center\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"progressbar\"\n  }, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 7\n    }\n  }), backdrop && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('backdrop'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 22\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: withClassPrefix(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 67,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('spin'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 68,\n      columnNumber: 11\n    }\n  }), hasContent && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('content'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 69,\n      columnNumber: 26\n    }\n  }, content)));\n});\nLoader.displayName = 'Loader';\nLoader.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  center: _propTypes.default.bool,\n  backdrop: _propTypes.default.bool,\n  inverse: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  content: _propTypes.default.node,\n  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),\n  speed: (0, _propTypes2.oneOf)(['normal', 'fast', 'slow'])\n};\nvar _default = Loader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Loader/Loader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Loader/Loader.tsx\",\n  _this = void 0;\n/**\n * The `Loader` component is used to indicate the loading state of a page or a section.\n * @see https://rsuitejs.com/components/loader\n */\nvar Loader = /*#__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 ? 'loader' : _props$classPrefix,\n    className = props.className,\n    inverse = props.inverse,\n    backdrop = props.backdrop,\n    _props$speed = props.speed,\n    speed = _props$speed === void 0 ? 'normal' : _props$speed,\n    center = props.center,\n    vertical = props.vertical,\n    content = props.content,\n    size = props.size,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"inverse\", \"backdrop\", \"speed\", \"center\", \"vertical\", \"content\", \"size\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix;\n  var labelId = (0, _utils.useUniqueId)('loader-label-');\n  var classes = merge(className, prefix('wrapper', \"speed-\" + speed, size, {\n    'backdrop-wrapper': backdrop,\n    vertical: vertical,\n    inverse: inverse,\n    center: center\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"status\",\n    \"aria-labelledby\": content ? labelId : undefined\n  }, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 64,\n      columnNumber: 7\n    }\n  }), backdrop && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('backdrop'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 71,\n      columnNumber: 22\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: withClassPrefix(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('spin'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 73,\n      columnNumber: 11\n    }\n  }), content && /*#__PURE__*/_react.default.createElement(\"span\", {\n    id: labelId,\n    className: prefix('content'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 13\n    }\n  }, content)));\n});\nLoader.displayName = 'Loader';\nLoader.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  center: _propTypes.default.bool,\n  backdrop: _propTypes.default.bool,\n  inverse: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  content: _propTypes.default.node,\n  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),\n  speed: (0, _propTypes2.oneOf)(['normal', 'fast', 'slow'])\n};\nvar _default = Loader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Loader/Loader.tsx?");
 
 /***/ }),
 
@@ -7917,47 +8049,146 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/MultiCascader/MultiCascader.tsx":
+/***/ "./src/MultiCascadeTree/MultiCascadeTree.tsx":
+/*!***************************************************!*\
+  !*** ./src/MultiCascadeTree/MultiCascadeTree.tsx ***!
+  \***************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ./TreeView */ \"./src/MultiCascadeTree/TreeView.tsx\"));\nvar _hooks = __webpack_require__(/*! ./hooks */ \"./src/MultiCascadeTree/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ./SearchView */ \"./src/MultiCascadeTree/SearchView.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascadeTree/MultiCascadeTree.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `MultiCascadeTree` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascade-tree/\n */\nvar MultiCascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    defaultValue = props.defaultValue,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    columnWidth = props.columnWidth,\n    columnHeight = props.columnHeight,\n    searchable = props.searchable,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    getChildren = props.getChildren,\n    renderColumn = props.renderColumn,\n    renderTreeNode = props.renderTreeNode,\n    onSelect = props.onSelect,\n    onCheck = props.onCheck,\n    onChange = props.onChange,\n    onSearch = props.onSearch,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"defaultValue\", \"className\", \"classPrefix\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabledItemValues\", \"cascade\", \"columnWidth\", \"columnHeight\", \"searchable\", \"uncheckableItemValues\", \"getChildren\", \"renderColumn\", \"renderTreeNode\", \"onSelect\", \"onCheck\", \"onChange\", \"onSearch\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var _useSelect = (0, _hooks.useSelect)({\n      data: data,\n      childrenKey: childrenKey,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      onSelect: onSelect,\n      getChildren: getChildren\n    }),\n    selectedPaths = _useSelect.selectedPaths,\n    flattenData = _useSelect.flattenData,\n    columnData = _useSelect.columnData,\n    handleSelect = _useSelect.handleSelect;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n    controlledValue = _useControlled[0];\n  var cascadeValueProps = (0, _extends2.default)({}, itemKeys, {\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    value: controlledValue,\n    onCheck: onCheck,\n    onChange: onChange\n  });\n  var _useCascadeValue = (0, _hooks.useCascadeValue)(cascadeValueProps, flattenData),\n    value = _useCascadeValue.value,\n    handleCheck = _useCascadeValue.handleCheck;\n  var _useSearch = (0, _hooks.useSearch)({\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      flattenedData: flattenData,\n      uncheckableItemValues: uncheckableItemValues,\n      onSearch: onSearch\n    }),\n    items = _useSearch.items,\n    searchKeyword = _useSearch.searchKeyword,\n    handleSearch = _useSearch.handleSearch;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix('multi'));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 7\n    }\n  }), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n    data: items,\n    value: value,\n    searchKeyword: searchKeyword,\n    valueKey: valueKey,\n    labelKey: labelKey,\n    childrenKey: childrenKey,\n    disabledItemValues: disabledItemValues,\n    onCheck: handleCheck,\n    onSearch: handleSearch,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 80,\n      columnNumber: 11\n    }\n  }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n    cascade: cascade,\n    columnWidth: columnWidth,\n    columnHeight: columnHeight,\n    uncheckableItemValues: uncheckableItemValues,\n    disabledItemValues: disabledItemValues,\n    valueKey: valueKey,\n    labelKey: labelKey,\n    childrenKey: childrenKey,\n    classPrefix: classPrefix,\n    cascadeData: columnData,\n    cascadePaths: selectedPaths,\n    value: value,\n    onSelect: handleSelect,\n    onCheck: handleCheck,\n    renderColumn: renderColumn,\n    renderTreeNode: renderTreeNode,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 11\n    }\n  }));\n});\nMultiCascadeTree.displayName = 'MultiCascadeTree';\nvar _default = MultiCascadeTree;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/MultiCascadeTree.tsx?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/SearchView.tsx":
 /*!*********************************************!*\
-  !*** ./src/MultiCascader/MultiCascader.tsx ***!
+  !*** ./src/MultiCascadeTree/SearchView.tsx ***!
+  \*********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/MultiCascadeTree/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../CascadeTree/utils */ \"./src/CascadeTree/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascadeTree/SearchView.tsx\";\nfunction SearchView(props) {\n  var _this = this;\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 ? 'cascade-search-view' : _props$classPrefix,\n    className = props.className,\n    searchKeyword = props.searchKeyword,\n    childrenKey = props.childrenKey,\n    labelKey = props.labelKey,\n    valueKey = props.valueKey,\n    value = props.value,\n    data = props.data,\n    disabledItemValues = props.disabledItemValues,\n    inputRef = props.inputRef,\n    cascade = props.cascade,\n    onSearch = props.onSearch,\n    onCheck = props.onCheck,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"searchKeyword\", \"childrenKey\", \"labelKey\", \"valueKey\", \"value\", \"data\", \"disabledItemValues\", \"inputRef\", \"cascade\", \"onSearch\", \"onCheck\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix,\n    rootPrefix = _useClassNames.rootPrefix;\n  var classes = merge(className, withClassPrefix());\n  var _useCustom = (0, _utils.useCustom)('Picker'),\n    locale = _useCustom.locale;\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var label = (0, _utils3.highlightLabel)({\n      item: item,\n      labelKey: labelKey,\n      searchKeyword: searchKeyword,\n      render: function render(patch, index) {\n        return /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: index,\n          className: prefix('match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 54,\n            columnNumber: 9\n          }\n        }, patch);\n      }\n    });\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = label, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var rowClasses = prefix('row', {\n      'row-disabled': disabled\n    });\n    var indeterminate = cascade && !active && (0, _utils2.isSomeChildChecked)(item, value, {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    });\n    var handleChange = function handleChange(_value, checked, event) {\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(item, event, checked);\n    };\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"treeitem\",\n      \"aria-disabled\": disabled,\n      key: key,\n      className: rowClasses,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 79,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: indeterminate,\n      onChange: handleChange,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 86,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('col-group'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 93,\n        columnNumber: 11\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 95,\n          columnNumber: 15\n        }\n      }, node[labelKey]);\n    }))));\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({\n    className: classes\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 106,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n    onChange: onSearch,\n    value: searchKeyword,\n    inputRef: inputRef,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 107,\n      columnNumber: 7\n    }\n  }), searchKeyword !== '' && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('panel'),\n    \"data-layer\": 0,\n    role: \"tree\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 114,\n      columnNumber: 9\n    }\n  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(prefix('none'), rootPrefix('picker-none')),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 118,\n      columnNumber: 13\n    }\n  }, locale.noResultsText)));\n}\nvar _default = SearchView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/SearchView.tsx?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/TreeView.tsx":
+/*!*******************************************!*\
+  !*** ./src/MultiCascadeTree/TreeView.tsx ***!
+  \*******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/MultiCascadeTree/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascadeTree/TreeView.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar TreeView = /*#__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 ? 'tree' : _props$classPrefix,\n    className = props.className,\n    cascade = props.cascade,\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$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$columnWidth = props.columnWidth,\n    columnWidth = _props$columnWidth === void 0 ? 156 : _props$columnWidth,\n    _props$columnHeight = props.columnHeight,\n    columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    value = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    style = props.style,\n    renderTreeNode = props.renderTreeNode,\n    renderColumn = props.renderColumn,\n    _onCheck = props.onCheck,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"cascade\", \"cascadeData\", \"cascadePaths\", \"childrenKey\", \"disabledItemValues\", \"columnWidth\", \"columnHeight\", \"uncheckableItemValues\", \"value\", \"valueKey\", \"labelKey\", \"style\", \"renderTreeNode\", \"renderColumn\", \"onCheck\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, prefix('items'));\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useCombobox = (0, _Picker.useCombobox)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType,\n    multiple = _useCombobox.multiple;\n  var getCascadePaths = function getCascadePaths(layer, node) {\n    var paths = [];\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    paths.push(node);\n    return paths;\n  };\n  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n  });\n  var renderCascadeNode = function renderCascadeNode(nodeProps) {\n    var node = nodeProps.node,\n      index = nodeProps.index,\n      layer = nodeProps.layer,\n      focus = nodeProps.focus,\n      uncheckable = nodeProps.uncheckable,\n      size = nodeProps.size;\n    var children = node[childrenKey];\n    var nodeValue = node[valueKey];\n    var label = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, nodeValue);\n    });\n\n    // Use `value` in keys when If `value` is string or number\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;\n    var active = value.some(function (v) {\n      return v === nodeValue;\n    });\n    if (cascade) {\n      active = active || (0, _utils2.isSomeParentChecked)(node, value, {\n        valueKey: valueKey\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.ListCheckItem, {\n      as: \"li\",\n      role: \"treeitem\",\n      \"aria-level\": layer + 1,\n      \"aria-setsize\": size,\n      \"aria-posinset\": index + 1,\n      \"aria-label\": typeof label === 'string' ? label : undefined,\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: active,\n      focus: focus\n      // Pass the node as a value to Item, and use it in event callbacks.\n      ,\n      value: nodeValue,\n      className: children ? prefix('has-children') : undefined,\n      indeterminate: cascade && !active && (0, _utils2.isSomeChildChecked)(node, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onSelectItem: function onSelectItem(_value, event) {\n        return handleSelect(layer, node, event);\n      },\n      onCheck: function onCheck(_value, event, checked) {\n        return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);\n      },\n      checkable: !uncheckable,\n      labelClickable: false,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 114,\n        columnNumber: 9\n      }\n    }, renderTreeNode ? renderTreeNode(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: 137,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n  var columnStyles = {\n    height: columnHeight,\n    width: columnWidth\n  };\n  var cascadeNodes = cascadeData.map(function (children, layer) {\n    var uncheckableCount = 0;\n    var onlyKey = layer + \"_\" + children.length;\n    var childNodes = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {\n      var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {\n        return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);\n      });\n      if (uncheckable) {\n        uncheckableCount++;\n      }\n      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);\n      return renderCascadeNode({\n        node: item,\n        index: index,\n        layer: layer,\n        focus: focus,\n        uncheckable: uncheckable,\n        size: children.length\n      });\n    }));\n    var parentItem = cascadePaths[layer - 1];\n    var columnClasses = prefix('column', {\n      'column-uncheckable': uncheckableCount === children.length\n    });\n    return /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: \"group\",\n      key: onlyKey,\n      className: columnClasses,\n      \"data-layer\": layer,\n      style: columnStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 176,\n        columnNumber: 9\n      }\n    }, renderColumn ? renderColumn(childNodes, {\n      items: children,\n      parentItem: parentItem,\n      layer: layer\n    }) : childNodes);\n  });\n  var styles = (0, _extends2.default)({}, style, {\n    width: cascadeData.length * columnWidth\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"tree\",\n    id: id ? id + \"-\" + popupType : undefined,\n    \"aria-labelledby\": labelId,\n    \"aria-multiselectable\": multiple\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 193,\n      columnNumber: 7\n    }\n  }), cascadeNodes);\n});\nTreeView.displayName = 'TreeView';\nvar _default = TreeView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/TreeView.tsx?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/hooks/index.ts":
+/*!*********************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/index.ts ***!
   \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ./TreeView */ \"./src/MultiCascader/TreeView.tsx\"));\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils2 = __webpack_require__(/*! ../Cascader/utils */ \"./src/Cascader/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    inline = props.inline,\n    placeholder = props.placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    menuWidth = props.menuWidth,\n    menuHeight = props.menuHeight,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    getChildren = props.getChildren,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderMenuItem = props.renderMenuItem,\n    renderExtraFooter = props.renderExtraFooter,\n    onEnter = props.onEnter,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onChange = props.onChange,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onCheck = props.onCheck,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"defaultValue\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabled\", \"disabledItemValues\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"inline\", \"placeholder\", \"placement\", \"appearance\", \"menuWidth\", \"menuHeight\", \"menuClassName\", \"menuStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderMenu\", \"renderMenuItem\", \"renderExtraFooter\", \"onEnter\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onOpen\", \"onClose\", \"onCheck\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),\n    flattenData = _useFlattenData.flattenData,\n    addFlattenData = _useFlattenData.addFlattenData;\n  var _useControlled = (0, _utils3.useControlled)(valueProp, defaultValue),\n    controlledValue = _useControlled[0];\n  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {\n      uncheckableItemValues: uncheckableItemValues,\n      cascade: cascade,\n      value: controlledValue\n    }), flattenData),\n    value = _useCascadeValue.value,\n    setValue = _useCascadeValue.setValue,\n    splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.\n  var _useColumnData = (0, _utils.useColumnData)(flattenData),\n    columnData = _useColumnData.columnData,\n    setColumnData = _useColumnData.setColumnData,\n    addColumn = _useColumnData.addColumn,\n    removeColumnByIndex = _useColumnData.removeColumnByIndex,\n    enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n  (0, _utils3.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]);\n\n  // The path after cascading data selection.\n  var _useState2 = (0, _react.useState)(),\n    selectedPaths = _useState2[0],\n    setSelectedPaths = _useState2[1];\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || [];\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n      rtl: rtl,\n      data: flattenData,\n      valueKey: valueKey,\n      defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n      target: function target() {\n        return overlay.current;\n      },\n      callback: (0, _react.useCallback)(function (value) {\n        var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {\n            return item[valueKey] === value;\n          }), {\n            getParent: function getParent() {\n              return undefined;\n            },\n            getChildren: function getChildren(item) {\n              return item[childrenKey];\n            }\n          }),\n          columns = _getColumnsAndPaths.columns,\n          path = _getColumnsAndPaths.path;\n        setColumnData(columns);\n        setSelectedPaths(path);\n      }, [childrenKey, data, flattenData, setColumnData, valueKey])\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useState3 = (0, _react.useState)(''),\n    searchKeyword = _useState3[0],\n    setSearchKeyword = _useState3[1];\n  var handleEntered = (0, _utils3.useEventCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleExited = (0, _utils3.useEventCallback)(function () {\n    setActive(false);\n    setSearchKeyword('');\n  });\n  var handleSelect = (0, _utils3.useEventCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2, _trigger$current, _trigger$current$upda;\n    setSelectedPaths(cascadePaths);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    var columnIndex = cascadePaths.length;\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n          if (target.current || inline) {\n            addFlattenData(data, node);\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      removeColumnByIndex(columnIndex);\n    }\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);\n  });\n  var handleCheck = (0, _utils3.useEventCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  });\n  var handleClean = (0, _utils3.useEventCallback)(function (event) {\n    if (disabled || !target.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {\n    var _overlay$current;\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSearch = (0, _utils3.useEventCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n  });\n  var getSearchResult = function getSearchResult() {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n      return false;\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  };\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');\n    var labelElements = [];\n    var a = item[labelKey].split(regx);\n    var b = item[labelKey].match(regx);\n    for (var i = 0; i < a.length; i++) {\n      labelElements.push(a[i]);\n      if (b[i]) {\n        labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: i,\n          className: prefix('cascader-search-match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 387,\n            columnNumber: 13\n          }\n        }, b[i]));\n      }\n    }\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"treeitem\",\n      \"aria-disabled\": disabled,\n      key: key,\n      className: itemClasses,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 412,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onChange: function onChange(_value, checked, event) {\n        handleCheck(item, event, checked);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 419,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('cascader-cols'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 430,\n        columnNumber: 13\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 432,\n          columnNumber: 17\n        }\n      }, node[labelKey]);\n    }))));\n  };\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      role: \"tree\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 449,\n        columnNumber: 9\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 453,\n        columnNumber: 13\n      }\n    }, locale.noResultsText));\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n      left = _ref.left,\n      top = _ref.top,\n      className = _ref.className;\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: styles,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 470,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 478,\n        columnNumber: 13\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      cascade: cascade,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 489,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 518,\n        columnNumber: 9\n      }\n    });\n  }\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      countable: countable,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderTreeView();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 558,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 570,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: target,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 571,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n});\nvar _default = MultiCascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useSearch = exports.useCascadeValue = exports.useColumnData = exports.useSelect = exports.useFlattenData = void 0;\nvar _useFlattenData = _interopRequireDefault(__webpack_require__(/*! ./useFlattenData */ \"./src/MultiCascadeTree/hooks/useFlattenData.ts\"));\nexports.useFlattenData = _useFlattenData.default;\nvar _useSelect = _interopRequireDefault(__webpack_require__(/*! ./useSelect */ \"./src/MultiCascadeTree/hooks/useSelect.ts\"));\nexports.useSelect = _useSelect.default;\nvar _useColumnData = _interopRequireDefault(__webpack_require__(/*! ./useColumnData */ \"./src/MultiCascadeTree/hooks/useColumnData.ts\"));\nexports.useColumnData = _useColumnData.default;\nvar _useCascadeValue = _interopRequireDefault(__webpack_require__(/*! ./useCascadeValue */ \"./src/MultiCascadeTree/hooks/useCascadeValue.ts\"));\nexports.useCascadeValue = _useCascadeValue.default;\nvar _useSearch = _interopRequireDefault(__webpack_require__(/*! ./useSearch */ \"./src/MultiCascadeTree/hooks/useSearch.ts\"));\nexports.useSearch = _useSearch.default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/index.ts?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/hooks/useCascadeValue.ts":
+/*!*******************************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/useCascadeValue.ts ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _uniq = _interopRequireDefault(__webpack_require__(/*! lodash/uniq */ \"./node_modules/lodash/uniq.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/MultiCascadeTree/utils.ts\");\n/**\n * A hook that converts the value into a cascading value\n * @param props\n * @param flattenData\n */\nfunction useCascadeValue(props, flattenData) {\n  var valueKey = props.valueKey,\n    childrenKey = props.childrenKey,\n    uncheckableItemValues = props.uncheckableItemValues,\n    cascade = props.cascade,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onCheck = props.onCheck;\n  /**\n   * Get the values of all children\n   */\n  var getChildrenValue = (0, _react.useCallback)(function (item) {\n    var values = [];\n    if (!item[childrenKey]) {\n      return values;\n    }\n    item[childrenKey].forEach(function (n) {\n      if (uncheckableItemValues && !uncheckableItemValues.some(function (v) {\n        return v === n[valueKey];\n      })) {\n        values.push(n[valueKey]);\n      }\n      values = values.concat(getChildrenValue(n));\n    });\n    return values;\n  }, [childrenKey, uncheckableItemValues, valueKey]);\n  var splitValue = (0, _react.useCallback)(function (item, checked, value) {\n    var itemValue = item[valueKey];\n    var childrenValue = getChildrenValue(item);\n    var parents = (0, _utils2.getParents)(item);\n    var nextValue = [].concat(value);\n    var removedValue = [];\n    if (checked) {\n      nextValue.push(itemValue);\n\n      // Delete all values under the current node\n      removedValue = removedValue.concat((0, _utils2.removeAllChildrenValue)(nextValue, item, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }) || []);\n\n      // Traverse all ancestor nodes of the current node\n      // Then determine whether all the child nodes of these nodes are selected, and then they themselves must be selected\n      var _loop = function _loop(i) {\n        // Whether the parent node can be selected\n        var isCheckableParent = !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {\n          return v === parents[i][valueKey];\n        }));\n        if (isCheckableParent) {\n          var isCheckAll = parents[i][childrenKey]\n          // Filter out options that are marked as not selectable\n          .filter(function (n) {\n            return !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {\n              return v === n[valueKey];\n            }));\n          })\n          // Check if all nodes are selected\n          .every(function (n) {\n            return nextValue.some(function (v) {\n              return v === n[valueKey];\n            });\n          });\n          if (isCheckAll) {\n            // Add parent node value\n            nextValue.push(parents[i][valueKey]);\n\n            // Delete all values under the parent node\n            removedValue = removedValue.concat((0, _utils2.removeAllChildrenValue)(nextValue, parents[i], {\n              valueKey: valueKey,\n              childrenKey: childrenKey\n            }) || []);\n          }\n        }\n      };\n      for (var i = 0; i < parents.length; i++) {\n        _loop(i);\n      }\n    } else {\n      var tempValue = childrenValue.concat(parents.map(function (item) {\n        return item[valueKey];\n      }));\n      nextValue = nextValue.concat((0, _utils2.getOtherItemValuesByUnselectChild)(item, nextValue, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }));\n\n      // Delete related child and parent nodes\n      removedValue = (0, _remove.default)(nextValue, function (v) {\n        // Delete yourself\n        if (v === itemValue) {\n          return true;\n        }\n        return tempValue.some(function (n) {\n          return n === v;\n        });\n      });\n    }\n    var uniqValue = (0, _uniq.default)(nextValue);\n    var uniqRemovedValue = (0, _uniq.default)(removedValue);\n    return {\n      value: uniqValue,\n      removedValue: uniqRemovedValue\n    };\n  }, [valueKey, childrenKey, uncheckableItemValues, getChildrenValue]);\n  var transformValue = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n    if (!cascade) {\n      return value;\n    }\n    var tempRemovedValue = [];\n    var nextValue = [];\n    var _loop2 = function _loop2(i) {\n      // If the value in the current value is already in the deleted list, it will not be processed\n      if (tempRemovedValue.some(function (v) {\n        return v === value[i];\n      })) {\n        return \"continue\";\n      }\n      var item = flattenData.find(function (v) {\n        return v[valueKey] === value[i];\n      });\n      if (!item) {\n        return \"continue\";\n      }\n      var sv = splitValue(item, true, value);\n      tempRemovedValue = (0, _uniq.default)(tempRemovedValue.concat(sv.removedValue));\n\n      // Get all relevant values\n      nextValue = (0, _uniq.default)(nextValue.concat(sv.value));\n    };\n    for (var i = 0; i < value.length; i++) {\n      var _ret = _loop2(i);\n      if (_ret === \"continue\") continue;\n    }\n\n    // Finally traverse all nextValue, and delete if its parent node is also nextValue\n    return nextValue.filter(function (v) {\n      var item = flattenData.find(function (n) {\n        return n[valueKey] === v;\n      });\n      if (item !== null && item !== void 0 && item.parent && nextValue.some(function (v) {\n        var _item$parent;\n        return v === ((_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[valueKey]);\n      })) {\n        return false;\n      }\n      return true;\n    });\n  }, [cascade, flattenData, splitValue, valueKey]);\n  var _useState = (0, _react.useState)(transformValue(valueProp) || []),\n    value = _useState[0],\n    setValue = _useState[1];\n  (0, _react.useEffect)(function () {\n    // Update value when valueProp is updated.\n    setValue(transformValue(valueProp) || []);\n  }, [transformValue, valueProp]);\n  var handleCheck = (0, _utils.useEventCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  });\n  return {\n    value: value,\n    setValue: setValue,\n    splitValue: splitValue,\n    handleCheck: handleCheck\n  };\n}\nvar _default = useCascadeValue;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/useCascadeValue.ts?");
 
 /***/ }),
 
-/***/ "./src/MultiCascader/TreeView.tsx":
+/***/ "./src/MultiCascadeTree/hooks/useColumnData.ts":
+/*!*****************************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/useColumnData.ts ***!
+  \*****************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\nvar _treeUtils = __webpack_require__(/*! ../../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n/**\n * A hook for column data\n * @param flattenData\n */\nfunction useColumnData(flattenData) {\n  // The columns displayed in the cascading panel.\n  var _useState = (0, _react.useState)([flattenData.filter(function (item) {\n      return !item.parent;\n    })]),\n    columnData = _useState[0],\n    setColumnData = _useState[1];\n  /**\n   * Add a list of options to the cascading panel. Used for lazy loading options.\n   * @param column\n   * @param index The index of the current column.\n   */\n  function addColumn(column, index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));\n  }\n\n  /**\n   * Remove subsequent columns of the specified column\n   * @param index\n   */\n  function removeColumnByIndex(index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));\n  }\n  function enforceUpdateColumnData(nextData) {\n    var nextFlattenData = (0, _treeUtils.UNSAFE_flattenTree)(nextData);\n    setColumnData([nextFlattenData.filter(function (item) {\n      return !item.parent;\n    })]);\n  }\n  return {\n    columnData: columnData,\n    addColumn: addColumn,\n    removeColumnByIndex: removeColumnByIndex,\n    setColumnData: setColumnData,\n    enforceUpdateColumnData: enforceUpdateColumnData\n  };\n}\nvar _default = useColumnData;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/useColumnData.ts?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/hooks/useFlattenData.ts":
+/*!******************************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/useFlattenData.ts ***!
+  \******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _treeUtils = __webpack_require__(/*! ../../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _attachParent = __webpack_require__(/*! ../../utils/attachParent */ \"./src/utils/attachParent.ts\");\n/**\n * A hook to flatten tree structure data\n */\nfunction useFlattenData(data, itemKeys) {\n  var childrenKey = itemKeys.childrenKey;\n  var _useState = (0, _react.useState)((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey)),\n    flattenData = _useState[0],\n    setFlattenData = _useState[1];\n  var addFlattenData = (0, _react.useCallback)(function (children, parent) {\n    var nodes = children.map(function (child) {\n      return (0, _attachParent.attachParent)(child, parent);\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey));\n  }, [data, itemKeys.childrenKey]);\n  return {\n    addFlattenData: addFlattenData,\n    flattenData: flattenData\n  };\n}\nvar _default = useFlattenData;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/useFlattenData.ts?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/hooks/useSearch.ts":
+/*!*************************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/useSearch.ts ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nfunction useSearch(props) {\n  var _useState = (0, _react.useState)(''),\n    searchKeyword = _useState[0],\n    setSearchKeyword = _useState[1];\n  var labelKey = props.labelKey,\n    valueKey = props.valueKey,\n    flattenedData = props.flattenedData,\n    uncheckableItemValues = props.uncheckableItemValues,\n    onSearch = props.onSearch;\n  var getSearchResult = function getSearchResult() {\n    var items = [];\n    var result = flattenedData.filter(function (item) {\n      if (uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n      if (item[labelKey].match(new RegExp((0, _utils.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n      return false;\n    });\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]);\n\n      // A maximum of 100 search results are returned.\n      if (i === 99) {\n        return items;\n      }\n    }\n    return items;\n  };\n  var handleSearch = (0, _utils.useEventCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n  });\n  return {\n    searchKeyword: searchKeyword,\n    setSearchKeyword: setSearchKeyword,\n    items: getSearchResult(),\n    handleSearch: handleSearch\n  };\n}\nvar _default = useSearch;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/useSearch.ts?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/hooks/useSelect.ts":
+/*!*************************************************!*\
+  !*** ./src/MultiCascadeTree/hooks/useSelect.ts ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _useFlattenData2 = _interopRequireDefault(__webpack_require__(/*! ./useFlattenData */ \"./src/MultiCascadeTree/hooks/useFlattenData.ts\"));\nvar _useColumnData2 = _interopRequireDefault(__webpack_require__(/*! ./useColumnData */ \"./src/MultiCascadeTree/hooks/useColumnData.ts\"));\nvar useSelect = function useSelect(props) {\n  var data = props.data,\n    childrenKey = props.childrenKey,\n    labelKey = props.labelKey,\n    valueKey = props.valueKey,\n    onSelect = props.onSelect,\n    getChildren = props.getChildren;\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var _useFlattenData = (0, _useFlattenData2.default)(data, itemKeys),\n    flattenData = _useFlattenData.flattenData,\n    addFlattenData = _useFlattenData.addFlattenData; // The columns displayed in the cascading panel.\n  var _useColumnData = (0, _useColumnData2.default)(flattenData),\n    columnData = _useColumnData.columnData,\n    addColumn = _useColumnData.addColumn,\n    setColumnData = _useColumnData.setColumnData,\n    removeColumnByIndex = _useColumnData.removeColumnByIndex,\n    enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n  (0, _utils.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]);\n  var isMounted = (0, _utils.useIsMounted)();\n\n  // The path after cascading data selection.\n  var _useState = (0, _react.useState)(),\n    selectedPaths = _useState[0],\n    setSelectedPaths = _useState[1];\n  var handleSelect = (0, _utils.useEventCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2;\n    setSelectedPaths(cascadePaths);\n    var columnIndex = cascadePaths.length;\n\n    // Lazy load node's children\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n          if (isMounted()) {\n            addFlattenData(data, node);\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      removeColumnByIndex(columnIndex);\n    }\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n  });\n  return {\n    columnData: columnData,\n    setColumnData: setColumnData,\n    flattenData: flattenData,\n    selectedPaths: selectedPaths,\n    setSelectedPaths: setSelectedPaths,\n    handleSelect: handleSelect\n  };\n};\nvar _default = useSelect;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/hooks/useSelect.ts?");
+
+/***/ }),
+
+/***/ "./src/MultiCascadeTree/index.tsx":
 /*!****************************************!*\
-  !*** ./src/MultiCascader/TreeView.tsx ***!
+  !*** ./src/MultiCascadeTree/index.tsx ***!
   \****************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/TreeView.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * TODO: reuse Menu from Cascader for consistent behavior\n */\nvar TreeView = /*#__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 ? 'menu' : _props$classPrefix,\n    className = props.className,\n    cascade = props.cascade,\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$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 ? 156 : _props$menuWidth,\n    _props$menuHeight = props.menuHeight,\n    menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    value = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    style = props.style,\n    renderMenuItem = props.renderMenuItem,\n    renderMenu = props.renderMenu,\n    _onCheck = props.onCheck,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"cascade\", \"cascadeData\", \"cascadePaths\", \"childrenKey\", \"disabledItemValues\", \"menuWidth\", \"menuHeight\", \"uncheckableItemValues\", \"value\", \"valueKey\", \"labelKey\", \"style\", \"renderMenuItem\", \"renderMenu\", \"onCheck\", \"onSelect\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, prefix('items'));\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useCombobox = (0, _Picker.useCombobox)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType,\n    multiple = _useCombobox.multiple;\n  var getCascadePaths = function getCascadePaths(layer, node) {\n    var paths = [];\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    paths.push(node);\n    return paths;\n  };\n  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n  });\n  var renderCascadeNode = function renderCascadeNode(nodeProps) {\n    var node = nodeProps.node,\n      index = nodeProps.index,\n      layer = nodeProps.layer,\n      focus = nodeProps.focus,\n      uncheckable = nodeProps.uncheckable,\n      size = nodeProps.size;\n    var children = node[childrenKey];\n    var nodeValue = node[valueKey];\n    var label = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, nodeValue);\n    });\n\n    // Use `value` in keys when If `value` is string or number\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;\n    var active = value.some(function (v) {\n      return v === nodeValue;\n    });\n    if (cascade) {\n      active = active || (0, _utils2.isSomeParentChecked)(node, value, {\n        valueKey: valueKey\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.ListCheckItem, {\n      as: \"li\",\n      role: \"treeitem\",\n      \"aria-level\": layer + 1,\n      \"aria-setsize\": size,\n      \"aria-posinset\": index + 1,\n      \"aria-label\": typeof label === 'string' ? label : undefined,\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: active,\n      focus: focus\n      // Pass the node as a value to Item, and use it in event callbacks.\n      ,\n      value: nodeValue,\n      className: children ? prefix('has-children') : undefined,\n      indeterminate: cascade && !active && (0, _utils2.isSomeChildChecked)(node, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onSelectItem: function onSelectItem(_value, event) {\n        return handleSelect(layer, node, event);\n      },\n      onCheck: function onCheck(_value, event, checked) {\n        return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);\n      },\n      checkable: !uncheckable,\n      labelClickable: false,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 122,\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: 145,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n  var columnStyles = {\n    height: menuHeight,\n    width: menuWidth\n  };\n  var cascadeNodes = cascadeData.map(function (children, layer) {\n    var uncheckableCount = 0;\n    var onlyKey = layer + \"_\" + children.length;\n    var menu = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {\n      var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {\n        return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);\n      });\n      if (uncheckable) {\n        uncheckableCount++;\n      }\n      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);\n      return renderCascadeNode({\n        node: item,\n        index: index,\n        layer: layer,\n        focus: focus,\n        uncheckable: uncheckable,\n        size: children.length\n      });\n    }));\n    var parentNode = cascadePaths[layer - 1];\n    var columnClasses = prefix('column', {\n      'column-uncheckable': uncheckableCount === children.length\n    });\n    return /*#__PURE__*/_react.default.createElement(\"ul\", {\n      role: \"group\",\n      key: onlyKey,\n      className: columnClasses,\n      \"data-layer\": layer,\n      style: columnStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 184,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n  });\n  var styles = (0, _extends2.default)({}, style, {\n    width: cascadeData.length * menuWidth\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"tree\",\n    id: id + \"-\" + popupType,\n    \"aria-labelledby\": labelId,\n    \"aria-multiselectable\": multiple\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 199,\n      columnNumber: 7\n    }\n  }), cascadeNodes);\n});\nTreeView.displayName = 'TreeView';\nvar _default = TreeView;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/TreeView.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _MultiCascadeTree = _interopRequireDefault(__webpack_require__(/*! ./MultiCascadeTree */ \"./src/MultiCascadeTree/MultiCascadeTree.tsx\"));\nvar _default = _MultiCascadeTree.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/index.tsx?");
 
 /***/ }),
 
-/***/ "./src/MultiCascader/index.tsx":
-/*!*************************************!*\
-  !*** ./src/MultiCascader/index.tsx ***!
-  \*************************************/
+/***/ "./src/MultiCascadeTree/utils.ts":
+/*!***************************************!*\
+  !*** ./src/MultiCascadeTree/utils.ts ***!
+  \***************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _MultiCascader = _interopRequireDefault(__webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/MultiCascader.tsx\"));\nvar _default = _MultiCascader.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.removeAllChildrenValue = exports.getOtherItemValuesByUnselectChild = exports.isSomeParentChecked = exports.isSomeChildChecked = exports.getParents = void 0;\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n/**\n * Get all parents of a node\n * @param node\n */\nvar getParents = function getParents(node) {\n  var parents = [];\n  if (!node.parent) {\n    return parents;\n  }\n  parents.push(node.parent);\n  parents = parents.concat(getParents(node.parent));\n  return parents;\n};\n\n/**\n * Check if any child nodes are selected.\n * @param node\n * @param value\n * @param itemKeys\n */\nexports.getParents = getParents;\nvar isSomeChildChecked = function isSomeChildChecked(node, value, itemKeys) {\n  var childrenKey = itemKeys.childrenKey,\n    valueKey = itemKeys.valueKey;\n  if (!node[childrenKey] || !value) {\n    return false;\n  }\n  return node[childrenKey].some(function (child) {\n    var _child$childrenKey;\n    if (value.some(function (n) {\n      return n === child[valueKey];\n    })) {\n      return true;\n    }\n    if ((_child$childrenKey = child[childrenKey]) !== null && _child$childrenKey !== void 0 && _child$childrenKey.length) {\n      return isSomeChildChecked(child, value, itemKeys);\n    }\n    return false;\n  });\n};\n\n/**\n * Check if the parent is selected.\n * @param node\n * @param value\n * @param itemKeys\n */\nexports.isSomeChildChecked = isSomeChildChecked;\nvar isSomeParentChecked = function isSomeParentChecked(node, value, itemKeys) {\n  var valueKey = itemKeys.valueKey;\n  if (!value) {\n    return false;\n  }\n  if (value.some(function (n) {\n    return n === node[valueKey];\n  })) {\n    return true;\n  }\n  if (node.parent) {\n    return isSomeParentChecked(node.parent, value, itemKeys);\n  }\n  return false;\n};\nexports.isSomeParentChecked = isSomeParentChecked;\nvar getOtherItemValuesByUnselectChild = function getOtherItemValuesByUnselectChild(itemNode, value, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n    childrenKey = itemKeys.childrenKey;\n  var parentValues = [];\n  var itemValues = [];\n\n  // Find the parent node of the current node by value\n  function findParent(item) {\n    parentValues.push(item[valueKey]);\n    if (value.some(function (v) {\n      return v === item[valueKey];\n    })) {\n      return item;\n    }\n    if (item.parent) {\n      var p = findParent(item.parent);\n      if (p) {\n        return p;\n      }\n    }\n    return null;\n  }\n\n  // Get child nodes through parent node\n  function pushChildValue(item) {\n    if (!item[childrenKey]) {\n      return;\n    }\n    item[childrenKey].forEach(function (n) {\n      // Determine whether it is a direct parent\n      if (parentValues.some(function (v) {\n        return v === n[valueKey];\n      }) && n[childrenKey]) {\n        pushChildValue(n);\n      } else if (n[valueKey] !== itemNode[valueKey]) {\n        itemValues.push(n[valueKey]);\n      }\n    });\n  }\n  var parent = findParent(itemNode);\n  if (!parent) {\n    return [];\n  }\n  pushChildValue(parent);\n  return itemValues;\n};\n\n/**\n * Remove the values of all children.\n */\nexports.getOtherItemValuesByUnselectChild = getOtherItemValuesByUnselectChild;\nvar removeAllChildrenValue = function removeAllChildrenValue(value, item, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n    childrenKey = itemKeys.childrenKey;\n  var removedValue = [];\n  if (!item[childrenKey]) {\n    return;\n  }\n  item[childrenKey].forEach(function (n) {\n    removedValue = removedValue.concat((0, _remove.default)(value, function (v) {\n      return v === n[valueKey];\n    }));\n    if (n[childrenKey]) {\n      removeAllChildrenValue(value, n, itemKeys);\n    }\n  });\n  return removedValue;\n};\nexports.removeAllChildrenValue = removeAllChildrenValue;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascadeTree/utils.ts?");
 
 /***/ }),
 
-/***/ "./src/MultiCascader/utils.ts":
-/*!************************************!*\
-  !*** ./src/MultiCascader/utils.ts ***!
-  \************************************/
+/***/ "./src/MultiCascader/MultiCascader.tsx":
+/*!*********************************************!*\
+  !*** ./src/MultiCascader/MultiCascader.tsx ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useFlattenData = useFlattenData;\nexports.useColumnData = useColumnData;\nexports.useCascadeValue = useCascadeValue;\nexports.removeAllChildrenValue = exports.getOtherItemValuesByUnselectChild = exports.isSomeParentChecked = exports.isSomeChildChecked = exports.getParents = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _uniq = _interopRequireDefault(__webpack_require__(/*! lodash/uniq */ \"./node_modules/lodash/uniq.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.ts\");\n/**\n * Get all parents of a node\n * @param node\n */\nvar getParents = function getParents(node) {\n  var parents = [];\n  if (!node.parent) {\n    return parents;\n  }\n  parents.push(node.parent);\n  parents = parents.concat(getParents(node.parent));\n  return parents;\n};\n\n/**\n * Check if any child nodes are selected.\n * @param node\n * @param value\n * @param itemKeys\n */\nexports.getParents = getParents;\nvar isSomeChildChecked = function isSomeChildChecked(node, value, itemKeys) {\n  var childrenKey = itemKeys.childrenKey,\n    valueKey = itemKeys.valueKey;\n  if (!node[childrenKey] || !value) {\n    return false;\n  }\n  return node[childrenKey].some(function (child) {\n    var _child$childrenKey;\n    if (value.some(function (n) {\n      return n === child[valueKey];\n    })) {\n      return true;\n    }\n    if ((_child$childrenKey = child[childrenKey]) !== null && _child$childrenKey !== void 0 && _child$childrenKey.length) {\n      return isSomeChildChecked(child, value, itemKeys);\n    }\n    return false;\n  });\n};\n\n/**\n * Check if the parent is selected.\n * @param node\n * @param value\n * @param itemKeys\n */\nexports.isSomeChildChecked = isSomeChildChecked;\nvar isSomeParentChecked = function isSomeParentChecked(node, value, itemKeys) {\n  var valueKey = itemKeys.valueKey;\n  if (!value) {\n    return false;\n  }\n  if (value.some(function (n) {\n    return n === node[valueKey];\n  })) {\n    return true;\n  }\n  if (node.parent) {\n    return isSomeParentChecked(node.parent, value, itemKeys);\n  }\n  return false;\n};\nexports.isSomeParentChecked = isSomeParentChecked;\nvar getOtherItemValuesByUnselectChild = function getOtherItemValuesByUnselectChild(itemNode, value, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n    childrenKey = itemKeys.childrenKey;\n  var parentValues = [];\n  var itemValues = [];\n\n  // Find the parent node of the current node by value\n  function findParent(item) {\n    parentValues.push(item[valueKey]);\n    if (value.some(function (v) {\n      return v === item[valueKey];\n    })) {\n      return item;\n    }\n    if (item.parent) {\n      var p = findParent(item.parent);\n      if (p) {\n        return p;\n      }\n    }\n    return null;\n  }\n\n  // Get child nodes through parent node\n  function pushChildValue(item) {\n    if (!item[childrenKey]) {\n      return;\n    }\n    item[childrenKey].forEach(function (n) {\n      // Determine whether it is a direct parent\n      if (parentValues.some(function (v) {\n        return v === n[valueKey];\n      }) && n[childrenKey]) {\n        pushChildValue(n);\n      } else if (n[valueKey] !== itemNode[valueKey]) {\n        itemValues.push(n[valueKey]);\n      }\n    });\n  }\n  var parent = findParent(itemNode);\n  if (!parent) {\n    return [];\n  }\n  pushChildValue(parent);\n  return itemValues;\n};\n\n/**\n * Remove the values of all children.\n */\nexports.getOtherItemValuesByUnselectChild = getOtherItemValuesByUnselectChild;\nvar removeAllChildrenValue = function removeAllChildrenValue(value, item, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n    childrenKey = itemKeys.childrenKey;\n  var removedValue = [];\n  if (!item[childrenKey]) {\n    return;\n  }\n  item[childrenKey].forEach(function (n) {\n    removedValue = removedValue.concat((0, _remove.default)(value, function (v) {\n      return v === n[valueKey];\n    }));\n    if (n[childrenKey]) {\n      removeAllChildrenValue(value, n, itemKeys);\n    }\n  });\n  return removedValue;\n};\n\n/**\n * A hook to flatten tree structure data\n * @param data\n */\nexports.removeAllChildrenValue = removeAllChildrenValue;\nfunction useFlattenData(data, itemKeys) {\n  var childrenKey = itemKeys.childrenKey;\n  var _useState = (0, _react.useState)((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey)),\n    flattenData = _useState[0],\n    setFlattenData = _useState[1];\n  var addFlattenData = (0, _react.useCallback)(function (children, parent) {\n    var nodes = children.map(function (child) {\n      return (0, _attachParent.attachParent)(child, parent);\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.UNSAFE_flattenTree)(data, itemKeys.childrenKey));\n  }, [data, itemKeys.childrenKey]);\n  return {\n    addFlattenData: addFlattenData,\n    flattenData: flattenData\n  };\n}\n\n/**\n * A hook for column data\n * @param flattenData\n */\nfunction useColumnData(flattenData) {\n  // The columns displayed in the cascading panel.\n  var _useState2 = (0, _react.useState)([flattenData.filter(function (item) {\n      return !item.parent;\n    })]),\n    columnData = _useState2[0],\n    setColumnData = _useState2[1];\n  /**\n   * Add a list of options to the cascading panel. Used for lazy loading options.\n   * @param column\n   * @param index The index of the current column.\n   */\n  function addColumn(column, index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));\n  }\n\n  /**\n   * Remove subsequent columns of the specified column\n   * @param index\n   */\n  function removeColumnByIndex(index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));\n  }\n  function enforceUpdateColumnData(nextData) {\n    var nextFlattenData = (0, _treeUtils.UNSAFE_flattenTree)(nextData);\n    setColumnData([nextFlattenData.filter(function (item) {\n      return !item.parent;\n    })]);\n  }\n  return {\n    columnData: columnData,\n    addColumn: addColumn,\n    removeColumnByIndex: removeColumnByIndex,\n    setColumnData: setColumnData,\n    enforceUpdateColumnData: enforceUpdateColumnData\n  };\n}\n\n/**\n * A hook that converts the value into a cascading value\n * @param props\n * @param flattenData\n */\nfunction useCascadeValue(props, flattenData) {\n  var valueKey = props.valueKey,\n    childrenKey = props.childrenKey,\n    uncheckableItemValues = props.uncheckableItemValues,\n    cascade = props.cascade,\n    valueProp = props.value;\n  /**\n   * Get the values of all children\n   */\n  var getChildrenValue = (0, _react.useCallback)(function (item) {\n    var values = [];\n    if (!item[childrenKey]) {\n      return values;\n    }\n    item[childrenKey].forEach(function (n) {\n      if (uncheckableItemValues && !uncheckableItemValues.some(function (v) {\n        return v === n[valueKey];\n      })) {\n        values.push(n[valueKey]);\n      }\n      values = values.concat(getChildrenValue(n));\n    });\n    return values;\n  }, [childrenKey, uncheckableItemValues, valueKey]);\n  var splitValue = (0, _react.useCallback)(function (item, checked, value) {\n    var itemValue = item[valueKey];\n    var childrenValue = getChildrenValue(item);\n    var parents = getParents(item);\n    var nextValue = [].concat(value);\n    var removedValue = [];\n    if (checked) {\n      nextValue.push(itemValue);\n\n      // Delete all values under the current node\n      removedValue = removedValue.concat(removeAllChildrenValue(nextValue, item, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }) || []);\n\n      // Traverse all ancestor nodes of the current node\n      // Then determine whether all the child nodes of these nodes are selected, and then they themselves must be selected\n      var _loop = function _loop(i) {\n        // Whether the parent node can be selected\n        var isCheckableParent = !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {\n          return v === parents[i][valueKey];\n        }));\n        if (isCheckableParent) {\n          var isCheckAll = parents[i][childrenKey]\n          // Filter out options that are marked as not selectable\n          .filter(function (n) {\n            return !(uncheckableItemValues !== null && uncheckableItemValues !== void 0 && uncheckableItemValues.some(function (v) {\n              return v === n[valueKey];\n            }));\n          })\n          // Check if all nodes are selected\n          .every(function (n) {\n            return nextValue.some(function (v) {\n              return v === n[valueKey];\n            });\n          });\n          if (isCheckAll) {\n            // Add parent node value\n            nextValue.push(parents[i][valueKey]);\n\n            // Delete all values under the parent node\n            removedValue = removedValue.concat(removeAllChildrenValue(nextValue, parents[i], {\n              valueKey: valueKey,\n              childrenKey: childrenKey\n            }) || []);\n          }\n        }\n      };\n      for (var i = 0; i < parents.length; i++) {\n        _loop(i);\n      }\n    } else {\n      var tempValue = childrenValue.concat(parents.map(function (item) {\n        return item[valueKey];\n      }));\n      nextValue = nextValue.concat(getOtherItemValuesByUnselectChild(item, nextValue, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }));\n\n      // Delete related child and parent nodes\n      removedValue = (0, _remove.default)(nextValue, function (v) {\n        // Delete yourself\n        if (v === itemValue) {\n          return true;\n        }\n        return tempValue.some(function (n) {\n          return n === v;\n        });\n      });\n    }\n    var uniqValue = (0, _uniq.default)(nextValue);\n    var uniqRemovedValue = (0, _uniq.default)(removedValue);\n    return {\n      value: uniqValue,\n      removedValue: uniqRemovedValue\n    };\n  }, [valueKey, childrenKey, uncheckableItemValues, getChildrenValue]);\n  var transformValue = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n    if (!cascade) {\n      return value;\n    }\n    var tempRemovedValue = [];\n    var nextValue = [];\n    var _loop2 = function _loop2(i) {\n      // If the value in the current value is already in the deleted list, it will not be processed\n      if (tempRemovedValue.some(function (v) {\n        return v === value[i];\n      })) {\n        return \"continue\";\n      }\n      var item = flattenData.find(function (v) {\n        return v[valueKey] === value[i];\n      });\n      if (!item) {\n        return \"continue\";\n      }\n      var sv = splitValue(item, true, value);\n      tempRemovedValue = (0, _uniq.default)(tempRemovedValue.concat(sv.removedValue));\n\n      // Get all relevant values\n      nextValue = (0, _uniq.default)(nextValue.concat(sv.value));\n    };\n    for (var i = 0; i < value.length; i++) {\n      var _ret = _loop2(i);\n      if (_ret === \"continue\") continue;\n    }\n\n    // Finally traverse all nextValue, and delete if its parent node is also nextValue\n    return nextValue.filter(function (v) {\n      var item = flattenData.find(function (n) {\n        return n[valueKey] === v;\n      });\n      if (item !== null && item !== void 0 && item.parent && nextValue.some(function (v) {\n        return v === item.parent && item.parent[valueKey];\n      })) {\n        return false;\n      }\n      return true;\n    });\n  }, [cascade, flattenData, splitValue, valueKey]);\n  var _useState3 = (0, _react.useState)(transformValue(valueProp) || []),\n    value = _useState3[0],\n    setValue = _useState3[1];\n  (0, _react.useEffect)(function () {\n    // Update value when valueProp is updated.\n    setValue(transformValue(valueProp) || []);\n  }, [transformValue, valueProp]);\n  return {\n    value: value,\n    setValue: setValue,\n    splitValue: splitValue\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../CascadeTree/utils */ \"./src/CascadeTree/utils.ts\");\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _hooks = __webpack_require__(/*! ../MultiCascadeTree/hooks */ \"./src/MultiCascadeTree/hooks/index.ts\");\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/TreeView */ \"./src/MultiCascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/SearchView */ \"./src/MultiCascadeTree/SearchView.tsx\"));\nvar _useActive2 = _interopRequireDefault(__webpack_require__(/*! ../Cascader/useActive */ \"./src/Cascader/useActive.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\",\n  _this = void 0;\nvar emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    columnHeight = props.columnHeight,\n    columnWidth = props.columnWidth,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    disabled = props.disabled,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    valueProp = props.value,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    placeholder = props.placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    popupClassName = props.popupClassName,\n    popupStyle = props.popupStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    getChildren = props.getChildren,\n    renderValue = props.renderValue,\n    renderExtraFooter = props.renderExtraFooter,\n    renderColumn = props.renderColumn,\n    renderTreeNode = props.renderTreeNode,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onChange = props.onChange,\n    onCheck = props.onCheck,\n    DEPRECATED_menuClassName = props.menuClassName,\n    DEPRECATED_menuStyle = props.menuStyle,\n    DEPRECATED_menuWidth = props.menuWidth,\n    DEPRECATED_menuHeight = props.menuHeight,\n    DEPRECATED_renderMenu = props.renderMenu,\n    DEPRECATED_renderMenuItem = props.renderMenuItem,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"classPrefix\", \"defaultValue\", \"columnHeight\", \"columnWidth\", \"childrenKey\", \"cleanable\", \"data\", \"disabled\", \"disabledItemValues\", \"value\", \"valueKey\", \"labelKey\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"placeholder\", \"placement\", \"popupClassName\", \"popupStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderExtraFooter\", \"renderColumn\", \"renderTreeNode\", \"onEntered\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onCheck\", \"menuClassName\", \"menuStyle\", \"menuWidth\", \"menuHeight\", \"renderMenu\", \"renderMenuItem\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale,\n    rtl = _useCustom.rtl;\n  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var onSelectCallback = (0, _react.useCallback)(function (node, cascadePaths, event) {\n    var _trigger$current, _trigger$current$upda;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);\n  }, [onSelect, trigger]);\n  var _useSelect = (0, _hooks.useSelect)({\n      data: data,\n      childrenKey: childrenKey,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      onSelect: onSelectCallback,\n      getChildren: getChildren\n    }),\n    selectedPaths = _useSelect.selectedPaths,\n    flattenData = _useSelect.flattenData,\n    columnData = _useSelect.columnData,\n    setColumnData = _useSelect.setColumnData,\n    setSelectedPaths = _useSelect.setSelectedPaths,\n    handleSelect = _useSelect.handleSelect;\n  var _useControlled = (0, _utils2.useControlled)(valueProp, defaultValue),\n    controlledValue = _useControlled[0];\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n  var cascadeValueProps = (0, _extends2.default)({}, itemKeys, {\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    value: controlledValue,\n    onCheck: onCheck,\n    onChange: onChange\n  });\n  var _useCascadeValue = (0, _hooks.useCascadeValue)(cascadeValueProps, flattenData),\n    value = _useCascadeValue.value,\n    setValue = _useCascadeValue.setValue,\n    handleCheck = _useCascadeValue.handleCheck;\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || [];\n  var onFocusItemCallback = (0, _react.useCallback)(function (value) {\n    var _getColumnsAndPaths = (0, _utils.getColumnsAndPaths)(data, flattenData.find(function (item) {\n        return item[valueKey] === value;\n      }), {\n        getParent: function getParent() {\n          return undefined;\n        },\n        getChildren: function getChildren(item) {\n          return item[childrenKey];\n        }\n      }),\n      columns = _getColumnsAndPaths.columns,\n      path = _getColumnsAndPaths.path;\n    setColumnData(columns);\n    setSelectedPaths(path);\n  }, [childrenKey, data, flattenData, setColumnData, setSelectedPaths, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n      rtl: rtl,\n      data: flattenData,\n      valueKey: valueKey,\n      defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n      target: function target() {\n        return overlay.current;\n      },\n      callback: onFocusItemCallback\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setLayer = _useFocusItemValue.setLayer,\n    setKeys = _useFocusItemValue.setKeys,\n    onFocusItem = _useFocusItemValue.onKeyDown;\n  var onSearchCallback = function onSearchCallback(value, event) {\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n  };\n  var _useSearch = (0, _hooks.useSearch)({\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      flattenedData: flattenData,\n      uncheckableItemValues: uncheckableItemValues,\n      onSearch: onSearchCallback\n    }),\n    items = _useSearch.items,\n    searchKeyword = _useSearch.searchKeyword,\n    setSearchKeyword = _useSearch.setSearchKeyword,\n    handleSearch = _useSearch.handleSearch;\n  var _useActive = (0, _useActive2.default)({\n      onEntered: onEntered,\n      onExited: onExited,\n      target: target,\n      setSearchKeyword: setSearchKeyword\n    }),\n    active = _useActive.active,\n    handleEntered = _useActive.handleEntered,\n    handleExited = _useActive.handleExited;\n  var handleClean = (0, _utils2.useEventCallback)(function (event) {\n    if (disabled || !target.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleMenuPressEnter = (0, _utils2.useEventCallback)(function (event) {\n    var _overlay$current;\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var renderCascadeColumn = function renderCascadeColumn(childNodes, column) {\n    var items = column.items,\n      parentItem = column.parentItem,\n      layer = column.layer;\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    } else if (typeof DEPRECATED_renderMenu === 'function') {\n      return DEPRECATED_renderMenu(items, childNodes, parentItem, layer);\n    }\n    return childNodes;\n  };\n  var renderCascadeTreeNode = function renderCascadeTreeNode(node, itemData) {\n    var render = typeof renderTreeNode === 'function' ? renderTreeNode : DEPRECATED_renderMenuItem;\n    if (typeof render === 'function') {\n      return render(node, itemData);\n    }\n    return node;\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n      left = _ref.left,\n      top = _ref.top,\n      className = _ref.className;\n    var styles = (0, _extends2.default)({}, DEPRECATED_menuStyle, popupStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('popup-multi-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: styles,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 356,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      data: items,\n      value: value,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      disabledItemValues: disabledItemValues,\n      onCheck: handleCheck,\n      onSearch: handleSearch,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 364,\n        columnNumber: 13\n      }\n    }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      cascade: cascade,\n      columnWidth: columnWidth !== null && columnWidth !== void 0 ? columnWidth : DEPRECATED_menuWidth,\n      columnHeight: columnHeight !== null && columnHeight !== void 0 ? columnHeight : DEPRECATED_menuHeight,\n      classPrefix: \"cascade-tree\",\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 378,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 407,\n        columnNumber: 9\n      }\n    });\n  }\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      hasValue: hasValue,\n      countable: countable,\n      name: 'cascader',\n      appearance: appearance,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleEntered,\n    onExited: handleExited,\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 450,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 461,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: target,\n    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 462,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  inline: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.bool, 'Use `<MultiCascadeTree>` instead.'),\n  renderMenu: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"renderColumn\" property instead.'),\n  renderMenuItem: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"renderTreeNode\" property instead.'),\n  menuWidth: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use \"columnWidth\" property instead.'),\n  menuHeight: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.number, 'Use \"columnHeight\" property instead.')\n});\nvar _default = MultiCascader;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
+
+/***/ }),
+
+/***/ "./src/MultiCascader/index.tsx":
+/*!*************************************!*\
+  !*** ./src/MultiCascader/index.tsx ***!
+  \*************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _MultiCascader = _interopRequireDefault(__webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/MultiCascader.tsx\"));\nvar _default = _MultiCascader.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/index.tsx?");
 
 /***/ }),
 
@@ -8265,7 +8496,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _Collapse = _interopRequireDefault(__webpack_require__(/*! ../Animation/Collapse */ \"./src/Animation/Collapse.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _PanelGroup = __webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\");\nvar _AccordionButton = _interopRequireDefault(__webpack_require__(/*! ./AccordionButton */ \"./src/Panel/AccordionButton.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Panel/Panel.tsx\",\n  _this = void 0;\n/**\n * The `Panel` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/panel\n */\nvar Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    bodyFill = props.bodyFill,\n    bordered = props.bordered,\n    children = props.children,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'panel' : _props$classPrefix,\n    caretAs = props.caretAs,\n    collapsibleProp = props.collapsible,\n    defaultExpanded = props.defaultExpanded,\n    disabled = props.disabled,\n    eventKey = props.eventKey,\n    expandedProp = props.expanded,\n    header = props.header,\n    headerRole = props.headerRole,\n    _props$panelRole = props.panelRole,\n    panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,\n    shaded = props.shaded,\n    idProp = props.id,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onEntering = props.onEntering,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onExiting = props.onExiting,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"bodyFill\", \"bordered\", \"children\", \"className\", \"classPrefix\", \"caretAs\", \"collapsible\", \"defaultExpanded\", \"disabled\", \"eventKey\", \"expanded\", \"header\", \"headerRole\", \"panelRole\", \"shaded\", \"id\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var panelId = id + \"-panel\";\n  var btnId = id + \"-btn\";\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var _ref = (0, _react.useContext)(_PanelGroup.PanelGroupContext) || {},\n    accordion = _ref.accordion,\n    activeKey = _ref.activeKey,\n    onGroupSelect = _ref.onGroupSelect;\n  var _useControlled = (0, _utils.useControlled)(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),\n    expandedState = _useControlled[0],\n    setExpanded = _useControlled[1];\n  var collapsible = collapsibleProp;\n  var expanded = expandedState;\n  if (accordion) {\n    collapsible = true;\n  }\n  if (collapsible) {\n    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {\n      expanded = false;\n    }\n  }\n  (0, _react.useEffect)(function () {\n    if (accordion && typeof activeKey !== 'undefined') {\n      setExpanded(activeKey === eventKey);\n    }\n  }, [accordion, activeKey, eventKey, setExpanded]);\n  var handleSelect = (0, _utils.useEventCallback)(function (event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);\n    setExpanded(!expanded);\n  });\n  var renderBody = function renderBody(bodyProps) {\n    var classes = prefix('body', {\n      'body-fill': bodyFill\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, bodyProps, {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 131,\n        columnNumber: 9\n      }\n    }), children);\n  };\n  var renderCollapsibleBody = function renderCollapsibleBody() {\n    return /*#__PURE__*/_react.default.createElement(_Collapse.default, {\n      in: expanded,\n      onEnter: onEnter,\n      onEntering: onEntering,\n      onEntered: onEntered,\n      onExit: onExit,\n      onExiting: onExiting,\n      onExited: onExited,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 138,\n        columnNumber: 7\n      }\n    }, function (transitionProps, ref) {\n      var className = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, rest, {\n        className: merge(className, prefix('collapse')),\n        ref: ref,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 150,\n          columnNumber: 13\n        }\n      }), renderBody({\n        role: panelRole,\n        id: panelId,\n        'aria-labelledby': btnId\n      }));\n    });\n  };\n  var renderHeading = function renderHeading() {\n    if (!header) {\n      return null;\n    }\n    var headerElement;\n    if (! /*#__PURE__*/_react.default.isValidElement(header) || Array.isArray(header)) {\n      headerElement = /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('title'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 166,\n          columnNumber: 25\n        }\n      }, header);\n    } else {\n      var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));\n      headerElement = /*#__PURE__*/_react.default.cloneElement(header, {\n        className: _className\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(\"h2\", {\n      className: prefix('header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 173,\n        columnNumber: 9\n      }\n    }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {\n      id: btnId,\n      role: headerRole,\n      caretAs: caretAs,\n      controlId: panelId,\n      disabled: disabled,\n      expanded: expanded,\n      onClick: handleSelect,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 175,\n        columnNumber: 13\n      }\n    }, headerElement) : headerElement);\n  };\n  var classes = merge(className, withClassPrefix({\n    in: expanded,\n    collapsible: collapsible,\n    bordered: bordered,\n    shaded: shaded\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    id: idProp,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 199,\n      columnNumber: 7\n    }\n  }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());\n});\nPanel.displayName = 'Panel';\nPanel.propTypes = {\n  collapsible: _propTypes.default.bool,\n  bordered: _propTypes.default.bool,\n  shaded: _propTypes.default.bool,\n  bodyFill: _propTypes.default.bool,\n  header: _propTypes.default.any,\n  defaultExpanded: _propTypes.default.bool,\n  expanded: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  panelRole: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  onEnter: _propTypes.default.func,\n  onEntering: _propTypes.default.func,\n  onEntered: _propTypes.default.func,\n  onExit: _propTypes.default.func,\n  onExiting: _propTypes.default.func,\n  onExited: _propTypes.default.func,\n  className: _propTypes.default.string\n};\nvar _default = Panel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Panel/Panel.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _Collapse = _interopRequireDefault(__webpack_require__(/*! ../Animation/Collapse */ \"./src/Animation/Collapse.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _PanelGroup = __webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\");\nvar _Heading = _interopRequireDefault(__webpack_require__(/*! ../Heading */ \"./src/Heading/index.tsx\"));\nvar _AccordionButton = _interopRequireDefault(__webpack_require__(/*! ./AccordionButton */ \"./src/Panel/AccordionButton.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Panel/Panel.tsx\",\n  _this = void 0;\n/**\n * The `Panel` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/panel\n */\nvar Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    bodyFill = props.bodyFill,\n    bordered = props.bordered,\n    children = props.children,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'panel' : _props$classPrefix,\n    caretAs = props.caretAs,\n    collapsibleProp = props.collapsible,\n    defaultExpanded = props.defaultExpanded,\n    disabled = props.disabled,\n    eventKey = props.eventKey,\n    expandedProp = props.expanded,\n    header = props.header,\n    headerRole = props.headerRole,\n    _props$panelRole = props.panelRole,\n    panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,\n    shaded = props.shaded,\n    idProp = props.id,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onEntering = props.onEntering,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onExiting = props.onExiting,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"bodyFill\", \"bordered\", \"children\", \"className\", \"classPrefix\", \"caretAs\", \"collapsible\", \"defaultExpanded\", \"disabled\", \"eventKey\", \"expanded\", \"header\", \"headerRole\", \"panelRole\", \"shaded\", \"id\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var panelId = id + \"-panel\";\n  var btnId = id + \"-btn\";\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var _ref = (0, _react.useContext)(_PanelGroup.PanelGroupContext) || {},\n    accordion = _ref.accordion,\n    activeKey = _ref.activeKey,\n    onGroupSelect = _ref.onGroupSelect;\n  var _useControlled = (0, _utils.useControlled)(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),\n    expandedState = _useControlled[0],\n    setExpanded = _useControlled[1];\n  var collapsible = collapsibleProp;\n  var expanded = expandedState;\n  if (accordion) {\n    collapsible = true;\n  }\n  if (collapsible) {\n    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {\n      expanded = false;\n    }\n  }\n  (0, _react.useEffect)(function () {\n    if (accordion && typeof activeKey !== 'undefined') {\n      setExpanded(activeKey === eventKey);\n    }\n  }, [accordion, activeKey, eventKey, setExpanded]);\n  var handleSelect = (0, _utils.useEventCallback)(function (event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);\n    setExpanded(!expanded);\n  });\n  var renderBody = function renderBody(bodyProps) {\n    var classes = prefix('body', {\n      'body-fill': bodyFill\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, bodyProps, {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 132,\n        columnNumber: 9\n      }\n    }), children);\n  };\n  var renderCollapsibleBody = function renderCollapsibleBody() {\n    return /*#__PURE__*/_react.default.createElement(_Collapse.default, {\n      in: expanded,\n      onEnter: onEnter,\n      onEntering: onEntering,\n      onEntered: onEntered,\n      onExit: onExit,\n      onExiting: onExiting,\n      onExited: onExited,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 139,\n        columnNumber: 7\n      }\n    }, function (transitionProps, ref) {\n      var className = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, rest, {\n        className: merge(className, prefix('collapse')),\n        ref: ref,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 151,\n          columnNumber: 13\n        }\n      }), renderBody({\n        role: panelRole,\n        id: panelId,\n        'aria-labelledby': btnId\n      }));\n    });\n  };\n  var renderHeading = function renderHeading() {\n    if (!header) {\n      return null;\n    }\n    var headerElement;\n    if (! /*#__PURE__*/_react.default.isValidElement(header) || Array.isArray(header)) {\n      headerElement = /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('title'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 167,\n          columnNumber: 25\n        }\n      }, header);\n    } else {\n      var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));\n      headerElement = /*#__PURE__*/_react.default.cloneElement(header, {\n        className: _className\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(_Heading.default, {\n      level: 2,\n      className: prefix('header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 174,\n        columnNumber: 9\n      }\n    }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {\n      id: btnId,\n      role: headerRole,\n      caretAs: caretAs,\n      controlId: panelId,\n      disabled: disabled,\n      expanded: expanded,\n      onClick: handleSelect,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 176,\n        columnNumber: 13\n      }\n    }, headerElement) : headerElement);\n  };\n  var classes = merge(className, withClassPrefix({\n    in: expanded,\n    collapsible: collapsible,\n    bordered: bordered,\n    shaded: shaded\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    id: idProp,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 200,\n      columnNumber: 7\n    }\n  }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());\n});\nPanel.displayName = 'Panel';\nPanel.propTypes = {\n  collapsible: _propTypes.default.bool,\n  bordered: _propTypes.default.bool,\n  shaded: _propTypes.default.bool,\n  bodyFill: _propTypes.default.bool,\n  header: _propTypes.default.any,\n  defaultExpanded: _propTypes.default.bool,\n  expanded: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  panelRole: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  onEnter: _propTypes.default.func,\n  onEntering: _propTypes.default.func,\n  onEntered: _propTypes.default.func,\n  onExit: _propTypes.default.func,\n  onExiting: _propTypes.default.func,\n  onExited: _propTypes.default.func,\n  className: _propTypes.default.string\n};\nvar _default = Panel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Panel/Panel.tsx?");
 
 /***/ }),
 
@@ -8364,7 +8595,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Popover/Popover.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3;\n/**\n * The `Popover` component is used to display a popup window for a target component.\n * @see https://rsuitejs.com/components/popover\n */\nvar Popover = /*#__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 ? 'popover' : _props$classPrefix,\n    title = props.title,\n    children = props.children,\n    style = props.style,\n    visible = props.visible,\n    className = props.className,\n    full = props.full,\n    _props$arrow = props.arrow,\n    arrow = _props$arrow === void 0 ? true : _props$arrow,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"title\", \"children\", \"style\", \"visible\", \"className\", \"full\", \"arrow\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix({\n    full: full\n  }));\n  var styles = (0, _extends2.default)({\n    display: 'block',\n    opacity: visible ? 1 : undefined\n  }, style);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"dialog\"\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 49,\n      columnNumber: 7\n    }\n  }), arrow && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"arrow\"]))),\n    \"aria-hidden\": true,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 19\n    }\n  }), title && /*#__PURE__*/_react.default.createElement(\"h3\", {\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"title\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 51,\n      columnNumber: 19\n    }\n  }, title), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"content\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 52,\n      columnNumber: 9\n    }\n  }, children));\n});\nPopover.displayName = 'Popover';\nPopover.propTypes = {\n  as: _propTypes.default.elementType,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  title: _propTypes.default.node,\n  style: _propTypes.default.object,\n  visible: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  full: _propTypes.default.bool,\n  arrow: _propTypes.default.bool\n};\nvar _default = Popover;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Popover/Popover.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Heading = _interopRequireDefault(__webpack_require__(/*! ../Heading */ \"./src/Heading/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Popover/Popover.tsx\",\n  _this = void 0,\n  _templateObject,\n  _templateObject2,\n  _templateObject3;\n/**\n * The `Popover` component is used to display a popup window for a target component.\n * @see https://rsuitejs.com/components/popover\n */\nvar Popover = /*#__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 ? 'popover' : _props$classPrefix,\n    title = props.title,\n    children = props.children,\n    style = props.style,\n    visible = props.visible,\n    className = props.className,\n    full = props.full,\n    _props$arrow = props.arrow,\n    arrow = _props$arrow === void 0 ? true : _props$arrow,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"title\", \"children\", \"style\", \"visible\", \"className\", \"full\", \"arrow\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix({\n    full: full\n  }));\n  var styles = (0, _extends2.default)({\n    display: 'block',\n    opacity: visible ? 1 : undefined\n  }, style);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"dialog\"\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 7\n    }\n  }), arrow && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"arrow\"]))),\n    \"aria-hidden\": true,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 51,\n      columnNumber: 19\n    }\n  }), title && /*#__PURE__*/_react.default.createElement(_Heading.default, {\n    level: 3,\n    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"title\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 53,\n      columnNumber: 11\n    }\n  }, title), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"content\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 57,\n      columnNumber: 9\n    }\n  }, children));\n});\nPopover.displayName = 'Popover';\nPopover.propTypes = {\n  as: _propTypes.default.elementType,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  title: _propTypes.default.node,\n  style: _propTypes.default.object,\n  visible: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  full: _propTypes.default.bool,\n  arrow: _propTypes.default.bool\n};\nvar _default = Popover;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Popover/Popover.tsx?");
 
 /***/ }),
 
@@ -8650,7 +8881,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\",\n  _this = void 0,\n  _templateObject;\nvar emptyArray = [];\n/**\n * The `SelectPicker` component is used to select an item from a list of data.\n * @see https://rsuitejs.com/components/select-picker/\n */\nvar SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    valueProp = props.value,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    placeholder = props.placeholder,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    groupBy = props.groupBy,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    virtualized = props.virtualized,\n    listProps = props.listProps,\n    id = props.id,\n    onGroupTitleClick = props.onGroupTitleClick,\n    searchBy = props.searchBy,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    onSearch = props.onSearch,\n    onClose = props.onClose,\n    onOpen = props.onOpen,\n    sort = props.sort,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderMenuGroup = props.renderMenuGroup,\n    renderMenuItem = props.renderMenuItem,\n    renderExtraFooter = props.renderExtraFooter,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"data\", \"valueKey\", \"labelKey\", \"value\", \"classPrefix\", \"placeholder\", \"defaultValue\", \"disabled\", \"cleanable\", \"placement\", \"menuClassName\", \"menuAutoWidth\", \"menuMaxHeight\", \"menuStyle\", \"groupBy\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"disabledItemValues\", \"virtualized\", \"listProps\", \"id\", \"onGroupTitleClick\", \"searchBy\", \"onEntered\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"onClose\", \"onOpen\", \"sort\", \"renderValue\", \"renderMenu\", \"renderMenuGroup\", \"renderMenuItem\", \"renderExtraFooter\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale;\n  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _ref[0],\n    setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n      data: data,\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(data, {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, filteredData, event) {\n        var _filteredData$;\n        // The first option after filtering is the focus.\n        setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    filteredData = _useSearch.filteredData,\n    resetSearch = _useSearch.resetSearch,\n    handleSearch = _useSearch.handleSearch; // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    var _target$current;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleMenuPressEnter = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var focusItem = data.find(function (item) {\n      return (0, _utils.shallowEqual)(item[valueKey], focusItemValue);\n    });\n    setValue(focusItemValue);\n    handleSelect(focusItemValue, focusItem, event);\n    handleChangeValue(focusItemValue, event);\n    handleClose();\n  });\n  var handleItemSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onClose: function onClose() {\n      setFocusItemValue(null);\n    }\n  }, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    resetSearch();\n    setActive(false);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  });\n  var handleEntered = (0, _utils.useEventCallback)(function () {\n    setActive(true);\n    setFocusItemValue(value);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  });\n\n  // Find active `MenuItem` by `value`\n  var activeItem = data.find(function (item) {\n    return (0, _utils.shallowEqual)(item[valueKey], value);\n  });\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var selectedElement = placeholder;\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData;\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-select-menu',\n      listItemClassPrefix: 'picker-select-menu-item',\n      listItemAs: _Picker.ListItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 337,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 361,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 365,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 374,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'select',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 398,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 407,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    disabled: disabled,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    active: active,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 408,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nSelectPicker.displayName = 'SelectPicker';\nSelectPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  /**\n   * group by key in `data`\n   */\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = SelectPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\",\n  _this = void 0,\n  _templateObject;\nvar emptyArray = [];\n/**\n * The `SelectPicker` component is used to select an item from a list of data.\n * @see https://rsuitejs.com/components/select-picker/\n */\nvar SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    valueProp = props.value,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    placeholder = props.placeholder,\n    defaultValue = props.defaultValue,\n    disabled = props.disabled,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    groupBy = props.groupBy,\n    overrideLocale = props.locale,\n    toggleAs = props.toggleAs,\n    style = props.style,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    virtualized = props.virtualized,\n    listProps = props.listProps,\n    id = props.id,\n    onGroupTitleClick = props.onGroupTitleClick,\n    searchBy = props.searchBy,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onChange = props.onChange,\n    onSelect = props.onSelect,\n    onSearch = props.onSearch,\n    sort = props.sort,\n    renderValue = props.renderValue,\n    renderMenu = props.renderMenu,\n    renderMenuGroup = props.renderMenuGroup,\n    renderMenuItem = props.renderMenuItem,\n    renderExtraFooter = props.renderExtraFooter,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"appearance\", \"data\", \"valueKey\", \"labelKey\", \"value\", \"classPrefix\", \"placeholder\", \"defaultValue\", \"disabled\", \"cleanable\", \"placement\", \"menuClassName\", \"menuAutoWidth\", \"menuMaxHeight\", \"menuStyle\", \"groupBy\", \"locale\", \"toggleAs\", \"style\", \"searchable\", \"disabledItemValues\", \"virtualized\", \"listProps\", \"id\", \"onGroupTitleClick\", \"searchBy\", \"onEntered\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"sort\", \"renderValue\", \"renderMenu\", \"renderMenuGroup\", \"renderMenuItem\", \"renderExtraFooter\"]);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    locale = _useCustom.locale;\n  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),\n    value = _ref[0],\n    setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n      data: data,\n      valueKey: valueKey,\n      target: function target() {\n        return overlay.current;\n      }\n    }),\n    focusItemValue = _useFocusItemValue.focusItemValue,\n    setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n    onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.\n  var _useSearch = (0, _Picker.useSearch)(data, {\n      labelKey: labelKey,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, filteredData, event) {\n        var _filteredData$;\n        // The first option after filtering is the focus.\n        setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    searchKeyword = _useSearch.searchKeyword,\n    filteredData = _useSearch.filteredData,\n    resetSearch = _useSearch.resetSearch,\n    handleSearch = _useSearch.handleSearch; // Use component active state to support keyboard events.\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    var _target$current;\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  });\n  var handleMenuPressEnter = (0, _utils.useEventCallback)(function (event) {\n    if (!focusItemValue) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    var focusItem = data.find(function (item) {\n      return (0, _utils.shallowEqual)(item[valueKey], focusItemValue);\n    });\n    setValue(focusItemValue);\n    handleSelect(focusItemValue, focusItem, event);\n    handleChangeValue(focusItemValue, event);\n    handleClose();\n  });\n  var handleItemSelect = (0, _utils.useEventCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  });\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleExited = (0, _utils.useEventCallback)(function () {\n    resetSearch();\n    setActive(false);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');\n    setFocusItemValue(null);\n  });\n  var handleEntered = (0, _utils.useEventCallback)(function () {\n    setActive(true);\n    setFocusItemValue(value);\n  });\n\n  // Find active `MenuItem` by `value`\n  var activeItem = data.find(function (item) {\n    return (0, _utils.shallowEqual)(item[valueKey], value);\n  });\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var selectedElement = placeholder;\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  var renderPopup = function renderPopup(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData;\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-select-menu',\n      listItemClassPrefix: 'picker-select-menu-item',\n      listItemAs: _Picker.ListItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items\n      // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 331,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 355,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 359,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 368,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValue,\n      name: 'select',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 392,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 401,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    disabled: disabled,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    active: active,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 402,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nSelectPicker.displayName = 'SelectPicker';\nSelectPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  /**\n   * group by key in `data`\n   */\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = SelectPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
 
 /***/ }),
 
@@ -9138,6 +9369,28 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Text/Text.tsx":
+/*!***************************!*\
+  !*** ./src/Text/Text.tsx ***!
+  \***************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Text/Text.tsx\",\n  _this = void 0;\nvar fontSizeMap = {\n  sm: 12,\n  md: 14,\n  lg: 16,\n  xl: 18,\n  xxl: 20\n};\n/**\n *\n * The `Text` component is used to display text.\n *\n * @see https://rsuitejs.com/components/text\n */\nvar Text = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'p' : _props$as,\n    align = props.align,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'text' : _props$classPrefix,\n    color = props.color,\n    className = props.className,\n    maxLines = props.maxLines,\n    weight = props.weight,\n    muted = props.muted,\n    transform = props.transform,\n    size = props.size,\n    style = props.style,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"align\", \"classPrefix\", \"color\", \"className\", \"maxLines\", \"weight\", \"muted\", \"transform\", \"size\", \"style\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var classes = merge(className, withClassPrefix(color, align, weight, transform, {\n    muted: muted,\n    ellipsis: maxLines\n  }));\n  var styles = (0, _extends2.default)({\n    fontSize: fontSizeMap[size] || size\n  }, maxLines ? {\n    WebkitLineClamp: maxLines\n  } : null, style);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 81,\n      columnNumber: 10\n    }\n  }));\n});\nText.displayName = 'Text';\nText.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  as: _propTypes.default.elementType,\n  size: _propTypes.default.oneOfType([_propTypes.default.number, (0, _propTypes2.oneOf)(['sm', 'md', 'lg', 'xl', 'xxl'])]),\n  muted: _propTypes.default.bool,\n  transform: (0, _propTypes2.oneOf)(['uppercase', 'lowercase', 'capitalize']),\n  align: (0, _propTypes2.oneOf)(['left', 'center', 'right', 'justify']),\n  weight: (0, _propTypes2.oneOf)(['thin', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold']),\n  maxLines: _propTypes.default.number\n};\nvar _default = Text;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Text/Text.tsx?");
+
+/***/ }),
+
+/***/ "./src/Text/index.tsx":
+/*!****************************!*\
+  !*** ./src/Text/index.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\");\nexports.__esModule = true;\nexports[\"default\"] = exports.TextProps = void 0;\nvar _Text = _interopRequireWildcard(__webpack_require__(/*! ./Text */ \"./src/Text/Text.tsx\"));\nexports.TextProps = _Text.TextProps;\nvar _default = _Text.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Text/index.tsx?");
+
+/***/ }),
+
 /***/ "./src/Timeline/Timeline.tsx":
 /*!***********************************!*\
   !*** ./src/Timeline/Timeline.tsx ***!
@@ -9266,7 +9519,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nvar TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    style = props.style,\n    showIndentLine = props.showIndentLine,\n    controlledValue = props.value,\n    overrideLocale = props.locale,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    className = props.className,\n    disabled = props.disabled,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    searchKeyword = props.searchKeyword,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    draggable = props.draggable,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    id = props.id,\n    listProps = props.listProps,\n    getChildren = props.getChildren,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onOpen = props.onOpen,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onChange = props.onChange,\n    onEntered = props.onEntered,\n    onClose = props.onClose,\n    onDragEnd = props.onDragEnd,\n    onDragStart = props.onDragStart,\n    onDragEnter = props.onDragEnter,\n    onDragLeave = props.onDragLeave,\n    onDragOver = props.onDragOver,\n    onDrop = props.onDrop,\n    onExpand = props.onExpand,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    renderValue = props.renderValue,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"appearance\", \"style\", \"showIndentLine\", \"value\", \"locale\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"searchable\", \"virtualized\", \"classPrefix\", \"defaultValue\", \"placeholder\", \"searchKeyword\", \"menuClassName\", \"menuAutoWidth\", \"searchBy\", \"toggleAs\", \"labelKey\", \"valueKey\", \"childrenKey\", \"draggable\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"id\", \"listProps\", \"getChildren\", \"renderTreeIcon\", \"renderTreeNode\", \"onExit\", \"onExited\", \"onClean\", \"onOpen\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onChange\", \"onEntered\", \"onClose\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    focusItemValue = _useState2[0],\n    setFocusItemValue = _useState2[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      callback: function callback() {\n        // after flattenData, always trigger re-render\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),\n    treePrefix = _useClassNames2.prefix,\n    withTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeDrag = (0, _treeUtils.useTreeDrag)(),\n    dragNodeKeys = _useTreeDrag.dragNodeKeys,\n    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,\n    dragNode = _useTreeDrag.dragNode,\n    dropNodePosition = _useTreeDrag.dropNodePosition,\n    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,\n    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,\n    setDragNode = _useTreeDrag.setDragNode,\n    setDropNodePosition = _useTreeDrag.setDropNodePosition;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  var getDropData = function getDropData(nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n      /** dropNode */\n      dropNode: nodeData,\n      /** dragAndDrop Position type */\n      dropNodePosition: dropNodePosition,\n      createUpdateDataFunction: (0, _treeUtils.createUpdateTreeDataFunction)({\n        dragNode: dragNode,\n        dropNode: nodeData,\n        dropNodePosition: dropNodePosition\n      }, options)\n    };\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {\n    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      index: index,\n      layer: layer,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(item, node[valueKey]);\n      }),\n      expand: node.expand,\n      active: (0, _utils.shallowEqual)(node[valueKey], value),\n      focus: (0, _utils.shallowEqual)(node[valueKey], focusItemValue),\n      visible: node.visible,\n      draggable: draggable,\n      dragging: (0, _utils.shallowEqual)(node[valueKey], draggingNode[valueKey]),\n      children: node[childrenKey],\n      nodeData: node,\n      disabled: disabledItemValues.some(function (disabledItem) {\n        return (0, _utils.shallowEqual)(disabledItem, node[valueKey]);\n      }),\n      dragOver: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER,\n      dragOverTop: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,\n      dragOverBottom: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,\n      onSelect: handleSelect,\n      onDragStart: handleDragStart,\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: handleDrop,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (nodeData, event) {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    if (!nodeData) {\n      return;\n    }\n    var nodeValue = nodeData[valueKey];\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\n    setFocusItemValue(nodeData[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, (0, _treeUtils.getPathTowardsItem)(nodeData, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (draggable) {\n      var _event$dataTransfer;\n      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));\n      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);\n      setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));\n      setDragNode(flattenNodes[nodeData.refKey]);\n      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);\n    }\n  });\n  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  });\n  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      event.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    if (dragNode && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {\n      var lastDropNodePosition = (0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]);\n      if (lastDropNodePosition === dropNodePosition) return;\n      setDropNodePosition(lastDropNodePosition);\n    }\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  });\n  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  });\n  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  });\n  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      console.error('Cannot drag a node to itself and its children');\n    } else {\n      var dropData = getDropData(nodeData);\n      onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);\n    }\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$ope;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$ope = _trigger$current2.open) === null || _trigger$current2$ope === void 0 ? void 0 : _trigger$current2$ope.call(_trigger$current2);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current3, _trigger$current3$clo, _target$current2;\n    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$clo = _trigger$current3.close) === null || _trigger$current3$clo === void 0 ? void 0 : _trigger$current3$clo.call(_trigger$current3);\n    setSearchKeyword('');\n    setActive(false);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + treePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + treePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = (0, _utils.useEventCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    if (!isControlled) {\n      setValue(null);\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  });\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer, index), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = treePrefix('open');\n      var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 642,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, node.refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 643,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 644,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child, i) {\n        return renderNode(child, i, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: treePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 647,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, node.refKey);\n      },\n      key: node[valueKey]\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 657,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!node.visible) {\n      return null;\n    }\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer), {\n      style: style,\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, node.refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 683,\n        columnNumber: 23\n      }\n    }));\n  };\n  var renderTree = function renderTree() {\n    var _merge2;\n    var classes = merge(withTreeClassPrefix({\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style),\n        onKeyDown: handleTreeKeyDown\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      treeRootClassName: treePrefix('root'),\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 704,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 706,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 711,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 736,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 745,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction2.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValidValue,\n      name: 'tree',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(onClose, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 790,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 802,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 803,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  height: _propTypes.default.number,\n  draggable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  menuAutoWidth: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  defaultExpandAll: _propTypes.default.bool,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  renderExtraFooter: _propTypes.default.func,\n  renderDragNode: _propTypes.default.func,\n  searchBy: _propTypes.default.func\n});\nvar _default = TreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nvar TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    style = props.style,\n    showIndentLine = props.showIndentLine,\n    controlledValue = props.value,\n    overrideLocale = props.locale,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    className = props.className,\n    disabled = props.disabled,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    searchKeyword = props.searchKeyword,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    draggable = props.draggable,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    id = props.id,\n    listProps = props.listProps,\n    getChildren = props.getChildren,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onChange = props.onChange,\n    onEntered = props.onEntered,\n    onDragEnd = props.onDragEnd,\n    onDragStart = props.onDragStart,\n    onDragEnter = props.onDragEnter,\n    onDragLeave = props.onDragLeave,\n    onDragOver = props.onDragOver,\n    onDrop = props.onDrop,\n    onExpand = props.onExpand,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    renderValue = props.renderValue,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"appearance\", \"style\", \"showIndentLine\", \"value\", \"locale\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"searchable\", \"virtualized\", \"classPrefix\", \"defaultValue\", \"placeholder\", \"searchKeyword\", \"menuClassName\", \"menuAutoWidth\", \"searchBy\", \"toggleAs\", \"labelKey\", \"valueKey\", \"childrenKey\", \"draggable\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"id\", \"listProps\", \"getChildren\", \"renderTreeIcon\", \"renderTreeNode\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onChange\", \"onEntered\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    focusItemValue = _useState2[0],\n    setFocusItemValue = _useState2[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      callback: function callback() {\n        // after flattenData, always trigger re-render\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),\n    treePrefix = _useClassNames2.prefix,\n    withTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeDrag = (0, _treeUtils.useTreeDrag)(),\n    dragNodeKeys = _useTreeDrag.dragNodeKeys,\n    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,\n    dragNode = _useTreeDrag.dragNode,\n    dropNodePosition = _useTreeDrag.dropNodePosition,\n    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,\n    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,\n    setDragNode = _useTreeDrag.setDragNode,\n    setDropNodePosition = _useTreeDrag.setDropNodePosition;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  var getDropData = function getDropData(nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n      /** dropNode */\n      dropNode: nodeData,\n      /** dragAndDrop Position type */\n      dropNodePosition: dropNodePosition,\n      createUpdateDataFunction: (0, _treeUtils.createUpdateTreeDataFunction)({\n        dragNode: dragNode,\n        dropNode: nodeData,\n        dropNodePosition: dropNodePosition\n      }, options)\n    };\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {\n    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      index: index,\n      layer: layer,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(item, node[valueKey]);\n      }),\n      expand: node.expand,\n      active: (0, _utils.shallowEqual)(node[valueKey], value),\n      focus: (0, _utils.shallowEqual)(node[valueKey], focusItemValue),\n      visible: node.visible,\n      draggable: draggable,\n      dragging: (0, _utils.shallowEqual)(node[valueKey], draggingNode[valueKey]),\n      children: node[childrenKey],\n      nodeData: node,\n      disabled: disabledItemValues.some(function (disabledItem) {\n        return (0, _utils.shallowEqual)(disabledItem, node[valueKey]);\n      }),\n      dragOver: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER,\n      dragOverTop: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,\n      dragOverBottom: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,\n      onSelect: handleSelect,\n      onDragStart: handleDragStart,\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: handleDrop,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (nodeData, event) {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    if (!nodeData) {\n      return;\n    }\n    var nodeValue = nodeData[valueKey];\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\n    setFocusItemValue(nodeData[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, (0, _treeUtils.getPathTowardsItem)(nodeData, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (draggable) {\n      var _event$dataTransfer;\n      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));\n      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);\n      setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));\n      setDragNode(flattenNodes[nodeData.refKey]);\n      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);\n    }\n  });\n  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  });\n  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      event.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    if (dragNode && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {\n      var lastDropNodePosition = (0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]);\n      if (lastDropNodePosition === dropNodePosition) return;\n      setDropNodePosition(lastDropNodePosition);\n    }\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  });\n  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  });\n  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  });\n  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      console.error('Cannot drag a node to itself and its children');\n    } else {\n      var dropData = getDropData(nodeData);\n      onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);\n    }\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    focusActiveNode();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _target$current2;\n    setSearchKeyword('');\n    setActive(false);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + treePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + treePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = (0, _utils.useEventCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    if (!isControlled) {\n      setValue(null);\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  });\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer, index), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = treePrefix('open');\n      var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 636,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, node.refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 637,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 638,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child, i) {\n        return renderNode(child, i, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: treePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 641,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, node.refKey);\n      },\n      key: node[valueKey]\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 651,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!node.visible) {\n      return null;\n    }\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer), {\n      style: style,\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, node.refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 677,\n        columnNumber: 23\n      }\n    }));\n  };\n  var renderTree = function renderTree() {\n    var _merge2;\n    var classes = merge(withTreeClassPrefix({\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style),\n        onKeyDown: handleTreeKeyDown\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      treeRootClassName: treePrefix('root'),\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 698,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 700,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 705,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 730,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 739,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction2.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValidValue,\n      name: 'tree',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExit: onExit,\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 784,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 796,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 797,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  height: _propTypes.default.number,\n  draggable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  menuAutoWidth: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  defaultExpandAll: _propTypes.default.bool,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  renderExtraFooter: _propTypes.default.func,\n  renderDragNode: _propTypes.default.func,\n  searchBy: _propTypes.default.func\n});\nvar _default = TreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
 
 /***/ }),
 
@@ -9376,7 +9629,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.Tabs = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.InlineEdit = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ./Button */ \"./src/Button/index.tsx\"));\nexports.Button = _Button.default;\nvar _IconButton = _interopRequireDefault(__webpack_require__(/*! ./IconButton */ \"./src/IconButton/index.tsx\"));\nexports.IconButton = _IconButton.default;\nvar _ButtonToolbar = _interopRequireDefault(__webpack_require__(/*! ./ButtonToolbar */ \"./src/ButtonToolbar/index.tsx\"));\nexports.ButtonToolbar = _ButtonToolbar.default;\nvar _ButtonGroup = _interopRequireDefault(__webpack_require__(/*! ./ButtonGroup */ \"./src/ButtonGroup/index.tsx\"));\nexports.ButtonGroup = _ButtonGroup.default;\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ./Whisper */ \"./src/Whisper/index.tsx\"));\nexports.Whisper = _Whisper.default;\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ./Tooltip */ \"./src/Tooltip/index.tsx\"));\nexports.Tooltip = _Tooltip.default;\nvar _Popover = _interopRequireDefault(__webpack_require__(/*! ./Popover */ \"./src/Popover/index.tsx\"));\nexports.Popover = _Popover.default;\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ./Modal */ \"./src/Modal/index.tsx\"));\nexports.Modal = _Modal.default;\nvar _Notification = _interopRequireDefault(__webpack_require__(/*! ./Notification */ \"./src/Notification/index.tsx\"));\nexports.Notification = _Notification.default;\nvar _Message = _interopRequireDefault(__webpack_require__(/*! ./Message */ \"./src/Message/index.tsx\"));\nexports.Message = _Message.default;\nvar _Drawer = _interopRequireDefault(__webpack_require__(/*! ./Drawer */ \"./src/Drawer/index.tsx\"));\nexports.Drawer = _Drawer.default;\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ./Loader */ \"./src/Loader/index.tsx\"));\nexports.Loader = _Loader.default;\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ./SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nexports.SafeAnchor = _SafeAnchor.default;\nvar _Placeholder = _interopRequireDefault(__webpack_require__(/*! ./Placeholder */ \"./src/Placeholder/index.tsx\"));\nexports.Placeholder = _Placeholder.default;\nvar _Badge = _interopRequireDefault(__webpack_require__(/*! ./Badge */ \"./src/Badge/index.tsx\"));\nexports.Badge = _Badge.default;\nvar _Avatar = _interopRequireDefault(__webpack_require__(/*! ./Avatar */ \"./src/Avatar/index.tsx\"));\nexports.Avatar = _Avatar.default;\nvar _AvatarGroup = _interopRequireDefault(__webpack_require__(/*! ./AvatarGroup */ \"./src/AvatarGroup/index.tsx\"));\nexports.AvatarGroup = _AvatarGroup.default;\nvar _toaster = _interopRequireWildcard(__webpack_require__(/*! ./toaster */ \"./src/toaster/index.tsx\"));\nexports.toaster = _toaster.default;\nexports.useToaster = _toaster.useToaster;\nvar _Dropdown = _interopRequireDefault(__webpack_require__(/*! ./Dropdown */ \"./src/Dropdown/index.tsx\"));\nexports.Dropdown = _Dropdown.default;\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ./Nav */ \"./src/Nav/index.tsx\"));\nexports.Nav = _Nav.default;\nvar _Navbar = _interopRequireDefault(__webpack_require__(/*! ./Navbar */ \"./src/Navbar/index.tsx\"));\nexports.Navbar = _Navbar.default;\nvar _Sidenav = _interopRequireDefault(__webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/index.tsx\"));\nexports.Sidenav = _Sidenav.default;\nvar _Breadcrumb = _interopRequireDefault(__webpack_require__(/*! ./Breadcrumb */ \"./src/Breadcrumb/index.tsx\"));\nexports.Breadcrumb = _Breadcrumb.default;\nvar _Pagination = _interopRequireDefault(__webpack_require__(/*! ./Pagination */ \"./src/Pagination/index.tsx\"));\nexports.Pagination = _Pagination.default;\nvar _Steps = _interopRequireDefault(__webpack_require__(/*! ./Steps */ \"./src/Steps/index.tsx\"));\nexports.Steps = _Steps.default;\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ./Toggle */ \"./src/Toggle/index.tsx\"));\nexports.Toggle = _Toggle.default;\nvar _Form = _interopRequireWildcard(__webpack_require__(/*! ./Form */ \"./src/Form/index.tsx\"));\nexports.Form = _Form.default;\nexports.useFormClassNames = _Form.useFormClassNames;\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ./Input */ \"./src/Input/index.tsx\"));\nexports.Input = _Input.default;\nvar _MaskedInput = _interopRequireDefault(__webpack_require__(/*! ./MaskedInput */ \"./src/MaskedInput/index.tsx\"));\nexports.MaskedInput = _MaskedInput.default;\nvar _InputNumber = _interopRequireDefault(__webpack_require__(/*! ./InputNumber */ \"./src/InputNumber/index.tsx\"));\nexports.InputNumber = _InputNumber.default;\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ./InputGroup */ \"./src/InputGroup/index.tsx\"));\nexports.InputGroup = _InputGroup.default;\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ./Checkbox */ \"./src/Checkbox/index.tsx\"));\nexports.Checkbox = _Checkbox.default;\nvar _CheckboxGroup = _interopRequireDefault(__webpack_require__(/*! ./CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\"));\nexports.CheckboxGroup = _CheckboxGroup.default;\nvar _Radio = _interopRequireDefault(__webpack_require__(/*! ./Radio */ \"./src/Radio/index.tsx\"));\nexports.Radio = _Radio.default;\nvar _RadioGroup = _interopRequireDefault(__webpack_require__(/*! ./RadioGroup */ \"./src/RadioGroup/index.tsx\"));\nexports.RadioGroup = _RadioGroup.default;\nvar _RadioTile = _interopRequireDefault(__webpack_require__(/*! ./RadioTile */ \"./src/RadioTile/index.tsx\"));\nexports.RadioTile = _RadioTile.default;\nvar _RadioTileGroup = _interopRequireDefault(__webpack_require__(/*! ./RadioTileGroup */ \"./src/RadioTileGroup/index.tsx\"));\nexports.RadioTileGroup = _RadioTileGroup.default;\nvar _SelectPicker = _interopRequireDefault(__webpack_require__(/*! ./SelectPicker */ \"./src/SelectPicker/index.tsx\"));\nexports.SelectPicker = _SelectPicker.default;\nvar _CheckPicker = _interopRequireDefault(__webpack_require__(/*! ./CheckPicker */ \"./src/CheckPicker/index.tsx\"));\nexports.CheckPicker = _CheckPicker.default;\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ./InputPicker */ \"./src/InputPicker/index.tsx\"));\nexports.InputPicker = _InputPicker.default;\nvar _TagPicker = _interopRequireDefault(__webpack_require__(/*! ./TagPicker */ \"./src/TagPicker/index.tsx\"));\nexports.TagPicker = _TagPicker.default;\nvar _TagInput = _interopRequireDefault(__webpack_require__(/*! ./TagInput */ \"./src/TagInput/index.tsx\"));\nexports.TagInput = _TagInput.default;\nvar _TreePicker = _interopRequireDefault(__webpack_require__(/*! ./TreePicker */ \"./src/TreePicker/index.tsx\"));\nexports.TreePicker = _TreePicker.default;\nvar _CheckTreePicker = _interopRequireDefault(__webpack_require__(/*! ./CheckTreePicker */ \"./src/CheckTreePicker/index.tsx\"));\nexports.CheckTreePicker = _CheckTreePicker.default;\nvar _Cascader = _interopRequireDefault(__webpack_require__(/*! ./Cascader */ \"./src/Cascader/index.tsx\"));\nexports.Cascader = _Cascader.default;\nvar _MultiCascader = _interopRequireDefault(__webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/index.tsx\"));\nexports.MultiCascader = _MultiCascader.default;\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ./DateInput */ \"./src/DateInput/index.tsx\"));\nexports.DateInput = _DateInput.default;\nvar _DatePicker = _interopRequireDefault(__webpack_require__(/*! ./DatePicker */ \"./src/DatePicker/index.tsx\"));\nexports.DatePicker = _DatePicker.default;\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ./DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nexports.DateRangeInput = _DateRangeInput.default;\nvar _DateRangePicker = _interopRequireDefault(__webpack_require__(/*! ./DateRangePicker */ \"./src/DateRangePicker/index.tsx\"));\nexports.DateRangePicker = _DateRangePicker.default;\nvar _AutoComplete = _interopRequireDefault(__webpack_require__(/*! ./AutoComplete */ \"./src/AutoComplete/index.tsx\"));\nexports.AutoComplete = _AutoComplete.default;\nvar _Uploader = _interopRequireDefault(__webpack_require__(/*! ./Uploader */ \"./src/Uploader/index.tsx\"));\nexports.Uploader = _Uploader.default;\nvar _Slider = _interopRequireDefault(__webpack_require__(/*! ./Slider */ \"./src/Slider/index.tsx\"));\nexports.Slider = _Slider.default;\nvar _RangeSlider = _interopRequireDefault(__webpack_require__(/*! ./RangeSlider */ \"./src/RangeSlider/index.tsx\"));\nexports.RangeSlider = _RangeSlider.default;\nvar _Rate = _interopRequireDefault(__webpack_require__(/*! ./Rate */ \"./src/Rate/index.tsx\"));\nexports.Rate = _Rate.default;\nvar _InlineEdit = _interopRequireDefault(__webpack_require__(/*! ./InlineEdit */ \"./src/InlineEdit/index.tsx\"));\nexports.InlineEdit = _InlineEdit.default;\nvar _Tree = _interopRequireDefault(__webpack_require__(/*! ./Tree */ \"./src/Tree/index.tsx\"));\nexports.Tree = _Tree.default;\nvar _CheckTree = _interopRequireDefault(__webpack_require__(/*! ./CheckTree */ \"./src/CheckTree/index.tsx\"));\nexports.CheckTree = _CheckTree.default;\nvar _Panel = _interopRequireDefault(__webpack_require__(/*! ./Panel */ \"./src/Panel/index.tsx\"));\nexports.Panel = _Panel.default;\nvar _Accordion = _interopRequireDefault(__webpack_require__(/*! ./Accordion */ \"./src/Accordion/index.tsx\"));\nexports.Accordion = _Accordion.default;\nvar _PanelGroup = _interopRequireDefault(__webpack_require__(/*! ./PanelGroup */ \"./src/PanelGroup/index.tsx\"));\nexports.PanelGroup = _PanelGroup.default;\nvar _Tabs = _interopRequireDefault(__webpack_require__(/*! ./Tabs */ \"./src/Tabs/index.tsx\"));\nexports.Tabs = _Tabs.default;\nvar _Table = _interopRequireDefault(__webpack_require__(/*! ./Table */ \"./src/Table/index.tsx\"));\nexports.Table = _Table.default;\nvar _Progress = _interopRequireDefault(__webpack_require__(/*! ./Progress */ \"./src/Progress/index.tsx\"));\nexports.Progress = _Progress.default;\nvar _Timeline = _interopRequireDefault(__webpack_require__(/*! ./Timeline */ \"./src/Timeline/index.tsx\"));\nexports.Timeline = _Timeline.default;\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ./Tag */ \"./src/Tag/index.tsx\"));\nexports.Tag = _Tag.default;\nvar _TagGroup = _interopRequireDefault(__webpack_require__(/*! ./TagGroup */ \"./src/TagGroup/index.tsx\"));\nexports.TagGroup = _TagGroup.default;\nvar _List = _interopRequireDefault(__webpack_require__(/*! ./List */ \"./src/List/index.tsx\"));\nexports.List = _List.default;\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/Calendar/index.tsx\"));\nexports.Calendar = _Calendar.default;\nvar _Carousel = _interopRequireDefault(__webpack_require__(/*! ./Carousel */ \"./src/Carousel/index.tsx\"));\nexports.Carousel = _Carousel.default;\nvar _Grid = _interopRequireDefault(__webpack_require__(/*! ./Grid */ \"./src/Grid/index.tsx\"));\nexports.Grid = _Grid.default;\nvar _Row = _interopRequireDefault(__webpack_require__(/*! ./Row */ \"./src/Row/index.tsx\"));\nexports.Row = _Row.default;\nvar _Col = _interopRequireDefault(__webpack_require__(/*! ./Col */ \"./src/Col/index.tsx\"));\nexports.Col = _Col.default;\nvar _FlexboxGrid = _interopRequireDefault(__webpack_require__(/*! ./FlexboxGrid */ \"./src/FlexboxGrid/index.tsx\"));\nexports.FlexboxGrid = _FlexboxGrid.default;\nvar _Container = _interopRequireDefault(__webpack_require__(/*! ./Container */ \"./src/Container/index.tsx\"));\nexports.Container = _Container.default;\nvar _Content = _interopRequireDefault(__webpack_require__(/*! ./Content */ \"./src/Content/index.tsx\"));\nexports.Content = _Content.default;\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/Header/index.tsx\"));\nexports.Header = _Header.default;\nvar _Sidebar = _interopRequireDefault(__webpack_require__(/*! ./Sidebar */ \"./src/Sidebar/index.tsx\"));\nexports.Sidebar = _Sidebar.default;\nvar _Footer = _interopRequireDefault(__webpack_require__(/*! ./Footer */ \"./src/Footer/index.tsx\"));\nexports.Footer = _Footer.default;\nvar _Divider = _interopRequireDefault(__webpack_require__(/*! ./Divider */ \"./src/Divider/index.tsx\"));\nexports.Divider = _Divider.default;\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/index.tsx\"));\nexports.Stack = _Stack.default;\nvar _Schema = _interopRequireDefault(__webpack_require__(/*! ./Schema */ \"./src/Schema/index.ts\"));\nexports.Schema = _Schema.default;\nvar _Animation = _interopRequireDefault(__webpack_require__(/*! ./Animation */ \"./src/Animation/index.tsx\"));\nexports.Animation = _Animation.default;\nvar _DOMHelper = _interopRequireDefault(__webpack_require__(/*! ./DOMHelper */ \"./src/DOMHelper/index.ts\"));\nexports.DOMHelper = _DOMHelper.default;\nvar _Affix = _interopRequireDefault(__webpack_require__(/*! ./Affix */ \"./src/Affix/index.tsx\"));\nexports.Affix = _Affix.default;\nvar _CustomProvider = _interopRequireDefault(__webpack_require__(/*! ./CustomProvider */ \"./src/CustomProvider/index.tsx\"));\nexports.CustomProvider = _CustomProvider.default;\nvar _useMediaQuery = _interopRequireDefault(__webpack_require__(/*! ./useMediaQuery */ \"./src/useMediaQuery/index.ts\"));\nexports.useMediaQuery = _useMediaQuery.default;\nvar _VisuallyHidden = _interopRequireDefault(__webpack_require__(/*! ./VisuallyHidden */ \"./src/VisuallyHidden/index.tsx\"));\nexports.VisuallyHidden = _VisuallyHidden.default;\n\n//# sourceURL=webpack://rsuite/./src/index.tsx?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useFormClassNames = exports.Accordion = exports.Tabs = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Table = exports.PanelGroup = exports.Panel = exports.MultiCascadeTree = exports.CascadeTree = exports.CheckTree = exports.Tree = exports.InlineEdit = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Toggle = exports.Form = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.AvatarGroup = exports.Avatar = exports.Progress = exports.useToaster = exports.toaster = exports.Badge = exports.Placeholder = exports.Loader = exports.Message = exports.Notification = exports.Dropdown = exports.Drawer = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = exports.SafeAnchor = exports.HeadingGroup = exports.Heading = exports.Text = void 0;\nvar _Text = _interopRequireDefault(__webpack_require__(/*! ./Text */ \"./src/Text/index.tsx\"));\nexports.Text = _Text.default;\nvar _Heading = _interopRequireDefault(__webpack_require__(/*! ./Heading */ \"./src/Heading/index.tsx\"));\nexports.Heading = _Heading.default;\nvar _HeadingGroup = _interopRequireDefault(__webpack_require__(/*! ./HeadingGroup */ \"./src/HeadingGroup/index.tsx\"));\nexports.HeadingGroup = _HeadingGroup.default;\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ./SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nexports.SafeAnchor = _SafeAnchor.default;\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ./Button */ \"./src/Button/index.tsx\"));\nexports.Button = _Button.default;\nvar _IconButton = _interopRequireDefault(__webpack_require__(/*! ./IconButton */ \"./src/IconButton/index.tsx\"));\nexports.IconButton = _IconButton.default;\nvar _ButtonToolbar = _interopRequireDefault(__webpack_require__(/*! ./ButtonToolbar */ \"./src/ButtonToolbar/index.tsx\"));\nexports.ButtonToolbar = _ButtonToolbar.default;\nvar _ButtonGroup = _interopRequireDefault(__webpack_require__(/*! ./ButtonGroup */ \"./src/ButtonGroup/index.tsx\"));\nexports.ButtonGroup = _ButtonGroup.default;\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ./Whisper */ \"./src/Whisper/index.tsx\"));\nexports.Whisper = _Whisper.default;\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ./Tooltip */ \"./src/Tooltip/index.tsx\"));\nexports.Tooltip = _Tooltip.default;\nvar _Popover = _interopRequireDefault(__webpack_require__(/*! ./Popover */ \"./src/Popover/index.tsx\"));\nexports.Popover = _Popover.default;\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ./Modal */ \"./src/Modal/index.tsx\"));\nexports.Modal = _Modal.default;\nvar _Drawer = _interopRequireDefault(__webpack_require__(/*! ./Drawer */ \"./src/Drawer/index.tsx\"));\nexports.Drawer = _Drawer.default;\nvar _Dropdown = _interopRequireDefault(__webpack_require__(/*! ./Dropdown */ \"./src/Dropdown/index.tsx\"));\nexports.Dropdown = _Dropdown.default;\nvar _Notification = _interopRequireDefault(__webpack_require__(/*! ./Notification */ \"./src/Notification/index.tsx\"));\nexports.Notification = _Notification.default;\nvar _Message = _interopRequireDefault(__webpack_require__(/*! ./Message */ \"./src/Message/index.tsx\"));\nexports.Message = _Message.default;\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ./Loader */ \"./src/Loader/index.tsx\"));\nexports.Loader = _Loader.default;\nvar _Placeholder = _interopRequireDefault(__webpack_require__(/*! ./Placeholder */ \"./src/Placeholder/index.tsx\"));\nexports.Placeholder = _Placeholder.default;\nvar _Badge = _interopRequireDefault(__webpack_require__(/*! ./Badge */ \"./src/Badge/index.tsx\"));\nexports.Badge = _Badge.default;\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ./toaster */ \"./src/toaster/index.tsx\"));\nexports.toaster = _toaster.default;\nvar _useToaster = _interopRequireDefault(__webpack_require__(/*! ./useToaster */ \"./src/useToaster/index.tsx\"));\nexports.useToaster = _useToaster.default;\nvar _Progress = _interopRequireDefault(__webpack_require__(/*! ./Progress */ \"./src/Progress/index.tsx\"));\nexports.Progress = _Progress.default;\nvar _Avatar = _interopRequireDefault(__webpack_require__(/*! ./Avatar */ \"./src/Avatar/index.tsx\"));\nexports.Avatar = _Avatar.default;\nvar _AvatarGroup = _interopRequireDefault(__webpack_require__(/*! ./AvatarGroup */ \"./src/AvatarGroup/index.tsx\"));\nexports.AvatarGroup = _AvatarGroup.default;\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ./Nav */ \"./src/Nav/index.tsx\"));\nexports.Nav = _Nav.default;\nvar _Navbar = _interopRequireDefault(__webpack_require__(/*! ./Navbar */ \"./src/Navbar/index.tsx\"));\nexports.Navbar = _Navbar.default;\nvar _Sidenav = _interopRequireDefault(__webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/index.tsx\"));\nexports.Sidenav = _Sidenav.default;\nvar _Breadcrumb = _interopRequireDefault(__webpack_require__(/*! ./Breadcrumb */ \"./src/Breadcrumb/index.tsx\"));\nexports.Breadcrumb = _Breadcrumb.default;\nvar _Pagination = _interopRequireDefault(__webpack_require__(/*! ./Pagination */ \"./src/Pagination/index.tsx\"));\nexports.Pagination = _Pagination.default;\nvar _Steps = _interopRequireDefault(__webpack_require__(/*! ./Steps */ \"./src/Steps/index.tsx\"));\nexports.Steps = _Steps.default;\nvar _Form = _interopRequireWildcard(__webpack_require__(/*! ./Form */ \"./src/Form/index.tsx\"));\nexports.Form = _Form.default;\nexports.useFormClassNames = _Form.useFormClassNames;\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ./Toggle */ \"./src/Toggle/index.tsx\"));\nexports.Toggle = _Toggle.default;\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ./Input */ \"./src/Input/index.tsx\"));\nexports.Input = _Input.default;\nvar _MaskedInput = _interopRequireDefault(__webpack_require__(/*! ./MaskedInput */ \"./src/MaskedInput/index.tsx\"));\nexports.MaskedInput = _MaskedInput.default;\nvar _InputNumber = _interopRequireDefault(__webpack_require__(/*! ./InputNumber */ \"./src/InputNumber/index.tsx\"));\nexports.InputNumber = _InputNumber.default;\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ./InputGroup */ \"./src/InputGroup/index.tsx\"));\nexports.InputGroup = _InputGroup.default;\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ./Checkbox */ \"./src/Checkbox/index.tsx\"));\nexports.Checkbox = _Checkbox.default;\nvar _CheckboxGroup = _interopRequireDefault(__webpack_require__(/*! ./CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\"));\nexports.CheckboxGroup = _CheckboxGroup.default;\nvar _Radio = _interopRequireDefault(__webpack_require__(/*! ./Radio */ \"./src/Radio/index.tsx\"));\nexports.Radio = _Radio.default;\nvar _RadioGroup = _interopRequireDefault(__webpack_require__(/*! ./RadioGroup */ \"./src/RadioGroup/index.tsx\"));\nexports.RadioGroup = _RadioGroup.default;\nvar _RadioTile = _interopRequireDefault(__webpack_require__(/*! ./RadioTile */ \"./src/RadioTile/index.tsx\"));\nexports.RadioTile = _RadioTile.default;\nvar _RadioTileGroup = _interopRequireDefault(__webpack_require__(/*! ./RadioTileGroup */ \"./src/RadioTileGroup/index.tsx\"));\nexports.RadioTileGroup = _RadioTileGroup.default;\nvar _SelectPicker = _interopRequireDefault(__webpack_require__(/*! ./SelectPicker */ \"./src/SelectPicker/index.tsx\"));\nexports.SelectPicker = _SelectPicker.default;\nvar _CheckPicker = _interopRequireDefault(__webpack_require__(/*! ./CheckPicker */ \"./src/CheckPicker/index.tsx\"));\nexports.CheckPicker = _CheckPicker.default;\nvar _InputPicker = _interopRequireDefault(__webpack_require__(/*! ./InputPicker */ \"./src/InputPicker/index.tsx\"));\nexports.InputPicker = _InputPicker.default;\nvar _TagPicker = _interopRequireDefault(__webpack_require__(/*! ./TagPicker */ \"./src/TagPicker/index.tsx\"));\nexports.TagPicker = _TagPicker.default;\nvar _TagInput = _interopRequireDefault(__webpack_require__(/*! ./TagInput */ \"./src/TagInput/index.tsx\"));\nexports.TagInput = _TagInput.default;\nvar _TreePicker = _interopRequireDefault(__webpack_require__(/*! ./TreePicker */ \"./src/TreePicker/index.tsx\"));\nexports.TreePicker = _TreePicker.default;\nvar _CheckTreePicker = _interopRequireDefault(__webpack_require__(/*! ./CheckTreePicker */ \"./src/CheckTreePicker/index.tsx\"));\nexports.CheckTreePicker = _CheckTreePicker.default;\nvar _Cascader = _interopRequireDefault(__webpack_require__(/*! ./Cascader */ \"./src/Cascader/index.tsx\"));\nexports.Cascader = _Cascader.default;\nvar _MultiCascader = _interopRequireDefault(__webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/index.tsx\"));\nexports.MultiCascader = _MultiCascader.default;\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ./DateInput */ \"./src/DateInput/index.tsx\"));\nexports.DateInput = _DateInput.default;\nvar _DatePicker = _interopRequireDefault(__webpack_require__(/*! ./DatePicker */ \"./src/DatePicker/index.tsx\"));\nexports.DatePicker = _DatePicker.default;\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ./DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nexports.DateRangeInput = _DateRangeInput.default;\nvar _DateRangePicker = _interopRequireDefault(__webpack_require__(/*! ./DateRangePicker */ \"./src/DateRangePicker/index.tsx\"));\nexports.DateRangePicker = _DateRangePicker.default;\nvar _AutoComplete = _interopRequireDefault(__webpack_require__(/*! ./AutoComplete */ \"./src/AutoComplete/index.tsx\"));\nexports.AutoComplete = _AutoComplete.default;\nvar _Uploader = _interopRequireDefault(__webpack_require__(/*! ./Uploader */ \"./src/Uploader/index.tsx\"));\nexports.Uploader = _Uploader.default;\nvar _Slider = _interopRequireDefault(__webpack_require__(/*! ./Slider */ \"./src/Slider/index.tsx\"));\nexports.Slider = _Slider.default;\nvar _RangeSlider = _interopRequireDefault(__webpack_require__(/*! ./RangeSlider */ \"./src/RangeSlider/index.tsx\"));\nexports.RangeSlider = _RangeSlider.default;\nvar _Rate = _interopRequireDefault(__webpack_require__(/*! ./Rate */ \"./src/Rate/index.tsx\"));\nexports.Rate = _Rate.default;\nvar _InlineEdit = _interopRequireDefault(__webpack_require__(/*! ./InlineEdit */ \"./src/InlineEdit/index.tsx\"));\nexports.InlineEdit = _InlineEdit.default;\nvar _Tree = _interopRequireDefault(__webpack_require__(/*! ./Tree */ \"./src/Tree/index.tsx\"));\nexports.Tree = _Tree.default;\nvar _CheckTree = _interopRequireDefault(__webpack_require__(/*! ./CheckTree */ \"./src/CheckTree/index.tsx\"));\nexports.CheckTree = _CheckTree.default;\nvar _CascadeTree = _interopRequireDefault(__webpack_require__(/*! ./CascadeTree */ \"./src/CascadeTree/index.tsx\"));\nexports.CascadeTree = _CascadeTree.default;\nvar _MultiCascadeTree = _interopRequireDefault(__webpack_require__(/*! ./MultiCascadeTree */ \"./src/MultiCascadeTree/index.tsx\"));\nexports.MultiCascadeTree = _MultiCascadeTree.default;\nvar _Panel = _interopRequireDefault(__webpack_require__(/*! ./Panel */ \"./src/Panel/index.tsx\"));\nexports.Panel = _Panel.default;\nvar _PanelGroup = _interopRequireDefault(__webpack_require__(/*! ./PanelGroup */ \"./src/PanelGroup/index.tsx\"));\nexports.PanelGroup = _PanelGroup.default;\nvar _Table = _interopRequireDefault(__webpack_require__(/*! ./Table */ \"./src/Table/index.tsx\"));\nexports.Table = _Table.default;\nvar _Timeline = _interopRequireDefault(__webpack_require__(/*! ./Timeline */ \"./src/Timeline/index.tsx\"));\nexports.Timeline = _Timeline.default;\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ./Tag */ \"./src/Tag/index.tsx\"));\nexports.Tag = _Tag.default;\nvar _TagGroup = _interopRequireDefault(__webpack_require__(/*! ./TagGroup */ \"./src/TagGroup/index.tsx\"));\nexports.TagGroup = _TagGroup.default;\nvar _List = _interopRequireDefault(__webpack_require__(/*! ./List */ \"./src/List/index.tsx\"));\nexports.List = _List.default;\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/Calendar/index.tsx\"));\nexports.Calendar = _Calendar.default;\nvar _Carousel = _interopRequireDefault(__webpack_require__(/*! ./Carousel */ \"./src/Carousel/index.tsx\"));\nexports.Carousel = _Carousel.default;\nvar _Grid = _interopRequireDefault(__webpack_require__(/*! ./Grid */ \"./src/Grid/index.tsx\"));\nexports.Grid = _Grid.default;\nvar _Row = _interopRequireDefault(__webpack_require__(/*! ./Row */ \"./src/Row/index.tsx\"));\nexports.Row = _Row.default;\nvar _Col = _interopRequireDefault(__webpack_require__(/*! ./Col */ \"./src/Col/index.tsx\"));\nexports.Col = _Col.default;\nvar _FlexboxGrid = _interopRequireDefault(__webpack_require__(/*! ./FlexboxGrid */ \"./src/FlexboxGrid/index.tsx\"));\nexports.FlexboxGrid = _FlexboxGrid.default;\nvar _Container = _interopRequireDefault(__webpack_require__(/*! ./Container */ \"./src/Container/index.tsx\"));\nexports.Container = _Container.default;\nvar _Content = _interopRequireDefault(__webpack_require__(/*! ./Content */ \"./src/Content/index.tsx\"));\nexports.Content = _Content.default;\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/Header/index.tsx\"));\nexports.Header = _Header.default;\nvar _Sidebar = _interopRequireDefault(__webpack_require__(/*! ./Sidebar */ \"./src/Sidebar/index.tsx\"));\nexports.Sidebar = _Sidebar.default;\nvar _Footer = _interopRequireDefault(__webpack_require__(/*! ./Footer */ \"./src/Footer/index.tsx\"));\nexports.Footer = _Footer.default;\nvar _Divider = _interopRequireDefault(__webpack_require__(/*! ./Divider */ \"./src/Divider/index.tsx\"));\nexports.Divider = _Divider.default;\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/index.tsx\"));\nexports.Stack = _Stack.default;\nvar _Schema = _interopRequireDefault(__webpack_require__(/*! ./Schema */ \"./src/Schema/index.ts\"));\nexports.Schema = _Schema.default;\nvar _Animation = _interopRequireDefault(__webpack_require__(/*! ./Animation */ \"./src/Animation/index.tsx\"));\nexports.Animation = _Animation.default;\nvar _DOMHelper = _interopRequireDefault(__webpack_require__(/*! ./DOMHelper */ \"./src/DOMHelper/index.ts\"));\nexports.DOMHelper = _DOMHelper.default;\nvar _Affix = _interopRequireDefault(__webpack_require__(/*! ./Affix */ \"./src/Affix/index.tsx\"));\nexports.Affix = _Affix.default;\nvar _CustomProvider = _interopRequireDefault(__webpack_require__(/*! ./CustomProvider */ \"./src/CustomProvider/index.tsx\"));\nexports.CustomProvider = _CustomProvider.default;\nvar _useMediaQuery = _interopRequireDefault(__webpack_require__(/*! ./useMediaQuery */ \"./src/useMediaQuery/index.ts\"));\nexports.useMediaQuery = _useMediaQuery.default;\nvar _VisuallyHidden = _interopRequireDefault(__webpack_require__(/*! ./VisuallyHidden */ \"./src/VisuallyHidden/index.tsx\"));\nexports.VisuallyHidden = _VisuallyHidden.default;\nvar _Tabs = _interopRequireDefault(__webpack_require__(/*! ./Tabs */ \"./src/Tabs/index.tsx\"));\nexports.Tabs = _Tabs.default;\nvar _Accordion = _interopRequireDefault(__webpack_require__(/*! ./Accordion */ \"./src/Accordion/index.tsx\"));\nexports.Accordion = _Accordion.default;\n\n//# sourceURL=webpack://rsuite/./src/index.tsx?");
 
 /***/ }),
 
@@ -9574,7 +9827,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/internals/Overlay/Overlay.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/internals/Overlay/OverlayContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Overlay/OverlayTrigger.tsx\",\n  _this = void 0;\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n  if (props === void 0) {\n    props = {};\n  }\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nvar OverlayCloseCause;\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nexports.OverlayCloseCause = OverlayCloseCause;\n(function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n})(OverlayCloseCause || (exports.OverlayCloseCause = OverlayCloseCause = {}));\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\nvar defaultTrigger = ['hover', 'focus'];\n\n/**\n * OverlayTrigger is used to display floating elements on another component.\n * @private\n */\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n    overlayContainer = _useContext.overlayContainer;\n  var children = props.children,\n    _props$container = props.container,\n    container = _props$container === void 0 ? overlayContainer : _props$container,\n    controlId = props.controlId,\n    defaultOpen = props.defaultOpen,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n    disabled = props.disabled,\n    followCursor = props.followCursor,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    openProp = props.open,\n    delay = props.delay,\n    delayOpenProp = props.delayOpen,\n    delayCloseProp = props.delayClose,\n    enterable = props.enterable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    speaker = props.speaker,\n    _props$rootClose = props.rootClose,\n    rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n    onClick = props.onClick,\n    onMouseOver = props.onMouseOver,\n    onMouseMove = props.onMouseMove,\n    onMouseOut = props.onMouseOut,\n    onContextMenu = props.onContextMenu,\n    onFocus = props.onFocus,\n    onBlur = props.onBlur,\n    onClose = props.onClose,\n    onExited = props.onExited,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onClose\", \"onExited\"]);\n  var _usePortal = (0, _utils.usePortal)({\n      container: container\n    }),\n    Portal = _usePortal.Portal,\n    containerElement = _usePortal.target;\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n    open = _useControlled[0],\n    setOpen = _useControlled[1];\n  var _useState = (0, _react.useState)(null),\n    cursorPosition = _useState[0],\n    setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp;\n\n  // Whether the cursor is on the overlay\n  var isOnOverlay = (0, _react.useRef)(false);\n\n  // Whether the cursor is on the trigger\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n\n  // Whether the cursor is on the overlay\n  var mouseEnter = (0, _react.useRef)(false);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        if (mouseEnter.current) {\n          setOpen(true);\n        }\n      }, ms);\n    }\n    setOpen(true);\n  }, [delayOpen, setOpen]);\n  var handleClose = (0, _react.useCallback)(function (delay, callback) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        setOpen(false);\n        callback === null || callback === void 0 ? void 0 : callback();\n      }, ms);\n    }\n    setOpen(false);\n    callback === null || callback === void 0 ? void 0 : callback();\n  }, [delayClose, setOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n      get overlay() {\n        var _overlayRef$current;\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n      getState: function getState() {\n        return {\n          open: open\n        };\n      },\n      open: handleOpen,\n      close: function close(delay) {\n        return handleClose(delay, function () {\n          return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ImperativeHandle);\n        });\n      },\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n\n  /**\n   * Close after the cursor leaves.\n   */\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose();\n    }\n  }, [handleClose]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    mouseEnter.current = true;\n    if (!enterable) {\n      return handleOpen();\n    }\n    isOnTrigger.current = true;\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n    if (open) {\n      return;\n    }\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n\n  /**\n   * Toggle open and closed state.\n   */\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleDelayedOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleDelayedOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    mouseEnter.current = false;\n    if (!enterable) {\n      return handleClose();\n    }\n    isOnTrigger.current = false;\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = (0, _react.useMemo)(function () {\n    // Pass events by props\n    var events = {\n      onClick: onClick,\n      onContextMenu: onContextMenu,\n      onMouseOver: onMouseOver,\n      onMouseOut: onMouseOut,\n      onFocus: onFocus,\n      onBlur: onBlur,\n      onMouseMove: onMouseMove\n    };\n\n    // When trigger is disabled, no predefined event listeners are added.\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    }\n\n    // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    }\n\n    // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n    if ((0, _isOneOf.default)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    }\n\n    // The difference between it and the click event is that it does not trigger the close.\n    if ((0, _isOneOf.default)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = function onMouseOverListener(e) {\n        return onMouseEventHandler(handleDelayedOpen, e);\n      };\n      var onMouseOutListener = function onMouseOutListener(e) {\n        return onMouseEventHandler(handleDelayedClose, e);\n      };\n      events.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, events.onMouseOut);\n    }\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, function () {\n        return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ClickOutside);\n      }) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: containerElement,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    };\n\n    // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 510,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {\n    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');\n  }\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 543,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Overlay/OverlayTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/internals/Overlay/Overlay.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/internals/Overlay/OverlayContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Overlay/OverlayTrigger.tsx\",\n  _this = void 0;\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n  if (props === void 0) {\n    props = {};\n  }\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nvar OverlayCloseCause;\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nexports.OverlayCloseCause = OverlayCloseCause;\n(function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n})(OverlayCloseCause || (exports.OverlayCloseCause = OverlayCloseCause = {}));\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\nvar defaultTrigger = ['hover', 'focus'];\n\n/**\n * OverlayTrigger is used to display floating elements on another component.\n * @private\n */\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n    overlayContainer = _useContext.overlayContainer;\n  var children = props.children,\n    _props$container = props.container,\n    container = _props$container === void 0 ? overlayContainer : _props$container,\n    controlId = props.controlId,\n    defaultOpen = props.defaultOpen,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n    disabled = props.disabled,\n    followCursor = props.followCursor,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    openProp = props.open,\n    delay = props.delay,\n    delayOpenProp = props.delayOpen,\n    delayCloseProp = props.delayClose,\n    enterable = props.enterable,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    speaker = props.speaker,\n    _props$rootClose = props.rootClose,\n    rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n    onClick = props.onClick,\n    onMouseOver = props.onMouseOver,\n    onMouseMove = props.onMouseMove,\n    onMouseOut = props.onMouseOut,\n    onContextMenu = props.onContextMenu,\n    onFocus = props.onFocus,\n    onBlur = props.onBlur,\n    onOpen = props.onOpen,\n    onClose = props.onClose,\n    onExited = props.onExited,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onOpen\", \"onClose\", \"onExited\"]);\n  var _usePortal = (0, _utils.usePortal)({\n      container: container\n    }),\n    Portal = _usePortal.Portal,\n    containerElement = _usePortal.target;\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n    open = _useControlled[0],\n    setOpen = _useControlled[1];\n  var _useState = (0, _react.useState)(null),\n    cursorPosition = _useState[0],\n    setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp;\n\n  // Whether the cursor is on the overlay\n  var isOnOverlay = (0, _react.useRef)(false);\n\n  // Whether the cursor is on the trigger\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n\n  // Whether the cursor is on the overlay\n  var mouseEnter = (0, _react.useRef)(false);\n  var handleOpenChange = (0, _react.useCallback)(function (nextOpen, closeCause) {\n    // if the overlay open state is not changed, do not fire the event\n    if (nextOpen === open) return;\n    if (nextOpen) {\n      onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    } else {\n      onClose === null || onClose === void 0 ? void 0 : onClose(closeCause);\n    }\n    setOpen(nextOpen);\n  }, [open, onOpen, onClose, setOpen]);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        if (mouseEnter.current) {\n          handleOpenChange(true);\n        }\n      }, ms);\n    }\n    handleOpenChange(true);\n  }, [delayOpen, handleOpenChange]);\n  var handleClose = (0, _react.useCallback)(function (delay, closeCause) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        handleOpenChange(false, closeCause);\n      }, ms);\n    }\n    handleOpenChange(false, closeCause);\n  }, [delayClose, handleOpenChange]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n      get overlay() {\n        var _overlayRef$current;\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n      getState: function getState() {\n        return {\n          open: open\n        };\n      },\n      open: handleOpen,\n      close: function close(delay) {\n        return handleClose(delay, OverlayCloseCause.ImperativeHandle);\n      },\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n\n  /**\n   * Close after the cursor leaves.\n   */\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose(undefined, OverlayCloseCause.ClickOutside);\n    }\n  }, [handleClose]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    mouseEnter.current = true;\n    if (!enterable) {\n      return handleOpen();\n    }\n    isOnTrigger.current = true;\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n    if (open) {\n      return;\n    }\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n\n  /**\n   * Toggle open and closed state.\n   */\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleDelayedOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleDelayedOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    mouseEnter.current = false;\n    if (!enterable) {\n      return handleClose();\n    }\n    isOnTrigger.current = false;\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = (0, _react.useMemo)(function () {\n    // Pass events by props\n    var events = {\n      onClick: onClick,\n      onContextMenu: onContextMenu,\n      onMouseOver: onMouseOver,\n      onMouseOut: onMouseOut,\n      onFocus: onFocus,\n      onBlur: onBlur,\n      onMouseMove: onMouseMove\n    };\n\n    // When trigger is disabled, no predefined event listeners are added.\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    }\n\n    // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    }\n\n    // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n    if ((0, _isOneOf.default)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    }\n\n    // The difference between it and the click event is that it does not trigger the close.\n    if ((0, _isOneOf.default)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = function onMouseOverListener(e) {\n        return onMouseEventHandler(handleDelayedOpen, e);\n      };\n      var onMouseOutListener = function onMouseOutListener(e) {\n        return onMouseEventHandler(handleDelayedClose, e);\n      };\n      events.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, events.onMouseOut);\n    }\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? function () {\n        return handleClose(undefined, OverlayCloseCause.ClickOutside);\n      } : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: containerElement,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    };\n\n    // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 519,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {\n    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');\n  }\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 552,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Overlay/OverlayTrigger.tsx?");
 
 /***/ }),
 
@@ -9684,7 +9937,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/internals/Picker/ToggleButton.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../../Stack */ \"./src/Stack/index.tsx\"));\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nvar _useCombobox2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/PickerToggle.tsx\",\n  _this = void 0,\n  _templateObject;\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var active = props.active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n    children = props.children,\n    _props$caret = props.caret,\n    caret = _props$caret === void 0 ? true : _props$caret,\n    className = props.className,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    hasValue = props.hasValue,\n    _props$loading = props.loading,\n    loading = _props$loading === void 0 ? false : _props$loading,\n    cleanable = props.cleanable,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    inputValueProp = props.inputValue,\n    focusItemValue = props.focusItemValue,\n    onClean = props.onClean,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    caretComponent = props.caretComponent,\n    _props$caretAs = props.caretAs,\n    caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n    label = props.label,\n    name = props.name,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"loading\", \"cleanable\", \"tabIndex\", \"inputValue\", \"focusItemValue\", \"onClean\", \"placement\", \"caretComponent\", \"caretAs\", \"label\", \"name\"]);\n  var combobox = (0, _react.useRef)(null);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCombobox = (0, _useCombobox2.default)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType;\n  var inputValue = (0, _react.useMemo)(function () {\n    if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {\n      return inputValueProp;\n    } else if (Array.isArray(inputValueProp)) {\n      return inputValueProp.join(',');\n    }\n    return '';\n  }, [inputValueProp]);\n  var classes = merge(className, withClassPrefix({\n    active: active\n  }));\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var _combobox$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    (_combobox$current = combobox.current) === null || _combobox$current === void 0 ? void 0 : _combobox$current.focus();\n  });\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 99,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    id: id,\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": active,\n    \"aria-disabled\": disabled,\n    \"aria-controls\": id + \"-\" + popupType,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": id + \"-describe\",\n    \"aria-activedescendant\": active && focusItemValue ? id + \"-opt-\" + focusItemValue : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(combobox, ref),\n    disabled: disabled,\n    tabIndex: disabled ? undefined : tabIndex,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 108,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 9\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 13\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {\n    as: \"span\",\n    className: prefix('label'),\n    id: labelId,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 15\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    readOnly: true,\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    \"data-testid\": \"picker-toggle-input\",\n    name: name,\n    value: inputValue,\n    className: prefix('textbox', 'read-only'),\n    style: {\n      pointerEvents: 'none'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 133,\n      columnNumber: 13\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    id: id + \"-describe\",\n    \"data-testid\": \"picker-describe\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 144,\n      columnNumber: 15\n    }\n  }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"indicator\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 153,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {\n    as: _react.default.Fragment,\n    loading: loading,\n    caretAs: caret ? Caret : null,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 154,\n      columnNumber: 13\n    }\n  }))));\n});\nPickerToggle.displayName = 'PickerToggle';\nvar _default = PickerToggle;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/internals/Picker/ToggleButton.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _useToggleCaret = _interopRequireDefault(__webpack_require__(/*! ../../utils/useToggleCaret */ \"./src/utils/useToggleCaret.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../../Stack */ \"./src/Stack/index.tsx\"));\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nvar _useCombobox2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/PickerToggle.tsx\",\n  _this = void 0,\n  _templateObject;\nvar PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var active = props.active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? _ToggleButton.default : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker-toggle' : _props$classPrefix,\n    children = props.children,\n    _props$caret = props.caret,\n    caret = _props$caret === void 0 ? true : _props$caret,\n    className = props.className,\n    disabled = props.disabled,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    hasValue = props.hasValue,\n    _props$loading = props.loading,\n    loading = _props$loading === void 0 ? false : _props$loading,\n    cleanable = props.cleanable,\n    _props$tabIndex = props.tabIndex,\n    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n    inputValueProp = props.inputValue,\n    focusItemValue = props.focusItemValue,\n    onClean = props.onClean,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    caretComponent = props.caretComponent,\n    _props$caretAs = props.caretAs,\n    caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,\n    label = props.label,\n    name = props.name,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"classPrefix\", \"children\", \"caret\", \"className\", \"disabled\", \"readOnly\", \"plaintext\", \"hasValue\", \"loading\", \"cleanable\", \"tabIndex\", \"inputValue\", \"focusItemValue\", \"onClean\", \"placement\", \"caretComponent\", \"caretAs\", \"label\", \"name\"]);\n  var combobox = (0, _react.useRef)(null);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCombobox = (0, _useCombobox2.default)(),\n    id = _useCombobox.id,\n    labelId = _useCombobox.labelId,\n    popupType = _useCombobox.popupType;\n  var inputValue = (0, _react.useMemo)(function () {\n    if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {\n      return inputValueProp;\n    } else if (Array.isArray(inputValueProp)) {\n      return inputValueProp.join(',');\n    }\n    return '';\n  }, [inputValueProp]);\n  var classes = merge(className, withClassPrefix({\n    active: active\n  }));\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var _combobox$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    (_combobox$current = combobox.current) === null || _combobox$current === void 0 ? void 0 : _combobox$current.focus();\n  });\n  var ToggleCaret = (0, _useToggleCaret.default)(placement);\n  var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 97,\n        columnNumber: 9\n      }\n    }, hasValue ? children : null);\n  }\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    id: id,\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": active,\n    \"aria-disabled\": disabled,\n    \"aria-controls\": id + \"-\" + popupType,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": id + \"-describe\",\n    \"aria-activedescendant\": active && focusItemValue ? id + \"-opt-\" + focusItemValue : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(combobox, ref),\n    disabled: disabled,\n    tabIndex: disabled ? undefined : tabIndex,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 106,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 9\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 13\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {\n    as: \"span\",\n    className: prefix('label'),\n    id: labelId,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 15\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 130,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    readOnly: true,\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    \"data-testid\": \"picker-toggle-input\",\n    name: name,\n    value: inputValue,\n    className: prefix('textbox', 'read-only'),\n    style: {\n      pointerEvents: 'none'\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 131,\n      columnNumber: 13\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    id: id + \"-describe\",\n    \"data-testid\": \"picker-describe\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 142,\n      columnNumber: 15\n    }\n  }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"indicator\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 151,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {\n    as: _react.default.Fragment,\n    loading: loading,\n    caretAs: caret ? Caret : null,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 152,\n      columnNumber: 13\n    }\n  }))));\n});\nPickerToggle.displayName = 'PickerToggle';\nvar _default = PickerToggle;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggle.tsx?");
 
 /***/ }),
 
@@ -9695,7 +9948,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.ComboboxContextContext = exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _OverlayTrigger = _interopRequireDefault(__webpack_require__(/*! ../../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/PickerToggleTrigger.tsx\",\n  _this = void 0;\nvar omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'container', 'containerPadding', 'preventOverflow'];\nexports.omitTriggerPropKeys = omitTriggerPropKeys;\nvar pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading', 'label']);\nexports.pickTriggerPropKeys = pickTriggerPropKeys;\nvar ComboboxContextContext = /*#__PURE__*/_react.default.createContext({\n  popupType: 'listbox'\n});\nexports.ComboboxContextContext = ComboboxContextContext;\nvar PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var pickerProps = props.pickerProps,\n    speaker = props.speaker,\n    placement = props.placement,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,\n    id = props.id,\n    multiple = props.multiple,\n    _props$popupType = props.popupType,\n    popupType = _props$popupType === void 0 ? 'listbox' : _props$popupType,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"pickerProps\", \"speaker\", \"placement\", \"trigger\", \"id\", \"multiple\", \"popupType\"]);\n  var pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);\n  var pickerId = (0, _utils.useUniqueId)('rs-', id);\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  return /*#__PURE__*/_react.default.createElement(ComboboxContextContext.Provider, {\n    value: {\n      id: pickerId,\n      hasLabel: typeof pickerTriggerProps.label !== 'undefined',\n      multiple: multiple,\n      popupType: popupType\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {\n    disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,\n    ref: ref,\n    trigger: trigger,\n    placement: (0, _utils.placementPolyfill)(placement, rtl),\n    speaker: speaker,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 91,\n      columnNumber: 9\n    }\n  })));\n});\nPickerToggleTrigger.displayName = 'PickerToggleTrigger';\nvar _default = PickerToggleTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggleTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.ComboboxContextContext = exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _OverlayTrigger = _interopRequireDefault(__webpack_require__(/*! ../../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/PickerToggleTrigger.tsx\",\n  _this = void 0;\nvar omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];\nexports.omitTriggerPropKeys = omitTriggerPropKeys;\nvar pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading', 'label']);\nexports.pickTriggerPropKeys = pickTriggerPropKeys;\nvar ComboboxContextContext = /*#__PURE__*/_react.default.createContext({\n  popupType: 'listbox'\n});\nexports.ComboboxContextContext = ComboboxContextContext;\nvar PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var pickerProps = props.pickerProps,\n    speaker = props.speaker,\n    placement = props.placement,\n    _props$trigger = props.trigger,\n    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,\n    id = props.id,\n    multiple = props.multiple,\n    _props$popupType = props.popupType,\n    popupType = _props$popupType === void 0 ? 'listbox' : _props$popupType,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"pickerProps\", \"speaker\", \"placement\", \"trigger\", \"id\", \"multiple\", \"popupType\"]);\n  var pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);\n  var pickerId = (0, _utils.useUniqueId)('rs-', id);\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  return /*#__PURE__*/_react.default.createElement(ComboboxContextContext.Provider, {\n    value: {\n      id: pickerId,\n      hasLabel: typeof pickerTriggerProps.label !== 'undefined',\n      multiple: multiple,\n      popupType: popupType\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 85,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {\n    disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,\n    ref: ref,\n    trigger: trigger,\n    placement: (0, _utils.placementPolyfill)(placement, rtl),\n    speaker: speaker,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 9\n    }\n  })));\n});\nPickerToggleTrigger.displayName = 'PickerToggleTrigger';\nvar _default = PickerToggleTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggleTrigger.tsx?");
 
 /***/ }),
 
@@ -9805,7 +10058,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _utils = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\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    trigger = props.trigger,\n    target = props.target,\n    overlay = props.overlay,\n    searchInput = props.searchInput,\n    active = props.active,\n    readOnly = props.readOnly,\n    disabled = props.disabled,\n    loading = props.loading,\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, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n\n    // The focus is on the trigger button after closing\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current3, _trigger$current3$ope;\n    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  });\n  var handleToggleDropdown = (0, _utils.useEventCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n    handleOpen();\n  });\n  var onToggle = (0, _utils.useEventCallback)(function (event) {\n    // Keyboard events should not be processed when readOnly and disabled are set.\n    if (readOnly || disabled || loading) {\n      return;\n    }\n    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      }\n\n      // delete\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n    if (overlay !== null && overlay !== void 0 && overlay.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\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      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      }\n\n      // The search box gets focus when typing characters and numbers.\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\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 _searchInput$current;\n          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();\n        }\n      }\n    }\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    }\n\n    // Native event callback\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  });\n  return onToggle;\n};\nvar _default = useToggleKeyDownEvent;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useToggleKeyDownEvent.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _utils = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\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    trigger = props.trigger,\n    target = props.target,\n    overlay = props.overlay,\n    searchInput = props.searchInput,\n    active = props.active,\n    readOnly = props.readOnly,\n    disabled = props.disabled,\n    loading = props.loading,\n    onExit = props.onExit,\n    onKeyDown = props.onKeyDown,\n    onMenuKeyDown = props.onMenuKeyDown,\n    onMenuPressEnter = props.onMenuPressEnter,\n    onMenuPressBackspace = props.onMenuPressBackspace;\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n\n    // The focus is on the trigger button after closing\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current3, _trigger$current3$ope;\n    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);\n  });\n  var handleToggleDropdown = (0, _utils.useEventCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n    handleOpen();\n  });\n  var onToggle = (0, _utils.useEventCallback)(function (event) {\n    // Keyboard events should not be processed when readOnly and disabled are set.\n    if (readOnly || disabled || loading) {\n      return;\n    }\n    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      }\n\n      // delete\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n    if (overlay !== null && overlay !== void 0 && overlay.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\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      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      }\n\n      // The search box gets focus when typing characters and numbers.\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\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 _searchInput$current;\n          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();\n        }\n      }\n    }\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    }\n\n    // Native event callback\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  });\n  return onToggle;\n};\nvar _default = useToggleKeyDownEvent;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useToggleKeyDownEvent.ts?");
 
 /***/ }),
 
@@ -10003,7 +10256,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.toastPlacements = void 0;\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _ToastContext = _interopRequireDefault(__webpack_require__(/*! ./ToastContext */ \"./src/toaster/ToastContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/toaster/ToastContainer.tsx\",\n  _this = void 0;\nvar toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];\nexports.toastPlacements = toastPlacements;\nvar useMessages = function useMessages() {\n  var _useState = (0, _react.useState)([]),\n    messages = _useState[0],\n    setMessages = _useState[1];\n  var getKey = (0, _react.useCallback)(function (key) {\n    if (typeof key === 'undefined' && messages.length) {\n      return messages[messages.length - 1].key;\n    }\n    return key;\n  }, [messages]);\n  var push = (0, _react.useCallback)(function (message, options) {\n    var key = (0, _utils.guid)();\n    setMessages(function (prevMessages) {\n      return [].concat(prevMessages, [(0, _extends2.default)({\n        key: key,\n        visible: true,\n        node: message\n      }, options)]);\n    });\n    return key;\n  }, []);\n  var clear = (0, _react.useCallback)(function () {\n    // Set all existing messages to be invisible.\n    setMessages(messages.map(function (msg) {\n      return (0, _extends2.default)({}, msg, {\n        visible: false\n      });\n    }));\n\n    // Remove all invisible messages after 400ms.\n    // The delay removal here is to preserve the animation.\n    setTimeout(function () {\n      setMessages([]);\n    }, 400);\n  }, [messages]);\n  var remove = (0, _react.useCallback)(function (key) {\n    // Set the message of the specified key to invisible.\n    setMessages(messages.map(function (n) {\n      if (n.key === getKey(key)) {\n        n.visible = false;\n      }\n      return n;\n    }));\n\n    // Remove invisible messages after 400ms.\n    setTimeout(function () {\n      setMessages(messages.filter(function (msg) {\n        return msg.visible;\n      }));\n    }, 400);\n  }, [messages, getKey]);\n  return {\n    messages: messages,\n    push: push,\n    clear: clear,\n    remove: remove\n  };\n};\nvar ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var rootRef = (0, _react.useRef)();\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'toast-container' : _props$classPrefix,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'topCenter' : _props$placement,\n    callback = props.callback,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"placement\", \"callback\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix;\n  var classes = merge(className, withClassPrefix((0, _kebabCase.default)(placement)));\n  var _useMessages = useMessages(),\n    push = _useMessages.push,\n    clear = _useMessages.clear,\n    remove = _useMessages.remove,\n    messages = _useMessages.messages;\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      push: push,\n      clear: clear,\n      remove: remove\n    };\n  });\n  var elements = messages.map(function (item) {\n    return /*#__PURE__*/_react.default.createElement(_Transition.default, {\n      key: item.key,\n      in: item.visible,\n      exitedClassName: rootPrefix('toast-fade-exited'),\n      exitingClassName: rootPrefix('toast-fade-exiting'),\n      enteringClassName: rootPrefix('toast-fade-entering'),\n      enteredClassName: rootPrefix('toast-fade-entered'),\n      timeout: 300,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 146,\n        columnNumber: 9\n      }\n    }, function (transitionProps, ref) {\n      var _item$node, _item$node$props, _item$node2, _item$node2$props;\n      var transitionClassName = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.cloneElement(item.node, (0, _extends2.default)({}, rest, {\n        ref: ref,\n        duration: item.duration,\n        // Remove the message after the specified time.\n        onClose: (0, _utils.createChainedFunction)((_item$node = item.node) === null || _item$node === void 0 ? void 0 : (_item$node$props = _item$node.props) === null || _item$node$props === void 0 ? void 0 : _item$node$props.onClose, function () {\n          return remove(item.key);\n        }),\n        className: merge(rootPrefix('toast'), (_item$node2 = item.node) === null || _item$node2 === void 0 ? void 0 : (_item$node2$props = _item$node2.props) === null || _item$node2$props === void 0 ? void 0 : _item$node2$props.className, transitionClassName)\n      }));\n    });\n  });\n  return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {\n    value: {\n      usedToaster: true\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 175,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: function ref(selfRef) {\n      rootRef.current = selfRef;\n      callback === null || callback === void 0 ? void 0 : callback(selfRef);\n    },\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 176,\n      columnNumber: 9\n    }\n  }), elements));\n});\nToastContainer.getInstance = function (props) {\n  var container = props.container,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"container\"]);\n  var containerRef = /*#__PURE__*/_react.default.createRef();\n  var containerElement = (typeof container === 'function' ? container() : container) || document.body;\n  return new Promise(function (resolve) {\n    var renderCallback = function renderCallback() {\n      resolve([containerRef, unmount]);\n    };\n    var _render = (0, _utils.render)( /*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {\n        ref: containerRef,\n        callback: renderCallback,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 204,\n          columnNumber: 7\n        }\n      })), containerElement),\n      unmount = _render.unmount;\n  });\n};\nToastContainer.displayName = 'ToastContainer';\nToastContainer.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  placement: _propTypes.default.elementType,\n  container: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),\n  callback: _propTypes.default.func\n};\nvar _default = ToastContainer;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/toaster/ToastContainer.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.toastPlacements = void 0;\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _ToastContext = _interopRequireDefault(__webpack_require__(/*! ./ToastContext */ \"./src/toaster/ToastContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/toaster/ToastContainer.tsx\",\n  _this = void 0;\nvar toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];\nexports.toastPlacements = toastPlacements;\nvar useMessages = function useMessages() {\n  var _useState = (0, _react.useState)([]),\n    messages = _useState[0],\n    setMessages = _useState[1];\n  var getKey = (0, _react.useCallback)(function (key) {\n    if (typeof key === 'undefined' && messages.length) {\n      return messages[messages.length - 1].key;\n    }\n    return key;\n  }, [messages]);\n  var push = (0, _react.useCallback)(function (message, options) {\n    var key = (0, _utils.guid)();\n    setMessages(function (prevMessages) {\n      return [].concat(prevMessages, [(0, _extends2.default)({\n        key: key,\n        visible: true,\n        node: message\n      }, options)]);\n    });\n    return key;\n  }, []);\n  var clear = (0, _react.useCallback)(function () {\n    // Set all existing messages to be invisible.\n    setMessages(messages.map(function (msg) {\n      return (0, _extends2.default)({}, msg, {\n        visible: false\n      });\n    }));\n\n    // Remove all invisible messages after 400ms.\n    // The delay removal here is to preserve the animation.\n    setTimeout(function () {\n      setMessages([]);\n    }, 400);\n  }, [messages]);\n  var remove = (0, _react.useCallback)(function (key) {\n    // Set the message of the specified key to invisible.\n    setMessages(messages.map(function (n) {\n      if (n.key === getKey(key)) {\n        n.visible = false;\n      }\n      return n;\n    }));\n\n    // Remove invisible messages after 400ms.\n    setTimeout(function () {\n      setMessages(messages.filter(function (msg) {\n        return msg.visible;\n      }));\n    }, 400);\n  }, [messages, getKey]);\n  return {\n    messages: messages,\n    push: push,\n    clear: clear,\n    remove: remove\n  };\n};\nvar ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var rootRef = (0, _react.useRef)();\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'toast-container' : _props$classPrefix,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'topCenter' : _props$placement,\n    callback = props.callback,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"className\", \"classPrefix\", \"placement\", \"callback\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix;\n  var classes = merge(className, withClassPrefix((0, _kebabCase.default)(placement)));\n  var _useMessages = useMessages(),\n    push = _useMessages.push,\n    clear = _useMessages.clear,\n    remove = _useMessages.remove,\n    messages = _useMessages.messages;\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      push: push,\n      clear: clear,\n      remove: remove\n    };\n  });\n  var elements = messages.map(function (item) {\n    return /*#__PURE__*/_react.default.createElement(_Transition.default, {\n      key: item.key,\n      in: item.visible,\n      exitedClassName: rootPrefix('toast-fade-exited'),\n      exitingClassName: rootPrefix('toast-fade-exiting'),\n      enteringClassName: rootPrefix('toast-fade-entering'),\n      enteredClassName: rootPrefix('toast-fade-entered'),\n      timeout: 300,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 153,\n        columnNumber: 9\n      }\n    }, function (transitionProps, ref) {\n      var _item$node, _item$node$props, _item$node2, _item$node2$props;\n      var transitionClassName = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.cloneElement(item.node, (0, _extends2.default)({}, rest, {\n        ref: ref,\n        duration: item.duration,\n        // Remove the message after the specified time.\n        onClose: (0, _utils.createChainedFunction)((_item$node = item.node) === null || _item$node === void 0 ? void 0 : (_item$node$props = _item$node.props) === null || _item$node$props === void 0 ? void 0 : _item$node$props.onClose, function () {\n          return remove(item.key);\n        }),\n        className: merge(rootPrefix('toast'), (_item$node2 = item.node) === null || _item$node2 === void 0 ? void 0 : (_item$node2$props = _item$node2.props) === null || _item$node2$props === void 0 ? void 0 : _item$node2$props.className, transitionClassName)\n      }));\n    });\n  });\n  return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {\n    value: {\n      usedToaster: true\n    },\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 182,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: function ref(selfRef) {\n      rootRef.current = selfRef;\n      callback === null || callback === void 0 ? void 0 : callback(selfRef);\n    },\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 183,\n      columnNumber: 9\n    }\n  }), elements));\n});\nToastContainer.getInstance = function (props) {\n  var container = props.container,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"container\"]);\n  var containerRef = /*#__PURE__*/_react.default.createRef();\n  var containerElement = (typeof container === 'function' ? container() : container) || document.body;\n  return new Promise(function (resolve) {\n    var renderCallback = function renderCallback() {\n      resolve([containerRef, unmount]);\n    };\n    var _render = (0, _utils.render)( /*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {\n        ref: containerRef,\n        callback: renderCallback,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 211,\n          columnNumber: 7\n        }\n      })), containerElement),\n      unmount = _render.unmount;\n  });\n};\nToastContainer.displayName = 'ToastContainer';\nToastContainer.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  placement: _propTypes.default.elementType,\n  container: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),\n  callback: _propTypes.default.func\n};\nvar _default = ToastContainer;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/toaster/ToastContainer.tsx?");
 
 /***/ }),
 
@@ -10025,7 +10278,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.useToaster = void 0;\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ./toaster */ \"./src/toaster/toaster.tsx\"));\nvar _useToaster = _interopRequireDefault(__webpack_require__(/*! ./useToaster */ \"./src/toaster/useToaster.ts\"));\nexports.useToaster = _useToaster.default;\nvar _default = _toaster.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/toaster/index.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ./toaster */ \"./src/toaster/toaster.tsx\"));\nvar _default = _toaster.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/toaster/index.tsx?");
 
 /***/ }),
 
@@ -10040,17 +10293,6 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/toaster/useToaster.ts":
-/*!***********************************!*\
-  !*** ./src/toaster/useToaster.ts ***!
-  \***********************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ./toaster */ \"./src/toaster/toaster.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n/**\n * The 'useToaster' hook is a wrapper for the 'toaster' module.\n * @returns toaster { push, remove, clear }\n *\n * @see https://rsuitejs.com/components/message/\n * @see https://rsuitejs.com/components/notification/\n */\nvar useToaster = function useToaster() {\n  var _useCustom = (0, _utils.useCustom)(),\n    toasters = _useCustom.toasters;\n  return (0, _react.useMemo)(function () {\n    return {\n      /**\n       * Push a toast message.\n       * @param message The message to be displayed.\n       *                eg: `<Message type=\"success\" description=\"Success\" />` or `<Notification type=\"success\" closable>Success</Notification>`\n       * @param options The options of the toast message. (optional)\n       *                eg: `{ placement: 'topCenter', duration: 5000 }`\n       * @returns The key of the toast message.\n       */\n      push: function push(message, options) {\n        var _toasters$current;\n        var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');\n        return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);\n      },\n      /**\n       * Remove a toast message.\n       * @param key  The key of the toast message.\n       */\n      remove: function remove(key) {\n        toasters ? Array.from(toasters.current).forEach(function (_ref) {\n          var c = _ref[1];\n          return c === null || c === void 0 ? void 0 : c.remove(key);\n        }) : _toaster.default.remove(key);\n      },\n      /**\n       * Clear all toast messages.\n       */\n      clear: function clear() {\n        toasters ? Array.from(toasters.current).forEach(function (_ref2) {\n          var c = _ref2[1];\n          return c === null || c === void 0 ? void 0 : c.clear();\n        }) : _toaster.default.clear();\n      }\n    };\n  }, [toasters]);\n};\nvar _default = useToaster;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/toaster/useToaster.ts?");
-
-/***/ }),
-
 /***/ "./src/useMediaQuery/index.ts":
 /*!************************************!*\
   !*** ./src/useMediaQuery/index.ts ***!
@@ -10073,6 +10315,28 @@ eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/h
 
 /***/ }),
 
+/***/ "./src/useToaster/index.tsx":
+/*!**********************************!*\
+  !*** ./src/useToaster/index.tsx ***!
+  \**********************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _useToaster = _interopRequireDefault(__webpack_require__(/*! ./useToaster */ \"./src/useToaster/useToaster.ts\"));\nvar _default = _useToaster.default;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/useToaster/index.tsx?");
+
+/***/ }),
+
+/***/ "./src/useToaster/useToaster.ts":
+/*!**************************************!*\
+  !*** ./src/useToaster/useToaster.ts ***!
+  \**************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ../toaster */ \"./src/toaster/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n/**\n * Toaster display brief, temporary notifications of actions, errors, or other events in an application.\n * It is often used with the Message and Notification components.\n * @returns toaster { push, remove, clear }\n *\n * @see https://rsuitejs.com/components/use-toaster/\n */\nvar useToaster = function useToaster() {\n  var _useCustom = (0, _utils.useCustom)(),\n    toasters = _useCustom.toasters;\n  return (0, _react.useMemo)(function () {\n    return {\n      /**\n       * Push a toast message.\n       * @param message The message to be displayed.\n       *                eg: `<Message type=\"success\" description=\"Success\" />` or `<Notification type=\"success\" closable>Success</Notification>`\n       * @param options The options of the toast message. (optional)\n       *                eg: `{ placement: 'topCenter', duration: 5000 }`\n       * @returns The key of the toast message.\n       */\n      push: function push(message, options) {\n        var _toasters$current;\n        var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');\n        return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);\n      },\n      /**\n       * Remove a toast message.\n       * @param key  The key of the toast message.\n       */\n      remove: function remove(key) {\n        toasters ? Array.from(toasters.current).forEach(function (_ref) {\n          var c = _ref[1];\n          return c === null || c === void 0 ? void 0 : c.remove(key);\n        }) : _toaster.default.remove(key);\n      },\n      /**\n       * Clear all toast messages.\n       */\n      clear: function clear() {\n        toasters ? Array.from(toasters.current).forEach(function (_ref2) {\n          var c = _ref2[1];\n          return c === null || c === void 0 ? void 0 : c.clear();\n        }) : _toaster.default.clear();\n      }\n    };\n  }, [toasters]);\n};\nvar _default = useToaster;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/useToaster/useToaster.ts?");
+
+/***/ }),
+
 /***/ "./src/utils/BrowserDetection.ts":
 /*!***************************************!*\
   !*** ./src/utils/BrowserDetection.ts ***!
@@ -10300,7 +10564,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  guid: true,\n  prefix: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  ReactChildren: true,\n  tplTransform: true,\n  ajaxUpload: true,\n  previewFile: true,\n  clone: true,\n  placementPolyfill: true,\n  getDOMNode: true,\n  mergeRefs: true,\n  shallowEqual: true,\n  shallowEqualArray: true,\n  composeFunctions: true,\n  reactToString: true,\n  scrollTopAnimation: true,\n  appendTooltip: true,\n  render: true,\n  safeSetSelection: true,\n  getStringLength: true,\n  useClassNames: true,\n  useEventListener: true,\n  useElementResize: true,\n  useCustom: true,\n  usePortal: true,\n  createComponent: true,\n  useTimeout: true,\n  useControlled: true,\n  useRootClose: true,\n  getSafeRegExpString: true,\n  stringToObject: true,\n  useEventCallback: true,\n  useUpdatedRef: true,\n  useWillUnmount: true,\n  useUpdateEffect: true,\n  useIsMounted: true,\n  useMount: true,\n  useUniqueId: true,\n  useIsomorphicLayoutEffect: true,\n  useInternalId: true,\n  useEnsuredRef: true,\n  defaultClassPrefix: true,\n  getClassNamePrefix: true,\n  globalKey: true,\n  DateUtils: true\n};\nexports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useEnsuredRef = exports.useInternalId = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;\nvar _BrowserDetection = __webpack_require__(/*! ./BrowserDetection */ \"./src/utils/BrowserDetection.ts\");\nObject.keys(_BrowserDetection).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _BrowserDetection[key]) return;\n  exports[key] = _BrowserDetection[key];\n});\nvar _htmlPropsUtils = __webpack_require__(/*! ./htmlPropsUtils */ \"./src/utils/htmlPropsUtils.ts\");\nObject.keys(_htmlPropsUtils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _htmlPropsUtils[key]) return;\n  exports[key] = _htmlPropsUtils[key];\n});\nvar _constants = __webpack_require__(/*! ./constants */ \"./src/utils/constants.ts\");\nObject.keys(_constants).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _constants[key]) return;\n  exports[key] = _constants[key];\n});\nvar _DateUtils = _interopRequireWildcard(__webpack_require__(/*! ./dateUtils */ \"./src/utils/dateUtils.ts\"));\nexports.DateUtils = _DateUtils;\nvar _statusIcons = __webpack_require__(/*! ./statusIcons */ \"./src/utils/statusIcons.tsx\");\nObject.keys(_statusIcons).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _statusIcons[key]) return;\n  exports[key] = _statusIcons[key];\n});\nvar _guid = _interopRequireDefault(__webpack_require__(/*! ./guid */ \"./src/utils/guid.ts\"));\nexports.guid = _guid.default;\nvar _prefix = _interopRequireWildcard(__webpack_require__(/*! ./prefix */ \"./src/utils/prefix.ts\"));\nexports.prefix = _prefix.default;\nexports.defaultClassPrefix = _prefix.defaultClassPrefix;\nexports.getClassNamePrefix = _prefix.getClassNamePrefix;\nexports.globalKey = _prefix.globalKey;\nvar _createChainedFunction = _interopRequireDefault(__webpack_require__(/*! ./createChainedFunction */ \"./src/utils/createChainedFunction.ts\"));\nexports.createChainedFunction = _createChainedFunction.default;\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ./isOneOf */ \"./src/utils/isOneOf.ts\"));\nexports.isOneOf = _isOneOf.default;\nvar _ReactChildren = _interopRequireDefault(__webpack_require__(/*! ./ReactChildren */ \"./src/utils/ReactChildren.tsx\"));\nexports.ReactChildren = _ReactChildren.default;\nvar _tplTransform = _interopRequireDefault(__webpack_require__(/*! ./tplTransform */ \"./src/utils/tplTransform.tsx\"));\nexports.tplTransform = _tplTransform.default;\nvar _ajaxUpload = _interopRequireDefault(__webpack_require__(/*! ./ajaxUpload */ \"./src/utils/ajaxUpload.ts\"));\nexports.ajaxUpload = _ajaxUpload.default;\nvar _previewFile = _interopRequireDefault(__webpack_require__(/*! ./previewFile */ \"./src/utils/previewFile.ts\"));\nexports.previewFile = _previewFile.default;\nvar _clone = _interopRequireDefault(__webpack_require__(/*! ./clone */ \"./src/utils/clone.ts\"));\nexports.clone = _clone.default;\nvar _placementPolyfill = _interopRequireDefault(__webpack_require__(/*! ./placementPolyfill */ \"./src/utils/placementPolyfill.ts\"));\nexports.placementPolyfill = _placementPolyfill.default;\nvar _getDOMNode = _interopRequireDefault(__webpack_require__(/*! ./getDOMNode */ \"./src/utils/getDOMNode.ts\"));\nexports.getDOMNode = _getDOMNode.default;\nvar _mergeRefs = _interopRequireDefault(__webpack_require__(/*! ./mergeRefs */ \"./src/utils/mergeRefs.ts\"));\nexports.mergeRefs = _mergeRefs.default;\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ./shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nexports.shallowEqual = _shallowEqual.default;\nvar _shallowEqualArray = _interopRequireDefault(__webpack_require__(/*! ./shallowEqualArray */ \"./src/utils/shallowEqualArray.ts\"));\nexports.shallowEqualArray = _shallowEqualArray.default;\nvar _composeFunctions = _interopRequireDefault(__webpack_require__(/*! ./composeFunctions */ \"./src/utils/composeFunctions.ts\"));\nexports.composeFunctions = _composeFunctions.default;\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ./reactToString */ \"./src/utils/reactToString.ts\"));\nexports.reactToString = _reactToString.default;\nvar _scrollTopAnimation = _interopRequireDefault(__webpack_require__(/*! ./scrollTopAnimation */ \"./src/utils/scrollTopAnimation.ts\"));\nexports.scrollTopAnimation = _scrollTopAnimation.default;\nvar _appendTooltip = _interopRequireDefault(__webpack_require__(/*! ./appendTooltip */ \"./src/utils/appendTooltip.tsx\"));\nexports.appendTooltip = _appendTooltip.default;\nvar _render = _interopRequireDefault(__webpack_require__(/*! ./render */ \"./src/utils/render.ts\"));\nexports.render = _render.default;\nvar _safeSetSelection = _interopRequireDefault(__webpack_require__(/*! ./safeSetSelection */ \"./src/utils/safeSetSelection.ts\"));\nexports.safeSetSelection = _safeSetSelection.default;\nvar _getStringLength = _interopRequireDefault(__webpack_require__(/*! ./getStringLength */ \"./src/utils/getStringLength.ts\"));\nexports.getStringLength = _getStringLength.default;\nvar _useClassNames = _interopRequireDefault(__webpack_require__(/*! ./useClassNames */ \"./src/utils/useClassNames.ts\"));\nexports.useClassNames = _useClassNames.default;\nvar _useEventListener = _interopRequireDefault(__webpack_require__(/*! ./useEventListener */ \"./src/utils/useEventListener.ts\"));\nexports.useEventListener = _useEventListener.default;\nvar _useElementResize = _interopRequireDefault(__webpack_require__(/*! ./useElementResize */ \"./src/utils/useElementResize.ts\"));\nexports.useElementResize = _useElementResize.default;\nvar _useCustom = _interopRequireDefault(__webpack_require__(/*! ./useCustom */ \"./src/utils/useCustom.ts\"));\nexports.useCustom = _useCustom.default;\nvar _usePortal = _interopRequireDefault(__webpack_require__(/*! ./usePortal */ \"./src/utils/usePortal.tsx\"));\nexports.usePortal = _usePortal.default;\nvar _createComponent = _interopRequireDefault(__webpack_require__(/*! ./createComponent */ \"./src/utils/createComponent.tsx\"));\nexports.createComponent = _createComponent.default;\nvar _useTimeout = _interopRequireDefault(__webpack_require__(/*! ./useTimeout */ \"./src/utils/useTimeout.ts\"));\nexports.useTimeout = _useTimeout.default;\nvar _useControlled = _interopRequireDefault(__webpack_require__(/*! ./useControlled */ \"./src/utils/useControlled.ts\"));\nexports.useControlled = _useControlled.default;\nvar _useRootClose = _interopRequireDefault(__webpack_require__(/*! ./useRootClose */ \"./src/utils/useRootClose.ts\"));\nexports.useRootClose = _useRootClose.default;\nvar _getSafeRegExpString = _interopRequireDefault(__webpack_require__(/*! ./getSafeRegExpString */ \"./src/utils/getSafeRegExpString.ts\"));\nexports.getSafeRegExpString = _getSafeRegExpString.default;\nvar _stringToObject = _interopRequireDefault(__webpack_require__(/*! ./stringToObject */ \"./src/utils/stringToObject.ts\"));\nexports.stringToObject = _stringToObject.default;\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ./useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nexports.useEventCallback = _useEventCallback.default;\nvar _useUpdatedRef = _interopRequireDefault(__webpack_require__(/*! ./useUpdatedRef */ \"./src/utils/useUpdatedRef.ts\"));\nexports.useUpdatedRef = _useUpdatedRef.default;\nvar _useWillUnmount = _interopRequireDefault(__webpack_require__(/*! ./useWillUnmount */ \"./src/utils/useWillUnmount.ts\"));\nexports.useWillUnmount = _useWillUnmount.default;\nvar _useUpdateEffect = _interopRequireDefault(__webpack_require__(/*! ./useUpdateEffect */ \"./src/utils/useUpdateEffect.ts\"));\nexports.useUpdateEffect = _useUpdateEffect.default;\nvar _useIsMounted = _interopRequireDefault(__webpack_require__(/*! ./useIsMounted */ \"./src/utils/useIsMounted.ts\"));\nexports.useIsMounted = _useIsMounted.default;\nvar _useMount = _interopRequireDefault(__webpack_require__(/*! ./useMount */ \"./src/utils/useMount.ts\"));\nexports.useMount = _useMount.default;\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ./useUniqueId */ \"./src/utils/useUniqueId.ts\"));\nexports.useUniqueId = _useUniqueId.default;\nvar _useIsomorphicLayoutEffect = _interopRequireDefault(__webpack_require__(/*! ./useIsomorphicLayoutEffect */ \"./src/utils/useIsomorphicLayoutEffect.ts\"));\nexports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ./useInternalId */ \"./src/utils/useInternalId.ts\"));\nexports.useInternalId = _useInternalId.default;\nvar _useEnsuredRef = _interopRequireDefault(__webpack_require__(/*! ./useEnsuredRef */ \"./src/utils/useEnsuredRef.ts\"));\nexports.useEnsuredRef = _useEnsuredRef.default;\n\n//# sourceURL=webpack://rsuite/./src/utils/index.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  guid: true,\n  prefix: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  ReactChildren: true,\n  tplTransform: true,\n  ajaxUpload: true,\n  previewFile: true,\n  clone: true,\n  placementPolyfill: true,\n  getDOMNode: true,\n  mergeRefs: true,\n  shallowEqual: true,\n  shallowEqualArray: true,\n  composeFunctions: true,\n  reactToString: true,\n  scrollTopAnimation: true,\n  appendTooltip: true,\n  render: true,\n  safeSetSelection: true,\n  getStringLength: true,\n  useClassNames: true,\n  useEventListener: true,\n  useElementResize: true,\n  useCustom: true,\n  usePortal: true,\n  createComponent: true,\n  useTimeout: true,\n  useControlled: true,\n  useRootClose: true,\n  getSafeRegExpString: true,\n  stringToObject: true,\n  useEventCallback: true,\n  useUpdatedRef: true,\n  useWillUnmount: true,\n  useUpdateEffect: true,\n  useIsMounted: true,\n  useMount: true,\n  useUniqueId: true,\n  useIsomorphicLayoutEffect: true,\n  useInternalId: true,\n  useEnsuredRef: true,\n  defaultClassPrefix: true,\n  getClassNamePrefix: true,\n  globalKey: true,\n  useMap: true,\n  DateUtils: true\n};\nexports.DateUtils = exports.useMap = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useEnsuredRef = exports.useInternalId = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;\nvar _BrowserDetection = __webpack_require__(/*! ./BrowserDetection */ \"./src/utils/BrowserDetection.ts\");\nObject.keys(_BrowserDetection).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _BrowserDetection[key]) return;\n  exports[key] = _BrowserDetection[key];\n});\nvar _htmlPropsUtils = __webpack_require__(/*! ./htmlPropsUtils */ \"./src/utils/htmlPropsUtils.ts\");\nObject.keys(_htmlPropsUtils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _htmlPropsUtils[key]) return;\n  exports[key] = _htmlPropsUtils[key];\n});\nvar _constants = __webpack_require__(/*! ./constants */ \"./src/utils/constants.ts\");\nObject.keys(_constants).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _constants[key]) return;\n  exports[key] = _constants[key];\n});\nvar _DateUtils = _interopRequireWildcard(__webpack_require__(/*! ./dateUtils */ \"./src/utils/dateUtils.ts\"));\nexports.DateUtils = _DateUtils;\nvar _statusIcons = __webpack_require__(/*! ./statusIcons */ \"./src/utils/statusIcons.tsx\");\nObject.keys(_statusIcons).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _statusIcons[key]) return;\n  exports[key] = _statusIcons[key];\n});\nvar _guid = _interopRequireDefault(__webpack_require__(/*! ./guid */ \"./src/utils/guid.ts\"));\nexports.guid = _guid.default;\nvar _prefix = _interopRequireWildcard(__webpack_require__(/*! ./prefix */ \"./src/utils/prefix.ts\"));\nexports.prefix = _prefix.default;\nexports.defaultClassPrefix = _prefix.defaultClassPrefix;\nexports.getClassNamePrefix = _prefix.getClassNamePrefix;\nexports.globalKey = _prefix.globalKey;\nvar _createChainedFunction = _interopRequireDefault(__webpack_require__(/*! ./createChainedFunction */ \"./src/utils/createChainedFunction.ts\"));\nexports.createChainedFunction = _createChainedFunction.default;\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ./isOneOf */ \"./src/utils/isOneOf.ts\"));\nexports.isOneOf = _isOneOf.default;\nvar _ReactChildren = _interopRequireDefault(__webpack_require__(/*! ./ReactChildren */ \"./src/utils/ReactChildren.tsx\"));\nexports.ReactChildren = _ReactChildren.default;\nvar _tplTransform = _interopRequireDefault(__webpack_require__(/*! ./tplTransform */ \"./src/utils/tplTransform.tsx\"));\nexports.tplTransform = _tplTransform.default;\nvar _ajaxUpload = _interopRequireDefault(__webpack_require__(/*! ./ajaxUpload */ \"./src/utils/ajaxUpload.ts\"));\nexports.ajaxUpload = _ajaxUpload.default;\nvar _previewFile = _interopRequireDefault(__webpack_require__(/*! ./previewFile */ \"./src/utils/previewFile.ts\"));\nexports.previewFile = _previewFile.default;\nvar _clone = _interopRequireDefault(__webpack_require__(/*! ./clone */ \"./src/utils/clone.ts\"));\nexports.clone = _clone.default;\nvar _placementPolyfill = _interopRequireDefault(__webpack_require__(/*! ./placementPolyfill */ \"./src/utils/placementPolyfill.ts\"));\nexports.placementPolyfill = _placementPolyfill.default;\nvar _getDOMNode = _interopRequireDefault(__webpack_require__(/*! ./getDOMNode */ \"./src/utils/getDOMNode.ts\"));\nexports.getDOMNode = _getDOMNode.default;\nvar _mergeRefs = _interopRequireDefault(__webpack_require__(/*! ./mergeRefs */ \"./src/utils/mergeRefs.ts\"));\nexports.mergeRefs = _mergeRefs.default;\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ./shallowEqual */ \"./src/utils/shallowEqual.ts\"));\nexports.shallowEqual = _shallowEqual.default;\nvar _shallowEqualArray = _interopRequireDefault(__webpack_require__(/*! ./shallowEqualArray */ \"./src/utils/shallowEqualArray.ts\"));\nexports.shallowEqualArray = _shallowEqualArray.default;\nvar _composeFunctions = _interopRequireDefault(__webpack_require__(/*! ./composeFunctions */ \"./src/utils/composeFunctions.ts\"));\nexports.composeFunctions = _composeFunctions.default;\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ./reactToString */ \"./src/utils/reactToString.ts\"));\nexports.reactToString = _reactToString.default;\nvar _scrollTopAnimation = _interopRequireDefault(__webpack_require__(/*! ./scrollTopAnimation */ \"./src/utils/scrollTopAnimation.ts\"));\nexports.scrollTopAnimation = _scrollTopAnimation.default;\nvar _appendTooltip = _interopRequireDefault(__webpack_require__(/*! ./appendTooltip */ \"./src/utils/appendTooltip.tsx\"));\nexports.appendTooltip = _appendTooltip.default;\nvar _render = _interopRequireDefault(__webpack_require__(/*! ./render */ \"./src/utils/render.ts\"));\nexports.render = _render.default;\nvar _safeSetSelection = _interopRequireDefault(__webpack_require__(/*! ./safeSetSelection */ \"./src/utils/safeSetSelection.ts\"));\nexports.safeSetSelection = _safeSetSelection.default;\nvar _getStringLength = _interopRequireDefault(__webpack_require__(/*! ./getStringLength */ \"./src/utils/getStringLength.ts\"));\nexports.getStringLength = _getStringLength.default;\nvar _useClassNames = _interopRequireDefault(__webpack_require__(/*! ./useClassNames */ \"./src/utils/useClassNames.ts\"));\nexports.useClassNames = _useClassNames.default;\nvar _useEventListener = _interopRequireDefault(__webpack_require__(/*! ./useEventListener */ \"./src/utils/useEventListener.ts\"));\nexports.useEventListener = _useEventListener.default;\nvar _useElementResize = _interopRequireDefault(__webpack_require__(/*! ./useElementResize */ \"./src/utils/useElementResize.ts\"));\nexports.useElementResize = _useElementResize.default;\nvar _useCustom = _interopRequireDefault(__webpack_require__(/*! ./useCustom */ \"./src/utils/useCustom.ts\"));\nexports.useCustom = _useCustom.default;\nvar _usePortal = _interopRequireDefault(__webpack_require__(/*! ./usePortal */ \"./src/utils/usePortal.tsx\"));\nexports.usePortal = _usePortal.default;\nvar _createComponent = _interopRequireDefault(__webpack_require__(/*! ./createComponent */ \"./src/utils/createComponent.tsx\"));\nexports.createComponent = _createComponent.default;\nvar _useTimeout = _interopRequireDefault(__webpack_require__(/*! ./useTimeout */ \"./src/utils/useTimeout.ts\"));\nexports.useTimeout = _useTimeout.default;\nvar _useControlled = _interopRequireDefault(__webpack_require__(/*! ./useControlled */ \"./src/utils/useControlled.ts\"));\nexports.useControlled = _useControlled.default;\nvar _useRootClose = _interopRequireDefault(__webpack_require__(/*! ./useRootClose */ \"./src/utils/useRootClose.ts\"));\nexports.useRootClose = _useRootClose.default;\nvar _getSafeRegExpString = _interopRequireDefault(__webpack_require__(/*! ./getSafeRegExpString */ \"./src/utils/getSafeRegExpString.ts\"));\nexports.getSafeRegExpString = _getSafeRegExpString.default;\nvar _stringToObject = _interopRequireDefault(__webpack_require__(/*! ./stringToObject */ \"./src/utils/stringToObject.ts\"));\nexports.stringToObject = _stringToObject.default;\nvar _useEventCallback = _interopRequireDefault(__webpack_require__(/*! ./useEventCallback */ \"./src/utils/useEventCallback.ts\"));\nexports.useEventCallback = _useEventCallback.default;\nvar _useUpdatedRef = _interopRequireDefault(__webpack_require__(/*! ./useUpdatedRef */ \"./src/utils/useUpdatedRef.ts\"));\nexports.useUpdatedRef = _useUpdatedRef.default;\nvar _useWillUnmount = _interopRequireDefault(__webpack_require__(/*! ./useWillUnmount */ \"./src/utils/useWillUnmount.ts\"));\nexports.useWillUnmount = _useWillUnmount.default;\nvar _useUpdateEffect = _interopRequireDefault(__webpack_require__(/*! ./useUpdateEffect */ \"./src/utils/useUpdateEffect.ts\"));\nexports.useUpdateEffect = _useUpdateEffect.default;\nvar _useIsMounted = _interopRequireDefault(__webpack_require__(/*! ./useIsMounted */ \"./src/utils/useIsMounted.ts\"));\nexports.useIsMounted = _useIsMounted.default;\nvar _useMount = _interopRequireDefault(__webpack_require__(/*! ./useMount */ \"./src/utils/useMount.ts\"));\nexports.useMount = _useMount.default;\nvar _useUniqueId = _interopRequireDefault(__webpack_require__(/*! ./useUniqueId */ \"./src/utils/useUniqueId.ts\"));\nexports.useUniqueId = _useUniqueId.default;\nvar _useIsomorphicLayoutEffect = _interopRequireDefault(__webpack_require__(/*! ./useIsomorphicLayoutEffect */ \"./src/utils/useIsomorphicLayoutEffect.ts\"));\nexports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;\nvar _useInternalId = _interopRequireDefault(__webpack_require__(/*! ./useInternalId */ \"./src/utils/useInternalId.ts\"));\nexports.useInternalId = _useInternalId.default;\nvar _useEnsuredRef = _interopRequireDefault(__webpack_require__(/*! ./useEnsuredRef */ \"./src/utils/useEnsuredRef.ts\"));\nexports.useEnsuredRef = _useEnsuredRef.default;\nvar _useMap = __webpack_require__(/*! ./useMap */ \"./src/utils/useMap.ts\");\nexports.useMap = _useMap.useMap;\n\n//# sourceURL=webpack://rsuite/./src/utils/index.ts?");
 
 /***/ }),