rsuite 5.6.1 → 5.6.2

package/dist/rsuite.js

@@ -1506,7 +1506,7 @@ eval("\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _insertCs
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Affix/Affix.tsx\",\n    _this = void 0;\n\n/**\n * Get the layout size and offset of the mount element\n */\nfunction useOffset(mountRef) {\n  var _useState = (0, _react.useState)(null),\n      offset = _useState[0],\n      setOffset = _useState[1];\n\n  var updateOffset = (0, _react.useCallback)(function () {\n    // FIXME upgrade dom-lib\n    setOffset((0, _getOffset.default)(mountRef.current));\n  }, [mountRef]); // Update after the element size changes\n\n  (0, _utils.useElementResize)(function () {\n    return mountRef.current;\n  }, updateOffset); // Initialize after the first render\n\n  (0, _utils.useMount)(updateOffset); // Update after window size changes\n\n  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);\n  return offset;\n}\n/**\n * Get the layout size and offset of the container element\n * @param container\n */\n\n\nfunction useContainerOffset(container) {\n  var _useState2 = (0, _react.useState)(null),\n      offset = _useState2[0],\n      setOffset = _useState2[1];\n\n  (0, _react.useEffect)(function () {\n    var node = typeof container === 'function' ? container() : container;\n    setOffset(node ? (0, _getOffset.default)(node) : null);\n  }, [container]);\n  return offset;\n}\n/**\n * Check whether the current element should be in a fixed state.\n * @param offset\n * @param containerOffset\n * @param props\n */\n\n\nfunction useFixed(offset, containerOffset, props) {\n  var top = props.top,\n      onChange = props.onChange;\n\n  var _useState3 = (0, _react.useState)(false),\n      fixed = _useState3[0],\n      setFixed = _useState3[1];\n\n  var handleScroll = (0, _react.useCallback)(function () {\n    if (!offset) {\n      return;\n    }\n\n    var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.\n\n    var nextFixed = scrollY - (Number(offset.top) - Number(top)) >= 0; // If the current element is specified in the container,\n    // add to determine whether the current container is in the window range.\n\n    if (containerOffset) {\n      nextFixed = nextFixed && scrollY < Number(containerOffset.top) + Number(containerOffset.height);\n    }\n\n    if (nextFixed !== fixed) {\n      setFixed(nextFixed);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextFixed);\n    }\n  }, [fixed, offset, containerOffset, onChange, top]); // Add scroll event to window\n\n  (0, _utils.useEventListener)(window, 'scroll', handleScroll, false);\n  return fixed;\n}\n\nvar Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'affix' : _props$classPrefix,\n      className = props.className,\n      children = props.children,\n      container = props.container,\n      _props$top = props.top,\n      top = _props$top === void 0 ? 0 : _props$top,\n      onChange = props.onChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"children\", \"container\", \"top\", \"onChange\"]);\n  var mountRef = (0, _react.useRef)(null);\n  var offset = useOffset(mountRef);\n  var containerOffset = useContainerOffset(container);\n  var fixed = useFixed(offset, containerOffset, {\n    top: top,\n    onChange: onChange\n  });\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));\n  var placeholderStyles = fixed ? {\n    width: offset === null || offset === void 0 ? void 0 : offset.width,\n    height: offset === null || offset === void 0 ? void 0 : offset.height\n  } : undefined;\n  var fixedStyles = {\n    position: 'fixed',\n    top: top,\n    left: offset === null || offset === void 0 ? void 0 : offset.left,\n    width: offset === null || offset === void 0 ? void 0 : offset.width,\n    zIndex: 10\n  };\n  var affixStyles = fixed ? fixedStyles : undefined;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: (0, _utils.mergeRefs)(mountRef, ref),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 129,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: classes,\n    style: affixStyles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 130,\n      columnNumber: 9\n    }\n  }, children), fixed && /*#__PURE__*/_react.default.createElement(\"div\", {\n    \"aria-hidden\": true,\n    style: placeholderStyles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 133,\n      columnNumber: 19\n    }\n  }));\n});\n\nAffix.displayName = 'Affix';\nAffix.propTypes = {\n  top: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  container: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.func])\n};\nvar _default = Affix;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Affix/Affix.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Affix/Affix.tsx\",\n    _this = void 0;\n\n/**\n * Get the layout size and offset of the mount element\n */\nfunction useOffset(mountRef) {\n  var _useState = (0, _react.useState)(null),\n      offset = _useState[0],\n      setOffset = _useState[1];\n\n  var updateOffset = (0, _react.useCallback)(function () {\n    setOffset((0, _getOffset.default)(mountRef.current));\n  }, [mountRef]); // Update after the element size changes\n\n  (0, _utils.useElementResize)(function () {\n    return mountRef.current;\n  }, updateOffset); // Initialize after the first render\n\n  (0, _utils.useMount)(updateOffset); // Update after window size changes\n\n  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);\n  return offset;\n}\n/**\n * Get the layout size and offset of the container element\n * @param container\n */\n\n\nfunction useContainerOffset(container) {\n  var _useState2 = (0, _react.useState)(null),\n      offset = _useState2[0],\n      setOffset = _useState2[1];\n\n  (0, _react.useEffect)(function () {\n    var node = typeof container === 'function' ? container() : container;\n    setOffset(node ? (0, _getOffset.default)(node) : null);\n  }, [container]);\n  return offset;\n}\n/**\n * Check whether the current element should be in a fixed state.\n * @param offset\n * @param containerOffset\n * @param props\n */\n\n\nfunction useFixed(offset, containerOffset, props) {\n  var top = props.top,\n      onChange = props.onChange;\n\n  var _useState3 = (0, _react.useState)(false),\n      fixed = _useState3[0],\n      setFixed = _useState3[1];\n\n  var handleScroll = (0, _react.useCallback)(function () {\n    if (!offset) {\n      return;\n    }\n\n    var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.\n\n    var nextFixed = scrollY - (Number(offset.top) - Number(top)) >= 0; // If the current element is specified in the container,\n    // add to determine whether the current container is in the window range.\n\n    if (containerOffset) {\n      nextFixed = nextFixed && scrollY < Number(containerOffset.top) + Number(containerOffset.height);\n    }\n\n    if (nextFixed !== fixed) {\n      setFixed(nextFixed);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextFixed);\n    }\n  }, [fixed, offset, containerOffset, onChange, top]); // Add scroll event to window\n\n  (0, _utils.useEventListener)(window, 'scroll', handleScroll, false);\n  return fixed;\n}\n\nvar Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'affix' : _props$classPrefix,\n      className = props.className,\n      children = props.children,\n      container = props.container,\n      _props$top = props.top,\n      top = _props$top === void 0 ? 0 : _props$top,\n      onChange = props.onChange,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"children\", \"container\", \"top\", \"onChange\"]);\n  var mountRef = (0, _react.useRef)(null);\n  var offset = useOffset(mountRef);\n  var containerOffset = useContainerOffset(container);\n  var fixed = useFixed(offset, containerOffset, {\n    top: top,\n    onChange: onChange\n  });\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));\n  var placeholderStyles = fixed ? {\n    width: offset === null || offset === void 0 ? void 0 : offset.width,\n    height: offset === null || offset === void 0 ? void 0 : offset.height\n  } : undefined;\n  var fixedStyles = {\n    position: 'fixed',\n    top: top,\n    width: offset === null || offset === void 0 ? void 0 : offset.width,\n    zIndex: 10\n  };\n  var affixStyles = fixed ? fixedStyles : undefined;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: (0, _utils.mergeRefs)(mountRef, ref),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: classes,\n    style: affixStyles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 128,\n      columnNumber: 9\n    }\n  }, children), fixed && /*#__PURE__*/_react.default.createElement(\"div\", {\n    \"aria-hidden\": true,\n    style: placeholderStyles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 131,\n      columnNumber: 19\n    }\n  }));\n});\n\nAffix.displayName = 'Affix';\nAffix.propTypes = {\n  top: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  container: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.func])\n};\nvar _default = Affix;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Affix/Affix.tsx?");
 
 /***/ }),
 
@@ -1572,7 +1572,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = exports.transitionPropTypes = exports.STATUS = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getTransitionEnd = _interopRequireDefault(__webpack_require__(/*! dom-lib/getTransitionEnd */ \"./node_modules/dom-lib/esm/getTransitionEnd.js\"));\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Animation/utils.ts\");\n\nvar STATUS;\nexports.STATUS = STATUS;\n\n(function (STATUS) {\n  STATUS[STATUS[\"UNMOUNTED\"] = 0] = \"UNMOUNTED\";\n  STATUS[STATUS[\"EXITED\"] = 1] = \"EXITED\";\n  STATUS[STATUS[\"ENTERING\"] = 2] = \"ENTERING\";\n  STATUS[STATUS[\"ENTERED\"] = 3] = \"ENTERED\";\n  STATUS[STATUS[\"EXITING\"] = 4] = \"EXITING\";\n})(STATUS || (exports.STATUS = STATUS = {}));\n\nvar transitionPropTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {\n  animation: _propTypes.default.bool,\n  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),\n  className: _propTypes.default.string,\n  in: _propTypes.default.bool,\n  unmountOnExit: _propTypes.default.bool,\n  transitionAppear: _propTypes.default.bool,\n  timeout: _propTypes.default.number,\n  exitedClassName: _propTypes.default.string,\n  exitingClassName: _propTypes.default.string,\n  enteredClassName: _propTypes.default.string,\n  enteringClassName: _propTypes.default.string\n});\nexports.transitionPropTypes = transitionPropTypes;\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n  (0, _inheritsLoose2.default)(Transition, _React$Component);\n\n  function Transition(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.animationEventListener = null;\n    _this.instanceElement = null;\n    _this.nextCallback = null;\n    _this.needsUpdate = null;\n    _this.childRef = void 0;\n    var initialStatus;\n\n    if (props.in) {\n      initialStatus = props.transitionAppear ? STATUS.EXITED : STATUS.ENTERED;\n    } else {\n      initialStatus = props.unmountOnExit ? STATUS.UNMOUNTED : STATUS.EXITED;\n    }\n\n    _this.state = {\n      status: initialStatus\n    };\n    _this.nextCallback = null;\n    _this.childRef = /*#__PURE__*/_react.default.createRef();\n    return _this;\n  }\n\n  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n    if (nextProps.in && nextProps.unmountOnExit) {\n      if (prevState.status === STATUS.UNMOUNTED) {\n        // Start enter transition in componentDidUpdate.\n        return {\n          status: STATUS.EXITED\n        };\n      }\n    }\n\n    return null;\n  };\n\n  var _proto = Transition.prototype;\n\n  _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate() {\n    if (!this.props.in || !this.props.unmountOnExit) {\n      this.needsUpdate = true;\n    }\n\n    return null;\n  };\n\n  _proto.componentDidMount = function componentDidMount() {\n    if (this.props.transitionAppear && this.props.in) {\n      this.performEnter(this.props);\n    }\n  };\n\n  _proto.componentDidUpdate = function componentDidUpdate() {\n    var status = this.state.status;\n    var unmountOnExit = this.props.unmountOnExit;\n\n    if (unmountOnExit && status === STATUS.EXITED) {\n      if (this.props.in) {\n        this.performEnter(this.props);\n      } else {\n        if (this.instanceElement) {\n          this.setState({\n            status: STATUS.UNMOUNTED\n          });\n        }\n      }\n\n      return;\n    }\n\n    if (this.needsUpdate) {\n      this.needsUpdate = false;\n\n      if (this.props.in) {\n        if (status === STATUS.EXITING || status === STATUS.EXITED) {\n          this.performEnter(this.props);\n        }\n      } else if (status === STATUS.ENTERING || status === STATUS.ENTERED) {\n        this.performExit(this.props);\n      }\n    }\n  };\n\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.cancelNextCallback();\n    this.instanceElement = null;\n  };\n\n  _proto.onTransitionEnd = function onTransitionEnd(node, handler) {\n    var _this$animationEventL;\n\n    this.setNextCallback(handler);\n    (_this$animationEventL = this.animationEventListener) === null || _this$animationEventL === void 0 ? void 0 : _this$animationEventL.off();\n\n    if (node) {\n      var _this$props = this.props,\n          timeout = _this$props.timeout,\n          animation = _this$props.animation;\n      this.animationEventListener = (0, _on.default)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _getTransitionEnd.default)(), this.nextCallback);\n\n      if (timeout !== null) {\n        setTimeout(this.nextCallback, timeout);\n      }\n    } else {\n      setTimeout(this.nextCallback, 0);\n    }\n  };\n\n  _proto.setNextCallback = function setNextCallback(callback) {\n    var _this2 = this;\n\n    var active = true;\n\n    this.nextCallback = function (event) {\n      if (!active) {\n        return;\n      }\n\n      if (event) {\n        if (_this2.instanceElement === event.target) {\n          callback(event);\n          active = false;\n          _this2.nextCallback = null;\n        }\n\n        return;\n      }\n\n      callback(event);\n      active = false;\n      _this2.nextCallback = null;\n    };\n\n    this.nextCallback.cancel = function () {\n      active = false;\n    };\n\n    return this.nextCallback;\n  };\n\n  _proto.getChildElement = function getChildElement() {\n    if (this.childRef.current) {\n      return (0, _utils.getDOMNode)(this.childRef.current);\n    }\n\n    return (0, _utils.getDOMNode)(this);\n  };\n\n  _proto.performEnter = function performEnter(props) {\n    var _this3 = this;\n\n    var _ref = props || this.props,\n        onEnter = _ref.onEnter,\n        onEntering = _ref.onEntering,\n        onEntered = _ref.onEntered;\n\n    this.cancelNextCallback();\n    var node = this.getChildElement();\n    this.instanceElement = node;\n    onEnter === null || onEnter === void 0 ? void 0 : onEnter(node);\n    this.safeSetState({\n      status: STATUS.ENTERING\n    }, function () {\n      onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);\n\n      _this3.onTransitionEnd(node, function () {\n        _this3.safeSetState({\n          status: STATUS.ENTERED\n        }, function () {\n          onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);\n        });\n      });\n    });\n  };\n\n  _proto.performExit = function performExit(props) {\n    var _this4 = this;\n\n    var _ref2 = props || this.props,\n        onExit = _ref2.onExit,\n        onExiting = _ref2.onExiting,\n        onExited = _ref2.onExited;\n\n    this.cancelNextCallback();\n    var node = this.getChildElement();\n    this.instanceElement = node;\n    onExit === null || onExit === void 0 ? void 0 : onExit(node);\n    this.safeSetState({\n      status: STATUS.EXITING\n    }, function () {\n      onExiting === null || onExiting === void 0 ? void 0 : onExiting(node);\n\n      _this4.onTransitionEnd(node, function () {\n        _this4.safeSetState({\n          status: STATUS.EXITED\n        }, function () {\n          onExited === null || onExited === void 0 ? void 0 : onExited(node);\n        });\n      });\n    });\n  };\n\n  _proto.cancelNextCallback = function cancelNextCallback() {\n    if (this.nextCallback !== null) {\n      this.nextCallback.cancel();\n      this.nextCallback = null;\n    }\n  };\n\n  _proto.safeSetState = function safeSetState(nextState, callback) {\n    if (this.instanceElement) {\n      var nextCallback = this.setNextCallback(callback);\n      this.setState(nextState, function () {\n        return nextCallback();\n      });\n    }\n  };\n\n  _proto.render = function render() {\n    var _child$props;\n\n    var status = this.state.status;\n\n    if (status === STATUS.UNMOUNTED) {\n      return null;\n    }\n\n    var _this$props2 = this.props,\n        children = _this$props2.children,\n        className = _this$props2.className,\n        exitedClassName = _this$props2.exitedClassName,\n        enteringClassName = _this$props2.enteringClassName,\n        enteredClassName = _this$props2.enteredClassName,\n        exitingClassName = _this$props2.exitingClassName,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, [\"children\", \"className\", \"exitedClassName\", \"enteringClassName\", \"enteredClassName\", \"exitingClassName\"]);\n    var childProps = (0, _omit.default)(rest, Object.keys(transitionPropTypes));\n    var transitionClassName;\n\n    if (status === STATUS.EXITED) {\n      transitionClassName = exitedClassName;\n    } else if (status === STATUS.ENTERING) {\n      transitionClassName = enteringClassName;\n    } else if (status === STATUS.ENTERED) {\n      transitionClassName = enteredClassName;\n    } else if (status === STATUS.EXITING) {\n      transitionClassName = exitingClassName;\n    }\n\n    if ((0, _isFunction.default)(children)) {\n      childProps.className = (0, _classnames.default)(className, transitionClassName);\n      return children(childProps, this.childRef);\n    }\n\n    var child = _react.default.Children.only(children);\n\n    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({}, childProps, {\n      ref: this.childRef,\n      className: (0, _classnames.default)(className, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className, transitionClassName)\n    }));\n  };\n\n  return Transition;\n}(_react.default.Component);\n\nTransition.propTypes = transitionPropTypes;\nTransition.displayName = 'Transition';\nTransition.defaultProps = {\n  timeout: 1000\n};\nvar _default = Transition;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Animation/Transition.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = exports.transitionPropTypes = exports.STATUS = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getTransitionEnd = _interopRequireDefault(__webpack_require__(/*! dom-lib/getTransitionEnd */ \"./node_modules/dom-lib/esm/getTransitionEnd.js\"));\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Animation/utils.ts\");\n\nvar STATUS;\nexports.STATUS = STATUS;\n\n(function (STATUS) {\n  STATUS[STATUS[\"UNMOUNTED\"] = 0] = \"UNMOUNTED\";\n  STATUS[STATUS[\"EXITED\"] = 1] = \"EXITED\";\n  STATUS[STATUS[\"ENTERING\"] = 2] = \"ENTERING\";\n  STATUS[STATUS[\"ENTERED\"] = 3] = \"ENTERED\";\n  STATUS[STATUS[\"EXITING\"] = 4] = \"EXITING\";\n})(STATUS || (exports.STATUS = STATUS = {}));\n\nvar transitionPropTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {\n  animation: _propTypes.default.bool,\n  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),\n  className: _propTypes.default.string,\n  in: _propTypes.default.bool,\n  unmountOnExit: _propTypes.default.bool,\n  transitionAppear: _propTypes.default.bool,\n  timeout: _propTypes.default.number,\n  exitedClassName: _propTypes.default.string,\n  exitingClassName: _propTypes.default.string,\n  enteredClassName: _propTypes.default.string,\n  enteringClassName: _propTypes.default.string\n});\nexports.transitionPropTypes = transitionPropTypes;\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n  (0, _inheritsLoose2.default)(Transition, _React$Component);\n\n  function Transition(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.animationEventListener = null;\n    _this.instanceElement = null;\n    _this.nextCallback = null;\n    _this.needsUpdate = null;\n    _this.childRef = void 0;\n    var initialStatus;\n\n    if (props.in) {\n      initialStatus = props.transitionAppear ? STATUS.EXITED : STATUS.ENTERED;\n    } else {\n      initialStatus = props.unmountOnExit ? STATUS.UNMOUNTED : STATUS.EXITED;\n    }\n\n    _this.state = {\n      status: initialStatus\n    };\n    _this.nextCallback = null;\n    _this.childRef = /*#__PURE__*/_react.default.createRef();\n    return _this;\n  }\n\n  Transition.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n    if (nextProps.in && nextProps.unmountOnExit) {\n      if (prevState.status === STATUS.UNMOUNTED) {\n        // Start enter transition in componentDidUpdate.\n        return {\n          status: STATUS.EXITED\n        };\n      }\n    }\n\n    return null;\n  };\n\n  var _proto = Transition.prototype;\n\n  _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate() {\n    if (!this.props.in || !this.props.unmountOnExit) {\n      this.needsUpdate = true;\n    }\n\n    return null;\n  };\n\n  _proto.componentDidMount = function componentDidMount() {\n    if (this.props.transitionAppear && this.props.in) {\n      this.performEnter(this.props);\n    }\n  };\n\n  _proto.componentDidUpdate = function componentDidUpdate() {\n    var status = this.state.status;\n    var unmountOnExit = this.props.unmountOnExit;\n\n    if (unmountOnExit && status === STATUS.EXITED) {\n      if (this.props.in) {\n        this.performEnter(this.props);\n      } else {\n        if (this.instanceElement) {\n          this.setState({\n            status: STATUS.UNMOUNTED\n          });\n        }\n      }\n\n      return;\n    }\n\n    if (this.needsUpdate) {\n      this.needsUpdate = false;\n\n      if (this.props.in) {\n        if (status === STATUS.EXITING || status === STATUS.EXITED) {\n          this.performEnter(this.props);\n        }\n      } else if (status === STATUS.ENTERING || status === STATUS.ENTERED) {\n        this.performExit(this.props);\n      }\n    }\n  };\n\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.cancelNextCallback();\n    this.instanceElement = null;\n  };\n\n  _proto.onTransitionEnd = function onTransitionEnd(node, handler) {\n    var _this$animationEventL;\n\n    this.setNextCallback(handler);\n    (_this$animationEventL = this.animationEventListener) === null || _this$animationEventL === void 0 ? void 0 : _this$animationEventL.off();\n\n    if (!this.nextCallback) {\n      return;\n    }\n\n    if (node) {\n      var _this$props = this.props,\n          timeout = _this$props.timeout,\n          animation = _this$props.animation;\n      this.animationEventListener = (0, _on.default)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _getTransitionEnd.default)(), this.nextCallback);\n\n      if (timeout !== null) {\n        setTimeout(this.nextCallback, timeout);\n      }\n    } else {\n      setTimeout(this.nextCallback, 0);\n    }\n  };\n\n  _proto.setNextCallback = function setNextCallback(callback) {\n    var _this2 = this;\n\n    var active = true;\n\n    this.nextCallback = function (event) {\n      if (!active) {\n        return;\n      }\n\n      if (event) {\n        if (_this2.instanceElement === event.target) {\n          callback(event);\n          active = false;\n          _this2.nextCallback = null;\n        }\n\n        return;\n      }\n\n      callback(event);\n      active = false;\n      _this2.nextCallback = null;\n    };\n\n    if (this.nextCallback) {\n      this.nextCallback.cancel = function () {\n        active = false;\n      };\n    }\n\n    return this.nextCallback;\n  };\n\n  _proto.getChildElement = function getChildElement() {\n    if (this.childRef.current) {\n      return (0, _utils.getDOMNode)(this.childRef.current);\n    }\n\n    return (0, _utils.getDOMNode)(this);\n  };\n\n  _proto.performEnter = function performEnter(props) {\n    var _this3 = this;\n\n    var _ref = props || this.props,\n        onEnter = _ref.onEnter,\n        onEntering = _ref.onEntering,\n        onEntered = _ref.onEntered;\n\n    this.cancelNextCallback();\n    var node = this.getChildElement();\n    this.instanceElement = node;\n    onEnter === null || onEnter === void 0 ? void 0 : onEnter(node);\n    this.safeSetState({\n      status: STATUS.ENTERING\n    }, function () {\n      onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);\n\n      _this3.onTransitionEnd(node, function () {\n        _this3.safeSetState({\n          status: STATUS.ENTERED\n        }, function () {\n          onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);\n        });\n      });\n    });\n  };\n\n  _proto.performExit = function performExit(props) {\n    var _this4 = this;\n\n    var _ref2 = props || this.props,\n        onExit = _ref2.onExit,\n        onExiting = _ref2.onExiting,\n        onExited = _ref2.onExited;\n\n    this.cancelNextCallback();\n    var node = this.getChildElement();\n    this.instanceElement = node;\n    onExit === null || onExit === void 0 ? void 0 : onExit(node);\n    this.safeSetState({\n      status: STATUS.EXITING\n    }, function () {\n      onExiting === null || onExiting === void 0 ? void 0 : onExiting(node);\n\n      _this4.onTransitionEnd(node, function () {\n        _this4.safeSetState({\n          status: STATUS.EXITED\n        }, function () {\n          onExited === null || onExited === void 0 ? void 0 : onExited(node);\n        });\n      });\n    });\n  };\n\n  _proto.cancelNextCallback = function cancelNextCallback() {\n    if (this.nextCallback !== null) {\n      this.nextCallback.cancel();\n      this.nextCallback = null;\n    }\n  };\n\n  _proto.safeSetState = function safeSetState(nextState, callback) {\n    if (this.instanceElement) {\n      var nextCallback = this.setNextCallback(callback);\n      this.setState(nextState, function () {\n        return nextCallback === null || nextCallback === void 0 ? void 0 : nextCallback();\n      });\n    }\n  };\n\n  _proto.render = function render() {\n    var _child$props;\n\n    var status = this.state.status;\n\n    if (status === STATUS.UNMOUNTED) {\n      return null;\n    }\n\n    var _this$props2 = this.props,\n        children = _this$props2.children,\n        className = _this$props2.className,\n        exitedClassName = _this$props2.exitedClassName,\n        enteringClassName = _this$props2.enteringClassName,\n        enteredClassName = _this$props2.enteredClassName,\n        exitingClassName = _this$props2.exitingClassName,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, [\"children\", \"className\", \"exitedClassName\", \"enteringClassName\", \"enteredClassName\", \"exitingClassName\"]);\n    var childProps = (0, _omit.default)(rest, Object.keys(transitionPropTypes));\n    var transitionClassName;\n\n    if (status === STATUS.EXITED) {\n      transitionClassName = exitedClassName;\n    } else if (status === STATUS.ENTERING) {\n      transitionClassName = enteringClassName;\n    } else if (status === STATUS.ENTERED) {\n      transitionClassName = enteredClassName;\n    } else if (status === STATUS.EXITING) {\n      transitionClassName = exitingClassName;\n    }\n\n    if ((0, _isFunction.default)(children)) {\n      childProps.className = (0, _classnames.default)(className, transitionClassName);\n      return children(childProps, this.childRef);\n    }\n\n    var child = _react.default.Children.only(children);\n\n    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({}, childProps, {\n      ref: this.childRef,\n      className: (0, _classnames.default)(className, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className, transitionClassName)\n    }));\n  };\n\n  return Transition;\n}(_react.default.Component);\n\nTransition.propTypes = transitionPropTypes;\nTransition.displayName = 'Transition';\nTransition.defaultProps = {\n  timeout: 1000\n};\nvar _default = Transition;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Animation/Transition.tsx?");
 
 /***/ }),
 
@@ -2067,7 +2067,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _VirtualizedList = __webpack_require__(/*! ../Picker/VirtualizedList */ \"./src/Picker/VirtualizedList.tsx\");\n\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\n\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\n\nvar _TreePicker = __webpack_require__(/*! ../TreePicker/TreePicker */ \"./src/TreePicker/TreePicker.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\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      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      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\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"onOpen\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n      inline = _useContext.inline;\n\n  var triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  var treeViewRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      rtl = _useCustom.rtl,\n      locale = _useCustom.locale;\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)(null),\n      activeNode = _useState2[0],\n      setActiveNode = _useState2[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('check-tree'),\n      checkTreePrefix = _useClassNames2.prefix,\n      withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\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\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\n  var _useState3 = (0, _react.useState)(null),\n      focusItemValue = _useState3[0],\n      setFocusItemValue = _useState3[1];\n\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\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\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\n\n  var getFormattedNodes = (0, _react.useCallback)(function (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\n    return (0, _utils2.getFormattedTree)(filteredData, flattenNodes, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized, childrenKey, cascade]);\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: (0, _utils.shallowEqual)(focusItemValue, node[valueKey]),\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(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      onRenderTreeNode: renderTreeNode,\n      onRenderTreeIcon: renderTreeIcon\n    };\n  };\n\n  var focusActiveNode = (0, _react.useCallback)(function () {\n    if (listRef.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: listRef.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeViewRef.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);\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, _react.useCallback)(function (nodes, node, checked) {\n    var currentNode = nodes[node.refKey];\n\n    if (cascade) {\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\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  }, [cascade]);\n  var toggleDownChecked = (0, _react.useCallback)(function (nodes, node, isChecked) {\n    var currentNode = nodes[node.refKey];\n    currentNode.check = isChecked;\n\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  }, [cascade, childrenKey]);\n  var toggleChecked = (0, _react.useCallback)(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'); // filter uncheckableItemValues\n\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);\n  var handleSelect = (0, _react.useCallback)(function (node, event) {\n    if (!node) {\n      return;\n    }\n\n    var selectedValues = toggleChecked(node, !flattenNodes[node.refKey].check);\n\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\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  }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);\n\n  var hasValue = function hasValue() {\n    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {\n      return flattenNodes[refKey][valueKey];\n    }).filter(function (item) {\n      return value.some(function (v) {\n        return (0, _utils.shallowEqual)(v, item);\n      });\n    });\n    return !!selectedValues.length;\n  };\n\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$o;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$o = _triggerRef$current.open) === null || _triggerRef$current$o === void 0 ? void 0 : _triggerRef$current$o.call(_triggerRef$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  }, [activeNode, focusActiveNode, onOpen, valueKey]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$, _targetRef$current;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.close) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setFocusItemValue(null);\n    setActive(false);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n  }, [onClose, setSearchKeyword]);\n  var handleExpand = (0, _react.useCallback)(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\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: inline ? treeViewRef : undefined,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef,\n    inline: inline\n  });\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var target = event.target; // exclude searchBar\n\n    if (target.matches('div[role=\"searchbox\"] > input')) {\n      return;\n    }\n\n    setActiveNode(null);\n    setValue([]);\n    setFocusItemValue(null);\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: [],\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);\n  var handleFocusItem = (0, _react.useCallback)(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\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);\n  var handleLeftArrow = (0, _react.useCallback)(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\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  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey, childrenKey]);\n  var handleRightArrow = (0, _react.useCallback)(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  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);\n  var selectActiveItem = (0, _react.useCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\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  });\n  var handleTreeKeydown = (0, _react.useCallback)(function (event) {\n    if (!treeViewRef.current) {\n      return;\n    }\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  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);\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\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n\n    if (!visible) {\n      return null;\n    }\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      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n\n    if (nodeProps.hasChildren) {\n      var _merge;\n\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: 709,\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: 710,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 711,\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: 714,\n          columnNumber: 15\n        }\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: 725,\n        columnNumber: 7\n      }\n    }));\n  };\n\n  var renderVirtualListNode = function renderVirtualListNode(nodes) {\n    return function (_ref3) {\n      var key = _ref3.key,\n          index = _ref3.index,\n          style = _ref3.style;\n      var node = nodes[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        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        key: key,\n        ref: function ref(_ref4) {\n          return saveTreeNodeRef(_ref4, refKey);\n        }\n      }, nodeProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 749,\n          columnNumber: 11\n        }\n      }));\n    };\n  };\n\n  var renderCheckTree = function renderCheckTree() {\n    var _withCheckTreeClassPr, _merge2;\n\n    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));\n    var formattedNodes = getFormattedNodes(renderNode);\n\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: 769,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n\n    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));\n    var styles = inline ? (0, _extends2.default)({\n      height: height\n    }, style) : {};\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      id: id ? id + \"-listbox\" : undefined,\n      ref: treeViewRef,\n      role: \"tree\",\n      \"aria-multiselectable\": true,\n      className: classes,\n      style: styles,\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 782,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treeNodesClass,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 792,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : _TreePicker.maxTreeHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 794,\n        columnNumber: 13\n      }\n    }, function (_ref5) {\n      var height = _ref5.height,\n          width = _ref5.width;\n      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({\n        ref: listRef,\n        width: width,\n        height: height,\n        rowHeight: 36,\n        rowCount: formattedNodes.length,\n        rowRenderer: renderVirtualListNode(formattedNodes),\n        scrollToAlignment: \"center\"\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 799,\n          columnNumber: 17\n        }\n      }));\n    }) : formattedNodes));\n  };\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    var styles = virtualized ? (0, _extends2.default)({\n      height: height\n    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 826,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 835,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\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\n\n  var hasValidValue = hasValue() || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  var selectedItems = (0, _utils2.getSelectedItems)(flattenNodes, value, valueKey);\n\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: 858,\n        columnNumber: 7\n      }\n    });\n\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\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\n  if (inline) {\n    return renderCheckTree();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\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: 893,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 902,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\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    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 903,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: _propTypes.default.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _VirtualizedList = __webpack_require__(/*! ../Picker/VirtualizedList */ \"./src/Picker/VirtualizedList.tsx\");\n\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\n\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\n\nvar _TreePicker = __webpack_require__(/*! ../TreePicker/TreePicker */ \"./src/TreePicker/TreePicker.tsx\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\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      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      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\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"onOpen\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n      inline = _useContext.inline;\n\n  var triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  var treeViewRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      rtl = _useCustom.rtl,\n      locale = _useCustom.locale;\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)(null),\n      activeNode = _useState2[0],\n      setActiveNode = _useState2[1];\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('check-tree'),\n      checkTreePrefix = _useClassNames2.prefix,\n      withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\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\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\n  var _useState3 = (0, _react.useState)(null),\n      focusItemValue = _useState3[0],\n      setFocusItemValue = _useState3[1];\n\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\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\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\n\n  var getFormattedNodes = (0, _react.useCallback)(function (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\n    return (0, _utils2.getFormattedTree)(filteredData, flattenNodes, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized, childrenKey, cascade]);\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: (0, _utils.shallowEqual)(focusItemValue, node[valueKey]),\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(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      onRenderTreeNode: renderTreeNode,\n      onRenderTreeIcon: renderTreeIcon\n    };\n  };\n\n  var focusActiveNode = (0, _react.useCallback)(function () {\n    if (listRef.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: listRef.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeViewRef.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);\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, _react.useCallback)(function (nodes, node, checked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n\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\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  }, [cascade]);\n  var toggleDownChecked = (0, _react.useCallback)(function (nodes, node, isChecked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n\n    if (!currentNode) {\n      return;\n    }\n\n    currentNode.check = isChecked;\n\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  }, [cascade, childrenKey]);\n  var toggleChecked = (0, _react.useCallback)(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'); // filter uncheckableItemValues\n\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);\n  var handleSelect = (0, _react.useCallback)(function (node, event) {\n    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;\n\n    if (!node || !currentNode) {\n      return;\n    }\n\n    var selectedValues = toggleChecked(node, !currentNode.check);\n\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\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  }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);\n\n  var hasValue = function hasValue() {\n    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {\n      return flattenNodes[refKey][valueKey];\n    }).filter(function (item) {\n      return value.some(function (v) {\n        return (0, _utils.shallowEqual)(v, item);\n      });\n    });\n    return !!selectedValues.length;\n  };\n\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$o;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$o = _triggerRef$current.open) === null || _triggerRef$current$o === void 0 ? void 0 : _triggerRef$current$o.call(_triggerRef$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  }, [activeNode, focusActiveNode, onOpen, valueKey]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$, _targetRef$current;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.close) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setFocusItemValue(null);\n    setActive(false);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n  }, [onClose, setSearchKeyword]);\n  var handleExpand = (0, _react.useCallback)(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\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: inline ? treeViewRef : undefined,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef,\n    inline: inline\n  });\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var target = event.target; // exclude searchBar\n\n    if (target.matches('div[role=\"searchbox\"] > input')) {\n      return;\n    }\n\n    setActiveNode(null);\n    setValue([]);\n    setFocusItemValue(null);\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: [],\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);\n  var handleFocusItem = (0, _react.useCallback)(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\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);\n  var handleLeftArrow = (0, _react.useCallback)(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\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  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey, childrenKey]);\n  var handleRightArrow = (0, _react.useCallback)(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  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);\n  var selectActiveItem = (0, _react.useCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\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  });\n  var handleTreeKeydown = (0, _react.useCallback)(function (event) {\n    if (!treeViewRef.current) {\n      return;\n    }\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  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);\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\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n\n    if (!visible) {\n      return null;\n    }\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      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n\n    if (nodeProps.hasChildren) {\n      var _merge;\n\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: 717,\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: 718,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 719,\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: 722,\n          columnNumber: 15\n        }\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: 733,\n        columnNumber: 7\n      }\n    }));\n  };\n\n  var renderVirtualListNode = function renderVirtualListNode(nodes) {\n    return function (_ref3) {\n      var key = _ref3.key,\n          index = _ref3.index,\n          style = _ref3.style;\n      var node = nodes[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        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        key: key,\n        ref: function ref(_ref4) {\n          return saveTreeNodeRef(_ref4, refKey);\n        }\n      }, nodeProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 757,\n          columnNumber: 11\n        }\n      }));\n    };\n  };\n\n  var renderCheckTree = function renderCheckTree() {\n    var _withCheckTreeClassPr, _merge2;\n\n    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));\n    var formattedNodes = getFormattedNodes(renderNode);\n\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: 777,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n\n    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));\n    var styles = inline ? (0, _extends2.default)({\n      height: height\n    }, style) : {};\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      id: id ? id + \"-listbox\" : undefined,\n      ref: treeViewRef,\n      role: \"tree\",\n      \"aria-multiselectable\": true,\n      className: classes,\n      style: styles,\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 790,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treeNodesClass,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 800,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : _TreePicker.maxTreeHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 802,\n        columnNumber: 13\n      }\n    }, function (_ref5) {\n      var height = _ref5.height,\n          width = _ref5.width;\n      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({\n        ref: listRef,\n        width: width,\n        height: height,\n        rowHeight: 36,\n        rowCount: formattedNodes.length,\n        rowRenderer: renderVirtualListNode(formattedNodes),\n        scrollToAlignment: \"center\"\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 807,\n          columnNumber: 17\n        }\n      }));\n    }) : formattedNodes));\n  };\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    var styles = virtualized ? (0, _extends2.default)({\n      height: height\n    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 834,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 843,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\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\n\n  var hasValidValue = hasValue() || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  var selectedItems = (0, _utils2.getSelectedItems)(flattenNodes, value, valueKey);\n\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: 866,\n        columnNumber: 7\n      }\n    });\n\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\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\n  if (inline) {\n    return renderCheckTree();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\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: 901,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 910,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\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    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 911,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: _propTypes.default.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?");
 
 /***/ }),
 
@@ -2089,7 +2089,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.isEveryChildChecked = isEveryChildChecked;\nexports.isSomeChildChecked = isSomeChildChecked;\nexports.isSomeNodeHasChildren = isSomeNodeHasChildren;\nexports.isAllSiblingNodeUncheckable = isAllSiblingNodeUncheckable;\nexports.isEveryFirstLevelNodeUncheckable = isEveryFirstLevelNodeUncheckable;\nexports.isNodeUncheckable = isNodeUncheckable;\nexports.getFormattedTree = getFormattedTree;\nexports.getDisabledState = getDisabledState;\nexports.getCheckTreePickerDefaultValue = getCheckTreePickerDefaultValue;\nexports.getSelectedItems = getSelectedItems;\nexports.getNodeCheckState = getNodeCheckState;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nfunction isEveryChildChecked(nodes, parent) {\n  if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {\n    return false;\n  }\n\n  var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);\n\n  if (!children.length) {\n    var _nodes$parent$refKey$;\n\n    return (_nodes$parent$refKey$ = nodes[parent.refKey].check) !== null && _nodes$parent$refKey$ !== void 0 ? _nodes$parent$refKey$ : false;\n  }\n\n  return children.every(function (child) {\n    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;\n  });\n}\n\nfunction isSomeChildChecked(nodes, parent, childrenKey) {\n  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {\n    return false;\n  }\n\n  var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);\n  return children.some(function (child) {\n    var _child$childrenKey;\n\n    if ((child === null || child === void 0 ? void 0 : (_child$childrenKey = child[childrenKey]) === null || _child$childrenKey === void 0 ? void 0 : _child$childrenKey.length) > 0) {\n      return isSomeChildChecked(nodes, child, childrenKey);\n    }\n\n    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;\n  });\n}\n\nfunction isSomeNodeHasChildren(data, childrenKey) {\n  return data.some(function (node) {\n    return Array.isArray(node[childrenKey]);\n  });\n}\n/**\n * is all siblings nodes is uncheckable\n * @param {*} node\n */\n\n\nfunction isAllSiblingNodeUncheckable(node, nodes, uncheckableItemValues, valueKey) {\n  var list = [];\n  var parentNodeRefKey = node.parent ? node.parent.refKey : '';\n  Object.keys(nodes).forEach(function (refKey) {\n    var _curNode$parent;\n\n    var curNode = nodes[refKey];\n\n    if ((0, _isNil2.default)(node.parent) && (0, _isNil2.default)(curNode.parent)) {\n      list.push(curNode);\n    } else if (((_curNode$parent = curNode.parent) === null || _curNode$parent === void 0 ? void 0 : _curNode$parent.refKey) === parentNodeRefKey) {\n      list.push(curNode);\n    }\n  });\n  return list.every(function (node) {\n    return isNodeUncheckable(node, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    });\n  });\n}\n/**\n * get each first level node uncheckable state\n */\n\n\nfunction isEveryFirstLevelNodeUncheckable(nodes, uncheckableItemValues, valueKey) {\n  var list = [];\n  Object.keys(nodes).forEach(function (refKey) {\n    var curNode = nodes[refKey];\n\n    if (!curNode.parent) {\n      list.push(curNode);\n    }\n  });\n  return list.every(function (node) {\n    return isNodeUncheckable(node, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    });\n  });\n}\n/**\n * get node uncheckable state\n * @param {*} node\n */\n\n\nfunction isNodeUncheckable(node, props) {\n  var _props$uncheckableIte = props.uncheckableItemValues,\n      uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,\n      valueKey = props.valueKey;\n  return uncheckableItemValues.some(function (value) {\n    return (0, _utils.shallowEqual)(node[valueKey], value);\n  });\n}\n\nfunction getFormattedTree(data, nodes, props) {\n  var childrenKey = props.childrenKey,\n      cascade = props.cascade;\n  return data.map(function (node) {\n    var formatted = (0, _extends2.default)({}, node);\n    var curNode = nodes[node.refKey];\n\n    if (curNode) {\n      var _node$childrenKey;\n\n      var checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState({\n        node: curNode,\n        cascade: cascade,\n        nodes: nodes,\n        childrenKey: childrenKey\n      }) : undefined;\n      formatted.check = curNode.check;\n      formatted.expand = curNode.expand;\n      formatted.uncheckable = curNode.uncheckable;\n      formatted.parent = curNode.parent;\n      formatted.checkState = checkState;\n\n      if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {\n        formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);\n      }\n    }\n\n    return formatted;\n  });\n}\n\nfunction getDisabledState(nodes, node, props) {\n  var _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n      valueKey = props.valueKey;\n\n  if (!(0, _isNil2.default)(node.refKey) && (0, _isNil2.default)(nodes[node.refKey])) {\n    return false;\n  }\n\n  return disabledItemValues.some(function (value) {\n    return (0, _utils.shallowEqual)(nodes[node.refKey][valueKey], value);\n  });\n}\n\nfunction getCheckTreePickerDefaultValue(value, uncheckableItemValues) {\n  if (Array.isArray(value)) {\n    return value.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  }\n\n  return [];\n}\n\nfunction getSelectedItems(nodes, value, valueKey) {\n  var checkItems = [];\n  Object.keys(nodes).map(function (refKey) {\n    var node = nodes[refKey];\n\n    if (value.some(function (value) {\n      return (0, _utils.shallowEqual)(node[valueKey], value);\n    })) {\n      checkItems.push(node);\n    }\n  });\n  return checkItems;\n}\n\nfunction getNodeCheckState(_ref) {\n  var nodes = _ref.nodes,\n      node = _ref.node,\n      cascade = _ref.cascade,\n      childrenKey = _ref.childrenKey;\n\n  if ((0, _isNil2.default)(nodes[node.refKey])) {\n    return _utils.CHECK_STATE.UNCHECK;\n  }\n\n  if (!node[childrenKey] || !node[childrenKey].length || !cascade) {\n    nodes[node.refKey].checkAll = false;\n    return node.check ? _utils.CHECK_STATE.CHECK : _utils.CHECK_STATE.UNCHECK;\n  }\n\n  if (isEveryChildChecked(nodes, node)) {\n    nodes[node.refKey].checkAll = true;\n    nodes[node.refKey].check = true;\n    return _utils.CHECK_STATE.CHECK;\n  }\n\n  if (isSomeChildChecked(nodes, node, childrenKey)) {\n    nodes[node.refKey].checkAll = false;\n    return _utils.CHECK_STATE.INDETERMINATE;\n  }\n\n  return _utils.CHECK_STATE.UNCHECK;\n}\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.isEveryChildChecked = isEveryChildChecked;\nexports.isSomeChildChecked = isSomeChildChecked;\nexports.isSomeNodeHasChildren = isSomeNodeHasChildren;\nexports.isAllSiblingNodeUncheckable = isAllSiblingNodeUncheckable;\nexports.isEveryFirstLevelNodeUncheckable = isEveryFirstLevelNodeUncheckable;\nexports.isNodeUncheckable = isNodeUncheckable;\nexports.getFormattedTree = getFormattedTree;\nexports.getDisabledState = getDisabledState;\nexports.getCheckTreePickerDefaultValue = getCheckTreePickerDefaultValue;\nexports.getSelectedItems = getSelectedItems;\nexports.getNodeCheckState = getNodeCheckState;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nfunction isEveryChildChecked(nodes, parent) {\n  if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {\n    return false;\n  }\n\n  var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);\n\n  if (!children.length) {\n    var _nodes$parent$refKey$;\n\n    return (_nodes$parent$refKey$ = nodes[parent.refKey].check) !== null && _nodes$parent$refKey$ !== void 0 ? _nodes$parent$refKey$ : false;\n  }\n\n  return children.every(function (child) {\n    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;\n  });\n}\n\nfunction isSomeChildChecked(nodes, parent, childrenKey) {\n  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {\n    return false;\n  }\n\n  var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);\n  return children.some(function (child) {\n    var _child$childrenKey;\n\n    if ((child === null || child === void 0 ? void 0 : (_child$childrenKey = child[childrenKey]) === null || _child$childrenKey === void 0 ? void 0 : _child$childrenKey.length) > 0) {\n      return isSomeChildChecked(nodes, child, childrenKey);\n    }\n\n    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;\n  });\n}\n\nfunction isSomeNodeHasChildren(data, childrenKey) {\n  return data.some(function (node) {\n    return Array.isArray(node[childrenKey]);\n  });\n}\n/**\n * is all siblings nodes is uncheckable\n * @param {*} node\n */\n\n\nfunction isAllSiblingNodeUncheckable(node, nodes, uncheckableItemValues, valueKey) {\n  var list = [];\n  var parentNodeRefKey = node.parent ? node.parent.refKey : '';\n  Object.keys(nodes).forEach(function (refKey) {\n    var _curNode$parent;\n\n    var curNode = nodes[refKey];\n\n    if ((0, _isNil2.default)(node.parent) && (0, _isNil2.default)(curNode.parent)) {\n      list.push(curNode);\n    } else if (((_curNode$parent = curNode.parent) === null || _curNode$parent === void 0 ? void 0 : _curNode$parent.refKey) === parentNodeRefKey) {\n      list.push(curNode);\n    }\n  });\n  return list.every(function (node) {\n    return isNodeUncheckable(node, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    });\n  });\n}\n/**\n * get each first level node uncheckable state\n */\n\n\nfunction isEveryFirstLevelNodeUncheckable(nodes, uncheckableItemValues, valueKey) {\n  var list = [];\n  Object.keys(nodes).forEach(function (refKey) {\n    var curNode = nodes[refKey];\n\n    if (!curNode.parent) {\n      list.push(curNode);\n    }\n  });\n  return list.every(function (node) {\n    return isNodeUncheckable(node, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    });\n  });\n}\n/**\n * get node uncheckable state\n * @param {*} node\n */\n\n\nfunction isNodeUncheckable(node, props) {\n  var _props$uncheckableIte = props.uncheckableItemValues,\n      uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,\n      valueKey = props.valueKey;\n  return uncheckableItemValues.some(function (value) {\n    return (0, _utils.shallowEqual)(node[valueKey], value);\n  });\n}\n\nfunction getFormattedTree(data, nodes, props) {\n  var childrenKey = props.childrenKey,\n      cascade = props.cascade;\n  return data.map(function (node) {\n    var formatted = (0, _extends2.default)({}, node);\n    var curNode = nodes[node.refKey];\n\n    if (curNode) {\n      var _node$childrenKey;\n\n      var checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState({\n        node: curNode,\n        cascade: cascade,\n        nodes: nodes,\n        childrenKey: childrenKey\n      }) : undefined;\n      formatted.check = curNode.check;\n      formatted.expand = curNode.expand;\n      formatted.uncheckable = curNode.uncheckable;\n      formatted.parent = curNode.parent;\n      formatted.checkState = checkState;\n\n      if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {\n        formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);\n      }\n    }\n\n    return formatted;\n  });\n}\n\nfunction getDisabledState(nodes, node, props) {\n  var _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n      valueKey = props.valueKey;\n\n  if (!(0, _isNil2.default)(node.refKey) && (0, _isNil2.default)(nodes[node.refKey])) {\n    return false;\n  }\n\n  return disabledItemValues.some(function (value) {\n    return node.refKey && (0, _utils.shallowEqual)(nodes[node.refKey][valueKey], value);\n  });\n}\n\nfunction getCheckTreePickerDefaultValue(value, uncheckableItemValues) {\n  if (Array.isArray(value)) {\n    return value.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  }\n\n  return [];\n}\n\nfunction getSelectedItems(nodes, value, valueKey) {\n  var checkItems = [];\n  Object.keys(nodes).map(function (refKey) {\n    var node = nodes[refKey];\n\n    if (value.some(function (value) {\n      return (0, _utils.shallowEqual)(node[valueKey], value);\n    })) {\n      checkItems.push(node);\n    }\n  });\n  return checkItems;\n}\n\nfunction getNodeCheckState(_ref) {\n  var nodes = _ref.nodes,\n      node = _ref.node,\n      cascade = _ref.cascade,\n      childrenKey = _ref.childrenKey;\n\n  if ((0, _isNil2.default)(nodes[node.refKey])) {\n    return _utils.CHECK_STATE.UNCHECK;\n  }\n\n  if (!node[childrenKey] || !node[childrenKey].length || !cascade) {\n    nodes[node.refKey].checkAll = false;\n    return node.check ? _utils.CHECK_STATE.CHECK : _utils.CHECK_STATE.UNCHECK;\n  }\n\n  if (isEveryChildChecked(nodes, node)) {\n    nodes[node.refKey].checkAll = true;\n    nodes[node.refKey].check = true;\n    return _utils.CHECK_STATE.CHECK;\n  }\n\n  if (isSomeChildChecked(nodes, node, childrenKey)) {\n    nodes[node.refKey].checkAll = false;\n    return _utils.CHECK_STATE.INDETERMINATE;\n  }\n\n  return _utils.CHECK_STATE.UNCHECK;\n}\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/utils.ts?");
 
 /***/ }),
 
@@ -2958,7 +2958,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.InputPickerContext = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\n\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\n\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2,\n    _templateObject3,\n    _templateObject4,\n    _templateObject5;\n\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\n\nexports.InputPickerContext = InputPickerContext;\n\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\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      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\", \"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\n  var _useContext = (0, _react.useContext)(InputPickerContext),\n      multi = _useContext.multi,\n      tagProps = _useContext.tagProps,\n      trigger = _useContext.trigger,\n      disabledOptions = _useContext.disabledOptions;\n\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n      locale = _useCustom.locale;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState = (0, _react.useState)(controlledData),\n      uncontrolledData = _useState[0],\n      setData = _useState[1];\n\n  var _useState2 = (0, _react.useState)(100),\n      maxWidth = _useState2[0],\n      setMaxWidth = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      newData = _useState3[0],\n      setNewData = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(defaultOpen),\n      uncontrolledOpen = _useState4[0],\n      setOpen = _useState4[1];\n\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\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n    data: getAllDataAndCache(),\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.\n\n  var _useSearch = (0, _Picker.useSearch)({\n    labelKey: labelKey,\n    data: getAllData(),\n    searchBy: searchBy,\n    callback: handleSearchCallback\n  }),\n      searchKeyword = _useSearch.searchKeyword,\n      setSearchKeyword = _useSearch.setSearchKeyword,\n      checkShouldDisplay = _useSearch.checkShouldDisplay,\n      handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n\n\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n\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\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  }, []); // Update the position of the menu when the search keyword and value change\n\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n  }, [searchKeyword, value]);\n\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n\n    if (groupBy) {\n      var _ref;\n\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\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, cloneValue, handleChange]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    setSearchKeyword('');\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n\n\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n\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\n    setValue(val);\n    setSearchKeyword('');\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    var val = cloneValue();\n    var data = getAllData();\n\n    if (!focusItemValue || !data) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\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\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n\n    setValue(val);\n    setSearchKeyword('');\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, setSearchKeyword, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    }); // FIXME Bad state flow\n\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n\n    setValue(focusItemValue);\n    setSearchKeyword('');\n\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, setSearchKeyword, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(null);\n    setSearchKeyword('');\n    handleChange(null, event);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, onClean, handleChange, setValue, setFocusItemValue, setSearchKeyword]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    } // When typing a comma, create a tag.\n\n\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, setSearchKeyword, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleBlur = (0, _react.useCallback)(function () {\n    setOpen(false);\n  }, []);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 584,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n\n    var _tagProps$closable = tagProps.closable,\n        closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n        onClose = tagProps.onClose,\n        tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n          isValid = _getDateItem.isValid,\n          itemNode = _getDateItem.itemNode,\n          activeItem = _getDateItem.activeItem;\n\n      items.push(activeItem);\n\n      if (!isValid) {\n        return null;\n      }\n\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 625,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n\n    return tagElements;\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(menuClassPrefix));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n\n    if (creatable && searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    })) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    } // Create a tree structure data when set `groupBy`\n\n\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 666,\n          columnNumber: 16\n        }\n      });\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items,\n      group: !(0, _isUndefined.default)(groupBy),\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 670,\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: 690,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 694,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var _checkValue = checkValue(),\n      isValid = _checkValue.isValid,\n      itemNode = _checkValue.itemNode;\n\n  var tagElements = renderMultiValue();\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\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\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\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n\n  if (plaintext) {\n    var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 754,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 763,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 774,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: undefined,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 780,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 802,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 805,\n      columnNumber: 17\n    }\n  })))));\n});\n\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.InputPickerContext = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\n\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\n\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2,\n    _templateObject3,\n    _templateObject4,\n    _templateObject5;\n\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\n\nexports.InputPickerContext = InputPickerContext;\n\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\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      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\", \"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\n  var _useContext = (0, _react.useContext)(InputPickerContext),\n      multi = _useContext.multi,\n      tagProps = _useContext.tagProps,\n      trigger = _useContext.trigger,\n      disabledOptions = _useContext.disabledOptions;\n\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n      locale = _useCustom.locale;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState = (0, _react.useState)(controlledData),\n      uncontrolledData = _useState[0],\n      setData = _useState[1];\n\n  var _useState2 = (0, _react.useState)(100),\n      maxWidth = _useState2[0],\n      setMaxWidth = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      newData = _useState3[0],\n      setNewData = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(defaultOpen),\n      uncontrolledOpen = _useState4[0],\n      setOpen = _useState4[1];\n\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\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n    data: getAllDataAndCache(),\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.\n\n  var _useSearch = (0, _Picker.useSearch)({\n    labelKey: labelKey,\n    data: getAllData(),\n    searchBy: searchBy,\n    callback: handleSearchCallback\n  }),\n      searchKeyword = _useSearch.searchKeyword,\n      setSearchKeyword = _useSearch.setSearchKeyword,\n      checkShouldDisplay = _useSearch.checkShouldDisplay,\n      handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n\n\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n\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\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  }, []); // Update the position of the menu when the search keyword and value change\n\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);\n  }, [searchKeyword, value]);\n\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n\n    if (groupBy) {\n      var _ref;\n\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\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, cloneValue, handleChange]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    setSearchKeyword('');\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n\n\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n\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\n    setValue(val);\n    setSearchKeyword('');\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    var val = cloneValue();\n    var data = getAllData();\n\n    if (!focusItemValue || !data) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\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\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n\n    setValue(val);\n    setSearchKeyword('');\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, setSearchKeyword, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    }); // FIXME Bad state flow\n\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n\n    setValue(focusItemValue);\n    setSearchKeyword('');\n\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, setSearchKeyword, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(null);\n    setSearchKeyword('');\n    handleChange(null, event);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, onClean, handleChange, setValue, setFocusItemValue, setSearchKeyword]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    } // When typing a comma, create a tag.\n\n\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, setSearchKeyword, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleBlur = (0, _react.useCallback)(function () {\n    setOpen(false);\n  }, []);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 584,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n\n    var _tagProps$closable = tagProps.closable,\n        closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n        onClose = tagProps.onClose,\n        tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n          isValid = _getDateItem.isValid,\n          itemNode = _getDateItem.itemNode,\n          activeItem = _getDateItem.activeItem;\n\n      items.push(activeItem);\n\n      if (!isValid) {\n        return null;\n      }\n\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 629,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n\n    return tagElements;\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(menuClassPrefix));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n\n    if (creatable && searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    })) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    } // Create a tree structure data when set `groupBy`\n\n\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 670,\n          columnNumber: 16\n        }\n      });\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items,\n      group: !(0, _isUndefined.default)(groupBy),\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 674,\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: 694,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 698,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var _checkValue = checkValue(),\n      isValid = _checkValue.isValid,\n      itemNode = _checkValue.itemNode;\n\n  var tagElements = renderMultiValue();\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\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\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\n  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)([\"tag\"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)([\"focused\"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)([\"disabled-options\"])))] = disabledOptions, _merge));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n\n  if (plaintext) {\n    var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 758,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 767,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 778,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: undefined,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 784,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 806,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 809,\n      columnNumber: 17\n    }\n  })))));\n});\n\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -3046,7 +3046,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n\nvar _useManager2 = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\n\nfunction _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nvar useSortHelper = function useSortHelper(config) {\n  var autoScroll = config.autoScroll,\n      pressDelay = config.pressDelay,\n      transitionDuration = config.transitionDuration,\n      onSort = config.onSort,\n      onSortEnd = config.onSortEnd,\n      onSortMove = config.onSortMove,\n      onSortStart = config.onSortStart;\n\n  var _useState = (0, _react.useState)(false),\n      sorting = _useState[0],\n      setSorting = _useState[1];\n\n  var containerRef = (0, _react.useRef)(null);\n  var pressTimer = (0, _react.useRef)();\n\n  var _useManager = (0, _useManager2.default)(),\n      listItemRegister = _useManager.listItemRegister,\n      getManagedItem = _useManager.getManagedItem,\n      getOrderedItems = _useManager.getOrderedItems;\n\n  var isMounted = (0, _utils2.useIsMounted)();\n  /**\n   * start dragging\n   * */\n\n  var handlePress = (0, _react.useCallback)(function (mouseDownEvent, targetNode, curManagedItem) {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n\n    if (!isMounted()) return;\n    var listItemBaseClassName = targetNode.classList[0]; // get list item base className\n\n    var helperElementClass = listItemBaseClassName + \"-helper\";\n    var holderElementClass = listItemBaseClassName + \"-holder\"; // data\n\n    var containerElement = containerRef.current;\n    var activeNode = curManagedItem.node;\n    var activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    var activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    var activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    var animatedNodesOffset = []; // all list item offset\n    // init scroller\n\n    var scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    var initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    var autoScroller = new _AutoScroller.default(scrollContainer, function (offset) {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    var activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    var activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    var activeNodeStyle = getComputedStyle(activeNode);\n    var activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 ? void 0 : _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: activeNodeBoundingClientRect.width + \"px\",\n      height: activeNodeBoundingClientRect.height + \"px\",\n      left: activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft) + \"px\",\n      top: activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop) + \"px\"\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n\n    var getContainerScrollDelta = function getContainerScrollDelta() {\n      return {\n        left: scrollContainer.scrollLeft - initScroll.x,\n        top: scrollContainer.scrollTop - initScroll.y\n      };\n    };\n\n    var getHolderTranslate = function getHolderTranslate() {\n      return animatedNodesOffset.reduce(function (acc, item) {\n        return {\n          x: acc.x + item.x,\n          y: acc.y + item.y\n        };\n      }, {\n        x: 0,\n        y: 0\n      });\n    };\n\n    var sortMouseMoveListener = (0, _on.default)(window, 'mousemove', function (mouseOverEvent) {\n      // Update helper position\n      var offset = {\n        x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,\n        y: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageY) || 0\n      };\n      var containerScrollDelta = getContainerScrollDelta();\n      var containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - mouseDownEvent.pageX,\n        y: offset.y - mouseDownEvent.pageY\n      };\n      (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate); // animate\n\n      activeNodeNextIndex = -1;\n      var listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      var sortingOffsetY = activeNodeOffsetEdge.top + activeNodeHolderTranslate.y + containerScrollDelta.top;\n      var activeNodeHeight = parseFloat(activeNodeStyle.height) || 0;\n\n      for (var i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n\n        var currentNode = listItemManagerRefs[i].node;\n        var currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        var offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        var translate = {\n          x: 0,\n          y: 0\n        }; // If we haven't cached the node's offsetTop / offsetLeft value\n\n        var curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset; // Get a reference to the next node\n\n        var prvNode = i > 0 && listItemManagerRefs[i - 1];\n        var nextNode = i < len - 1 && listItemManagerRefs[i + 1]; // Also cache the node's edge offset if needed.\n\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        } // If the node is the one we're currently animating, skip it\n\n\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffset.top) {\n          translate.y = -activeNodeHeight;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: currentNode.offsetHeight\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffset.top + offsetY) {\n          translate.y = activeNodeHeight;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -currentNode.offsetHeight\n          };\n\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate); // translate holder\n\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      } // auto scroll\n\n\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n\n      onSortMove === null || onSortMove === void 0 ? void 0 : onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, mouseOverEvent);\n    }, {\n      passive: false\n    });\n    var sortMouseEndListener = (0, _on.default)(window, 'mouseup', function (event) {\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      var holderTranslate = getHolderTranslate();\n      var containerScrollDelta = getContainerScrollDelta();\n      (0, _utils.setTranslate3d)(activeNodeHelper, {\n        x: holderTranslate.x - containerScrollDelta.left,\n        y: holderTranslate.y - containerScrollDelta.top\n      });\n      (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration); // wait for animation\n\n      setTimeout(function () {\n        var _activeNodeHelper2, _activeNodeHelper2$pa;\n\n        if (!isMounted()) return; // Remove the helper from the DOM\n\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 ? void 0 : (_activeNodeHelper2$pa = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2$pa === void 0 ? void 0 : _activeNodeHelper2$pa.removeChild(activeNodeHelper);\n        activeNodeHelper = null; // Remove redundant styles\n\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n\n        for (var _iterator = _createForOfIteratorHelperLoose(getOrderedItems(curManagedItem.info.collection)), _step; !(_step = _iterator()).done;) {\n          var item = _step.value;\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null; // Remove the transforms / transitions\n\n          var el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        } // Stop autoScroll\n\n\n        autoScroller.clear(); // Update manager state\n\n        setSorting(false); // callbacks\n\n        var callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 ? void 0 : onSortEnd(callbackPayload, event);\n        onSort === null || onSort === void 0 ? void 0 : onSort(callbackPayload, event);\n      }, transitionDuration);\n    }, {\n      passive: false\n    });\n    setSorting(true); // start callback\n\n    onSortStart === null || onSortStart === void 0 ? void 0 : onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, mouseDownEvent.nativeEvent);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n  /**\n   * Determine whether to start dragging\n   * */\n\n  var handleStart = (0, _react.useCallback)(function (mouseDownEvent) {\n    var triggeredNode = mouseDownEvent.target;\n    var targetNode = (0, _utils.closestNode)(triggeredNode, function (el) {\n      return Boolean(getManagedItem(el));\n    });\n    var curManagedItem = getManagedItem(targetNode);\n\n    if ( // is not secondary button pressed\n    mouseDownEvent.button !== 2 && // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled && // is not sorting\n    !sorting && // is valid node\n    targetNode instanceof HTMLElement && // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n  /**\n   * Clear timer after drag\n   * */\n\n  var handleEnd = (0, _react.useCallback)(function () {\n    return clearTimeout(pressTimer.current);\n  }, []);\n  return {\n    handleStart: handleStart,\n    handleEnd: handleEnd,\n    containerRef: containerRef,\n    sorting: sorting,\n    register: listItemRegister\n  };\n};\n\nvar _default = useSortHelper;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n\nvar _useManager2 = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\n\nfunction _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nvar useSortHelper = function useSortHelper(config) {\n  var autoScroll = config.autoScroll,\n      pressDelay = config.pressDelay,\n      transitionDuration = config.transitionDuration,\n      onSort = config.onSort,\n      onSortEnd = config.onSortEnd,\n      onSortMove = config.onSortMove,\n      onSortStart = config.onSortStart;\n\n  var _useState = (0, _react.useState)(false),\n      sorting = _useState[0],\n      setSorting = _useState[1];\n\n  var containerRef = (0, _react.useRef)(null);\n  var pressTimer = (0, _react.useRef)();\n\n  var _useManager = (0, _useManager2.default)(),\n      listItemRegister = _useManager.listItemRegister,\n      getManagedItem = _useManager.getManagedItem,\n      getOrderedItems = _useManager.getOrderedItems;\n\n  var isMounted = (0, _utils2.useIsMounted)();\n  /**\n   * start dragging\n   * */\n\n  var handlePress = (0, _react.useCallback)(function (mouseDownEvent, targetNode, curManagedItem) {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n\n    if (!isMounted()) return;\n    var listItemBaseClassName = targetNode.classList[0]; // get list item base className\n\n    var helperElementClass = listItemBaseClassName + \"-helper\";\n    var holderElementClass = listItemBaseClassName + \"-holder\"; // data\n\n    var containerElement = containerRef.current;\n    var activeNode = curManagedItem.node;\n    var activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    var activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    var activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    var animatedNodesOffset = []; // all list item offset\n    // init scroller\n\n    var scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    var initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    var autoScroller = new _AutoScroller.default(scrollContainer, function (offset) {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    var activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    var activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    var activeNodeStyle = getComputedStyle(activeNode);\n    var activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 ? void 0 : _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: activeNodeBoundingClientRect.width + \"px\",\n      height: activeNodeBoundingClientRect.height + \"px\",\n      left: activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft) + \"px\",\n      top: activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop) + \"px\"\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n\n    var getContainerScrollDelta = function getContainerScrollDelta() {\n      return {\n        left: scrollContainer.scrollLeft - initScroll.x,\n        top: scrollContainer.scrollTop - initScroll.y\n      };\n    };\n\n    var getHolderTranslate = function getHolderTranslate() {\n      return animatedNodesOffset.reduce(function (acc, item) {\n        return {\n          x: acc.x + item.x,\n          y: acc.y + item.y\n        };\n      }, {\n        x: 0,\n        y: 0\n      });\n    };\n\n    var sortMouseMoveListener = (0, _on.default)(window, 'mousemove', function (mouseOverEvent) {\n      // Update helper position\n      var offset = {\n        x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,\n        y: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageY) || 0\n      };\n      var containerScrollDelta = getContainerScrollDelta();\n      var containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - mouseDownEvent.pageX,\n        y: offset.y - mouseDownEvent.pageY\n      };\n\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);\n      } // animate\n\n\n      activeNodeNextIndex = -1;\n      var listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      var aTop = activeNodeOffsetEdge.top || 0;\n      var cTop = containerScrollDelta.top || 0;\n      var sortingOffsetY = aTop + activeNodeHolderTranslate.y + cTop;\n      var activeNodeHeight = parseFloat(activeNodeStyle.height) || 0;\n\n      for (var i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n\n        var currentNode = listItemManagerRefs[i].node;\n        var currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        var offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        var translate = {\n          x: 0,\n          y: 0\n        }; // If we haven't cached the node's offsetTop / offsetLeft value\n\n        var curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset; // Get a reference to the next node\n\n        var prvNode = i > 0 && listItemManagerRefs[i - 1];\n        var nextNode = i < len - 1 && listItemManagerRefs[i + 1]; // Also cache the node's edge offset if needed.\n\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        } // If the node is the one we're currently animating, skip it\n\n\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n\n        var curEdgeOffsetTop = curEdgeOffset.top || 0;\n\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffsetTop) {\n          translate.y = -activeNodeHeight;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: currentNode.offsetHeight\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffsetTop + offsetY) {\n          translate.y = activeNodeHeight;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -currentNode.offsetHeight\n          };\n\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate); // translate holder\n\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      } // auto scroll\n\n\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            x: 0,\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            x: 0,\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n\n      onSortMove === null || onSortMove === void 0 ? void 0 : onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, mouseOverEvent);\n    }, {\n      passive: false\n    });\n    var sortMouseEndListener = (0, _on.default)(window, 'mouseup', function (event) {\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      var holderTranslate = getHolderTranslate();\n      var containerScrollDelta = getContainerScrollDelta();\n\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, {\n          x: holderTranslate.x - (containerScrollDelta.left || 0),\n          y: holderTranslate.y - (containerScrollDelta.top || 0)\n        });\n        (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration);\n      } // wait for animation\n\n\n      setTimeout(function () {\n        var _activeNodeHelper2, _activeNodeHelper2$pa;\n\n        if (!isMounted()) return; // Remove the helper from the DOM\n\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 ? void 0 : (_activeNodeHelper2$pa = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2$pa === void 0 ? void 0 : _activeNodeHelper2$pa.removeChild(activeNodeHelper);\n        activeNodeHelper = null; // Remove redundant styles\n\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n\n        for (var _iterator = _createForOfIteratorHelperLoose(getOrderedItems(curManagedItem.info.collection)), _step; !(_step = _iterator()).done;) {\n          var item = _step.value;\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null; // Remove the transforms / transitions\n\n          var el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        } // Stop autoScroll\n\n\n        autoScroller.clear(); // Update manager state\n\n        setSorting(false); // callbacks\n\n        var callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 ? void 0 : onSortEnd(callbackPayload, event);\n        onSort === null || onSort === void 0 ? void 0 : onSort(callbackPayload, event);\n      }, transitionDuration);\n    }, {\n      passive: false\n    });\n    setSorting(true); // start callback\n\n    onSortStart === null || onSortStart === void 0 ? void 0 : onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, mouseDownEvent.nativeEvent);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n  /**\n   * Determine whether to start dragging\n   * */\n\n  var handleStart = (0, _react.useCallback)(function (mouseDownEvent) {\n    var triggeredNode = mouseDownEvent.target;\n    var targetNode = (0, _utils.closestNode)(triggeredNode, function (el) {\n      return Boolean(getManagedItem(el));\n    });\n    var curManagedItem = getManagedItem(targetNode);\n\n    if ( // is not secondary button pressed\n    mouseDownEvent.button !== 2 && // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled && // is not sorting\n    !sorting && // is valid node\n    targetNode instanceof HTMLElement && // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n  /**\n   * Clear timer after drag\n   * */\n\n  var handleEnd = (0, _react.useCallback)(function () {\n    return clearTimeout(pressTimer.current);\n  }, []);\n  return {\n    handleStart: handleStart,\n    handleEnd: handleEnd,\n    containerRef: containerRef,\n    sorting: sorting,\n    register: listItemRegister\n  };\n};\n\nvar _default = useSortHelper;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
 
 /***/ }),
 
@@ -3057,7 +3057,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTranslate3d = setTranslate3d;\nexports.setTransitionDuration = setTransitionDuration;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\n\n/**\n * interactive elements should be skiped\n * */\nvar INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\n\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\n\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {\n      var _Object$entries$_i = _Object$entries[_i],\n          key = _Object$entries$_i[0],\n          value = _Object$entries$_i[1];\n      node.style[key] = value;\n    }\n  }\n}\n\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? \"translate3d(\" + translate.x + \"px,\" + translate.y + \"px,0)\" : ''\n  });\n}\n\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? duration + \"ms\" : ''\n  });\n}\n/**\n * find closest target node from source node\n * */\n\n\nfunction closestNode(sourceNode, judge) {\n  var currentNode = sourceNode;\n\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n\n    currentNode = currentNode.parentNode;\n  }\n\n  return null;\n}\n\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n\n  if (!node || !parent) {\n    return {};\n  } // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n\n\n  var nodeOffset = {\n    left: offset.left + node.offsetLeft,\n    top: offset.top + node.offsetTop\n  };\n\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\n\nfunction getScrollingParent(el) {\n  return closestNode(el, function (el) {\n    var computedStyle = window.getComputedStyle(el);\n    var overflowRegex = /(auto|scroll)/;\n    var properties = ['overflow', 'overflowX', 'overflowY'];\n    return properties.some(function (property) {\n      return overflowRegex.test(computedStyle[property]);\n    });\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTranslate3d = setTranslate3d;\nexports.setTransitionDuration = setTransitionDuration;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\n\n/**\n * interactive elements should be skiped\n * */\nvar INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\n\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\n\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {\n      var _Object$entries$_i = _Object$entries[_i],\n          key = _Object$entries$_i[0],\n          value = _Object$entries$_i[1];\n      node.style[key] = value;\n    }\n  }\n}\n\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? \"translate3d(\" + translate.x + \"px,\" + translate.y + \"px,0)\" : ''\n  });\n}\n\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? duration + \"ms\" : ''\n  });\n}\n/**\n * find closest target node from source node\n * */\n\n\nfunction closestNode(sourceNode, judge) {\n  var currentNode = sourceNode;\n\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n\n    currentNode = currentNode.parentNode;\n  }\n\n  return null;\n}\n\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n\n  if (!node || !parent) {\n    return {};\n  } // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n\n\n  var nodeOffset = {\n    left: (offset.left || 0) + node.offsetLeft,\n    top: (offset.top || 0) + node.offsetTop\n  };\n\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\n\nfunction getScrollingParent(el) {\n  return closestNode(el, function (el) {\n    var computedStyle = window.getComputedStyle(el);\n    var overflowRegex = /(auto|scroll)/;\n    var properties = ['overflow', 'overflowX', 'overflowY'];\n    return properties.some(function (property) {\n      return overflowRegex.test(computedStyle[property]);\n    });\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
 
 /***/ }),
 
@@ -3134,7 +3134,7 @@ eval("\n\nexports.__esModule = true;\nexports.default = adjustCaretPosition;\nva
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.isArray = isArray;\nexports.default = conformToMask;\n\nvar _utilities = __webpack_require__(/*! ./utilities */ \"./src/MaskedInput/utilities.ts\");\n\nfunction isArray(value) {\n  return Array.isArray && Array.isArray(value) || value instanceof Array;\n}\n\nfunction conformToMask(rawValue, mask, config) {\n  if (rawValue === void 0) {\n    rawValue = '';\n  }\n\n  if (mask === void 0) {\n    mask = [];\n  }\n\n  if (config === void 0) {\n    config = {};\n  }\n\n  if (!isArray(mask)) {\n    // If someone passes a function as the mask property, we should call the\n    // function to get the mask array - Normally this is handled by the\n    // `createTextMaskInputElement:update` function - this allows mask functions\n    // to be used directly with `conformToMask`\n    if (typeof mask === 'function') {\n      // call the mask function to get the mask array\n      mask = mask(rawValue, config); // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask\n\n      mask = (0, _utilities.processCaretTraps)(mask).maskWithoutCaretTraps;\n    } else {\n      throw new Error('Text-mask:conformToMask; The mask property must be an array.');\n    }\n  } // These configurations tell us how to conform the mask\n\n\n  var _config = config,\n      _config$guide = _config.guide,\n      guide = _config$guide === void 0 ? true : _config$guide,\n      _config$previousConfo = _config.previousConformedValue,\n      previousConformedValue = _config$previousConfo === void 0 ? '' : _config$previousConfo,\n      _config$placeholderCh = _config.placeholderChar,\n      placeholderChar = _config$placeholderCh === void 0 ? _utilities.defaultPlaceholderChar : _config$placeholderCh,\n      _config$placeholder = _config.placeholder,\n      placeholder = _config$placeholder === void 0 ? (0, _utilities.convertMaskToPlaceholder)(mask, placeholderChar) : _config$placeholder,\n      _config$currentCaretP = _config.currentCaretPosition,\n      currentCaretPosition = _config$currentCaretP === void 0 ? 0 : _config$currentCaretP,\n      keepCharPositions = _config.keepCharPositions; // The configs below indicate that the user wants the algorithm to work in *no guide* mode\n\n  var suppressGuide = guide === false && previousConformedValue !== undefined; // Calculate lengths once for performance\n\n  var rawValueLength = rawValue.length;\n  var previousConformedValueLength = previousConformedValue.length;\n  var placeholderLength = placeholder.length;\n  var maskLength = mask.length; // This tells us the number of edited characters and the direction in which they were edited (+/-)\n\n  var editDistance = rawValueLength - previousConformedValueLength; // In *no guide* mode, we need to know if the user is trying to add a character or not\n\n  var isAddition = editDistance > 0; // Tells us the index of the first change. For (438) 394-4938 to (38) 394-4938, that would be 1\n\n  var indexOfFirstChange = currentCaretPosition + (isAddition ? -editDistance : 0); // We're also gonna need the index of last change, which we can derive as follows...\n\n  var indexOfLastChange = indexOfFirstChange + Math.abs(editDistance); // If `conformToMask` is configured to keep character positions, that is, for mask 111, previous value\n  // _2_ and raw value 3_2_, the new conformed value should be 32_, not 3_2 (default behavior). That's in the case of\n  // addition. And in the case of deletion, previous value _23, raw value _3, the new conformed string should be\n  // __3, not _3_ (default behavior)\n  //\n  // The next block of logic handles keeping character positions for the case of deletion. (Keeping\n  // character positions for the case of addition is further down since it is handled differently.)\n  // To do this, we want to compensate for all characters that were deleted\n\n  if (keepCharPositions === true && !isAddition) {\n    // We will be storing the new placeholder characters in this variable.\n    var compensatingPlaceholderChars = ''; // For every character that was deleted from a placeholder position, we add a placeholder char\n\n    for (var i = indexOfFirstChange; i < indexOfLastChange; i++) {\n      if (placeholder[i] === placeholderChar) {\n        compensatingPlaceholderChars += placeholderChar;\n      }\n    } // Now we trick our algorithm by modifying the raw value to make it contain additional placeholder characters\n    // That way when the we start laying the characters again on the mask, it will keep the non-deleted characters\n    // in their positions.\n\n\n    rawValue = rawValue.slice(0, indexOfFirstChange) + compensatingPlaceholderChars + rawValue.slice(indexOfFirstChange, rawValueLength);\n  } // Convert `rawValue` string to an array, and mark characters based on whether they are newly added or have\n  // existed in the previous conformed value. Identifying new and old characters is needed for `conformToMask`\n  // to work if it is configured to keep character positions.\n\n\n  var rawValueArr = rawValue.split('').map(function (char, i) {\n    return {\n      char: char,\n      isNew: i >= indexOfFirstChange && i < indexOfLastChange\n    };\n  }); // The loop below removes masking characters from user input. For example, for mask\n  // `00 (111)`, the placeholder would be `00 (___)`. If user input is `00 (234)`, the loop below\n  // would remove all characters but `234` from the `rawValueArr`. The rest of the algorithm\n  // then would lay `234` on top of the available placeholder positions in the mask.\n\n  for (var _i = rawValueLength - 1; _i >= 0; _i--) {\n    var char = rawValueArr[_i].char;\n\n    if (char !== placeholderChar) {\n      var shouldOffset = _i >= indexOfFirstChange && previousConformedValueLength === maskLength;\n\n      if (char === placeholder[shouldOffset ? _i - editDistance : _i]) {\n        rawValueArr.splice(_i, 1);\n      }\n    }\n  } // This is the variable that we will be filling with characters as we figure them out\n  // in the algorithm below\n\n\n  var conformedValue = '';\n  var someCharsRejected = false; // Ok, so first we loop through the placeholder looking for placeholder characters to fill up.\n\n  placeholderLoop: for (var _i2 = 0; _i2 < placeholderLength; _i2++) {\n    var charInPlaceholder = placeholder[_i2]; // We see one. Let's find out what we can put in it.\n\n    if (charInPlaceholder === placeholderChar) {\n      // But before that, do we actually have any user characters that need a place?\n      if (rawValueArr.length > 0) {\n        // We will keep chipping away at user input until either we run out of characters\n        // or we find at least one character that we can map.\n        while (rawValueArr.length > 0) {\n          // Let's retrieve the first user character in the queue of characters we have left\n          var _ref = rawValueArr.shift(),\n              rawValueChar = _ref.char,\n              isNew = _ref.isNew; // If the character we got from the user input is a placeholder character (which happens\n          // regularly because user input could be something like (540) 90_-____, which includes\n          // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,\n          // then we map this placeholder character to the current spot in the placeholder\n\n\n          if (rawValueChar === placeholderChar && suppressGuide !== true) {\n            conformedValue += placeholderChar; // And we go to find the next placeholder character that needs filling\n\n            continue placeholderLoop; // Else if, the character we got from the user input is not a placeholder, let's see\n            // if the current position in the mask can accept it.\n          } else if (mask[_i2].test(rawValueChar)) {\n            // we map the character differently based on whether we are keeping character positions or not.\n            // If any of the conditions below are met, we simply map the raw value character to the\n            // placeholder position.\n            if (keepCharPositions !== true || isNew === false || previousConformedValue === '' || guide === false || !isAddition) {\n              conformedValue += rawValueChar;\n            } else {\n              // We enter this block of code if we are trying to keep character positions and none of the conditions\n              // above is met. In this case, we need to see if there's an available spot for the raw value character\n              // to be mapped to. If we couldn't find a spot, we will discard the character.\n              //\n              // For example, for mask `1111`, previous conformed value `_2__`, raw value `942_2__`. We can map the\n              // `9`, to the first available placeholder position, but then, there are no more spots available for the\n              // `4` and `2`. So, we discard them and end up with a conformed value of `92__`.\n              var rawValueArrLength = rawValueArr.length;\n              var indexOfNextAvailablePlaceholderChar = null; // Let's loop through the remaining raw value characters. We are looking for either a suitable spot, ie,\n              // a placeholder character or a non-suitable spot, ie, a non-placeholder character that is not new.\n              // If we see a suitable spot first, we store its position and exit the loop. If we see a non-suitable\n              // spot first, we exit the loop and our `indexOfNextAvailablePlaceholderChar` will stay as `null`.\n\n              for (var _i3 = 0; _i3 < rawValueArrLength; _i3++) {\n                var charData = rawValueArr[_i3];\n\n                if (charData.char !== placeholderChar && charData.isNew === false) {\n                  break;\n                }\n\n                if (charData.char === placeholderChar) {\n                  indexOfNextAvailablePlaceholderChar = _i3;\n                  break;\n                }\n              } // If `indexOfNextAvailablePlaceholderChar` is not `null`, that means the character is not blocked.\n              // We can map it. And to keep the character positions, we remove the placeholder character\n              // from the remaining characters\n\n\n              if (indexOfNextAvailablePlaceholderChar !== null) {\n                conformedValue += rawValueChar;\n                rawValueArr.splice(indexOfNextAvailablePlaceholderChar, 1); // If `indexOfNextAvailablePlaceholderChar` is `null`, that means the character is blocked. We have to\n                // discard it.\n              } else {\n                _i2--;\n              }\n            } // Since we've mapped this placeholder position. We move on to the next one.\n\n\n            continue placeholderLoop;\n          } else {\n            someCharsRejected = true;\n          }\n        }\n      } // We reach this point when we've mapped all the user input characters to placeholder\n      // positions in the mask. In *guide* mode, we append the left over characters in the\n      // placeholder to the `conformedString`, but in *no guide* mode, we don't wanna do that.\n      //\n      // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.\n\n\n      if (suppressGuide === false) {\n        conformedValue += placeholder.substr(_i2, placeholderLength);\n      } // And we break\n\n\n      break; // Else, the charInPlaceholder is not a placeholderChar. That is, we cannot fill it\n      // with user input. So we just map it to the final output\n    } else {\n      conformedValue += charInPlaceholder;\n    }\n  } // The following logic is needed to deal with the case of deletion in *no guide* mode.\n  //\n  // Consider the silly mask `(111) /// 1`. What if user tries to delete the last placeholder\n  // position? Something like `(589) /// `. We want to conform that to `(589`. Not `(589) /// `.\n  // That's why the logic below finds the last filled placeholder character, and removes everything\n  // from that point on.\n\n\n  if (suppressGuide && isAddition === false) {\n    var indexOfLastFilledPlaceholderChar = null; // Find the last filled placeholder position and substring from there\n\n    for (var _i4 = 0; _i4 < conformedValue.length; _i4++) {\n      if (placeholder[_i4] === placeholderChar) {\n        indexOfLastFilledPlaceholderChar = _i4;\n      }\n    }\n\n    if (indexOfLastFilledPlaceholderChar !== null) {\n      // We substring from the beginning until the position after the last filled placeholder char.\n      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);\n    } else {\n      // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted\n      // the first character in the mask. So we return an empty string.\n      conformedValue = '';\n    }\n  }\n\n  return {\n    conformedValue: conformedValue,\n    meta: {\n      someCharsRejected: someCharsRejected\n    }\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/conformToMask.ts?");
+eval("\n\nexports.__esModule = true;\nexports.isArray = isArray;\nexports.default = conformToMask;\n\nvar _utilities = __webpack_require__(/*! ./utilities */ \"./src/MaskedInput/utilities.ts\");\n\nfunction isArray(value) {\n  return Array.isArray && Array.isArray(value) || value instanceof Array;\n}\n\nfunction conformToMask(rawValue, mask, config) {\n  if (rawValue === void 0) {\n    rawValue = '';\n  }\n\n  if (mask === void 0) {\n    mask = [];\n  }\n\n  if (config === void 0) {\n    config = {};\n  }\n\n  if (!isArray(mask)) {\n    // If someone passes a function as the mask property, we should call the\n    // function to get the mask array - Normally this is handled by the\n    // `createTextMaskInputElement:update` function - this allows mask functions\n    // to be used directly with `conformToMask`\n    if (typeof mask === 'function') {\n      // call the mask function to get the mask array\n      mask = mask(rawValue, config); // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask\n\n      mask = (0, _utilities.processCaretTraps)(mask).maskWithoutCaretTraps;\n    } else {\n      throw new Error('Text-mask:conformToMask; The mask property must be an array.');\n    }\n  } // These configurations tell us how to conform the mask\n\n\n  var _config = config,\n      _config$guide = _config.guide,\n      guide = _config$guide === void 0 ? true : _config$guide,\n      _config$previousConfo = _config.previousConformedValue,\n      previousConformedValue = _config$previousConfo === void 0 ? '' : _config$previousConfo,\n      _config$placeholderCh = _config.placeholderChar,\n      placeholderChar = _config$placeholderCh === void 0 ? _utilities.defaultPlaceholderChar : _config$placeholderCh,\n      _config$placeholder = _config.placeholder,\n      placeholder = _config$placeholder === void 0 ? (0, _utilities.convertMaskToPlaceholder)(mask, placeholderChar) : _config$placeholder,\n      _config$currentCaretP = _config.currentCaretPosition,\n      currentCaretPosition = _config$currentCaretP === void 0 ? 0 : _config$currentCaretP,\n      keepCharPositions = _config.keepCharPositions; // The configs below indicate that the user wants the algorithm to work in *no guide* mode\n\n  var suppressGuide = guide === false && previousConformedValue !== undefined; // Calculate lengths once for performance\n\n  var rawValueLength = rawValue.length;\n  var previousConformedValueLength = previousConformedValue.length;\n  var placeholderLength = placeholder.length;\n  var maskLength = mask.length; // This tells us the number of edited characters and the direction in which they were edited (+/-)\n\n  var editDistance = rawValueLength - previousConformedValueLength; // In *no guide* mode, we need to know if the user is trying to add a character or not\n\n  var isAddition = editDistance > 0; // Tells us the index of the first change. For (438) 394-4938 to (38) 394-4938, that would be 1\n\n  var indexOfFirstChange = currentCaretPosition + (isAddition ? -editDistance : 0); // We're also gonna need the index of last change, which we can derive as follows...\n\n  var indexOfLastChange = indexOfFirstChange + Math.abs(editDistance); // If `conformToMask` is configured to keep character positions, that is, for mask 111, previous value\n  // _2_ and raw value 3_2_, the new conformed value should be 32_, not 3_2 (default behavior). That's in the case of\n  // addition. And in the case of deletion, previous value _23, raw value _3, the new conformed string should be\n  // __3, not _3_ (default behavior)\n  //\n  // The next block of logic handles keeping character positions for the case of deletion. (Keeping\n  // character positions for the case of addition is further down since it is handled differently.)\n  // To do this, we want to compensate for all characters that were deleted\n\n  if (keepCharPositions === true && !isAddition) {\n    // We will be storing the new placeholder characters in this variable.\n    var compensatingPlaceholderChars = ''; // For every character that was deleted from a placeholder position, we add a placeholder char\n\n    for (var i = indexOfFirstChange; i < indexOfLastChange; i++) {\n      if (placeholder[i] === placeholderChar) {\n        compensatingPlaceholderChars += placeholderChar;\n      }\n    } // Now we trick our algorithm by modifying the raw value to make it contain additional placeholder characters\n    // That way when the we start laying the characters again on the mask, it will keep the non-deleted characters\n    // in their positions.\n\n\n    rawValue = rawValue.slice(0, indexOfFirstChange) + compensatingPlaceholderChars + rawValue.slice(indexOfFirstChange, rawValueLength);\n  } // Convert `rawValue` string to an array, and mark characters based on whether they are newly added or have\n  // existed in the previous conformed value. Identifying new and old characters is needed for `conformToMask`\n  // to work if it is configured to keep character positions.\n\n\n  var rawValueArr = rawValue.split('').map(function (char, i) {\n    return {\n      char: char,\n      isNew: i >= indexOfFirstChange && i < indexOfLastChange\n    };\n  }); // The loop below removes masking characters from user input. For example, for mask\n  // `00 (111)`, the placeholder would be `00 (___)`. If user input is `00 (234)`, the loop below\n  // would remove all characters but `234` from the `rawValueArr`. The rest of the algorithm\n  // then would lay `234` on top of the available placeholder positions in the mask.\n\n  for (var _i = rawValueLength - 1; _i >= 0; _i--) {\n    var char = rawValueArr[_i].char;\n\n    if (char !== placeholderChar) {\n      var shouldOffset = _i >= indexOfFirstChange && previousConformedValueLength === maskLength;\n\n      if (char === placeholder[shouldOffset ? _i - editDistance : _i]) {\n        rawValueArr.splice(_i, 1);\n      }\n    }\n  } // This is the variable that we will be filling with characters as we figure them out\n  // in the algorithm below\n\n\n  var conformedValue = '';\n  var someCharsRejected = false; // Ok, so first we loop through the placeholder looking for placeholder characters to fill up.\n\n  placeholderLoop: for (var _i2 = 0; _i2 < placeholderLength; _i2++) {\n    var charInPlaceholder = placeholder[_i2]; // We see one. Let's find out what we can put in it.\n\n    if (charInPlaceholder === placeholderChar) {\n      // But before that, do we actually have any user characters that need a place?\n      if (rawValueArr.length > 0) {\n        // We will keep chipping away at user input until either we run out of characters\n        // or we find at least one character that we can map.\n        while (rawValueArr.length > 0) {\n          // Let's retrieve the first user character in the queue of characters we have left\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          var _ref = rawValueArr.shift(),\n              rawValueChar = _ref.char,\n              isNew = _ref.isNew; // If the character we got from the user input is a placeholder character (which happens\n          // regularly because user input could be something like (540) 90_-____, which includes\n          // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,\n          // then we map this placeholder character to the current spot in the placeholder\n\n\n          if (rawValueChar === placeholderChar && suppressGuide !== true) {\n            conformedValue += placeholderChar; // And we go to find the next placeholder character that needs filling\n\n            continue placeholderLoop; // Else if, the character we got from the user input is not a placeholder, let's see\n            // if the current position in the mask can accept it.\n          } else if (mask[_i2].test(rawValueChar)) {\n            // we map the character differently based on whether we are keeping character positions or not.\n            // If any of the conditions below are met, we simply map the raw value character to the\n            // placeholder position.\n            if (keepCharPositions !== true || isNew === false || previousConformedValue === '' || guide === false || !isAddition) {\n              conformedValue += rawValueChar;\n            } else {\n              // We enter this block of code if we are trying to keep character positions and none of the conditions\n              // above is met. In this case, we need to see if there's an available spot for the raw value character\n              // to be mapped to. If we couldn't find a spot, we will discard the character.\n              //\n              // For example, for mask `1111`, previous conformed value `_2__`, raw value `942_2__`. We can map the\n              // `9`, to the first available placeholder position, but then, there are no more spots available for the\n              // `4` and `2`. So, we discard them and end up with a conformed value of `92__`.\n              var rawValueArrLength = rawValueArr.length;\n              var indexOfNextAvailablePlaceholderChar = null; // Let's loop through the remaining raw value characters. We are looking for either a suitable spot, ie,\n              // a placeholder character or a non-suitable spot, ie, a non-placeholder character that is not new.\n              // If we see a suitable spot first, we store its position and exit the loop. If we see a non-suitable\n              // spot first, we exit the loop and our `indexOfNextAvailablePlaceholderChar` will stay as `null`.\n\n              for (var _i3 = 0; _i3 < rawValueArrLength; _i3++) {\n                var charData = rawValueArr[_i3];\n\n                if (charData.char !== placeholderChar && charData.isNew === false) {\n                  break;\n                }\n\n                if (charData.char === placeholderChar) {\n                  indexOfNextAvailablePlaceholderChar = _i3;\n                  break;\n                }\n              } // If `indexOfNextAvailablePlaceholderChar` is not `null`, that means the character is not blocked.\n              // We can map it. And to keep the character positions, we remove the placeholder character\n              // from the remaining characters\n\n\n              if (indexOfNextAvailablePlaceholderChar !== null) {\n                conformedValue += rawValueChar;\n                rawValueArr.splice(indexOfNextAvailablePlaceholderChar, 1); // If `indexOfNextAvailablePlaceholderChar` is `null`, that means the character is blocked. We have to\n                // discard it.\n              } else {\n                _i2--;\n              }\n            } // Since we've mapped this placeholder position. We move on to the next one.\n\n\n            continue placeholderLoop;\n          } else {\n            someCharsRejected = true;\n          }\n        }\n      } // We reach this point when we've mapped all the user input characters to placeholder\n      // positions in the mask. In *guide* mode, we append the left over characters in the\n      // placeholder to the `conformedString`, but in *no guide* mode, we don't wanna do that.\n      //\n      // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.\n\n\n      if (suppressGuide === false) {\n        conformedValue += placeholder.substr(_i2, placeholderLength);\n      } // And we break\n\n\n      break; // Else, the charInPlaceholder is not a placeholderChar. That is, we cannot fill it\n      // with user input. So we just map it to the final output\n    } else {\n      conformedValue += charInPlaceholder;\n    }\n  } // The following logic is needed to deal with the case of deletion in *no guide* mode.\n  //\n  // Consider the silly mask `(111) /// 1`. What if user tries to delete the last placeholder\n  // position? Something like `(589) /// `. We want to conform that to `(589`. Not `(589) /// `.\n  // That's why the logic below finds the last filled placeholder character, and removes everything\n  // from that point on.\n\n\n  if (suppressGuide && isAddition === false) {\n    var indexOfLastFilledPlaceholderChar = null; // Find the last filled placeholder position and substring from there\n\n    for (var _i4 = 0; _i4 < conformedValue.length; _i4++) {\n      if (placeholder[_i4] === placeholderChar) {\n        indexOfLastFilledPlaceholderChar = _i4;\n      }\n    }\n\n    if (indexOfLastFilledPlaceholderChar !== null) {\n      // We substring from the beginning until the position after the last filled placeholder char.\n      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);\n    } else {\n      // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted\n      // the first character in the mask. So we return an empty string.\n      conformedValue = '';\n    }\n  }\n\n  return {\n    conformedValue: conformedValue,\n    meta: {\n      someCharsRejected: someCharsRejected\n    }\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/conformToMask.ts?");
 
 /***/ }),
 
@@ -3354,7 +3354,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/DropdownMenu.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n/**\n * TODO: reuse Menu from Cascader for consistent behavior\n */\n\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      classPrefix = 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      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\", \"renderMenuItem\", \"renderMenu\", \"onCheck\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, prefix('items'));\n  var rtl = (0, _utils.useCustom)('DropdownMenu');\n  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {\n    var paths = [];\n\n    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {\n      if (i < layer - 1 && cascadePaths) {\n        paths.push(cascadePaths[i]);\n      }\n    }\n\n    paths.push(node);\n    return paths;\n  }, [cascadeData, cascadePaths]);\n  var handleSelect = (0, _react.useCallback)(function (layer, node, event) {\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n  }, [getCascadePaths, onSelect]);\n\n  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus, uncheckable) {\n    var children = node[childrenKey];\n    var nodeValue = node[valueKey];\n    var nodeLabel = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, nodeValue);\n    }); // Use `value` in keys when If `value` is string or number\n\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;\n    var active = value.some(function (v) {\n      return v === nodeValue;\n    });\n\n    if (cascade) {\n      active = active || (0, _utils2.isSomeParentChecked)(node, value, {\n        valueKey: valueKey\n      });\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuCheckItem, {\n      as: \"li\",\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: active,\n      focus: focus // 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      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }, renderMenuItem ? renderMenuItem(nodeLabel, node) : nodeLabel, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: node.loading,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 141,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n\n  var renderCascade = function renderCascade() {\n    var styles = {\n      width: cascadeData.length * menuWidth\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\n      var menu = /*#__PURE__*/_react.default.createElement(\"ul\", {\n        role: \"listbox\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 154,\n          columnNumber: 11\n        }\n      }, children.map(function (item, index) {\n        var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {\n          return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);\n        });\n\n        if (uncheckable) {\n          uncheckableCount++;\n        }\n\n        return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]), uncheckable);\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(\"div\", {\n        key: onlyKey,\n        className: columnClasses,\n        \"data-layer\": layer,\n        style: columnStyles,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 179,\n          columnNumber: 11\n        }\n      }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 184,\n        columnNumber: 14\n      }\n    }, cascadeNodes);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 7\n    }\n  }), renderCascade());\n});\n\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = {\n  classPrefix: _propTypes.default.string,\n  data: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  value: _propTypes.default.array,\n  childrenKey: _propTypes.default.string,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  className: _propTypes.default.string,\n  cascade: _propTypes.default.bool,\n  cascadeData: _propTypes.default.array,\n  cascadePaths: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n};\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/DropdownMenu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _Spinner = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Spinner */ \"./node_modules/@rsuite/icons/legacy/Spinner.js\"));\n\nvar _AngleLeft = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleLeft */ \"./node_modules/@rsuite/icons/legacy/AngleLeft.js\"));\n\nvar _AngleRight = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/AngleRight */ \"./node_modules/@rsuite/icons/legacy/AngleRight.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/MultiCascader/DropdownMenu.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n/**\n * TODO: reuse Menu from Cascader for consistent behavior\n */\n\nvar DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _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      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\", \"renderMenuItem\", \"renderMenu\", \"onCheck\", \"onSelect\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, prefix('items'));\n  var rtl = (0, _utils.useCustom)('DropdownMenu');\n  var getCascadePaths = (0, _react.useCallback)(function (layer, node) {\n    var paths = [];\n\n    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {\n      if (i < layer - 1 && cascadePaths) {\n        paths.push(cascadePaths[i]);\n      }\n    }\n\n    paths.push(node);\n    return paths;\n  }, [cascadeData, cascadePaths]);\n  var handleSelect = (0, _react.useCallback)(function (layer, node, event) {\n    var cascadePaths = getCascadePaths(layer + 1, node);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n  }, [getCascadePaths, onSelect]);\n\n  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus, uncheckable) {\n    var children = node[childrenKey];\n    var nodeValue = node[valueKey];\n    var nodeLabel = node[labelKey];\n    var disabled = disabledItemValues.some(function (disabledValue) {\n      return (0, _utils.shallowEqual)(disabledValue, nodeValue);\n    }); // Use `value` in keys when If `value` is string or number\n\n    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;\n    var Icon = node.loading ? _Spinner.default : rtl ? _AngleRight.default : _AngleLeft.default;\n    var active = value.some(function (v) {\n      return v === nodeValue;\n    });\n\n    if (cascade) {\n      active = active || (0, _utils2.isSomeParentChecked)(node, value, {\n        valueKey: valueKey\n      });\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuCheckItem, {\n      as: \"li\",\n      key: layer + \"-\" + onlyKey,\n      disabled: disabled,\n      active: active,\n      focus: focus // 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      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }, renderMenuItem ? renderMenuItem(nodeLabel, node) : nodeLabel, children ? /*#__PURE__*/_react.default.createElement(Icon, {\n      className: prefix('caret'),\n      spin: node.loading,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 141,\n        columnNumber: 23\n      }\n    }) : null);\n  };\n\n  var renderCascade = function renderCascade() {\n    var styles = {\n      width: cascadeData.length * menuWidth\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\n      var menu = /*#__PURE__*/_react.default.createElement(\"ul\", {\n        role: \"listbox\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 154,\n          columnNumber: 11\n        }\n      }, children.map(function (item, index) {\n        var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {\n          return (0, _utils.shallowEqual)(uncheckableValue, item[valueKey]);\n        });\n\n        if (uncheckable) {\n          uncheckableCount++;\n        }\n\n        return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]), uncheckable);\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(\"div\", {\n        key: onlyKey,\n        className: columnClasses,\n        \"data-layer\": layer,\n        style: columnStyles,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 179,\n          columnNumber: 11\n        }\n      }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 184,\n        columnNumber: 14\n      }\n    }, cascadeNodes);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 7\n    }\n  }), renderCascade());\n});\n\nDropdownMenu.displayName = 'DropdownMenu';\nDropdownMenu.propTypes = {\n  classPrefix: _propTypes.default.string,\n  data: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  value: _propTypes.default.array,\n  childrenKey: _propTypes.default.string,\n  valueKey: _propTypes.default.string,\n  labelKey: _propTypes.default.string,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  className: _propTypes.default.string,\n  cascade: _propTypes.default.bool,\n  cascadeData: _propTypes.default.array,\n  cascadePaths: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n};\nvar _default = DropdownMenu;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/DropdownMenu.tsx?");
 
 /***/ }),
 
@@ -3387,7 +3387,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.useFlattenData = useFlattenData;\nexports.useColumnData = useColumnData;\nexports.useCascadeValue = useCascadeValue;\nexports.removeAllChildrenValue = exports.getOtherItemValuesByUnselectChild = exports.isSomeParentChecked = exports.isSomeChildChecked = exports.getParents = void 0;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _uniq = _interopRequireDefault(__webpack_require__(/*! lodash/uniq */ \"./node_modules/lodash/uniq.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\n/**\n * Get all parents of a node\n * @param node\n */\nvar getParents = function getParents(node) {\n  var parents = [];\n\n  if (!node.parent) {\n    return parents;\n  }\n\n  parents.push(node.parent);\n  parents = parents.concat(getParents(node.parent));\n  return parents;\n};\n/**\n * Check if any child nodes are selected.\n * @param node\n * @param value\n * @param itemKeys\n */\n\n\nexports.getParents = getParents;\n\nvar isSomeChildChecked = function isSomeChildChecked(node, value, itemKeys) {\n  var childrenKey = itemKeys.childrenKey,\n      valueKey = itemKeys.valueKey;\n\n  if (!node[childrenKey] || !value) {\n    return false;\n  }\n\n  return node[childrenKey].some(function (child) {\n    var _child$childrenKey;\n\n    if (value.some(function (n) {\n      return n === child[valueKey];\n    })) {\n      return true;\n    }\n\n    if ((_child$childrenKey = child[childrenKey]) !== null && _child$childrenKey !== void 0 && _child$childrenKey.length) {\n      return isSomeChildChecked(child, value, itemKeys);\n    }\n\n    return false;\n  });\n};\n/**\n * Check if the parent is selected.\n * @param node\n * @param value\n * @param itemKeys\n */\n\n\nexports.isSomeChildChecked = isSomeChildChecked;\n\nvar isSomeParentChecked = function isSomeParentChecked(node, value, itemKeys) {\n  var valueKey = itemKeys.valueKey;\n\n  if (!value) {\n    return false;\n  }\n\n  if (value.some(function (n) {\n    return n === node[valueKey];\n  })) {\n    return true;\n  }\n\n  if (node.parent) {\n    return isSomeParentChecked(node.parent, value, itemKeys);\n  }\n\n  return false;\n};\n\nexports.isSomeParentChecked = isSomeParentChecked;\n\nvar getOtherItemValuesByUnselectChild = function getOtherItemValuesByUnselectChild(itemNode, value, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n      childrenKey = itemKeys.childrenKey;\n  var parentValues = [];\n  var itemValues = []; // Find the parent node of the current node by value\n\n  function findParent(item) {\n    parentValues.push(item[valueKey]);\n\n    if (value.some(function (v) {\n      return v === item[valueKey];\n    })) {\n      return item;\n    }\n\n    if (item.parent) {\n      var p = findParent(item.parent);\n\n      if (p) {\n        return p;\n      }\n    }\n\n    return null;\n  } // Get child nodes through parent node\n\n\n  function pushChildValue(item) {\n    if (!item[childrenKey]) {\n      return;\n    }\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\n  var parent = findParent(itemNode);\n\n  if (!parent) {\n    return [];\n  }\n\n  pushChildValue(parent);\n  return itemValues;\n};\n/**\n * Remove the values of all children.\n */\n\n\nexports.getOtherItemValuesByUnselectChild = getOtherItemValuesByUnselectChild;\n\nvar removeAllChildrenValue = function removeAllChildrenValue(value, item, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n      childrenKey = itemKeys.childrenKey;\n  var removedValue = [];\n\n  if (!item[childrenKey]) {\n    return;\n  }\n\n  item[childrenKey].forEach(function (n) {\n    removedValue = removedValue.concat((0, _remove.default)(value, function (v) {\n      return v === n[valueKey];\n    }));\n\n    if (n[childrenKey]) {\n      removeAllChildrenValue(value, n, itemKeys);\n    }\n  });\n  return removedValue;\n};\n/**\n * A hook to flatten tree structure data\n * @param data\n */\n\n\nexports.removeAllChildrenValue = removeAllChildrenValue;\n\nfunction useFlattenData(data, itemKeys) {\n  var childrenKey = itemKeys.childrenKey;\n\n  var _useState = (0, _react.useState)((0, _treeUtils.flattenTree)(data)),\n      flattenData = _useState[0],\n      setFlattenData = _useState[1];\n\n  var addFlattenData = (0, _react.useCallback)(function (children, parent) {\n    var nodes = children.map(function (child) {\n      child.parent = parent;\n      return child;\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.flattenTree)(data));\n  }, [data]);\n  return {\n    addFlattenData: addFlattenData,\n    flattenData: flattenData\n  };\n}\n/**\n * A hook for column data\n * @param flattenData\n */\n\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\n\n  function addColumn(column, index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));\n  }\n\n  function enforceUpdateColumnData(nextData) {\n    var nextFlattenData = (0, _treeUtils.flattenTree)(nextData);\n    setColumnData([nextFlattenData.filter(function (item) {\n      return !item.parent;\n    })]);\n  }\n\n  return {\n    columnData: columnData,\n    addColumn: addColumn,\n    setColumnData: setColumnData,\n    enforceUpdateColumnData: enforceUpdateColumnData\n  };\n}\n/**\n * A hook that converts the value into a cascading value\n * @param props\n * @param flattenData\n */\n\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\n  var getChildrenValue = (0, _react.useCallback)(function (item) {\n    var values = [];\n\n    if (!item[childrenKey]) {\n      return values;\n    }\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\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\n    if (checked) {\n      nextValue.push(itemValue); // Delete all values under the current node\n\n      removedValue = removedValue.concat(removeAllChildrenValue(nextValue, item, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\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\n      var _loop = function _loop(i) {\n        // Whether the parent node can be selected\n        var isCheckableParent = !uncheckableItemValues.some(function (v) {\n          return v === parents[i][valueKey];\n        });\n\n        if (isCheckableParent) {\n          var isCheckAll = parents[i][childrenKey] // Filter out options that are marked as not selectable\n          .filter(function (n) {\n            return !uncheckableItemValues.some(function (v) {\n              return v === n[valueKey];\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\n          if (isCheckAll) {\n            // Add parent node value\n            nextValue.push(parents[i][valueKey]); // Delete all values under the parent node\n\n            removedValue = removedValue.concat(removeAllChildrenValue(nextValue, parents[i], {\n              valueKey: valueKey,\n              childrenKey: childrenKey\n            }));\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      })); // Delete related child and parent nodes\n\n      removedValue = (0, _remove.default)(nextValue, function (v) {\n        // Delete yourself\n        if (v === itemValue) {\n          return true;\n        }\n\n        return tempValue.some(function (n) {\n          return n === v;\n        });\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\n    if (!cascade) {\n      return value;\n    }\n\n    var tempRemovedValue = [];\n    var nextValue = [];\n\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\n      var item = flattenData.find(function (v) {\n        return v[valueKey] === value[i];\n      });\n\n      if (!item) {\n        return \"continue\";\n      }\n\n      var sv = splitValue(item, true, value);\n      tempRemovedValue = (0, _uniq.default)(tempRemovedValue.concat(sv.removedValue)); // Get all relevant values\n\n      nextValue = (0, _uniq.default)(nextValue.concat(sv.value));\n    };\n\n    for (var i = 0; i < value.length; i++) {\n      var _ret = _loop2(i);\n\n      if (_ret === \"continue\") continue;\n    } // Finally traverse all nextValue, and delete if its parent node is also nextValue\n\n\n    return nextValue.filter(function (v) {\n      var item = flattenData.find(function (n) {\n        return n[valueKey] === v;\n      });\n\n      if (item !== null && item !== void 0 && item.parent && nextValue.some(function (v) {\n        return v === item.parent[valueKey];\n      })) {\n        return false;\n      }\n\n      return true;\n    });\n  }, [cascade, flattenData, splitValue, valueKey]);\n\n  var _useState3 = (0, _react.useState)(transformValue(valueProp) || []),\n      value = _useState3[0],\n      setValue = _useState3[1];\n\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\");\n\nexports.__esModule = true;\nexports.useFlattenData = useFlattenData;\nexports.useColumnData = useColumnData;\nexports.useCascadeValue = useCascadeValue;\nexports.removeAllChildrenValue = exports.getOtherItemValuesByUnselectChild = exports.isSomeParentChecked = exports.isSomeChildChecked = exports.getParents = void 0;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _uniq = _interopRequireDefault(__webpack_require__(/*! lodash/uniq */ \"./node_modules/lodash/uniq.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\n/**\n * Get all parents of a node\n * @param node\n */\nvar getParents = function getParents(node) {\n  var parents = [];\n\n  if (!node.parent) {\n    return parents;\n  }\n\n  parents.push(node.parent);\n  parents = parents.concat(getParents(node.parent));\n  return parents;\n};\n/**\n * Check if any child nodes are selected.\n * @param node\n * @param value\n * @param itemKeys\n */\n\n\nexports.getParents = getParents;\n\nvar isSomeChildChecked = function isSomeChildChecked(node, value, itemKeys) {\n  var childrenKey = itemKeys.childrenKey,\n      valueKey = itemKeys.valueKey;\n\n  if (!node[childrenKey] || !value) {\n    return false;\n  }\n\n  return node[childrenKey].some(function (child) {\n    var _child$childrenKey;\n\n    if (value.some(function (n) {\n      return n === child[valueKey];\n    })) {\n      return true;\n    }\n\n    if ((_child$childrenKey = child[childrenKey]) !== null && _child$childrenKey !== void 0 && _child$childrenKey.length) {\n      return isSomeChildChecked(child, value, itemKeys);\n    }\n\n    return false;\n  });\n};\n/**\n * Check if the parent is selected.\n * @param node\n * @param value\n * @param itemKeys\n */\n\n\nexports.isSomeChildChecked = isSomeChildChecked;\n\nvar isSomeParentChecked = function isSomeParentChecked(node, value, itemKeys) {\n  var valueKey = itemKeys.valueKey;\n\n  if (!value) {\n    return false;\n  }\n\n  if (value.some(function (n) {\n    return n === node[valueKey];\n  })) {\n    return true;\n  }\n\n  if (node.parent) {\n    return isSomeParentChecked(node.parent, value, itemKeys);\n  }\n\n  return false;\n};\n\nexports.isSomeParentChecked = isSomeParentChecked;\n\nvar getOtherItemValuesByUnselectChild = function getOtherItemValuesByUnselectChild(itemNode, value, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n      childrenKey = itemKeys.childrenKey;\n  var parentValues = [];\n  var itemValues = []; // Find the parent node of the current node by value\n\n  function findParent(item) {\n    parentValues.push(item[valueKey]);\n\n    if (value.some(function (v) {\n      return v === item[valueKey];\n    })) {\n      return item;\n    }\n\n    if (item.parent) {\n      var p = findParent(item.parent);\n\n      if (p) {\n        return p;\n      }\n    }\n\n    return null;\n  } // Get child nodes through parent node\n\n\n  function pushChildValue(item) {\n    if (!item[childrenKey]) {\n      return;\n    }\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\n  var parent = findParent(itemNode);\n\n  if (!parent) {\n    return [];\n  }\n\n  pushChildValue(parent);\n  return itemValues;\n};\n/**\n * Remove the values of all children.\n */\n\n\nexports.getOtherItemValuesByUnselectChild = getOtherItemValuesByUnselectChild;\n\nvar removeAllChildrenValue = function removeAllChildrenValue(value, item, itemKeys) {\n  var valueKey = itemKeys.valueKey,\n      childrenKey = itemKeys.childrenKey;\n  var removedValue = [];\n\n  if (!item[childrenKey]) {\n    return;\n  }\n\n  item[childrenKey].forEach(function (n) {\n    removedValue = removedValue.concat((0, _remove.default)(value, function (v) {\n      return v === n[valueKey];\n    }));\n\n    if (n[childrenKey]) {\n      removeAllChildrenValue(value, n, itemKeys);\n    }\n  });\n  return removedValue;\n};\n/**\n * A hook to flatten tree structure data\n * @param data\n */\n\n\nexports.removeAllChildrenValue = removeAllChildrenValue;\n\nfunction useFlattenData(data, itemKeys) {\n  var childrenKey = itemKeys.childrenKey;\n\n  var _useState = (0, _react.useState)((0, _treeUtils.flattenTree)(data)),\n      flattenData = _useState[0],\n      setFlattenData = _useState[1];\n\n  var addFlattenData = (0, _react.useCallback)(function (children, parent) {\n    var nodes = children.map(function (child) {\n      child.parent = parent;\n      return child;\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.flattenTree)(data));\n  }, [data]);\n  return {\n    addFlattenData: addFlattenData,\n    flattenData: flattenData\n  };\n}\n/**\n * A hook for column data\n * @param flattenData\n */\n\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\n\n  function addColumn(column, index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));\n  }\n\n  function enforceUpdateColumnData(nextData) {\n    var nextFlattenData = (0, _treeUtils.flattenTree)(nextData);\n    setColumnData([nextFlattenData.filter(function (item) {\n      return !item.parent;\n    })]);\n  }\n\n  return {\n    columnData: columnData,\n    addColumn: addColumn,\n    setColumnData: setColumnData,\n    enforceUpdateColumnData: enforceUpdateColumnData\n  };\n}\n/**\n * A hook that converts the value into a cascading value\n * @param props\n * @param flattenData\n */\n\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\n  var getChildrenValue = (0, _react.useCallback)(function (item) {\n    var values = [];\n\n    if (!item[childrenKey]) {\n      return values;\n    }\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\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\n    if (checked) {\n      nextValue.push(itemValue); // Delete all values under the current node\n\n      removedValue = removedValue.concat(removeAllChildrenValue(nextValue, item, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\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\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\n        if (isCheckableParent) {\n          var isCheckAll = parents[i][childrenKey] // 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          }) // Check if all nodes are selected\n          .every(function (n) {\n            return nextValue.some(function (v) {\n              return v === n[valueKey];\n            });\n          });\n\n          if (isCheckAll) {\n            // Add parent node value\n            nextValue.push(parents[i][valueKey]); // Delete all values under the parent node\n\n            removedValue = removedValue.concat(removeAllChildrenValue(nextValue, parents[i], {\n              valueKey: valueKey,\n              childrenKey: childrenKey\n            }) || []);\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      })); // Delete related child and parent nodes\n\n      removedValue = (0, _remove.default)(nextValue, function (v) {\n        // Delete yourself\n        if (v === itemValue) {\n          return true;\n        }\n\n        return tempValue.some(function (n) {\n          return n === v;\n        });\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\n    if (!cascade) {\n      return value;\n    }\n\n    var tempRemovedValue = [];\n    var nextValue = [];\n\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\n      var item = flattenData.find(function (v) {\n        return v[valueKey] === value[i];\n      });\n\n      if (!item) {\n        return \"continue\";\n      }\n\n      var sv = splitValue(item, true, value);\n      tempRemovedValue = (0, _uniq.default)(tempRemovedValue.concat(sv.removedValue)); // Get all relevant values\n\n      nextValue = (0, _uniq.default)(nextValue.concat(sv.value));\n    };\n\n    for (var i = 0; i < value.length; i++) {\n      var _ret = _loop2(i);\n\n      if (_ret === \"continue\") continue;\n    } // Finally traverse all nextValue, and delete if its parent node is also nextValue\n\n\n    return nextValue.filter(function (v) {\n      var item = flattenData.find(function (n) {\n        return n[valueKey] === v;\n      });\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\n      return true;\n    });\n  }, [cascade, flattenData, splitValue, valueKey]);\n\n  var _useState3 = (0, _react.useState)(transformValue(valueProp) || []),\n      value = _useState3[0],\n      setValue = _useState3[1];\n\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?");
 
 /***/ }),
 
@@ -3585,7 +3585,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _getContainer = _interopRequireDefault(__webpack_require__(/*! dom-lib/getContainer */ \"./node_modules/dom-lib/esm/getContainer.js\"));\n\nvar _ownerDocument = _interopRequireDefault(__webpack_require__(/*! dom-lib/ownerDocument */ \"./node_modules/dom-lib/esm/ownerDocument.js\"));\n\nvar _removeClass = _interopRequireDefault(__webpack_require__(/*! dom-lib/removeClass */ \"./node_modules/dom-lib/esm/removeClass.js\"));\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _addClass = _interopRequireDefault(__webpack_require__(/*! dom-lib/addClass */ \"./node_modules/dom-lib/esm/addClass.js\"));\n\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\n\nvar _resizeObserver = __webpack_require__(/*! @juggle/resize-observer */ \"./node_modules/@juggle/resize-observer/lib/exports/resize-observer.js\");\n\nvar _isElement = _interopRequireDefault(__webpack_require__(/*! ../DOMHelper/isElement */ \"./src/DOMHelper/isElement.ts\"));\n\nvar _positionUtils = _interopRequireDefault(__webpack_require__(/*! ./positionUtils */ \"./src/Overlay/positionUtils.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar usePosition = function usePosition(props, ref) {\n  var _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'right' : _props$placement,\n      _props$preventOverflo = props.preventOverflow,\n      preventOverflow = _props$preventOverflo === void 0 ? false : _props$preventOverflo,\n      _props$containerPaddi = props.containerPadding,\n      containerPadding = _props$containerPaddi === void 0 ? 0 : _props$containerPaddi,\n      container = props.container,\n      triggerTarget = props.triggerTarget;\n  var containerRef = (0, _react.useRef)(null);\n  var lastTargetRef = (0, _react.useRef)(null);\n  var overlayResizeObserver = (0, _react.useRef)();\n  var defaultPosition = {\n    positionLeft: 0,\n    positionTop: 0,\n    arrowOffsetLeft: null,\n    arrowOffsetTop: null\n  };\n\n  var _useState = (0, _react.useState)(defaultPosition),\n      position = _useState[0],\n      setPosition = _useState[1];\n\n  var utils = (0, _react.useMemo)(function () {\n    return (0, _positionUtils.default)({\n      placement: placement,\n      preventOverflow: preventOverflow,\n      padding: containerPadding\n    });\n  }, [placement, preventOverflow, containerPadding]);\n  var updatePosition = (0, _react.useCallback)(\n  /**\n   * @param placementChanged  Whether the placement has changed\n   * @param forceUpdateDOM Whether to update the DOM directly\n   * @returns void\n   */\n  function (placementChanged, forceUpdateDOM) {\n    if (placementChanged === void 0) {\n      placementChanged = true;\n    }\n\n    if (!(triggerTarget !== null && triggerTarget !== void 0 && triggerTarget.current)) {\n      return;\n    }\n\n    var targetElement = (0, _utils.getDOMNode)(triggerTarget);\n\n    if (!(0, _isElement.default)(targetElement)) {\n      throw new Error('`target` should return an HTMLElement');\n    } //  If the target and placement do not change, the position is not updated.\n\n\n    if (targetElement === lastTargetRef.current && !placementChanged) {\n      return;\n    }\n\n    var overlay = (0, _utils.getDOMNode)(ref.current); // fixme dom-lib getContainer incorrect type\n\n    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);\n    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement);\n\n    if (forceUpdateDOM && overlay) {\n      var _overlay$className, _overlay$className$ma;\n\n      var preClassName = overlay === null || overlay === void 0 ? void 0 : (_overlay$className = overlay.className) === null || _overlay$className === void 0 ? void 0 : (_overlay$className$ma = _overlay$className.match(/(placement-\\S+)/)) === null || _overlay$className$ma === void 0 ? void 0 : _overlay$className$ma[0];\n      (0, _removeClass.default)(overlay, preClassName);\n\n      if (posi.positionClassName) {\n        (0, _addClass.default)(overlay, posi.positionClassName);\n      }\n\n      (0, _addStyle.default)(overlay, {\n        left: posi.positionLeft + \"px\",\n        top: posi.positionTop + \"px\"\n      });\n    } else {\n      setPosition(posi);\n    }\n\n    containerRef.current = containerElement;\n    lastTargetRef.current = targetElement;\n  }, [container, ref, triggerTarget, utils]);\n  (0, _react.useEffect)(function () {\n    updatePosition(false);\n    var overlay = (0, _utils.getDOMNode)(ref.current);\n    var containerScrollListener;\n\n    if (containerRef.current && preventOverflow) {\n      var _containerRef$current;\n\n      // Update the overlay position when the container scroll bar is scrolling\n      containerScrollListener = (0, _on.default)(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {\n        return updatePosition(true, true);\n      });\n    } // Update the position when the window size changes\n\n\n    var resizeListener = (0, _on.default)(window, 'resize', function () {\n      return updatePosition(true, true);\n    });\n\n    if (overlay) {\n      // Update the position when the size of the overlay changes\n      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {\n        return updatePosition(true, true);\n      });\n      overlayResizeObserver.current.observe(overlay);\n    }\n\n    return function () {\n      var _containerScrollListe, _overlayResizeObserve;\n\n      lastTargetRef.current = null;\n      (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();\n      resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();\n      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();\n    };\n  }, [preventOverflow, ref, updatePosition]);\n  (0, _utils.useUpdateEffect)(function () {\n    return updatePosition();\n  }, [updatePosition, placement]);\n  return [position, updatePosition];\n};\n\nvar Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var children = props.children,\n      className = props.className;\n\n  var childRef = _react.default.useRef(null);\n\n  var _usePosition = usePosition(props, childRef),\n      position = _usePosition[0],\n      updatePosition = _usePosition[1];\n\n  var positionClassName = position.positionClassName,\n      arrowOffsetLeft = position.arrowOffsetLeft,\n      arrowOffsetTop = position.arrowOffsetTop,\n      positionLeft = position.positionLeft,\n      positionTop = position.positionTop;\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get child() {\n        return childRef.current;\n      },\n\n      updatePosition: updatePosition\n    };\n  });\n\n  if (typeof children === 'function') {\n    var childProps = {\n      className: (0, _classnames.default)(className, positionClassName),\n      arrowOffsetLeft: arrowOffsetLeft,\n      arrowOffsetTop: arrowOffsetTop,\n      left: positionLeft,\n      top: positionTop\n    };\n    return children(childProps, childRef);\n  }\n\n  return children;\n});\n\nPosition.displayName = 'Position';\nPosition.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.func.isRequired,\n  container: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.any]),\n  containerPadding: _propTypes.default.number,\n  placement: _propTypes.default.any,\n  preventOverflow: _propTypes.default.bool,\n  triggerTarget: _propTypes.default.any\n};\nvar _default = Position;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/Position.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _getContainer = _interopRequireDefault(__webpack_require__(/*! dom-lib/getContainer */ \"./node_modules/dom-lib/esm/getContainer.js\"));\n\nvar _ownerDocument = _interopRequireDefault(__webpack_require__(/*! dom-lib/ownerDocument */ \"./node_modules/dom-lib/esm/ownerDocument.js\"));\n\nvar _removeClass = _interopRequireDefault(__webpack_require__(/*! dom-lib/removeClass */ \"./node_modules/dom-lib/esm/removeClass.js\"));\n\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\n\nvar _addClass = _interopRequireDefault(__webpack_require__(/*! dom-lib/addClass */ \"./node_modules/dom-lib/esm/addClass.js\"));\n\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\n\nvar _resizeObserver = __webpack_require__(/*! @juggle/resize-observer */ \"./node_modules/@juggle/resize-observer/lib/exports/resize-observer.js\");\n\nvar _isElement = _interopRequireDefault(__webpack_require__(/*! ../DOMHelper/isElement */ \"./src/DOMHelper/isElement.ts\"));\n\nvar _positionUtils = _interopRequireDefault(__webpack_require__(/*! ./positionUtils */ \"./src/Overlay/positionUtils.ts\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar usePosition = function usePosition(props, ref) {\n  var _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'right' : _props$placement,\n      _props$preventOverflo = props.preventOverflow,\n      preventOverflow = _props$preventOverflo === void 0 ? false : _props$preventOverflo,\n      _props$containerPaddi = props.containerPadding,\n      containerPadding = _props$containerPaddi === void 0 ? 0 : _props$containerPaddi,\n      container = props.container,\n      triggerTarget = props.triggerTarget;\n  var containerRef = (0, _react.useRef)(null);\n  var lastTargetRef = (0, _react.useRef)(null);\n  var overlayResizeObserver = (0, _react.useRef)();\n  var defaultPosition = {\n    positionLeft: 0,\n    positionTop: 0,\n    arrowOffsetLeft: null,\n    arrowOffsetTop: null\n  };\n\n  var _useState = (0, _react.useState)(defaultPosition),\n      position = _useState[0],\n      setPosition = _useState[1];\n\n  var utils = (0, _react.useMemo)(function () {\n    return (0, _positionUtils.default)({\n      placement: placement,\n      preventOverflow: preventOverflow,\n      padding: containerPadding\n    });\n  }, [placement, preventOverflow, containerPadding]);\n  var updatePosition = (0, _react.useCallback)(\n  /**\n   * @param placementChanged  Whether the placement has changed\n   * @param forceUpdateDOM Whether to update the DOM directly\n   * @returns void\n   */\n  function (placementChanged, forceUpdateDOM) {\n    if (placementChanged === void 0) {\n      placementChanged = true;\n    }\n\n    if (!(triggerTarget !== null && triggerTarget !== void 0 && triggerTarget.current)) {\n      return;\n    }\n\n    var targetElement = (0, _utils.getDOMNode)(triggerTarget);\n\n    if (!(0, _isElement.default)(targetElement)) {\n      throw new Error('`target` should return an HTMLElement');\n    } //  If the target and placement do not change, the position is not updated.\n\n\n    if (targetElement === lastTargetRef.current && !placementChanged) {\n      return;\n    }\n\n    var overlay = (0, _utils.getDOMNode)(ref.current);\n    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);\n    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement);\n\n    if (forceUpdateDOM && overlay) {\n      var _overlay$className, _overlay$className$ma;\n\n      var preClassName = overlay === null || overlay === void 0 ? void 0 : (_overlay$className = overlay.className) === null || _overlay$className === void 0 ? void 0 : (_overlay$className$ma = _overlay$className.match(/(placement-\\S+)/)) === null || _overlay$className$ma === void 0 ? void 0 : _overlay$className$ma[0];\n      (0, _removeClass.default)(overlay, preClassName);\n\n      if (posi.positionClassName) {\n        (0, _addClass.default)(overlay, posi.positionClassName);\n      }\n\n      (0, _addStyle.default)(overlay, {\n        left: posi.positionLeft + \"px\",\n        top: posi.positionTop + \"px\"\n      });\n    } else {\n      setPosition(posi);\n    }\n\n    containerRef.current = containerElement;\n    lastTargetRef.current = targetElement;\n  }, [container, ref, triggerTarget, utils]);\n  (0, _react.useEffect)(function () {\n    updatePosition(false);\n    var overlay = (0, _utils.getDOMNode)(ref.current);\n    var containerScrollListener;\n\n    if (containerRef.current && preventOverflow) {\n      var _containerRef$current;\n\n      // Update the overlay position when the container scroll bar is scrolling\n      containerScrollListener = (0, _on.default)(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {\n        return updatePosition(true, true);\n      });\n    } // Update the position when the window size changes\n\n\n    var resizeListener = (0, _on.default)(window, 'resize', function () {\n      return updatePosition(true, true);\n    });\n\n    if (overlay) {\n      // Update the position when the size of the overlay changes\n      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {\n        return updatePosition(true, true);\n      });\n      overlayResizeObserver.current.observe(overlay);\n    }\n\n    return function () {\n      var _containerScrollListe, _overlayResizeObserve;\n\n      lastTargetRef.current = null;\n      (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();\n      resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();\n      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();\n    };\n  }, [preventOverflow, ref, updatePosition]);\n  (0, _utils.useUpdateEffect)(function () {\n    return updatePosition();\n  }, [updatePosition, placement]);\n  return [position, updatePosition];\n};\n\nvar Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var children = props.children,\n      className = props.className;\n\n  var childRef = _react.default.useRef(null);\n\n  var _usePosition = usePosition(props, childRef),\n      position = _usePosition[0],\n      updatePosition = _usePosition[1];\n\n  var positionClassName = position.positionClassName,\n      arrowOffsetLeft = position.arrowOffsetLeft,\n      arrowOffsetTop = position.arrowOffsetTop,\n      positionLeft = position.positionLeft,\n      positionTop = position.positionTop;\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get child() {\n        return childRef.current;\n      },\n\n      updatePosition: updatePosition\n    };\n  });\n\n  if (typeof children === 'function') {\n    var childProps = {\n      className: (0, _classnames.default)(className, positionClassName),\n      arrowOffsetLeft: arrowOffsetLeft,\n      arrowOffsetTop: arrowOffsetTop,\n      left: positionLeft,\n      top: positionTop\n    };\n    return children(childProps, childRef);\n  }\n\n  return children;\n});\n\nPosition.displayName = 'Position';\nPosition.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.func.isRequired,\n  container: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.any]),\n  containerPadding: _propTypes.default.number,\n  placement: _propTypes.default.any,\n  preventOverflow: _propTypes.default.bool,\n  triggerTarget: _propTypes.default.any\n};\nvar _default = Position;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/Position.tsx?");
 
 /***/ }),
 
@@ -3629,7 +3629,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _Pagination = _interopRequireDefault(__webpack_require__(/*! ./Pagination */ \"./src/Pagination/Pagination.tsx\"));\n\nvar _SelectPicker = _interopRequireDefault(__webpack_require__(/*! ../SelectPicker */ \"./src/SelectPicker/index.tsx\"));\n\nvar _Divider = _interopRequireDefault(__webpack_require__(/*! ../Divider */ \"./src/Divider/index.tsx\"));\n\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Pagination/PaginationGroup.tsx\",\n    _this = void 0;\n\nvar LimitPicker = function LimitPicker(props) {\n  var disabled = props.disabled,\n      limitOptions = props.limitOptions,\n      locale = props.locale,\n      limit = props.limit,\n      onChangeLimit = props.onChangeLimit,\n      size = props.size,\n      prefix = props.prefix;\n  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);\n  var formatlimitOptions = limitOptions.map(function (item) {\n    return {\n      value: item,\n      label: (0, _utils.tplTransform)(locale.limit, item)\n    };\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('limit'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_SelectPicker.default, {\n    size: size,\n    cleanable: false,\n    searchable: false,\n    placement: \"topStart\",\n    data: formatlimitOptions,\n    value: limit,\n    onChange: onChangeLimit // fixme don't use any\n    ,\n    menuStyle: {\n      minWidth: 'auto'\n    },\n    disabled: disabledPicker,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 56,\n      columnNumber: 7\n    }\n  }));\n};\n\nvar defaultLayout = ['pager'];\nvar defaultLimitOptions = [30, 50, 100];\n\nvar PaginationGroup = /*#__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 ? 'pagination-group' : _props$classPrefix,\n      size = props.size,\n      total = props.total,\n      prev = props.prev,\n      next = props.next,\n      first = props.first,\n      last = props.last,\n      maxButtons = props.maxButtons,\n      className = props.className,\n      _props$limitOptions = props.limitOptions,\n      limitOptions = _props$limitOptions === void 0 ? defaultLimitOptions : _props$limitOptions,\n      limitProp = props.limit,\n      activePageProp = props.activePage,\n      disabled = props.disabled,\n      style = props.style,\n      localeProp = props.locale,\n      _props$layout = props.layout,\n      layout = _props$layout === void 0 ? defaultLayout : _props$layout,\n      onChangePage = props.onChangePage,\n      onChangeLimit = props.onChangeLimit,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"size\", \"total\", \"prev\", \"next\", \"first\", \"last\", \"maxButtons\", \"className\", \"limitOptions\", \"limit\", \"activePage\", \"disabled\", \"style\", \"locale\", \"layout\", \"onChangePage\", \"onChangeLimit\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useControlled = (0, _utils.useControlled)(limitProp, 30),\n      limit = _useControlled[0],\n      setLimit = _useControlled[1];\n\n  var _useControlled2 = (0, _utils.useControlled)(activePageProp, 1),\n      activePage = _useControlled2[0],\n      setActivePage = _useControlled2[1];\n\n  var _useCustom = (0, _utils.useCustom)('Pagination', localeProp),\n      locale = _useCustom.locale;\n\n  var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);\n  var classes = merge(className, withClassPrefix(size));\n  var handleInputBlur = (0, _react.useCallback)(function (event) {\n    var value = parseInt(event.target.value);\n\n    if (value > 0 && value <= pages) {\n      onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(value);\n      setActivePage(value);\n    }\n\n    event.target.value = '';\n  }, [onChangePage, pages, setActivePage]);\n  var handleInputPressEnter = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();\n  }, []);\n  var handleChangeLimit = (0, _react.useCallback)(function (value) {\n    setLimit(value);\n    onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);\n  }, [onChangeLimit, setLimit]);\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    ref: ref,\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 131,\n      columnNumber: 7\n    }\n  }, layout.map(function (key, index) {\n    var onlyKey = \"\" + key + index;\n\n    if (key === '-') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('grow'),\n        key: onlyKey,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 136,\n          columnNumber: 20\n        }\n      });\n    } else if (key === '|') {\n      return /*#__PURE__*/_react.default.createElement(_Divider.default, {\n        vertical: true,\n        key: onlyKey,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 138,\n          columnNumber: 20\n        }\n      });\n    } else if (key === 'pager') {\n      return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({\n        key: onlyKey,\n        size: size,\n        prev: prev,\n        next: next,\n        first: first,\n        last: last,\n        maxButtons: maxButtons,\n        pages: pages,\n        disabled: disabled,\n        onSelect: onChangePage // fixme don't use any\n        ,\n        activePage: activePage\n      }, rest, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 141,\n          columnNumber: 15\n        }\n      }));\n    } else if (key === 'total') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        key: onlyKey,\n        className: prefix('total'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 158,\n          columnNumber: 15\n        }\n      }, (0, _utils.tplTransform)(locale.total, total));\n    } else if (key === 'skip') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        key: onlyKey,\n        className: (0, _classnames.default)(prefix('skip')),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 164,\n          columnNumber: 15\n        }\n      }, (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {\n        size: size,\n        onBlur: handleInputBlur,\n        onPressEnter: handleInputPressEnter,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 167,\n          columnNumber: 19\n        }\n      })));\n    } else if (key === 'limit') {\n      return /*#__PURE__*/_react.default.createElement(LimitPicker, {\n        key: onlyKey,\n        size: size,\n        locale: locale,\n        limit: limit,\n        onChangeLimit: handleChangeLimit,\n        limitOptions: limitOptions,\n        disabled: disabled,\n        prefix: prefix,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 177,\n          columnNumber: 15\n        }\n      });\n    }\n\n    return key;\n  }));\n});\n\nPaginationGroup.displayName = 'PaginationGroup';\nPaginationGroup.propTypes = (0, _extends2.default)({}, _Pagination.default.propTypes, {\n  locale: _propTypes.default.any,\n  layout: _propTypes.default.array,\n  limitOptions: _propTypes.default.array,\n  limit: _propTypes.default.number,\n  total: _propTypes.default.number,\n  onChangePage: _propTypes.default.func,\n  onChangeLimit: _propTypes.default.func\n});\nvar _default = PaginationGroup;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Pagination/PaginationGroup.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _Pagination = _interopRequireDefault(__webpack_require__(/*! ./Pagination */ \"./src/Pagination/Pagination.tsx\"));\n\nvar _SelectPicker = _interopRequireDefault(__webpack_require__(/*! ../SelectPicker */ \"./src/SelectPicker/index.tsx\"));\n\nvar _Divider = _interopRequireDefault(__webpack_require__(/*! ../Divider */ \"./src/Divider/index.tsx\"));\n\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Pagination/PaginationGroup.tsx\",\n    _this = void 0;\n\nvar LimitPicker = function LimitPicker(props) {\n  var disabled = props.disabled,\n      limitOptions = props.limitOptions,\n      locale = props.locale,\n      limit = props.limit,\n      onChangeLimit = props.onChangeLimit,\n      size = props.size,\n      prefix = props.prefix;\n  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);\n  var formatlimitOptions = limitOptions.map(function (item) {\n    return {\n      value: item,\n      label: locale.limit && (0, _utils.tplTransform)(locale.limit, item)\n    };\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('limit'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_SelectPicker.default, {\n    size: size,\n    cleanable: false,\n    searchable: false,\n    placement: \"topStart\",\n    data: formatlimitOptions,\n    value: limit,\n    onChange: onChangeLimit // fixme don't use any\n    ,\n    menuStyle: {\n      minWidth: 'auto'\n    },\n    disabled: disabledPicker,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 56,\n      columnNumber: 7\n    }\n  }));\n};\n\nvar defaultLayout = ['pager'];\nvar defaultLimitOptions = [30, 50, 100];\n\nvar PaginationGroup = /*#__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 ? 'pagination-group' : _props$classPrefix,\n      size = props.size,\n      total = props.total,\n      prev = props.prev,\n      next = props.next,\n      first = props.first,\n      last = props.last,\n      maxButtons = props.maxButtons,\n      className = props.className,\n      _props$limitOptions = props.limitOptions,\n      limitOptions = _props$limitOptions === void 0 ? defaultLimitOptions : _props$limitOptions,\n      limitProp = props.limit,\n      activePageProp = props.activePage,\n      disabled = props.disabled,\n      style = props.style,\n      localeProp = props.locale,\n      _props$layout = props.layout,\n      layout = _props$layout === void 0 ? defaultLayout : _props$layout,\n      onChangePage = props.onChangePage,\n      onChangeLimit = props.onChangeLimit,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"size\", \"total\", \"prev\", \"next\", \"first\", \"last\", \"maxButtons\", \"className\", \"limitOptions\", \"limit\", \"activePage\", \"disabled\", \"style\", \"locale\", \"layout\", \"onChangePage\", \"onChangeLimit\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix,\n      withClassPrefix = _useClassNames.withClassPrefix;\n\n  var _useControlled = (0, _utils.useControlled)(limitProp, 30),\n      limit = _useControlled[0],\n      setLimit = _useControlled[1];\n\n  var _useControlled2 = (0, _utils.useControlled)(activePageProp, 1),\n      activePage = _useControlled2[0],\n      setActivePage = _useControlled2[1];\n\n  var _useCustom = (0, _utils.useCustom)('Pagination', localeProp),\n      locale = _useCustom.locale;\n\n  var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);\n  var classes = merge(className, withClassPrefix(size));\n  var handleInputBlur = (0, _react.useCallback)(function (event) {\n    var value = parseInt(event.target.value);\n\n    if (value > 0 && value <= pages) {\n      onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(value);\n      setActivePage(value);\n    }\n\n    event.target.value = '';\n  }, [onChangePage, pages, setActivePage]);\n  var handleInputPressEnter = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();\n  }, []);\n  var handleChangeLimit = (0, _react.useCallback)(function (value) {\n    setLimit(value);\n    onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);\n  }, [onChangeLimit, setLimit]);\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    ref: ref,\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 131,\n      columnNumber: 7\n    }\n  }, layout.map(function (key, index) {\n    var onlyKey = \"\" + key + index;\n\n    if (key === '-') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('grow'),\n        key: onlyKey,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 136,\n          columnNumber: 20\n        }\n      });\n    } else if (key === '|') {\n      return /*#__PURE__*/_react.default.createElement(_Divider.default, {\n        vertical: true,\n        key: onlyKey,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 138,\n          columnNumber: 20\n        }\n      });\n    } else if (key === 'pager') {\n      return /*#__PURE__*/_react.default.createElement(_Pagination.default, (0, _extends2.default)({\n        key: onlyKey,\n        size: size,\n        prev: prev,\n        next: next,\n        first: first,\n        last: last,\n        maxButtons: maxButtons,\n        pages: pages,\n        disabled: disabled,\n        onSelect: onChangePage // fixme don't use any\n        ,\n        activePage: activePage\n      }, rest, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 141,\n          columnNumber: 15\n        }\n      }));\n    } else if (key === 'total') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        key: onlyKey,\n        className: prefix('total'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 158,\n          columnNumber: 15\n        }\n      }, locale.total && (0, _utils.tplTransform)(locale.total, total));\n    } else if (key === 'skip') {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        key: onlyKey,\n        className: (0, _classnames.default)(prefix('skip')),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 164,\n          columnNumber: 15\n        }\n      }, locale.skip && (0, _utils.tplTransform)(locale.skip, /*#__PURE__*/_react.default.createElement(_Input.default, {\n        size: size,\n        onBlur: handleInputBlur,\n        onPressEnter: handleInputPressEnter,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 168,\n          columnNumber: 21\n        }\n      })));\n    } else if (key === 'limit') {\n      return /*#__PURE__*/_react.default.createElement(LimitPicker, {\n        key: onlyKey,\n        size: size,\n        locale: locale,\n        limit: limit,\n        onChangeLimit: handleChangeLimit,\n        limitOptions: limitOptions,\n        disabled: disabled,\n        prefix: prefix,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 178,\n          columnNumber: 15\n        }\n      });\n    }\n\n    return key;\n  }));\n});\n\nPaginationGroup.displayName = 'PaginationGroup';\nPaginationGroup.propTypes = (0, _extends2.default)({}, _Pagination.default.propTypes, {\n  locale: _propTypes.default.any,\n  layout: _propTypes.default.array,\n  limitOptions: _propTypes.default.array,\n  limit: _propTypes.default.number,\n  total: _propTypes.default.number,\n  onChangePage: _propTypes.default.func,\n  onChangeLimit: _propTypes.default.func\n});\nvar _default = PaginationGroup;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Pagination/PaginationGroup.tsx?");
 
 /***/ }),
 
@@ -3783,7 +3783,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ../utils/reactToString */ \"./src/utils/reactToString.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/SelectedElement.tsx\",\n    _this = void 0;\n\nvar SelectedElement = function SelectedElement(props) {\n  var selectedItems = props.selectedItems,\n      prefix = props.prefix,\n      valueKey = props.valueKey,\n      labelKey = props.labelKey,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      countable = props.countable,\n      cascade = props.cascade,\n      locale = props.locale;\n  var count = selectedItems.length;\n  var title = '';\n\n  if (count) {\n    title = selectedItems.map(function (item) {\n      var label = item[labelKey];\n\n      if (typeof label === 'string' || typeof label === 'number') {\n        return label;\n      } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n        return (0, _reactToString.default)(label).join('');\n      }\n\n      return '';\n    }).join(', ');\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('value-list'),\n    title: title,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 7\n    }\n  }, selectedItems.map(function (item, index) {\n    var checkAll = cascade && (item.checkAll || item[childrenKey]);\n    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {\n      key: item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('value-item'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 52,\n        columnNumber: 15\n      }\n    }, item[labelKey], checkAll ? \" (\" + locale.checkAll + \")\" : ''), index === count - 1 ? null : /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('value-separator'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 56,\n        columnNumber: 45\n      }\n    }, \",\"));\n  })), countable ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('value-count'),\n    title: \"\" + count,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 9\n    }\n  }, count > 99 ? '99+' : count) : null);\n};\n\nvar _default = SelectedElement;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/SelectedElement.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ../utils/reactToString */ \"./src/utils/reactToString.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Picker/SelectedElement.tsx\",\n    _this = void 0;\n\nvar SelectedElement = function SelectedElement(props) {\n  var selectedItems = props.selectedItems,\n      prefix = props.prefix,\n      valueKey = props.valueKey,\n      labelKey = props.labelKey,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      countable = props.countable,\n      cascade = props.cascade,\n      locale = props.locale;\n  var count = selectedItems.length;\n  var title = '';\n\n  if (count) {\n    title = selectedItems.map(function (item) {\n      var label = item[labelKey];\n\n      if (typeof label === 'string' || typeof label === 'number') {\n        return label;\n      } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n        return (0, _reactToString.default)(label).join('');\n      }\n\n      return '';\n    }).join(', ');\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('value-list'),\n    title: title,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 7\n    }\n  }, selectedItems.map(function (item, index) {\n    var checkAll = cascade && (item.checkAll || item[childrenKey]);\n    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {\n      key: item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('value-item'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 52,\n        columnNumber: 15\n      }\n    }, item[labelKey], checkAll && locale !== null && locale !== void 0 && locale.checkAll ? \" (\" + locale.checkAll + \")\" : ''), index === count - 1 ? null : /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('value-separator'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 56,\n        columnNumber: 45\n      }\n    }, \",\"));\n  })), countable ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('value-count'),\n    title: \"\" + count,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 9\n    }\n  }, count > 99 ? '99+' : count) : null);\n};\n\nvar _default = SelectedElement;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Picker/SelectedElement.tsx?");
 
 /***/ }),
 
@@ -4036,7 +4036,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Slider = __webpack_require__(/*! ../Slider/Slider */ \"./src/Slider/Slider.tsx\");\n\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ../Slider/ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\n\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ../Slider/Handle */ \"./src/Slider/Handle.tsx\"));\n\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ../Slider/Graduated */ \"./src/Slider/Graduated.tsx\"));\n\nvar _utils2 = __webpack_require__(/*! ../Slider/utils */ \"./src/Slider/utils.ts\");\n\nvar _propTypeChecker = __webpack_require__(/*! ../utils/propTypeChecker */ \"./src/utils/propTypeChecker.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/RangeSlider/RangeSlider.tsx\",\n    _this = void 0;\n\nvar defaultDefaultValue = [0, 0];\n\nvar RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var ariaLabel = props['aria-label'],\n      ariaLabelledby = props['aria-labelledby'],\n      ariaValuetext = props['aria-valuetext'],\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      barClassName = props.barClassName,\n      className = props.className,\n      constraint = props.constraint,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,\n      graduated = props.graduated,\n      _props$progress = props.progress,\n      progress = _props$progress === void 0 ? true : _props$progress,\n      vertical = props.vertical,\n      disabled = props.disabled,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,\n      _props$min = props.min,\n      min = _props$min === void 0 ? 0 : _props$min,\n      _props$max = props.max,\n      maxProp = _props$max === void 0 ? 100 : _props$max,\n      _props$step = props.step,\n      step = _props$step === void 0 ? 1 : _props$step,\n      valueProp = props.value,\n      handleClassName = props.handleClassName,\n      handleStyle = props.handleStyle,\n      handleTitle = props.handleTitle,\n      _props$tooltip = props.tooltip,\n      tooltip = _props$tooltip === void 0 ? true : _props$tooltip,\n      getAriaValueText = props.getAriaValueText,\n      renderTooltip = props.renderTooltip,\n      renderMark = props.renderMark,\n      onChange = props.onChange,\n      onChangeCommitted = props.onChangeCommitted,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"aria-label\", \"aria-labelledby\", \"aria-valuetext\", \"as\", \"barClassName\", \"className\", \"constraint\", \"defaultValue\", \"graduated\", \"progress\", \"vertical\", \"disabled\", \"classPrefix\", \"min\", \"max\", \"step\", \"value\", \"handleClassName\", \"handleStyle\", \"handleTitle\", \"tooltip\", \"getAriaValueText\", \"renderTooltip\", \"renderMark\", \"onChange\", \"onChangeCommitted\"]);\n  var barRef = (0, _react.useRef)(null); // Define the parameter position of the handle\n\n  var handleIndexs = (0, _react.useRef)([0, 1]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('RangeSlider'),\n      rtl = _useCustom.rtl;\n\n  var classes = merge(className, withClassPrefix({\n    vertical: vertical,\n    disabled: disabled,\n    graduated: graduated,\n    'with-mark': renderMark\n  }));\n  var max = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min);\n  }, [maxProp, min, step]);\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n\n  var getValidValue = (0, _react.useCallback)(function (value) {\n    if (typeof value === 'undefined') {\n      return;\n    }\n\n    return [(0, _utils2.checkValue)(value[0], min, max), (0, _utils2.checkValue)(value[1], min, max)];\n  }, [max, min]);\n\n  var _useControlled = (0, _utils.useControlled)(getValidValue(valueProp), getValidValue(defaultValue)),\n      value = _useControlled[0],\n      setValue = _useControlled[1]; // The count of values ​​that can be entered.\n\n\n  var count = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)((max - min) / step);\n  }, [max, min, step]); // Get the height of the progress bar\n\n  var getBarHeight = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;\n  }, []); // Get the width of the progress bar\n\n  var getBarWidth = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;\n  }, []);\n  var getValueByOffset = (0, _react.useCallback)(function (offset) {\n    var val = 0;\n\n    if (isNaN(offset)) {\n      return val;\n    }\n\n    if (vertical) {\n      var barHeight = getBarHeight();\n      val = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      var barWidth = getBarWidth();\n      val = Math.round(offset / (barWidth / count)) * step;\n    }\n\n    return (0, _utils2.precisionMath)(val);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  var getValueByPosition = (0, _react.useCallback)(function (event) {\n    var barOffset = (0, _getOffset.default)(barRef.current);\n    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;\n    var val = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(val) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  var getRangeValue = (0, _react.useCallback)(function (value, key, event) {\n    // Get the corresponding value according to the cursor position\n    var v = getValueByPosition(event); // Judge the handle key and put the corresponding value at the start or end.\n\n    if (key === 'start') {\n      return [v, value[1]];\n    } else if (key === 'end') {\n      return [value[0], v];\n    }\n\n    return value;\n  }, [getValueByPosition]);\n  var getNextValue = (0, _react.useCallback)(function (event, dataset) {\n    var eventKey = dataset.key,\n        range = dataset.range;\n    var value = range.split(',').map(function (i) {\n      return +i;\n    });\n    var nextValue = getValidValue(getRangeValue(value, eventKey, event));\n\n    if (nextValue[0] >= nextValue[1]) {\n      /**\n       * When the value of `start` is greater than the value of` end`,\n       * the position of the handle is reversed.\n       */\n      handleIndexs.current.reverse();\n\n      if (eventKey === 'start') {\n        nextValue[0] = value[1];\n      } else {\n        nextValue[1] = value[0];\n      }\n    }\n\n    return nextValue;\n  }, [getRangeValue, getValidValue]);\n  /**\n   * Whether a range is valid against given constraint (if any)\n   * Should check before every `setValue` calls\n   */\n\n  var isRangeMatchingConstraint = (0, _react.useCallback)(function (range) {\n    // If no constraint is defined, any range is valid\n    if (!constraint) return true;\n    return constraint(range);\n  }, [constraint]);\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n\n  var handleDragMove = (0, _utils.useEventCallback)(function (event, dataset) {\n    var nextValue = getNextValue(event, dataset);\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  });\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n\n  var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {\n    var nextValue = getNextValue(event, dataset);\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);\n    }\n  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    var _event$target$dataset = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['dataset'],\n        key = _event$target$dataset.key;\n\n    var nextValue = [].concat(value);\n    var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    var valueIndex = key === 'start' ? 0 : 1;\n\n    switch (event.key) {\n      case 'Home':\n        nextValue[valueIndex] = min;\n        break;\n\n      case 'End':\n        nextValue[valueIndex] = max;\n        break;\n\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue[valueIndex] = Math.min(max, value[valueIndex] + step);\n        break;\n\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue[valueIndex] = Math.max(min, value[valueIndex] - step);\n        break;\n\n      default:\n        return;\n    } // When the start value is greater than the end value, let the handle and value switch positions.\n\n\n    if (nextValue[0] >= nextValue[1]) {\n      nextValue.reverse();\n      handleIndexs.current.reverse();\n    } // Prevent scroll of the page\n\n\n    event.preventDefault();\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    var start = value[0],\n        end = value[1];\n    var v = getValueByPosition(event); //  Judging that the current click value is closer to the values ​​of `start` and` end`.\n\n    if (Math.abs(start - v) < Math.abs(end - v)) {\n      start = v;\n    } else {\n      end = v;\n    }\n\n    var nextValue = getValidValue([start, end].sort());\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);\n  var handleProps = (0, _react.useMemo)(function () {\n    return [{\n      value: value[0],\n      'data-key': 'start',\n      'aria-valuenow': value[0],\n      'aria-valuetext': getAriaValueText ? getAriaValueText(value[0], 'start') : ariaValuetext,\n      position: (value[0] - min) / (max - min) * 100\n    }, {\n      value: value[1],\n      'data-key': 'end',\n      'aria-valuenow': value[1],\n      'aria-valuetext': getAriaValueText ? getAriaValueText(value[1], 'end') : ariaValuetext,\n      position: (value[1] - min) / (max - min) * 100\n    }];\n  }, [ariaValuetext, getAriaValueText, max, min, value]);\n  var handleCommonProps = {\n    rtl: rtl,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    className: handleClassName,\n    style: handleStyle,\n    renderTooltip: renderTooltip,\n    onDragMove: handleDragMove,\n    onDragEnd: handleChangeCommitted,\n    onKeyDown: handleKeyDown,\n    tabIndex: disabled ? undefined : 0,\n    'aria-orientation': vertical ? 'vertical' : 'horizontal',\n    'aria-disabled': disabled,\n    'aria-valuemax': max,\n    'aria-valuemin': min,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 341,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(barClassName, prefix('bar')),\n    ref: barRef,\n    onClick: handleClick,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 342,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: (value[0] - min) / (max - min) * 100,\n    end: (value[1] - min) / (max - min) * 100,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 344,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 352,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[0]], {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 362,\n      columnNumber: 7\n    }\n  }), handleTitle), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[1]], {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 366,\n      columnNumber: 7\n    }\n  }), handleTitle));\n});\n\nRangeSlider.displayName = 'RangeSlider';\nRangeSlider.propTypes = (0, _extends2.default)({}, _Slider.sliderPropTypes, {\n  value: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired),\n  defaultValue: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired)\n});\nvar _default = RangeSlider;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/RangeSlider/RangeSlider.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Slider = __webpack_require__(/*! ../Slider/Slider */ \"./src/Slider/Slider.tsx\");\n\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ../Slider/ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\n\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ../Slider/Handle */ \"./src/Slider/Handle.tsx\"));\n\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ../Slider/Graduated */ \"./src/Slider/Graduated.tsx\"));\n\nvar _utils2 = __webpack_require__(/*! ../Slider/utils */ \"./src/Slider/utils.ts\");\n\nvar _propTypeChecker = __webpack_require__(/*! ../utils/propTypeChecker */ \"./src/utils/propTypeChecker.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/RangeSlider/RangeSlider.tsx\",\n    _this = void 0;\n\nvar defaultDefaultValue = [0, 0];\n\nvar RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var ariaLabel = props['aria-label'],\n      ariaLabelledby = props['aria-labelledby'],\n      ariaValuetext = props['aria-valuetext'],\n      _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      barClassName = props.barClassName,\n      className = props.className,\n      constraint = props.constraint,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,\n      graduated = props.graduated,\n      _props$progress = props.progress,\n      progress = _props$progress === void 0 ? true : _props$progress,\n      vertical = props.vertical,\n      disabled = props.disabled,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,\n      _props$min = props.min,\n      min = _props$min === void 0 ? 0 : _props$min,\n      _props$max = props.max,\n      maxProp = _props$max === void 0 ? 100 : _props$max,\n      _props$step = props.step,\n      step = _props$step === void 0 ? 1 : _props$step,\n      valueProp = props.value,\n      handleClassName = props.handleClassName,\n      handleStyle = props.handleStyle,\n      handleTitle = props.handleTitle,\n      _props$tooltip = props.tooltip,\n      tooltip = _props$tooltip === void 0 ? true : _props$tooltip,\n      getAriaValueText = props.getAriaValueText,\n      renderTooltip = props.renderTooltip,\n      renderMark = props.renderMark,\n      onChange = props.onChange,\n      onChangeCommitted = props.onChangeCommitted,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"aria-label\", \"aria-labelledby\", \"aria-valuetext\", \"as\", \"barClassName\", \"className\", \"constraint\", \"defaultValue\", \"graduated\", \"progress\", \"vertical\", \"disabled\", \"classPrefix\", \"min\", \"max\", \"step\", \"value\", \"handleClassName\", \"handleStyle\", \"handleTitle\", \"tooltip\", \"getAriaValueText\", \"renderTooltip\", \"renderMark\", \"onChange\", \"onChangeCommitted\"]);\n  var barRef = (0, _react.useRef)(null); // Define the parameter position of the handle\n\n  var handleIndexs = (0, _react.useRef)([0, 1]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('RangeSlider'),\n      rtl = _useCustom.rtl;\n\n  var classes = merge(className, withClassPrefix({\n    vertical: vertical,\n    disabled: disabled,\n    graduated: graduated,\n    'with-mark': renderMark\n  }));\n  var max = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min);\n  }, [maxProp, min, step]);\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n\n  var getValidValue = (0, _react.useCallback)(function (value) {\n    if (typeof value === 'undefined') {\n      return;\n    }\n\n    return [(0, _utils2.checkValue)(value[0], min, max), (0, _utils2.checkValue)(value[1], min, max)];\n  }, [max, min]);\n\n  var _useControlled = (0, _utils.useControlled)(getValidValue(valueProp), getValidValue(defaultValue)),\n      value = _useControlled[0],\n      setValue = _useControlled[1]; // The count of values ​​that can be entered.\n\n\n  var count = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)((max - min) / step);\n  }, [max, min, step]); // Get the height of the progress bar\n\n  var getBarHeight = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;\n  }, []); // Get the width of the progress bar\n\n  var getBarWidth = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;\n  }, []);\n  var getValueByOffset = (0, _react.useCallback)(function (offset) {\n    var val = 0;\n\n    if (isNaN(offset)) {\n      return val;\n    }\n\n    if (vertical) {\n      var barHeight = getBarHeight();\n      val = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      var barWidth = getBarWidth();\n      val = Math.round(offset / (barWidth / count)) * step;\n    }\n\n    return (0, _utils2.precisionMath)(val);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  var getValueByPosition = (0, _react.useCallback)(function (event) {\n    var barOffset = (0, _getOffset.default)(barRef.current);\n    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;\n    var val = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(val) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  var getRangeValue = (0, _react.useCallback)(function (value, key, event) {\n    // Get the corresponding value according to the cursor position\n    var v = getValueByPosition(event); // Judge the handle key and put the corresponding value at the start or end.\n\n    if (key === 'start') {\n      return [v, value[1]];\n    } else if (key === 'end') {\n      return [value[0], v];\n    }\n\n    return value;\n  }, [getValueByPosition]);\n  var getNextValue = (0, _react.useCallback)(function (event, dataset) {\n    var eventKey = dataset.key,\n        range = dataset.range;\n    var value = range.split(',').map(function (i) {\n      return +i;\n    });\n    var nextValue = getValidValue(getRangeValue(value, eventKey, event));\n\n    if (nextValue[0] >= nextValue[1]) {\n      /**\n       * When the value of `start` is greater than the value of` end`,\n       * the position of the handle is reversed.\n       */\n      handleIndexs.current.reverse();\n\n      if (eventKey === 'start') {\n        nextValue[0] = value[1];\n      } else {\n        nextValue[1] = value[0];\n      }\n    }\n\n    return nextValue;\n  }, [getRangeValue, getValidValue]);\n  /**\n   * Whether a range is valid against given constraint (if any)\n   * Should check before every `setValue` calls\n   */\n\n  var isRangeMatchingConstraint = (0, _react.useCallback)(function (range) {\n    // If no constraint is defined, any range is valid\n    if (!constraint) return true;\n    return constraint(range);\n  }, [constraint]);\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n\n  var handleDragMove = (0, _utils.useEventCallback)(function (event, dataset) {\n    var nextValue = getNextValue(event, dataset);\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  });\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n\n  var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {\n    var nextValue = getNextValue(event, dataset);\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);\n    }\n  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _event$target;\n\n    var _event$target$dataset = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['dataset'],\n        key = _event$target$dataset.key;\n\n    var nextValue = [].concat(value);\n    var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    var valueIndex = key === 'start' ? 0 : 1;\n\n    switch (event.key) {\n      case 'Home':\n        nextValue[valueIndex] = min;\n        break;\n\n      case 'End':\n        nextValue[valueIndex] = max;\n        break;\n\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue[valueIndex] = Math.min(max, value[valueIndex] + step);\n        break;\n\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue[valueIndex] = Math.max(min, value[valueIndex] - step);\n        break;\n\n      default:\n        return;\n    } // When the start value is greater than the end value, let the handle and value switch positions.\n\n\n    if (nextValue[0] >= nextValue[1]) {\n      nextValue.reverse();\n      handleIndexs.current.reverse();\n    } // Prevent scroll of the page\n\n\n    event.preventDefault();\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);\n  var handleClick = (0, _react.useCallback)(function (event) {\n    if (disabled) {\n      return;\n    }\n\n    var start = value[0],\n        end = value[1];\n    var v = getValueByPosition(event); //  Judging that the current click value is closer to the values ​​of `start` and` end`.\n\n    if (Math.abs(start - v) < Math.abs(end - v)) {\n      start = v;\n    } else {\n      end = v;\n    }\n\n    var nextValue = getValidValue([start, end].sort());\n\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);\n  var handleProps = (0, _react.useMemo)(function () {\n    return [{\n      value: value[0],\n      'data-key': 'start',\n      'aria-valuenow': value[0],\n      'aria-valuetext': getAriaValueText ? getAriaValueText(value[0], 'start') : ariaValuetext,\n      position: (value[0] - min) / (max - min) * 100\n    }, {\n      value: value[1],\n      'data-key': 'end',\n      'aria-valuenow': value[1],\n      'aria-valuetext': getAriaValueText ? getAriaValueText(value[1], 'end') : ariaValuetext,\n      position: (value[1] - min) / (max - min) * 100\n    }];\n  }, [ariaValuetext, getAriaValueText, max, min, value]);\n  var handleCommonProps = {\n    rtl: rtl,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    className: handleClassName,\n    style: handleStyle,\n    renderTooltip: renderTooltip,\n    onDragMove: handleDragMove,\n    onDragEnd: handleChangeCommitted,\n    onKeyDown: handleKeyDown,\n    tabIndex: disabled ? undefined : 0,\n    'aria-orientation': vertical ? 'vertical' : 'horizontal',\n    'aria-disabled': disabled,\n    'aria-valuemax': max,\n    'aria-valuemin': min,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 342,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(barClassName, prefix('bar')),\n    ref: barRef,\n    onClick: handleClick,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 343,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: (value[0] - min) / (max - min) * 100,\n    end: (value[1] - min) / (max - min) * 100,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 345,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 353,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[0]], {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 363,\n      columnNumber: 7\n    }\n  }), handleTitle), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[1]], {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 367,\n      columnNumber: 7\n    }\n  }), handleTitle));\n});\n\nRangeSlider.displayName = 'RangeSlider';\nRangeSlider.propTypes = (0, _extends2.default)({}, _Slider.sliderPropTypes, {\n  value: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired),\n  defaultValue: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired)\n});\nvar _default = RangeSlider;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/RangeSlider/RangeSlider.tsx?");
 
 /***/ }),
 
@@ -4190,7 +4190,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\",\n    _this = void 0,\n    _templateObject;\n\nvar emptyArray = [];\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 triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale;\n\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\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    data: data,\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.\n\n\n  var _useSearch = (0, _Picker.useSearch)({\n    labelKey: labelKey,\n    data: data,\n    searchBy: searchBy,\n    callback: function callback(searchKeyword, filteredData, event) {\n      var _filteredData$;\n\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      updateFilteredData = _useSearch.updateFilteredData,\n      setSearchKeyword = _useSearch.setSearchKeyword,\n      handleSearch = _useSearch.handleSearch;\n\n  (0, _react.useEffect)(function () {\n    updateFilteredData(data);\n  }, [data, updateFilteredData]); // Use component active state to support keyboard events.\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    var _targetRef$current;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n  }, [onSelect]);\n  var handleChangeValue = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\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  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);\n  var handleItemSelect = (0, _react.useCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onClose: function onClose() {\n      setFocusItemValue(null);\n    }\n  }, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setSearchKeyword('');\n    setActive(false);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, setSearchKeyword]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    setActive(true);\n    setFocusItemValue(value);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, setFocusItemValue, value]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  }); // Find active `MenuItem` by `value`\n\n  var activeItem = data.find(function (item) {\n    return (0, _utils.shallowEqual)(item[valueKey], value);\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\n  var hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var selectedElement = placeholder;\n\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement); // If renderValue returns null or undefined, hasValue is false.\n\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData; // Create a tree structure data when set `groupBy`\n\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-select-menu',\n      dropdownMenuItemClassPrefix: 'picker-select-menu-item',\n      dropdownMenuItemAs: _Picker.DropdownMenuItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items,\n      group: !(0, _isUndefined.default)(groupBy),\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 339,\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: 360,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 364,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 373,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\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\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 397,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 405,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\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    active: active,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 406,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\n\nSelectPicker.displayName = 'SelectPicker';\nSelectPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.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  /**\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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\",\n    _this = void 0,\n    _templateObject;\n\nvar emptyArray = [];\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 triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale;\n\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\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    data: data,\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.\n\n\n  var _useSearch = (0, _Picker.useSearch)({\n    labelKey: labelKey,\n    data: data,\n    searchBy: searchBy,\n    callback: function callback(searchKeyword, filteredData, event) {\n      var _filteredData$;\n\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      updateFilteredData = _useSearch.updateFilteredData,\n      setSearchKeyword = _useSearch.setSearchKeyword,\n      handleSearch = _useSearch.handleSearch;\n\n  (0, _react.useEffect)(function () {\n    updateFilteredData(data);\n  }, [data, updateFilteredData]); // Use component active state to support keyboard events.\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    var _targetRef$current;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n  }, [onSelect]);\n  var handleChangeValue = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\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  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);\n  var handleItemSelect = (0, _react.useCallback)(function (value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !cleanable) {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onClose: function onClose() {\n      setFocusItemValue(null);\n    }\n  }, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setSearchKeyword('');\n    setActive(false);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, setSearchKeyword]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    setActive(true);\n    setFocusItemValue(value);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, setFocusItemValue, value]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  }); // Find active `MenuItem` by `value`\n\n  var activeItem = data.find(function (item) {\n    return (0, _utils.shallowEqual)(item[valueKey], value);\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\n  var hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var selectedElement = placeholder;\n\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement); // If renderValue returns null or undefined, hasValue is false.\n\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = filteredData; // Create a tree structure data when set `groupBy`\n\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderMenuItem,\n      maxHeight: menuMaxHeight,\n      classPrefix: 'picker-select-menu',\n      dropdownMenuItemClassPrefix: 'picker-select-menu-item',\n      dropdownMenuItemAs: _Picker.DropdownMenuItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items,\n      group: !(0, _isUndefined.default)(groupBy),\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 341,\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: 362,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      onKeyDown: onPickerKeyDown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 366,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 375,\n        columnNumber: 13\n      }\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\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\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 399,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 407,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\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    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});\n\nSelectPicker.displayName = 'SelectPicker';\nSelectPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.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  /**\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?");
 
 /***/ }),
 
@@ -4399,7 +4399,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.sliderPropTypes = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ./ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\n\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ./Handle */ \"./src/Slider/Handle.tsx\"));\n\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ./Graduated */ \"./src/Slider/Graduated.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Slider/Slider.tsx\",\n    _this = void 0;\n\nvar sliderPropTypes = {\n  min: _propTypes.default.number,\n  max: _propTypes.default.number,\n  step: _propTypes.default.number,\n  value: _propTypes.default.number,\n  defaultValue: _propTypes.default.number,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  handleClassName: _propTypes.default.string,\n  handleTitle: _propTypes.default.node,\n  barClassName: _propTypes.default.string,\n  handleStyle: _propTypes.default.object,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  graduated: _propTypes.default.bool,\n  tooltip: _propTypes.default.bool,\n  progress: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  onChange: _propTypes.default.func,\n  onChangeCommitted: _propTypes.default.func,\n  renderMark: _propTypes.default.func,\n  renderTooltip: _propTypes.default.func,\n  getAriaValueText: _propTypes.default.func\n};\nexports.sliderPropTypes = sliderPropTypes;\n\nvar Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var ariaLabel = props['aria-label'],\n      ariaLabelledby = props['aria-labelledby'],\n      ariaValuetext = props['aria-valuetext'],\n      _props$as = props.as,\n      Componnet = _props$as === void 0 ? 'div' : _props$as,\n      graduated = props.graduated,\n      className = props.className,\n      barClassName = props.barClassName,\n      progress = props.progress,\n      vertical = props.vertical,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,\n      _props$min = props.min,\n      min = _props$min === void 0 ? 0 : _props$min,\n      handleClassName = props.handleClassName,\n      handleStyle = props.handleStyle,\n      handleTitle = props.handleTitle,\n      _props$tooltip = props.tooltip,\n      tooltip = _props$tooltip === void 0 ? true : _props$tooltip,\n      _props$step = props.step,\n      step = _props$step === void 0 ? 1 : _props$step,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,\n      valueProp = props.value,\n      _props$max = props.max,\n      maxProp = _props$max === void 0 ? 100 : _props$max,\n      getAriaValueText = props.getAriaValueText,\n      renderTooltip = props.renderTooltip,\n      renderMark = props.renderMark,\n      onChange = props.onChange,\n      onChangeCommitted = props.onChangeCommitted,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"aria-label\", \"aria-labelledby\", \"aria-valuetext\", \"as\", \"graduated\", \"className\", \"barClassName\", \"progress\", \"vertical\", \"disabled\", \"readOnly\", \"plaintext\", \"classPrefix\", \"min\", \"handleClassName\", \"handleStyle\", \"handleTitle\", \"tooltip\", \"step\", \"defaultValue\", \"value\", \"max\", \"getAriaValueText\", \"renderTooltip\", \"renderMark\", \"onChange\", \"onChangeCommitted\"]);\n  var barRef = (0, _react.useRef)(null);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('Slider'),\n      rtl = _useCustom.rtl;\n\n  var classes = merge(className, withClassPrefix({\n    vertical: vertical,\n    disabled: disabled,\n    readOnly: readOnly,\n    graduated: graduated,\n    'with-mark': renderMark\n  }));\n  var max = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min);\n  }, [maxProp, min, step]);\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n\n  var getValidValue = (0, _react.useCallback)(function (value) {\n    return (0, _utils2.checkValue)(value, min, max);\n  }, [max, min]);\n\n  var _useControlled = (0, _utils.useControlled)(getValidValue(valueProp), getValidValue(defaultValue)),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var count = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)((max - min) / step);\n  }, [max, min, step]); // Get the height of the progress bar\n\n  var getBarHeight = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;\n  }, []); // Get the width of the progress bar\n\n  var getBarWidth = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;\n  }, []);\n  var getValueByOffset = (0, _react.useCallback)(function (offset) {\n    var value = 0;\n\n    if (isNaN(offset)) {\n      return value;\n    }\n\n    if (vertical) {\n      var barHeight = getBarHeight();\n      value = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      var barWidth = getBarWidth();\n      value = Math.round(offset / (barWidth / count)) * step;\n    }\n\n    return (0, _utils2.precisionMath)(value);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  /**\n   * A value within the valid range is calculated from the position triggered by the event.\n   */\n\n  var getValueByPosition = (0, _react.useCallback)(function (event) {\n    var barOffset = (0, _getOffset.default)(barRef.current);\n    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;\n    var offsetValue = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(offsetValue) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n\n  var handleChangeValue = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    var nextValue = getValidValue(getValueByPosition(event));\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  }, [disabled, getValidValue, getValueByPosition, onChange, readOnly, setValue]);\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n\n  var handleChangeCommitted = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    var nextValue = getValidValue(getValueByPosition(event));\n    onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);\n  }, [disabled, getValidValue, getValueByPosition, onChangeCommitted, readOnly]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var nextValue;\n    var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n\n    switch (event.key) {\n      case 'Home':\n        nextValue = min;\n        break;\n\n      case 'End':\n        nextValue = max;\n        break;\n\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue = Math.min(max, value + step);\n        break;\n\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue = Math.max(min, value - step);\n        break;\n\n      default:\n        return;\n    } // Prevent scroll of the page\n\n\n    event.preventDefault();\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  }, [max, min, onChange, rtl, setValue, step, value]);\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      ref: ref,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 275,\n        columnNumber: 7\n      }\n    }, value);\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Componnet, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    role: \"presentation\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 282,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: barRef,\n    className: merge(barClassName, prefix('bar')),\n    onClick: handleChangeValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 283,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: 0,\n    end: (value - min) / (max - min) * 100,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 293,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, {\n    position: (value - min) / (max - min) * 100,\n    className: handleClassName,\n    style: handleStyle,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    rtl: rtl,\n    value: value,\n    renderTooltip: renderTooltip,\n    onDragMove: handleChangeValue,\n    onKeyDown: handleKeyDown,\n    onDragEnd: handleChangeCommitted,\n    tabIndex: disabled || readOnly ? undefined : 0,\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    \"aria-valuenow\": value,\n    \"aria-disabled\": disabled,\n    \"aria-valuetext\": getAriaValueText ? getAriaValueText(value) : ariaValuetext,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": min,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 304,\n      columnNumber: 9\n    }\n  }, handleTitle));\n});\n\nSlider.displayName = 'Slider';\nSlider.propTypes = sliderPropTypes;\nvar _default = Slider;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Slider.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.sliderPropTypes = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\n\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\n\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ./ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\n\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ./Handle */ \"./src/Slider/Handle.tsx\"));\n\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ./Graduated */ \"./src/Slider/Graduated.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Slider/Slider.tsx\",\n    _this = void 0;\n\nvar sliderPropTypes = {\n  min: _propTypes.default.number,\n  max: _propTypes.default.number,\n  step: _propTypes.default.number,\n  value: _propTypes.default.number,\n  defaultValue: _propTypes.default.number,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  handleClassName: _propTypes.default.string,\n  handleTitle: _propTypes.default.node,\n  barClassName: _propTypes.default.string,\n  handleStyle: _propTypes.default.object,\n  disabled: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  readOnly: _propTypes.default.bool,\n  graduated: _propTypes.default.bool,\n  tooltip: _propTypes.default.bool,\n  progress: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  onChange: _propTypes.default.func,\n  onChangeCommitted: _propTypes.default.func,\n  renderMark: _propTypes.default.func,\n  renderTooltip: _propTypes.default.func,\n  getAriaValueText: _propTypes.default.func\n};\nexports.sliderPropTypes = sliderPropTypes;\n\nvar Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var ariaLabel = props['aria-label'],\n      ariaLabelledby = props['aria-labelledby'],\n      ariaValuetext = props['aria-valuetext'],\n      _props$as = props.as,\n      Componnet = _props$as === void 0 ? 'div' : _props$as,\n      graduated = props.graduated,\n      className = props.className,\n      barClassName = props.barClassName,\n      progress = props.progress,\n      vertical = props.vertical,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,\n      _props$min = props.min,\n      min = _props$min === void 0 ? 0 : _props$min,\n      handleClassName = props.handleClassName,\n      handleStyle = props.handleStyle,\n      handleTitle = props.handleTitle,\n      _props$tooltip = props.tooltip,\n      tooltip = _props$tooltip === void 0 ? true : _props$tooltip,\n      _props$step = props.step,\n      step = _props$step === void 0 ? 1 : _props$step,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,\n      valueProp = props.value,\n      _props$max = props.max,\n      maxProp = _props$max === void 0 ? 100 : _props$max,\n      getAriaValueText = props.getAriaValueText,\n      renderTooltip = props.renderTooltip,\n      renderMark = props.renderMark,\n      onChange = props.onChange,\n      onChangeCommitted = props.onChangeCommitted,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"aria-label\", \"aria-labelledby\", \"aria-valuetext\", \"as\", \"graduated\", \"className\", \"barClassName\", \"progress\", \"vertical\", \"disabled\", \"readOnly\", \"plaintext\", \"classPrefix\", \"min\", \"handleClassName\", \"handleStyle\", \"handleTitle\", \"tooltip\", \"step\", \"defaultValue\", \"value\", \"max\", \"getAriaValueText\", \"renderTooltip\", \"renderMark\", \"onChange\", \"onChangeCommitted\"]);\n  var barRef = (0, _react.useRef)(null);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('Slider'),\n      rtl = _useCustom.rtl;\n\n  var classes = merge(className, withClassPrefix({\n    vertical: vertical,\n    disabled: disabled,\n    readOnly: readOnly,\n    graduated: graduated,\n    'with-mark': renderMark\n  }));\n  var max = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min);\n  }, [maxProp, min, step]);\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n\n  var getValidValue = (0, _react.useCallback)(function (value) {\n    return (0, _utils2.checkValue)(value, min, max);\n  }, [max, min]);\n\n  var _useControlled = (0, _utils.useControlled)(getValidValue(valueProp), getValidValue(defaultValue)),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var count = (0, _react.useMemo)(function () {\n    return (0, _utils2.precisionMath)((max - min) / step);\n  }, [max, min, step]); // Get the height of the progress bar\n\n  var getBarHeight = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;\n  }, []); // Get the width of the progress bar\n\n  var getBarWidth = (0, _react.useCallback)(function () {\n    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;\n  }, []);\n  var getValueByOffset = (0, _react.useCallback)(function (offset) {\n    var value = 0;\n\n    if (isNaN(offset)) {\n      return value;\n    }\n\n    if (vertical) {\n      var barHeight = getBarHeight();\n      value = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      var barWidth = getBarWidth();\n      value = Math.round(offset / (barWidth / count)) * step;\n    }\n\n    return (0, _utils2.precisionMath)(value);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  /**\n   * A value within the valid range is calculated from the position triggered by the event.\n   */\n\n  var getValueByPosition = (0, _react.useCallback)(function (event) {\n    var barOffset = (0, _getOffset.default)(barRef.current);\n    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;\n    var offsetValue = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(offsetValue) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n\n  var handleChangeValue = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    var nextValue = getValidValue(getValueByPosition(event));\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  }, [disabled, getValidValue, getValueByPosition, onChange, readOnly, setValue]);\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n\n  var handleChangeCommitted = (0, _react.useCallback)(function (event) {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    var nextValue = getValidValue(getValueByPosition(event));\n    onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);\n  }, [disabled, getValidValue, getValueByPosition, onChangeCommitted, readOnly]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var nextValue;\n    var increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    var decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n\n    switch (event.key) {\n      case 'Home':\n        nextValue = min;\n        break;\n\n      case 'End':\n        nextValue = max;\n        break;\n\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue = Math.min(max, value + step);\n        break;\n\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue = Math.max(min, value - step);\n        break;\n\n      default:\n        return;\n    } // Prevent scroll of the page\n\n\n    event.preventDefault();\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  }, [max, min, onChange, rtl, setValue, step, value]);\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      ref: ref,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 278,\n        columnNumber: 7\n      }\n    }, value);\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Componnet, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    role: \"presentation\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: barRef,\n    className: merge(barClassName, prefix('bar')),\n    onClick: handleChangeValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 286,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: 0,\n    end: (value - min) / (max - min) * 100,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 288,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 296,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, {\n    position: (value - min) / (max - min) * 100,\n    className: handleClassName,\n    style: handleStyle,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    rtl: rtl,\n    value: value,\n    renderTooltip: renderTooltip,\n    onDragMove: handleChangeValue,\n    onKeyDown: handleKeyDown,\n    onDragEnd: handleChangeCommitted,\n    tabIndex: disabled || readOnly ? undefined : 0,\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    \"aria-valuenow\": value,\n    \"aria-disabled\": disabled,\n    \"aria-valuetext\": getAriaValueText ? getAriaValueText(value) : ariaValuetext,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": min,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 307,\n      columnNumber: 9\n    }\n  }, handleTitle));\n});\n\nSlider.displayName = 'Slider';\nSlider.propTypes = sliderPropTypes;\nvar _default = Slider;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Slider.tsx?");
 
 /***/ }),
 
@@ -4696,7 +4696,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.maxTreeHeight = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _VirtualizedList = __webpack_require__(/*! ../Picker/VirtualizedList */ \"./src/Picker/VirtualizedList.tsx\");\n\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n    _this = void 0;\n\n// default value for virtualized\nvar maxTreeHeight = 320;\nexports.maxTreeHeight = maxTreeHeight;\nvar emptyArray = [];\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      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      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      _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      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\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"menuStyle\", \"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\", \"onChange\", \"onEntered\", \"onClose\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  var treeViewRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      rtl = _useCustom.rtl,\n      locale = _useCustom.locale;\n\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n      inline = _useContext.inline;\n\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\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\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\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)(null),\n      focusItemValue = _useState2[0],\n      setFocusItemValue = _useState2[1];\n\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\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('tree'),\n      treePrefix = _useClassNames2.prefix,\n      withTreeClassPrefix = _useClassNames2.withClassPrefix;\n\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\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\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n      treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n      saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = (0, _react.useCallback)(function (render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);\n  var focusActiveNode = (0, _react.useCallback)(function () {\n    if (listRef.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: listRef.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeViewRef.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  }, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);\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 = (0, _react.useCallback)(function (nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n\n      /** dropNode */\n      dropNode: nodeData,\n\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  }, [dragNode, valueKey, childrenKey, dropNodePosition]);\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      onRenderTreeNode: renderTreeNode,\n      onRenderTreeIcon: renderTreeIcon\n    };\n  };\n\n  var handleSelect = (0, _react.useCallback)(function (nodeData, event) {\n    var _targetRef$current, _triggerRef$current, _triggerRef$current$c;\n\n    if (!nodeData) {\n      return;\n    }\n\n    var nodeValue = nodeData[valueKey];\n\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\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    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, [valueKey, isControlled, onChange, onSelect, setValue]);\n  var handleExpand = (0, _react.useCallback)(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\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);\n  var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {\n    if (draggable) {\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  }, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);\n  var handleDragEnter = (0, _react.useCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  }, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);\n  var handleDragOver = (0, _react.useCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\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\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  }, [dragNode, dragNodeKeys, dragOverNodeKey, dropNodePosition, onDragOver, setDropNodePosition, treeNodesRefs, valueKey]);\n  var handleDragLeave = (0, _react.useCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  }, [onDragLeave]);\n  var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  }, [setDragNode, setDragNodeKeys, setDragOverNodeKey, onDragEnd]);\n  var handleDrop = (0, _react.useCallback)(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\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  }, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [focusActiveNode, onOpen]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current3, _triggerRef$current3$, _targetRef$current2;\n\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.close) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$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\n    (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();\n  }, [activeNode, setSearchKeyword, valueKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: inline ? treeViewRef : undefined,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef,\n    inline: inline\n  });\n  var handleFocusItem = (0, _react.useCallback)(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\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  }, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);\n  var handleLeftArrow = (0, _react.useCallback)(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\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  }, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey, childrenKey]);\n  var handleRightArrow = (0, _react.useCallback)(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  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);\n  var selectActiveItem = (0, _react.useCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  }, [flattenNodes, valueKey, focusItemValue, handleSelect]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target; // exclude searchBar\n\n    if (target.matches('div[role=\"searchbox\"] > input')) {\n      return;\n    }\n\n    setValue(null);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  }, [onChange, setValue]);\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\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, _react.useCallback)(function (event) {\n    if (!treeViewRef.current) {\n      return;\n    }\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  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);\n\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\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\n    if (nodeProps.hasChildren) {\n      var _merge;\n\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: 712,\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: 713,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 714,\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: 717,\n          columnNumber: 15\n        }\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: 727,\n        columnNumber: 7\n      }\n    }));\n  };\n\n  var renderVirtualListNode = function renderVirtualListNode(nodes) {\n    return function (_ref3) {\n      var key = _ref3.key,\n          index = _ref3.index,\n          style = _ref3.style;\n      var node = nodes[index];\n      var layer = node.layer,\n          visible = node.visible;\n      var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n\n      if (!node.visible) {\n        return null;\n      }\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        key: key\n      }, nodeProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 757,\n          columnNumber: 11\n        }\n      }));\n    };\n  };\n\n  var renderTree = function renderTree() {\n    var _withTreeClassPrefix;\n\n    var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));\n    var formattedNodes = getFormattedNodes(renderNode);\n    var styles = inline ? (0, _extends2.default)({\n      height: height\n    }, style) : {};\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"tree\",\n      id: id ? id + \"-listbox\" : undefined,\n      ref: treeViewRef,\n      className: classes,\n      style: styles,\n      onKeyDown: inline ? handleTreeKeyDown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 771,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treePrefix('nodes'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 779,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : maxTreeHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 781,\n        columnNumber: 13\n      }\n    }, function (_ref5) {\n      var height = _ref5.height,\n          width = _ref5.width;\n      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({\n        ref: listRef,\n        width: width,\n        height: height,\n        rowHeight: 36,\n        rowCount: formattedNodes.length,\n        rowRenderer: renderVirtualListNode(formattedNodes),\n        scrollToAlignment: \"center\"\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 786,\n          columnNumber: 17\n        }\n      }));\n    }) : formattedNodes));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var styles = virtualized ? (0, _extends2.default)({\n      height: height\n    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 813,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 822,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\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\n\n  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, node, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\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\n  if (inline) {\n    return renderTree();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\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: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 867,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 877,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    id: id,\n    ref: targetRef,\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    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 878,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.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\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = exports.maxTreeHeight = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _VirtualizedList = __webpack_require__(/*! ../Picker/VirtualizedList */ \"./src/Picker/VirtualizedList.tsx\");\n\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n    _this = void 0;\n\n// default value for virtualized\nvar maxTreeHeight = 320;\nexports.maxTreeHeight = maxTreeHeight;\nvar emptyArray = [];\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      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      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      _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      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\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"menuStyle\", \"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\", \"onChange\", \"onEntered\", \"onClose\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var triggerRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var listRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  var treeViewRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n      rtl = _useCustom.rtl,\n      locale = _useCustom.locale;\n\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n      inline = _useContext.inline;\n\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\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\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\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)(null),\n      focusItemValue = _useState2[0],\n      setFocusItemValue = _useState2[1];\n\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\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useClassNames2 = (0, _utils.useClassNames)('tree'),\n      treePrefix = _useClassNames2.prefix,\n      withTreeClassPrefix = _useClassNames2.withClassPrefix;\n\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\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\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n      treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n      saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = (0, _react.useCallback)(function (render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);\n  var focusActiveNode = (0, _react.useCallback)(function () {\n    if (listRef.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: listRef.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeViewRef.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  }, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);\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 = (0, _react.useCallback)(function (nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n\n      /** dropNode */\n      dropNode: nodeData,\n\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  }, [dragNode, valueKey, childrenKey, dropNodePosition]);\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      onRenderTreeNode: renderTreeNode,\n      onRenderTreeIcon: renderTreeIcon\n    };\n  };\n\n  var handleSelect = (0, _react.useCallback)(function (nodeData, event) {\n    var _targetRef$current, _triggerRef$current, _triggerRef$current$c;\n\n    if (!nodeData) {\n      return;\n    }\n\n    var nodeValue = nodeData[valueKey];\n\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\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    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, [valueKey, isControlled, onChange, onSelect, setValue]);\n  var handleExpand = (0, _react.useCallback)(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\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);\n  var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {\n    if (draggable) {\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  }, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);\n  var handleDragEnter = (0, _react.useCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  }, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);\n  var handleDragOver = (0, _react.useCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\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\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  }, [dragNode, dragNodeKeys, dragOverNodeKey, dropNodePosition, onDragOver, setDropNodePosition, treeNodesRefs, valueKey]);\n  var handleDragLeave = (0, _react.useCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  }, [onDragLeave]);\n  var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  }, [setDragNode, setDragNodeKeys, setDragOverNodeKey, onDragEnd]);\n  var handleDrop = (0, _react.useCallback)(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\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  }, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [focusActiveNode, onOpen]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current3, _triggerRef$current3$, _targetRef$current2;\n\n    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.close) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$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\n    (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();\n  }, [activeNode, setSearchKeyword, valueKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    rootRef: inline ? treeViewRef : undefined,\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef,\n    inline: inline\n  });\n  var handleFocusItem = (0, _react.useCallback)(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\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  }, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);\n  var handleLeftArrow = (0, _react.useCallback)(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\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  }, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey, childrenKey]);\n  var handleRightArrow = (0, _react.useCallback)(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  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);\n  var selectActiveItem = (0, _react.useCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  }, [flattenNodes, valueKey, focusItemValue, handleSelect]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target; // exclude searchBar\n\n    if (target.matches('div[role=\"searchbox\"] > input')) {\n      return;\n    }\n\n    setValue(null);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  }, [onChange, setValue]);\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\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, _react.useCallback)(function (event) {\n    if (!treeViewRef.current) {\n      return;\n    }\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  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);\n\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\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\n    if (nodeProps.hasChildren) {\n      var _merge;\n\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: 712,\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: 713,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 714,\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: 717,\n          columnNumber: 15\n        }\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: 727,\n        columnNumber: 7\n      }\n    }));\n  };\n\n  var renderVirtualListNode = function renderVirtualListNode(nodes) {\n    return function (_ref3) {\n      var key = _ref3.key,\n          index = _ref3.index,\n          style = _ref3.style;\n      var node = nodes[index];\n      var layer = node.layer,\n          visible = node.visible;\n      var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n\n      if (!node.visible) {\n        return null;\n      }\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        key: key\n      }, nodeProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 757,\n          columnNumber: 11\n        }\n      }));\n    };\n  };\n\n  var renderTree = function renderTree() {\n    var _withTreeClassPrefix;\n\n    var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));\n    var formattedNodes = getFormattedNodes(renderNode);\n    var styles = inline ? (0, _extends2.default)({\n      height: height\n    }, style) : {};\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      role: \"tree\",\n      id: id ? id + \"-listbox\" : undefined,\n      ref: treeViewRef,\n      className: classes,\n      style: styles,\n      onKeyDown: inline ? handleTreeKeyDown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 771,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treePrefix('nodes'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 779,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : maxTreeHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 781,\n        columnNumber: 13\n      }\n    }, function (_ref5) {\n      var height = _ref5.height,\n          width = _ref5.width;\n      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({\n        ref: listRef,\n        width: width,\n        height: height,\n        rowHeight: 36,\n        rowCount: formattedNodes.length,\n        rowRenderer: renderVirtualListNode(formattedNodes),\n        scrollToAlignment: \"center\"\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 786,\n          columnNumber: 17\n        }\n      }));\n    }) : formattedNodes));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var styles = virtualized ? (0, _extends2.default)({\n      height: height\n    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 813,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInputRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 822,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\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\n\n  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n\n    if ((0, _isFunction2.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\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\n  if (inline) {\n    return renderTree();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\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: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 867,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 877,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    id: id,\n    ref: targetRef,\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    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 878,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.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?");
 
 /***/ }),
 
@@ -4740,7 +4740,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _UploadFileItem = _interopRequireDefault(__webpack_require__(/*! ./UploadFileItem */ \"./src/Uploader/UploadFileItem.tsx\"));\n\nvar _UploadTrigger = _interopRequireDefault(__webpack_require__(/*! ./UploadTrigger */ \"./src/Uploader/UploadTrigger.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Uploader/Uploader.tsx\",\n    _this = void 0;\n\nvar getFiles = function getFiles(event) {\n  if (typeof (event === null || event === void 0 ? void 0 : event['dataTransfer']) === 'object') {\n    var _event$dataTransfer;\n\n    return event === null || event === void 0 ? void 0 : (_event$dataTransfer = event['dataTransfer']) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files;\n  }\n\n  if (event.target) {\n    return event.target['files'];\n  }\n\n  return [];\n};\n\nvar createFile = function createFile(file) {\n  var fileKey = file.fileKey;\n  return (0, _extends2.default)({}, file, {\n    fileKey: fileKey || (0, _utils.guid)(),\n    progress: 0\n  });\n};\n\nfunction fileListReducer(files, action) {\n  var _action$files;\n\n  switch (action.type) {\n    // Add one or more files\n    case 'push':\n      return [].concat(files, action.files);\n    // Remove a file by `fileKey`\n\n    case 'remove':\n      return files.filter(function (f) {\n        return f.fileKey !== action.fileKey;\n      });\n    // Update a file\n\n    case 'updateFile':\n      return files.map(function (file) {\n        return file.fileKey === action.file.fileKey ? action.file : file;\n      });\n    // Initialization file list\n\n    case 'init':\n      return ((_action$files = action.files) === null || _action$files === void 0 ? void 0 : _action$files.map(function (file) {\n        // The state of the file needs to be preserved when the `fileList` is controlled.\n        return files.find(function (f) {\n          return f.fileKey === file.fileKey;\n        }) || createFile(file);\n      })) || [];\n\n    default:\n      throw new Error();\n  }\n}\n\nvar useFileList = function useFileList(defaultFileList) {\n  if (defaultFileList === void 0) {\n    defaultFileList = [];\n  }\n\n  var fileListRef = (0, _react.useRef)(defaultFileList.map(createFile));\n  var fileListUpdateCallback = (0, _react.useRef)();\n\n  var _useReducer = (0, _react.useReducer)(fileListReducer, fileListRef.current),\n      fileList = _useReducer[0],\n      dispatch = _useReducer[1];\n\n  fileListRef.current = fileList;\n  (0, _react.useEffect)(function () {\n    var _fileListUpdateCallba;\n\n    (_fileListUpdateCallba = fileListUpdateCallback.current) === null || _fileListUpdateCallba === void 0 ? void 0 : _fileListUpdateCallba.call(fileListUpdateCallback, fileList);\n    fileListUpdateCallback.current = null;\n  }, [fileList]);\n  (0, _utils.useWillUnmount)(function () {\n    fileListUpdateCallback.current = null;\n  });\n  var dispatchCallback = (0, _react.useCallback)(function (action, callback) {\n    dispatch(action);\n    fileListUpdateCallback.current = callback;\n  }, []);\n  return [fileListRef, dispatchCallback];\n};\n\nvar Uploader = /*#__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 ? 'uploader' : _props$classPrefix,\n      className = props.className,\n      _props$listType = props.listType,\n      listType = _props$listType === void 0 ? 'text' : _props$listType,\n      defaultFileList = props.defaultFileList,\n      fileListProp = props.fileList,\n      _props$fileListVisibl = props.fileListVisible,\n      fileListVisible = _props$fileListVisibl === void 0 ? true : _props$fileListVisibl,\n      localeProp = props.locale,\n      style = props.style,\n      draggable = props.draggable,\n      _props$name = props.name,\n      name = _props$name === void 0 ? 'file' : _props$name,\n      _props$multiple = props.multiple,\n      multiple = _props$multiple === void 0 ? false : _props$multiple,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? false : _props$disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      accept = props.accept,\n      children = props.children,\n      toggleAs = props.toggleAs,\n      _props$removable = props.removable,\n      removable = _props$removable === void 0 ? true : _props$removable,\n      disabledFileItem = props.disabledFileItem,\n      maxPreviewFileSize = props.maxPreviewFileSize,\n      _props$autoUpload = props.autoUpload,\n      autoUpload = _props$autoUpload === void 0 ? true : _props$autoUpload,\n      action = props.action,\n      headers = props.headers,\n      _props$withCredential = props.withCredentials,\n      withCredentials = _props$withCredential === void 0 ? false : _props$withCredential,\n      disableMultipart = props.disableMultipart,\n      _props$timeout = props.timeout,\n      timeout = _props$timeout === void 0 ? 0 : _props$timeout,\n      _props$data = props.data,\n      data = _props$data === void 0 ? {} : _props$data,\n      onRemove = props.onRemove,\n      onUpload = props.onUpload,\n      shouldUpload = props.shouldUpload,\n      shouldQueueUpdate = props.shouldQueueUpdate,\n      renderFileInfo = props.renderFileInfo,\n      renderThumbnail = props.renderThumbnail,\n      onPreview = props.onPreview,\n      onChange = props.onChange,\n      onSuccess = props.onSuccess,\n      onError = props.onError,\n      onProgress = props.onProgress,\n      onReupload = props.onReupload,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"listType\", \"defaultFileList\", \"fileList\", \"fileListVisible\", \"locale\", \"style\", \"draggable\", \"name\", \"multiple\", \"disabled\", \"readOnly\", \"plaintext\", \"accept\", \"children\", \"toggleAs\", \"removable\", \"disabledFileItem\", \"maxPreviewFileSize\", \"autoUpload\", \"action\", \"headers\", \"withCredentials\", \"disableMultipart\", \"timeout\", \"data\", \"onRemove\", \"onUpload\", \"shouldUpload\", \"shouldQueueUpdate\", \"renderFileInfo\", \"renderThumbnail\", \"onPreview\", \"onChange\", \"onSuccess\", \"onError\", \"onProgress\", \"onReupload\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, withClassPrefix(listType, {\n    draggable: draggable\n  }));\n\n  var _useCustom = (0, _utils.useCustom)('Uploader', localeProp),\n      locale = _useCustom.locale;\n\n  var rootRef = (0, _react.useRef)();\n  var xhrs = (0, _react.useRef)({});\n  var trigger = (0, _react.useRef)();\n\n  var _useFileList = useFileList(fileListProp || defaultFileList),\n      fileList = _useFileList[0],\n      dispatch = _useFileList[1];\n\n  (0, _react.useEffect)(function () {\n    if (typeof fileListProp !== 'undefined') {\n      // Force reset fileList in reducer, when `fileListProp` is updated\n      dispatch({\n        type: 'init',\n        files: fileListProp\n      });\n    }\n  }, [dispatch, fileListProp]);\n  var updateFileStatus = (0, _react.useCallback)(function (nextFile) {\n    dispatch({\n      type: 'updateFile',\n      file: nextFile\n    });\n  }, [dispatch]);\n  /**\n   * Clear the value in input.\n   */\n\n  var cleanInputValue = (0, _react.useCallback)(function () {\n    var _trigger$current;\n\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.clearInput();\n  }, []);\n  /**\n   * Callback for successful file upload.\n   * @param file\n   * @param response\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadSuccess = (0, _react.useCallback)(function (file, response, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'finished',\n      progress: 100\n    });\n    updateFileStatus(nextFile);\n    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, nextFile, event, xhr);\n  }, [onSuccess, updateFileStatus]);\n  /**\n   * Callback for file upload error.\n   * @param file\n   * @param status\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadError = (0, _react.useCallback)(function (file, status, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'error'\n    });\n    updateFileStatus(nextFile);\n    onError === null || onError === void 0 ? void 0 : onError(status, nextFile, event, xhr);\n  }, [onError, updateFileStatus]);\n  /**\n   * Callback for file upload progress update.\n   * @param file\n   * @param percent\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadProgress = (0, _react.useCallback)(function (file, percent, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'uploading',\n      progress: percent\n    });\n    updateFileStatus(nextFile);\n    onProgress === null || onProgress === void 0 ? void 0 : onProgress(percent, nextFile, event, xhr);\n  }, [onProgress, updateFileStatus]);\n  /**\n   * Upload a single file.\n   * @param file\n   */\n\n  var handleUploadFile = (0, _react.useCallback)(function (file) {\n    var _ajaxUpload = (0, _utils.ajaxUpload)({\n      name: name,\n      timeout: timeout,\n      headers: headers,\n      data: data,\n      withCredentials: withCredentials,\n      disableMultipart: disableMultipart,\n      file: file.blobFile,\n      url: action,\n      onError: handleAjaxUploadError.bind(null, file),\n      onSuccess: handleAjaxUploadSuccess.bind(null, file),\n      onProgress: handleAjaxUploadProgress.bind(null, file)\n    }),\n        xhr = _ajaxUpload.xhr,\n        uploadData = _ajaxUpload.data;\n\n    updateFileStatus((0, _extends2.default)({}, file, {\n      status: 'uploading'\n    }));\n    xhrs.current[file.fileKey] = xhr;\n    onUpload === null || onUpload === void 0 ? void 0 : onUpload(file, uploadData, xhr);\n  }, [action, data, handleAjaxUploadError, handleAjaxUploadProgress, handleAjaxUploadSuccess, headers, name, onUpload, timeout, updateFileStatus, withCredentials, disableMultipart]);\n  var handleAjaxUpload = (0, _react.useCallback)(function () {\n    fileList.current.forEach(function (file) {\n      var checkState = shouldUpload === null || shouldUpload === void 0 ? void 0 : shouldUpload(file);\n\n      if (checkState instanceof Promise) {\n        checkState.then(function (res) {\n          if (res) {\n            handleUploadFile(file);\n          }\n        });\n        return;\n      } else if (checkState === false) {\n        return;\n      }\n\n      if (file.status === 'inited') {\n        handleUploadFile(file);\n      }\n    });\n    cleanInputValue();\n  }, [cleanInputValue, fileList, handleUploadFile, shouldUpload]);\n\n  var handleUploadTriggerChange = function handleUploadTriggerChange(event) {\n    var files = getFiles(event);\n    var newFileList = [];\n    Array.from(files).forEach(function (file) {\n      newFileList.push({\n        blobFile: file,\n        name: file.name,\n        status: 'inited',\n        fileKey: (0, _utils.guid)()\n      });\n    });\n    var nextFileList = [].concat(fileList.current, newFileList);\n    var checkState = shouldQueueUpdate === null || shouldQueueUpdate === void 0 ? void 0 : shouldQueueUpdate(nextFileList, newFileList);\n\n    if (checkState === false) {\n      cleanInputValue();\n      return;\n    }\n\n    var upload = function upload() {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList);\n      dispatch({\n        type: 'push',\n        files: newFileList\n      }, function () {\n        autoUpload && handleAjaxUpload();\n      });\n    };\n\n    if (checkState instanceof Promise) {\n      checkState.then(function (res) {\n        res && upload();\n      });\n      return;\n    }\n\n    upload();\n  };\n\n  var handleRemoveFile = function handleRemoveFile(fileKey) {\n    var _xhrs$current, _xhrs$current$file$fi;\n\n    var file = (0, _find.default)(fileList.current, function (f) {\n      return f.fileKey === fileKey;\n    });\n    var nextFileList = fileList.current.filter(function (f) {\n      return f.fileKey !== fileKey;\n    });\n\n    if (((_xhrs$current = xhrs.current) === null || _xhrs$current === void 0 ? void 0 : (_xhrs$current$file$fi = _xhrs$current[file.fileKey]) === null || _xhrs$current$file$fi === void 0 ? void 0 : _xhrs$current$file$fi.readyState) !== 4) {\n      var _xhrs$current$file$fi2;\n\n      (_xhrs$current$file$fi2 = xhrs.current[file.fileKey]) === null || _xhrs$current$file$fi2 === void 0 ? void 0 : _xhrs$current$file$fi2.abort();\n    }\n\n    dispatch({\n      type: 'remove',\n      fileKey: fileKey\n    });\n    onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList);\n    cleanInputValue();\n  };\n\n  var handleReupload = function handleReupload(file) {\n    autoUpload && handleUploadFile(file);\n    onReupload === null || onReupload === void 0 ? void 0 : onReupload(file);\n  }; // public API\n\n\n  var start = function start(file) {\n    if (file) {\n      handleUploadFile(file);\n      return;\n    }\n\n    handleAjaxUpload();\n  };\n\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      start: start\n    };\n  });\n  var renderList = [/*#__PURE__*/_react.default.createElement(_UploadTrigger.default, (0, _extends2.default)({}, rest, {\n    locale: locale,\n    name: name,\n    key: \"trigger\",\n    multiple: multiple,\n    draggable: draggable,\n    disabled: disabled,\n    readOnly: readOnly,\n    accept: accept,\n    ref: trigger,\n    onChange: handleUploadTriggerChange,\n    as: toggleAs,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 514,\n      columnNumber: 5\n    }\n  }), children)];\n\n  if (fileListVisible) {\n    renderList.push( /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: \"items\",\n      className: prefix('file-items'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 534,\n        columnNumber: 7\n      }\n    }, fileList.current.map(function (file, index) {\n      return /*#__PURE__*/_react.default.createElement(_UploadFileItem.default, {\n        locale: locale,\n        key: file.fileKey || index,\n        file: file,\n        maxPreviewFileSize: maxPreviewFileSize,\n        listType: listType,\n        disabled: disabledFileItem,\n        onPreview: onPreview,\n        onReupload: handleReupload,\n        onCancel: handleRemoveFile,\n        renderFileInfo: renderFileInfo,\n        renderThumbnail: renderThumbnail,\n        removable: removable && !readOnly && !plaintext,\n        allowReupload: !readOnly && !plaintext,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 536,\n          columnNumber: 11\n        }\n      });\n    })));\n  }\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notUploaded\",\n      className: withClassPrefix(listType),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 558,\n        columnNumber: 7\n      }\n    }, fileList.current.length ? renderList[1] : null);\n  }\n\n  if (listType === 'picture') {\n    renderList.reverse();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 569,\n      columnNumber: 5\n    }\n  }, renderList);\n});\n\nUploader.displayName = 'Uploader';\nUploader.propTypes = {\n  action: _propTypes.default.string.isRequired,\n  accept: _propTypes.default.string,\n  autoUpload: _propTypes.default.bool,\n  children: _propTypes.default.node,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  defaultFileList: _propTypes.default.array,\n  fileList: _propTypes.default.array,\n  data: _propTypes.default.object,\n  multiple: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  disabledFileItem: _propTypes.default.bool,\n  name: _propTypes.default.string,\n  timeout: _propTypes.default.number,\n  withCredentials: _propTypes.default.bool,\n  headers: _propTypes.default.object,\n  locale: _propTypes.default.any,\n  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),\n  shouldQueueUpdate: _propTypes.default.func,\n  shouldUpload: _propTypes.default.func,\n  onChange: _propTypes.default.func,\n  onUpload: _propTypes.default.func,\n  onReupload: _propTypes.default.func,\n  onPreview: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onSuccess: _propTypes.default.func,\n  onProgress: _propTypes.default.func,\n  onRemove: _propTypes.default.func,\n  maxPreviewFileSize: _propTypes.default.number,\n  style: _propTypes.default.object,\n  renderFileInfo: _propTypes.default.func,\n  renderThumbnail: _propTypes.default.func,\n  removable: _propTypes.default.bool,\n  fileListVisible: _propTypes.default.bool,\n  draggable: _propTypes.default.bool,\n  disableMultipart: _propTypes.default.bool\n};\nvar _default = Uploader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/Uploader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _UploadFileItem = _interopRequireDefault(__webpack_require__(/*! ./UploadFileItem */ \"./src/Uploader/UploadFileItem.tsx\"));\n\nvar _UploadTrigger = _interopRequireDefault(__webpack_require__(/*! ./UploadTrigger */ \"./src/Uploader/UploadTrigger.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Uploader/Uploader.tsx\",\n    _this = void 0;\n\nvar getFiles = function getFiles(event) {\n  if (typeof (event === null || event === void 0 ? void 0 : event['dataTransfer']) === 'object') {\n    var _event$dataTransfer;\n\n    return event === null || event === void 0 ? void 0 : (_event$dataTransfer = event['dataTransfer']) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files;\n  }\n\n  if (event.target) {\n    return event.target['files'];\n  }\n\n  return [];\n};\n\nvar createFile = function createFile(file) {\n  var fileKey = file.fileKey;\n  return (0, _extends2.default)({}, file, {\n    fileKey: fileKey || (0, _utils.guid)(),\n    progress: 0\n  });\n};\n\nfunction fileListReducer(files, action) {\n  var _action$files;\n\n  switch (action.type) {\n    // Add one or more files\n    case 'push':\n      return [].concat(files, action.files);\n    // Remove a file by `fileKey`\n\n    case 'remove':\n      return files.filter(function (f) {\n        return f.fileKey !== action.fileKey;\n      });\n    // Update a file\n\n    case 'updateFile':\n      return files.map(function (file) {\n        return file.fileKey === action.file.fileKey ? action.file : file;\n      });\n    // Initialization file list\n\n    case 'init':\n      return ((_action$files = action.files) === null || _action$files === void 0 ? void 0 : _action$files.map(function (file) {\n        // The state of the file needs to be preserved when the `fileList` is controlled.\n        return files.find(function (f) {\n          return f.fileKey === file.fileKey;\n        }) || createFile(file);\n      })) || [];\n\n    default:\n      throw new Error();\n  }\n}\n\nvar useFileList = function useFileList(defaultFileList) {\n  if (defaultFileList === void 0) {\n    defaultFileList = [];\n  }\n\n  var fileListRef = (0, _react.useRef)(defaultFileList.map(createFile));\n  var fileListUpdateCallback = (0, _react.useRef)();\n\n  var _useReducer = (0, _react.useReducer)(fileListReducer, fileListRef.current),\n      fileList = _useReducer[0],\n      dispatch = _useReducer[1];\n\n  fileListRef.current = fileList;\n  (0, _react.useEffect)(function () {\n    var _fileListUpdateCallba;\n\n    (_fileListUpdateCallba = fileListUpdateCallback.current) === null || _fileListUpdateCallba === void 0 ? void 0 : _fileListUpdateCallba.call(fileListUpdateCallback, fileList);\n    fileListUpdateCallback.current = null;\n  }, [fileList]);\n  (0, _utils.useWillUnmount)(function () {\n    fileListUpdateCallback.current = null;\n  });\n  var dispatchCallback = (0, _react.useCallback)(function (action, callback) {\n    dispatch(action);\n    fileListUpdateCallback.current = callback;\n  }, []);\n  return [fileListRef, dispatchCallback];\n};\n\nvar Uploader = /*#__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 ? 'uploader' : _props$classPrefix,\n      className = props.className,\n      _props$listType = props.listType,\n      listType = _props$listType === void 0 ? 'text' : _props$listType,\n      defaultFileList = props.defaultFileList,\n      fileListProp = props.fileList,\n      _props$fileListVisibl = props.fileListVisible,\n      fileListVisible = _props$fileListVisibl === void 0 ? true : _props$fileListVisibl,\n      localeProp = props.locale,\n      style = props.style,\n      draggable = props.draggable,\n      _props$name = props.name,\n      name = _props$name === void 0 ? 'file' : _props$name,\n      _props$multiple = props.multiple,\n      multiple = _props$multiple === void 0 ? false : _props$multiple,\n      _props$disabled = props.disabled,\n      disabled = _props$disabled === void 0 ? false : _props$disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      accept = props.accept,\n      children = props.children,\n      toggleAs = props.toggleAs,\n      _props$removable = props.removable,\n      removable = _props$removable === void 0 ? true : _props$removable,\n      disabledFileItem = props.disabledFileItem,\n      maxPreviewFileSize = props.maxPreviewFileSize,\n      _props$autoUpload = props.autoUpload,\n      autoUpload = _props$autoUpload === void 0 ? true : _props$autoUpload,\n      action = props.action,\n      headers = props.headers,\n      _props$withCredential = props.withCredentials,\n      withCredentials = _props$withCredential === void 0 ? false : _props$withCredential,\n      disableMultipart = props.disableMultipart,\n      _props$timeout = props.timeout,\n      timeout = _props$timeout === void 0 ? 0 : _props$timeout,\n      _props$data = props.data,\n      data = _props$data === void 0 ? {} : _props$data,\n      onRemove = props.onRemove,\n      onUpload = props.onUpload,\n      shouldUpload = props.shouldUpload,\n      shouldQueueUpdate = props.shouldQueueUpdate,\n      renderFileInfo = props.renderFileInfo,\n      renderThumbnail = props.renderThumbnail,\n      onPreview = props.onPreview,\n      onChange = props.onChange,\n      onSuccess = props.onSuccess,\n      onError = props.onError,\n      onProgress = props.onProgress,\n      onReupload = props.onReupload,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"listType\", \"defaultFileList\", \"fileList\", \"fileListVisible\", \"locale\", \"style\", \"draggable\", \"name\", \"multiple\", \"disabled\", \"readOnly\", \"plaintext\", \"accept\", \"children\", \"toggleAs\", \"removable\", \"disabledFileItem\", \"maxPreviewFileSize\", \"autoUpload\", \"action\", \"headers\", \"withCredentials\", \"disableMultipart\", \"timeout\", \"data\", \"onRemove\", \"onUpload\", \"shouldUpload\", \"shouldQueueUpdate\", \"renderFileInfo\", \"renderThumbnail\", \"onPreview\", \"onChange\", \"onSuccess\", \"onError\", \"onProgress\", \"onReupload\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      withClassPrefix = _useClassNames.withClassPrefix,\n      prefix = _useClassNames.prefix;\n\n  var classes = merge(className, withClassPrefix(listType, {\n    draggable: draggable\n  }));\n\n  var _useCustom = (0, _utils.useCustom)('Uploader', localeProp),\n      locale = _useCustom.locale;\n\n  var rootRef = (0, _react.useRef)();\n  var xhrs = (0, _react.useRef)({});\n  var trigger = (0, _react.useRef)();\n\n  var _useFileList = useFileList(fileListProp || defaultFileList),\n      fileList = _useFileList[0],\n      dispatch = _useFileList[1];\n\n  (0, _react.useEffect)(function () {\n    if (typeof fileListProp !== 'undefined') {\n      // Force reset fileList in reducer, when `fileListProp` is updated\n      dispatch({\n        type: 'init',\n        files: fileListProp\n      });\n    }\n  }, [dispatch, fileListProp]);\n  var updateFileStatus = (0, _react.useCallback)(function (nextFile) {\n    dispatch({\n      type: 'updateFile',\n      file: nextFile\n    });\n  }, [dispatch]);\n  /**\n   * Clear the value in input.\n   */\n\n  var cleanInputValue = (0, _react.useCallback)(function () {\n    var _trigger$current;\n\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.clearInput();\n  }, []);\n  /**\n   * Callback for successful file upload.\n   * @param file\n   * @param response\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadSuccess = (0, _react.useCallback)(function (file, response, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'finished',\n      progress: 100\n    });\n    updateFileStatus(nextFile);\n    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, nextFile, event, xhr);\n  }, [onSuccess, updateFileStatus]);\n  /**\n   * Callback for file upload error.\n   * @param file\n   * @param status\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadError = (0, _react.useCallback)(function (file, status, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'error'\n    });\n    updateFileStatus(nextFile);\n    onError === null || onError === void 0 ? void 0 : onError(status, nextFile, event, xhr);\n  }, [onError, updateFileStatus]);\n  /**\n   * Callback for file upload progress update.\n   * @param file\n   * @param percent\n   * @param event\n   * @param xhr\n   */\n\n  var handleAjaxUploadProgress = (0, _react.useCallback)(function (file, percent, event, xhr) {\n    var nextFile = (0, _extends2.default)({}, file, {\n      status: 'uploading',\n      progress: percent\n    });\n    updateFileStatus(nextFile);\n    onProgress === null || onProgress === void 0 ? void 0 : onProgress(percent, nextFile, event, xhr);\n  }, [onProgress, updateFileStatus]);\n  /**\n   * Upload a single file.\n   * @param file\n   */\n\n  var handleUploadFile = (0, _react.useCallback)(function (file) {\n    var _ajaxUpload = (0, _utils.ajaxUpload)({\n      name: name,\n      timeout: timeout,\n      headers: headers,\n      data: data,\n      withCredentials: withCredentials,\n      disableMultipart: disableMultipart,\n      file: file.blobFile,\n      url: action,\n      onError: handleAjaxUploadError.bind(null, file),\n      onSuccess: handleAjaxUploadSuccess.bind(null, file),\n      onProgress: handleAjaxUploadProgress.bind(null, file)\n    }),\n        xhr = _ajaxUpload.xhr,\n        uploadData = _ajaxUpload.data;\n\n    updateFileStatus((0, _extends2.default)({}, file, {\n      status: 'uploading'\n    }));\n\n    if (file.fileKey) {\n      xhrs.current[file.fileKey] = xhr;\n    }\n\n    onUpload === null || onUpload === void 0 ? void 0 : onUpload(file, uploadData, xhr);\n  }, [action, data, handleAjaxUploadError, handleAjaxUploadProgress, handleAjaxUploadSuccess, headers, name, onUpload, timeout, updateFileStatus, withCredentials, disableMultipart]);\n  var handleAjaxUpload = (0, _react.useCallback)(function () {\n    fileList.current.forEach(function (file) {\n      var checkState = shouldUpload === null || shouldUpload === void 0 ? void 0 : shouldUpload(file);\n\n      if (checkState instanceof Promise) {\n        checkState.then(function (res) {\n          if (res) {\n            handleUploadFile(file);\n          }\n        });\n        return;\n      } else if (checkState === false) {\n        return;\n      }\n\n      if (file.status === 'inited') {\n        handleUploadFile(file);\n      }\n    });\n    cleanInputValue();\n  }, [cleanInputValue, fileList, handleUploadFile, shouldUpload]);\n\n  var handleUploadTriggerChange = function handleUploadTriggerChange(event) {\n    var files = getFiles(event);\n    var newFileList = [];\n    Array.from(files).forEach(function (file) {\n      newFileList.push({\n        blobFile: file,\n        name: file.name,\n        status: 'inited',\n        fileKey: (0, _utils.guid)()\n      });\n    });\n    var nextFileList = [].concat(fileList.current, newFileList);\n    var checkState = shouldQueueUpdate === null || shouldQueueUpdate === void 0 ? void 0 : shouldQueueUpdate(nextFileList, newFileList);\n\n    if (checkState === false) {\n      cleanInputValue();\n      return;\n    }\n\n    var upload = function upload() {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList);\n      dispatch({\n        type: 'push',\n        files: newFileList\n      }, function () {\n        autoUpload && handleAjaxUpload();\n      });\n    };\n\n    if (checkState instanceof Promise) {\n      checkState.then(function (res) {\n        res && upload();\n      });\n      return;\n    }\n\n    upload();\n  };\n\n  var handleRemoveFile = function handleRemoveFile(fileKey) {\n    var _xhrs$current, _xhrs$current$file$fi;\n\n    var file = (0, _find.default)(fileList.current, function (f) {\n      return f.fileKey === fileKey;\n    });\n    var nextFileList = fileList.current.filter(function (f) {\n      return f.fileKey !== fileKey;\n    });\n\n    if (((_xhrs$current = xhrs.current) === null || _xhrs$current === void 0 ? void 0 : (_xhrs$current$file$fi = _xhrs$current[file.fileKey]) === null || _xhrs$current$file$fi === void 0 ? void 0 : _xhrs$current$file$fi.readyState) !== 4) {\n      var _xhrs$current$file$fi2;\n\n      (_xhrs$current$file$fi2 = xhrs.current[file.fileKey]) === null || _xhrs$current$file$fi2 === void 0 ? void 0 : _xhrs$current$file$fi2.abort();\n    }\n\n    dispatch({\n      type: 'remove',\n      fileKey: fileKey\n    });\n    onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFileList);\n    cleanInputValue();\n  };\n\n  var handleReupload = function handleReupload(file) {\n    autoUpload && handleUploadFile(file);\n    onReupload === null || onReupload === void 0 ? void 0 : onReupload(file);\n  }; // public API\n\n\n  var start = function start(file) {\n    if (file) {\n      handleUploadFile(file);\n      return;\n    }\n\n    handleAjaxUpload();\n  };\n\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      root: rootRef.current,\n      start: start\n    };\n  });\n  var renderList = [/*#__PURE__*/_react.default.createElement(_UploadTrigger.default, (0, _extends2.default)({}, rest, {\n    locale: locale,\n    name: name,\n    key: \"trigger\",\n    multiple: multiple,\n    draggable: draggable,\n    disabled: disabled,\n    readOnly: readOnly,\n    accept: accept,\n    ref: trigger,\n    onChange: handleUploadTriggerChange,\n    as: toggleAs,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 518,\n      columnNumber: 5\n    }\n  }), children)];\n\n  if (fileListVisible) {\n    renderList.push( /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: \"items\",\n      className: prefix('file-items'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 538,\n        columnNumber: 7\n      }\n    }, fileList.current.map(function (file, index) {\n      return /*#__PURE__*/_react.default.createElement(_UploadFileItem.default, {\n        locale: locale,\n        key: file.fileKey || index,\n        file: file,\n        maxPreviewFileSize: maxPreviewFileSize,\n        listType: listType,\n        disabled: disabledFileItem,\n        onPreview: onPreview,\n        onReupload: handleReupload,\n        onCancel: handleRemoveFile,\n        renderFileInfo: renderFileInfo,\n        renderThumbnail: renderThumbnail,\n        removable: removable && !readOnly && !plaintext,\n        allowReupload: !readOnly && !plaintext,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 540,\n          columnNumber: 11\n        }\n      });\n    })));\n  }\n\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notUploaded\",\n      className: withClassPrefix(listType),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 562,\n        columnNumber: 7\n      }\n    }, fileList.current.length ? renderList[1] : null);\n  }\n\n  if (listType === 'picture') {\n    renderList.reverse();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: classes,\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 573,\n      columnNumber: 5\n    }\n  }, renderList);\n});\n\nUploader.displayName = 'Uploader';\nUploader.propTypes = {\n  action: _propTypes.default.string.isRequired,\n  accept: _propTypes.default.string,\n  autoUpload: _propTypes.default.bool,\n  children: _propTypes.default.node,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  defaultFileList: _propTypes.default.array,\n  fileList: _propTypes.default.array,\n  data: _propTypes.default.object,\n  multiple: _propTypes.default.bool,\n  disabled: _propTypes.default.bool,\n  disabledFileItem: _propTypes.default.bool,\n  name: _propTypes.default.string,\n  timeout: _propTypes.default.number,\n  withCredentials: _propTypes.default.bool,\n  headers: _propTypes.default.object,\n  locale: _propTypes.default.any,\n  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),\n  shouldQueueUpdate: _propTypes.default.func,\n  shouldUpload: _propTypes.default.func,\n  onChange: _propTypes.default.func,\n  onUpload: _propTypes.default.func,\n  onReupload: _propTypes.default.func,\n  onPreview: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onSuccess: _propTypes.default.func,\n  onProgress: _propTypes.default.func,\n  onRemove: _propTypes.default.func,\n  maxPreviewFileSize: _propTypes.default.number,\n  style: _propTypes.default.object,\n  renderFileInfo: _propTypes.default.func,\n  renderThumbnail: _propTypes.default.func,\n  removable: _propTypes.default.bool,\n  fileListVisible: _propTypes.default.bool,\n  draggable: _propTypes.default.bool,\n  disableMultipart: _propTypes.default.bool\n};\nvar _default = Uploader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/Uploader.tsx?");
 
 /***/ }),
 
@@ -5202,7 +5202,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.shouldShowNodeByParentExpanded = shouldShowNodeByParentExpanded;\nexports.flattenTree = flattenTree;\nexports.getNodeParents = getNodeParents;\nexports.getNodeParentKeys = getNodeParentKeys;\nexports.hasVisibleChildren = hasVisibleChildren;\nexports.compareArray = compareArray;\nexports.getDefaultExpandItemValues = getDefaultExpandItemValues;\nexports.getExpandItemValues = getExpandItemValues;\nexports.getDragNodeKeys = getDragNodeKeys;\nexports.calDropNodePosition = calDropNodePosition;\nexports.removeDragNode = removeDragNode;\nexports.createUpdateTreeDataFunction = createUpdateTreeDataFunction;\nexports.findNodeOfTree = findNodeOfTree;\nexports.filterNodesOfTree = filterNodesOfTree;\nexports.leftArrowHandler = leftArrowHandler;\nexports.rightArrowHandler = rightArrowHandler;\nexports.getExpandWhenSearching = getExpandWhenSearching;\nexports.getTreeActiveNode = getTreeActiveNode;\nexports.toggleExpand = toggleExpand;\nexports.getTreeNodeTitle = getTreeNodeTitle;\nexports.getChildrenByFlattenNodes = getChildrenByFlattenNodes;\nexports.useTreeDrag = useTreeDrag;\nexports.useFlattenTreeData = useFlattenTreeData;\nexports.useTreeNodeRefs = useTreeNodeRefs;\nexports.useTreeSearch = useTreeSearch;\nexports.useGetTreeNodeChildren = useGetTreeNodeChildren;\nexports.focusToActiveTreeNode = focusToActiveTreeNode;\nexports.isSearching = isSearching;\nexports.getTreeNodeIndent = getTreeNodeIndent;\nexports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;\n\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _isEmpty2 = _interopRequireDefault(__webpack_require__(/*! lodash/isEmpty */ \"./node_modules/lodash/isEmpty.js\"));\n\nvar _clone2 = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isArray2 = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _intersection2 = _interopRequireDefault(__webpack_require__(/*! lodash/intersection */ \"./node_modules/lodash/intersection.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _shallowEqualArray = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqualArray */ \"./src/utils/shallowEqualArray.ts\"));\n\nvar _utils = __webpack_require__(/*! ../CheckTreePicker/utils */ \"./src/CheckTreePicker/utils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ./reactToString */ \"./src/utils/reactToString.ts\"));\n\nvar _constants = __webpack_require__(/*! ./constants */ \"./src/utils/constants.ts\");\n\n// gap of tree node\nvar TREE_NODE_GAP = 4;\n/**\n * according node parentNode expand state decide node whether to show\n * @param {*} expandItemValues\n * @param {*} parentKeys\n */\n\nfunction shouldShowNodeByParentExpanded(expandItemValues, parentKeys) {\n  if (expandItemValues === void 0) {\n    expandItemValues = [];\n  }\n\n  if (parentKeys === void 0) {\n    parentKeys = [];\n  }\n\n  var intersectionKeys = (0, _intersection2.default)(expandItemValues, parentKeys);\n\n  if (intersectionKeys.length === parentKeys.length) {\n    return true;\n  }\n\n  return false;\n}\n/**\n * flatten tree structure to array\n * @param {*} tree\n * @param {*} childrenKey\n * @param {*} executor\n */\n\n\nfunction flattenTree(tree, childrenKey, executor) {\n  if (childrenKey === void 0) {\n    childrenKey = 'children';\n  }\n\n  var flattenData = [];\n\n  var traverse = function traverse(data, parent) {\n    if (!(0, _isArray2.default)(data)) {\n      return;\n    }\n\n    data.forEach(function (item, index) {\n      var node = typeof executor === 'function' ? executor(item, index) : item;\n      node.parent = parent;\n      flattenData.push((0, _extends3.default)({}, node));\n\n      if (item[childrenKey]) {\n        traverse(item[childrenKey], item);\n      }\n    });\n  };\n\n  traverse(tree, null);\n  return flattenData;\n}\n/**\n * get all ancestor nodes of given node\n * @param {*} node\n */\n\n\nfunction getNodeParents(node, parentKey, valueKey) {\n  if (parentKey === void 0) {\n    parentKey = 'parent';\n  }\n\n  var parents = [];\n\n  var traverse = function traverse(node) {\n    if (node !== null && node !== void 0 && node[parentKey]) {\n      traverse(node[parentKey]);\n\n      if (valueKey) {\n        parents.push(node[parentKey][valueKey]);\n      } else {\n        parents.push(node[parentKey]);\n      }\n    }\n  };\n\n  traverse(node);\n  return parents;\n}\n/**\n * get all parentKeys of given node\n * @param nodes\n * @param node\n * @param valueKey\n */\n\n\nfunction getNodeParentKeys(nodes, node, valueKey) {\n  var parentKeys = [];\n\n  var traverse = function traverse(node) {\n    if (node !== null && node !== void 0 && node.parent) {\n      var _node$parent;\n\n      traverse(nodes[node.parent.refKey]);\n      parentKeys.push(node === null || node === void 0 ? void 0 : (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent[valueKey]);\n    }\n  };\n\n  traverse(node);\n  return parentKeys;\n}\n\nfunction hasVisibleChildren(node, childrenKey) {\n  if (!Array.isArray(node[childrenKey])) {\n    return false;\n  }\n\n  return node[childrenKey].some(function (child) {\n    return child.visible;\n  });\n}\n/**\n * shallow equal array\n * @param a\n * @param b\n */\n\n\nfunction compareArray(a, b) {\n  return (0, _isArray2.default)(a) && (0, _isArray2.default)(b) && !(0, _shallowEqualArray.default)(a, b);\n}\n\nfunction getDefaultExpandItemValues(data, props) {\n  var valueKey = props.valueKey,\n      defaultExpandAll = props.defaultExpandAll,\n      childrenKey = props.childrenKey,\n      _props$defaultExpandI = props.defaultExpandItemValues,\n      defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI;\n\n  if (defaultExpandAll) {\n    return flattenTree(data, childrenKey).filter(function (item) {\n      return Array.isArray(item[childrenKey]) && item[childrenKey].length > 0;\n    }).map(function (item) {\n      return item[valueKey];\n    });\n  }\n\n  return defaultExpandItemValues;\n}\n/**\n * 获取 expandItemValues 的 value\n * @param props\n */\n\n\nfunction getExpandItemValues(props) {\n  var expandItemValues = props.expandItemValues,\n      defaultExpandItemValues = props.defaultExpandItemValues;\n\n  if (!(0, _isUndefined2.default)(expandItemValues) && Array.isArray(expandItemValues)) {\n    return expandItemValues;\n  }\n\n  if (!(0, _isUndefined2.default)(defaultExpandItemValues) && Array.isArray(defaultExpandItemValues)) {\n    return defaultExpandItemValues;\n  }\n\n  return [];\n}\n/**\n * get dragNode and it's children node keys\n * @param node\n * @param childrenKey\n * @param valueKey\n */\n\n\nfunction getDragNodeKeys(dragNode, childrenKey, valueKey) {\n  var dragNodeKeys = [dragNode[valueKey]];\n\n  var traverse = function traverse(data) {\n    if ((data === null || data === void 0 ? void 0 : data.length) > 0) {\n      data.forEach(function (node) {\n        dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);\n\n        if (node[childrenKey]) {\n          traverse(node[childrenKey]);\n        }\n      });\n    }\n  };\n\n  traverse(dragNode[childrenKey]);\n  return dragNodeKeys;\n}\n\nfunction calDropNodePosition(event, treeNodeElement) {\n  var clientY = event.clientY;\n\n  var _treeNodeElement$getB = treeNodeElement.getBoundingClientRect(),\n      top = _treeNodeElement$getB.top,\n      bottom = _treeNodeElement$getB.bottom;\n\n  var gap = TREE_NODE_GAP; // bottom of node\n\n  if (clientY >= bottom - gap && clientY <= bottom) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;\n  } // top of node\n\n\n  if (clientY <= top + gap && clientY >= top) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP;\n  }\n\n  if (clientY >= top + gap && clientY <= bottom - gap) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER;\n  }\n\n  return -1;\n}\n\nfunction removeDragNode(data, params, _ref) {\n  var valueKey = _ref.valueKey,\n      childrenKey = _ref.childrenKey;\n  var dragNode = params.dragNode;\n\n  var traverse = function traverse(items, parent) {\n    for (var _index = 0; _index < items.length; _index += 1) {\n      var _item = items[_index];\n\n      if ((0, _utils2.shallowEqual)(_item[valueKey], dragNode[valueKey])) {\n        items.splice(_index, 1); // when children is empty, delete children prop for hidden anchor\n\n        if (items.length === 0 && parent) {\n          delete parent.children;\n        }\n\n        break;\n      }\n\n      if (Array.isArray(_item[childrenKey])) {\n        traverse(_item[childrenKey], _item);\n      }\n    }\n  };\n\n  traverse(data);\n}\n\nfunction createUpdateTreeDataFunction(params, _ref2) {\n  var valueKey = _ref2.valueKey,\n      childrenKey = _ref2.childrenKey;\n  return function (tree) {\n    var data = [].concat(tree);\n    var dragNode = params.dragNode,\n        dropNode = params.dropNode,\n        dropNodePosition = params.dropNodePosition;\n    var cloneDragNode = (0, _extends3.default)({}, dragNode);\n    removeDragNode(data, params, {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    });\n\n    var updateTree = function updateTree(items) {\n      for (var _index2 = 0; _index2 < items.length; _index2 += 1) {\n        var _item2 = items[_index2];\n\n        if ((0, _utils2.shallowEqual)(_item2[valueKey], dropNode[valueKey])) {\n          // drag to node inside\n          if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER) {\n            _item2[childrenKey] = (0, _isNil2.default)(_item2[childrenKey]) ? [] : _item2[childrenKey];\n\n            _item2[childrenKey].push(cloneDragNode);\n\n            break;\n          } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {\n            // drag to top of node\n            items.splice(_index2, 0, cloneDragNode);\n            break;\n          } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {\n            // drag to bottom of node\n            items.splice(_index2 + 1, 0, cloneDragNode);\n            break;\n          }\n        }\n\n        if (Array.isArray(_item2[childrenKey]) && _item2[childrenKey].length > 0) {\n          updateTree(_item2[childrenKey]);\n        }\n      }\n    };\n\n    updateTree(data);\n    return [].concat(data);\n  };\n}\n\nfunction findNodeOfTree(data, check) {\n  var findNode = function findNode(nodes) {\n    if (nodes === void 0) {\n      nodes = [];\n    }\n\n    for (var i = 0; i < nodes.length; i += 1) {\n      var _item3 = nodes[i];\n\n      if ((0, _isArray2.default)(_item3.children)) {\n        var _node = findNode(_item3.children);\n\n        if (_node) {\n          return _node;\n        }\n      }\n\n      if (check(_item3)) {\n        return _item3;\n      }\n    }\n\n    return undefined;\n  };\n\n  return findNode(data);\n}\n\nfunction filterNodesOfTree(data, check) {\n  var findNodes = function findNodes(nodes) {\n    if (nodes === void 0) {\n      nodes = [];\n    }\n\n    var nextNodes = [];\n\n    for (var i = 0; i < nodes.length; i += 1) {\n      if ((0, _isArray2.default)(nodes[i].children)) {\n        var nextChildren = findNodes(nodes[i].children);\n\n        if (nextChildren.length) {\n          var _item4 = (0, _clone2.default)(nodes[i]);\n\n          _item4.children = nextChildren;\n          nextNodes.push(_item4);\n          continue;\n        }\n      }\n\n      if (check(nodes[i])) {\n        nextNodes.push(nodes[i]);\n      }\n    }\n\n    return nextNodes;\n  };\n\n  return findNodes(data);\n}\n/**\n * get all focusable items\n * exclude not visible and disabled node\n * @param filteredData - filtered tree data\n * @param props - TreeProps\n * @param isSearching - component is in Searching\n * @returns\n */\n\n\nvar getFocusableItems = function getFocusableItems(filteredData, props, isSearching) {\n  var disabledItemValues = props.disabledItemValues,\n      valueKey = props.valueKey,\n      childrenKey = props.childrenKey,\n      expandItemValues = props.expandItemValues;\n  var items = [];\n\n  var loop = function loop(nodes) {\n    nodes.forEach(function (node) {\n      var disabled = disabledItemValues.some(function (disabledItem) {\n        return (0, _utils2.shallowEqual)(disabledItem, node[valueKey]);\n      });\n\n      if (!disabled && node.visible) {\n        items.push(node);\n      } // always expand when searching\n\n\n      var expand = isSearching ? true : expandItemValues.includes(node[valueKey]);\n\n      if (node[childrenKey] && expand) {\n        loop(node[childrenKey]);\n      }\n    });\n  };\n\n  loop(filteredData);\n  return items;\n};\n/**\n * return all focusable Item and active Element index\n * @param focusItemValue\n * @param focusableItems items\n */\n\n\nexports.getFocusableItems = getFocusableItems;\n\nvar getActiveIndex = function getActiveIndex(focusItemValue, focusItems, valueKey) {\n  var activeIndex = -1;\n  focusItems.forEach(function (item, index) {\n    if ((0, _utils2.shallowEqual)(item[valueKey], focusItemValue)) {\n      activeIndex = index;\n    }\n  });\n  return activeIndex;\n};\n/**\n * get current active element and node data\n * @param flattenNodes - flattenData\n */\n\n\nexports.getActiveIndex = getActiveIndex;\n\nvar getActiveItem = function getActiveItem(focusItemValue, flattenNodes, valueKey) {\n  var nodeData = null;\n  var activeNode = Object.values(flattenNodes).find(function (node) {\n    return (0, _utils2.shallowEqual)(node[valueKey], focusItemValue);\n  });\n\n  if (activeNode) {\n    nodeData = activeNode;\n  }\n\n  return nodeData;\n};\n\nexports.getActiveItem = getActiveItem;\n\nvar getElementByDataKey = function getElementByDataKey(dataKey, treeNodesRefs, selector) {\n  var ele = treeNodesRefs[dataKey];\n\n  if (ele instanceof Element) {\n    return ele.querySelector(selector);\n  }\n\n  return null;\n};\n/**\n * focus to specify tree node\n * @param refKey - target node refKey\n * @param treeNodeRefs - all tree node refs object\n * @param selector - node css selector\n */\n\n\nexports.getElementByDataKey = getElementByDataKey;\n\nvar focusTreeNode = function focusTreeNode(refKey, treeNodeRefs, selector) {\n  var _node$focus;\n\n  var node = getElementByDataKey(refKey, treeNodeRefs, selector);\n  node === null || node === void 0 ? void 0 : (_node$focus = node.focus) === null || _node$focus === void 0 ? void 0 : _node$focus.call(node);\n};\n\nexports.focusTreeNode = focusTreeNode;\n\n/**\n * focus next item with keyboard\n * @param param\n */\nvar focusNextItem = function focusNextItem(_ref3) {\n  var focusItemValue = _ref3.focusItemValue,\n      focusableItems = _ref3.focusableItems,\n      treeNodesRefs = _ref3.treeNodesRefs,\n      selector = _ref3.selector,\n      valueKey = _ref3.valueKey,\n      callback = _ref3.callback;\n  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);\n\n  if (focusableItems.length === 0) {\n    return;\n  }\n\n  var nextIndex = activeIndex === focusableItems.length - 1 ? 0 : activeIndex + 1;\n  var nextFocusItemValue = focusableItems[nextIndex][valueKey];\n  callback === null || callback === void 0 ? void 0 : callback(nextFocusItemValue);\n  focusTreeNode(focusableItems[nextIndex].refKey, treeNodesRefs, selector);\n};\n/**\n * focus prev item with keyboard\n * @param param\n */\n\n\nexports.focusNextItem = focusNextItem;\n\nvar focusPreviousItem = function focusPreviousItem(_ref4) {\n  var focusItemValue = _ref4.focusItemValue,\n      focusableItems = _ref4.focusableItems,\n      treeNodesRefs = _ref4.treeNodesRefs,\n      selector = _ref4.selector,\n      valueKey = _ref4.valueKey,\n      callback = _ref4.callback;\n  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);\n\n  if (focusableItems.length === 0) {\n    return;\n  }\n\n  var prevIndex = activeIndex === 0 ? focusableItems.length - 1 : activeIndex - 1;\n  prevIndex = prevIndex >= 0 ? prevIndex : 0;\n  var prevFocusItemValue = focusableItems[prevIndex][valueKey];\n  callback === null || callback === void 0 ? void 0 : callback(prevFocusItemValue);\n  focusTreeNode(focusableItems[prevIndex].refKey, treeNodesRefs, selector);\n};\n\nexports.focusPreviousItem = focusPreviousItem;\n\n/**\n * Left arrow keyboard event handler\n * When focus is on an open node, closes the node.\n * When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.\n * When focus is on a root node that is also either an end node or a closed node, does nothing.\n * @see https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\nfunction leftArrowHandler(_ref5) {\n  var focusItem = _ref5.focusItem,\n      expand = _ref5.expand,\n      onExpand = _ref5.onExpand,\n      onFocusItem = _ref5.onFocusItem;\n\n  if ((0, _isEmpty2.default)(focusItem)) {\n    return;\n  }\n\n  if (expand) {\n    onExpand((0, _extends3.default)({}, focusItem, {\n      expand: expand\n    }));\n  } else if (focusItem !== null && focusItem !== void 0 && focusItem.parent) {\n    onFocusItem();\n  }\n}\n/**\n * Right arrow keyboard event handler\n * When focus is on a closed node, opens the node; focus does not move.\n * When focus is on a open node, moves focus to the first child node.\n * When focus is on an end node, does nothing.\n * @see https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\n\n\nfunction rightArrowHandler(_ref6) {\n  var focusItem = _ref6.focusItem,\n      expand = _ref6.expand,\n      childrenKey = _ref6.childrenKey,\n      onExpand = _ref6.onExpand,\n      onFocusItem = _ref6.onFocusItem;\n\n  if ((0, _isEmpty2.default)(focusItem) || !Array.isArray(focusItem[childrenKey])) {\n    return;\n  }\n\n  if (!expand) {\n    onExpand((0, _extends3.default)({}, focusItem, {\n      expand: expand\n    }));\n  } else {\n    onFocusItem();\n  }\n}\n/**\n * get scrollIndex in virtualized list\n * @param nodes - data\n * @param value - activeItem value\n * @param valueKey\n */\n\n\nvar getScrollToIndex = function getScrollToIndex(nodes, value, valueKey) {\n  return nodes.filter(function (n) {\n    return n.visible;\n  }).findIndex(function (item) {\n    return item[valueKey] === value;\n  });\n};\n/**\n * when searching, expand state always return true\n * @param searchKeyword\n * @param expand\n */\n\n\nexports.getScrollToIndex = getScrollToIndex;\n\nfunction getExpandWhenSearching(searchKeyword, expand) {\n  return isSearching(searchKeyword) ? true : expand;\n}\n\nfunction getTreeActiveNode(nodes, value, valueKey) {\n  if ((0, _isUndefined2.default)(value)) {\n    return undefined;\n  }\n\n  for (var refKey in nodes) {\n    if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value)) {\n      return nodes[refKey];\n    }\n  }\n}\n\n/**\n * toggle tree node\n * @param param0\n */\nfunction toggleExpand(_ref7) {\n  var node = _ref7.node,\n      isExpand = _ref7.isExpand,\n      expandItemValues = _ref7.expandItemValues,\n      valueKey = _ref7.valueKey;\n  var newExpandItemValues = new Set(expandItemValues);\n\n  if (isExpand) {\n    newExpandItemValues.add(node[valueKey]);\n  } else {\n    newExpandItemValues.delete(node[valueKey]);\n  }\n\n  return Array.from(newExpandItemValues);\n}\n\nfunction getTreeNodeTitle(label) {\n  if (typeof label === 'string') {\n    return label;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var _nodes = (0, _reactToString.default)(label);\n\n    return _nodes.join('');\n  }\n}\n/**\n * get all children from flattenNodes object by given parent node\n * @param nodes\n * @param parent\n */\n\n\nfunction getChildrenByFlattenNodes(nodes, parent) {\n  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {\n    return [];\n  }\n\n  return Object.values(nodes).filter(function (item) {\n    var _item$parent;\n\n    return (item === null || item === void 0 ? void 0 : (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent.refKey) === parent.refKey && !nodes[item.refKey].uncheckable;\n  });\n}\n\nfunction useTreeDrag() {\n  // current dragging node\n  var dragNode = (0, _react.useRef)(null);\n\n  var _useState = (0, _react.useState)(null),\n      dragOverNodeKey = _useState[0],\n      setDragOverNodeKey = _useState[1]; // drag node and it's children nodes key\n\n\n  var _useState2 = (0, _react.useState)([]),\n      dragNodeKeys = _useState2[0],\n      setDragNodeKeys = _useState2[1];\n\n  var _useState3 = (0, _react.useState)(null),\n      dropNodePosition = _useState3[0],\n      setDropNodePosition = _useState3[1];\n\n  var setDragNode = function setDragNode(node) {\n    dragNode.current = node;\n  };\n\n  return {\n    dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,\n    dragOverNodeKey: dragOverNodeKey,\n    dragNodeKeys: dragNodeKeys,\n    dropNodePosition: dropNodePosition,\n    setDragNode: setDragNode,\n    setDragOverNodeKey: setDragOverNodeKey,\n    setDragNodeKeys: setDragNodeKeys,\n    setDropNodePosition: setDropNodePosition\n  };\n}\n\n/**\n * hooks for flatten tree structure\n * @param param0\n */\nfunction useFlattenTreeData(_ref8) {\n  var data = _ref8.data,\n      labelKey = _ref8.labelKey,\n      valueKey = _ref8.valueKey,\n      childrenKey = _ref8.childrenKey,\n      _ref8$uncheckableItem = _ref8.uncheckableItemValues,\n      uncheckableItemValues = _ref8$uncheckableItem === void 0 ? [] : _ref8$uncheckableItem,\n      callback = _ref8.callback;\n\n  var _useState4 = (0, _react.useState)(Object.create(null)),\n      dispatch = _useState4[1];\n\n  var forceUpdate = (0, _react.useCallback)(function () {\n    dispatch(Object.create(null));\n  }, [dispatch]);\n\n  var _useRef = (0, _react.useRef)({}),\n      _useRef$current = _useRef.current,\n      flattenNodes = _useRef$current === void 0 ? {} : _useRef$current;\n\n  var flattenTreeData = (0, _react.useCallback)(function (treeData, ref, parent, layer) {\n    if (layer === void 0) {\n      layer = 1;\n    }\n\n    if (!Array.isArray(treeData) || treeData.length === 0) {\n      return [];\n    }\n\n    treeData.map(function (node, index) {\n      var _extends2;\n\n      var refKey = ref + \"-\" + index;\n      node.refKey = refKey;\n      flattenNodes[refKey] = (0, _extends3.default)((_extends2 = {\n        layer: layer\n      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {\n        return (0, _utils2.shallowEqual)(node[valueKey], value);\n      }), _extends2), node);\n\n      if (parent) {\n        flattenNodes[refKey].parent = (0, _omit2.default)(parent, 'parent', 'children');\n      }\n\n      flattenTreeData(node[childrenKey], refKey, node, layer + 1);\n    });\n    callback === null || callback === void 0 ? void 0 : callback(flattenNodes);\n  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues, flattenNodes]);\n  var serializeListOnlyParent = (0, _react.useCallback)(function (nodes, key) {\n    var list = [];\n    Object.keys(nodes).forEach(function (refKey) {\n      var currentNode = nodes[refKey];\n\n      if (!(0, _isNil2.default)(currentNode.parent) && !(0, _isNil2.default)(currentNode.parent.refKey)) {\n        var parentNode = nodes[currentNode.parent.refKey];\n\n        if (currentNode[key]) {\n          if (!(parentNode !== null && parentNode !== void 0 && parentNode.checkAll)) {\n            list.push(nodes[refKey][valueKey]);\n          } else if (parentNode !== null && parentNode !== void 0 && parentNode.uncheckable) {\n            list.push(nodes[refKey][valueKey]);\n          }\n        }\n      } else {\n        if (currentNode[key]) {\n          list.push(nodes[refKey][valueKey]);\n        }\n      }\n    });\n    return list;\n  }, [valueKey]);\n  /**\n   * using in CheckTreePicker, to unSerializeList check property\n   */\n\n  var unSerializeList = (0, _react.useCallback)(function (_ref9) {\n    var nodes = _ref9.nodes,\n        key = _ref9.key,\n        _ref9$value = _ref9.value,\n        value = _ref9$value === void 0 ? [] : _ref9$value,\n        cascade = _ref9.cascade,\n        uncheckableItemValues = _ref9.uncheckableItemValues;\n    // Reset values to false\n    Object.keys(nodes).forEach(function (refKey) {\n      var node = nodes[refKey];\n\n      if (cascade && !(0, _isNil2.default)(node.parent) && !(0, _isNil2.default)(node.parent.refKey)) {\n        node[key] = nodes[node.parent.refKey][key];\n      } else {\n        node[key] = false;\n      }\n\n      value.forEach(function (value) {\n        if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value) && !uncheckableItemValues.some(function (uncheckableValue) {\n          return (0, _utils2.shallowEqual)(value, uncheckableValue);\n        })) {\n          nodes[refKey][key] = true;\n        }\n      });\n    });\n  }, [valueKey]);\n\n  var formatVirtualizedTreeData = function formatVirtualizedTreeData(nodes, data, expandItemValues, options) {\n    var cascade = options.cascade,\n        searchKeyword = options.searchKeyword;\n    return flattenTree(data, childrenKey, function (node) {\n      var formatted = {};\n      var curNode = nodes === null || nodes === void 0 ? void 0 : nodes[node.refKey];\n      var parentKeys = getNodeParentKeys(nodes, curNode, valueKey);\n      /**\n       * When using virtualized,\n       * if the parent node is collapsed, the child nodes should be hidden\n       * avoid component height calculation errors\n       */\n\n      var visible = curNode !== null && curNode !== void 0 && curNode.parent ? shouldShowNodeByParentExpanded(expandItemValues, parentKeys) : true;\n      /**\n       * when searching, every node default expand\n       * the node's visible should follow the original state\n       */\n\n      if (isSearching(searchKeyword)) {\n        visible = node.visible;\n      }\n\n      if (curNode) {\n        var checkState = !(0, _isUndefined2.default)(cascade) ? (0, _utils.getNodeCheckState)({\n          node: curNode,\n          cascade: cascade,\n          nodes: nodes,\n          childrenKey: childrenKey\n        }) : undefined;\n        formatted = (0, _extends3.default)({}, node, {\n          check: curNode.check,\n          uncheckable: curNode.uncheckable,\n          hasChildren: !!node[childrenKey],\n          layer: curNode.layer,\n          parent: curNode.parent,\n          checkState: checkState,\n          visible: visible\n        });\n      }\n\n      return formatted;\n    });\n  };\n\n  (0, _react.useEffect)(function () {\n    flattenTreeData(data, '0');\n  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    forceUpdate: forceUpdate,\n    flattenNodes: flattenNodes,\n    flattenTreeData: flattenTreeData,\n    serializeListOnlyParent: serializeListOnlyParent,\n    unSerializeList: unSerializeList,\n    formatVirtualizedTreeData: formatVirtualizedTreeData\n  };\n}\n/**\n * A hook that saving every tree node ref\n */\n\n\nfunction useTreeNodeRefs() {\n  var treeNodeRefs = (0, _react.useRef)({});\n\n  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {\n    if (!(0, _isNil2.default)(refKey)) {\n      treeNodeRefs.current[refKey] = ref;\n    }\n  };\n\n  return {\n    treeNodesRefs: treeNodeRefs.current,\n    saveTreeNodeRef: saveTreeNodeRef\n  };\n}\n\n/**\n * A hook that handles tree search filter options\n * @param props\n */\nfunction useTreeSearch(props) {\n  var labelKey = props.labelKey,\n      childrenKey = props.childrenKey,\n      searchKeyword = props.searchKeyword,\n      data = props.data,\n      searchBy = props.searchBy,\n      callback = props.callback;\n  var filterVisibleData = (0, _react.useCallback)(function (data, searchKeyword) {\n    var setVisible = function setVisible(nodes) {\n      return nodes.forEach(function (item) {\n        item.visible = searchBy ? searchBy(searchKeyword, item[labelKey], item) : (0, _Picker.shouldDisplay)(item[labelKey], searchKeyword);\n\n        if ((0, _isArray2.default)(item[childrenKey])) {\n          filterVisibleData(item[childrenKey], searchKeyword);\n          item[childrenKey].forEach(function (child) {\n            if (child.visible) {\n              item.visible = child.visible;\n            }\n          });\n        }\n      });\n    };\n\n    setVisible(data);\n    return data;\n  }, [childrenKey, labelKey, searchBy]); // Use search keywords to filter options.\n\n  var _useState5 = (0, _react.useState)(function () {\n    return searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '';\n  }),\n      searchKeywordState = _useState5[0],\n      setSearchKeyword = _useState5[1];\n\n  var _useState6 = (0, _react.useState)(function () {\n    return filterVisibleData(data, searchKeywordState);\n  }),\n      filteredData = _useState6[0],\n      setFilteredData = _useState6[1];\n\n  var handleSetFilteredData = (0, _react.useCallback)(function (data, searchKeyword) {\n    setFilteredData(filterVisibleData(data, searchKeyword));\n  }, [filterVisibleData]);\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = filterVisibleData(data, searchKeyword);\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeywordState: searchKeywordState,\n    filteredData: filteredData,\n    setFilteredData: handleSetFilteredData,\n    setSearchKeyword: setSearchKeyword,\n    handleSearch: handleSearch\n  };\n}\n\nfunction useGetTreeNodeChildren(treeData, valueKey, childrenKey) {\n  var _useState7 = (0, _react.useState)([]),\n      loadingNodeValues = _useState7[0],\n      setLoadingNodeValues = _useState7[1];\n\n  var _useState8 = (0, _react.useState)(treeData),\n      data = _useState8[0],\n      setData = _useState8[1];\n\n  var concatChildren = (0, _react.useCallback)(function (treeNode, children) {\n    var value = treeNode[valueKey];\n    treeNode = findNodeOfTree(data, function (item) {\n      return value === item[valueKey];\n    });\n    treeNode[childrenKey] = children;\n    var newData = data.concat([]);\n    setData(newData);\n    return newData;\n  }, [data, valueKey, childrenKey]);\n  var loadChildren = (0, _react.useCallback)(function (node, getChildren) {\n    setLoadingNodeValues(function (prev) {\n      return prev.concat(node[valueKey]);\n    });\n    var children = getChildren(node);\n\n    if (children instanceof Promise) {\n      children.then(function (res) {\n        var newData = concatChildren(node, res);\n        setData(newData);\n        setLoadingNodeValues(function (prev) {\n          return prev.filter(function (item) {\n            return !(0, _utils2.shallowEqual)(item, node[valueKey]);\n          });\n        });\n      });\n    } else {\n      setData(concatChildren(node, children));\n      setLoadingNodeValues(function (prev) {\n        return prev.filter(function (item) {\n          return !(0, _utils2.shallowEqual)(item, node[valueKey]);\n        });\n      });\n    }\n  }, [concatChildren, valueKey]);\n  return {\n    data: data,\n    setData: setData,\n    loadingNodeValues: loadingNodeValues,\n    loadChildren: loadChildren\n  };\n}\n\n/**\n * Focus to active tree node.\n * @param param0\n */\nfunction focusToActiveTreeNode(_ref10) {\n  var _activeItem$focus;\n\n  var list = _ref10.list,\n      valueKey = _ref10.valueKey,\n      activeNode = _ref10.activeNode,\n      virtualized = _ref10.virtualized,\n      container = _ref10.container,\n      selector = _ref10.selector,\n      formattedNodes = _ref10.formattedNodes;\n  if (!container) return;\n\n  if (virtualized && activeNode) {\n    var _list$scrollToRow;\n\n    var scrollIndex = getScrollToIndex(formattedNodes, activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey], valueKey);\n    (_list$scrollToRow = list.scrollToRow) === null || _list$scrollToRow === void 0 ? void 0 : _list$scrollToRow.call(list, scrollIndex);\n    return;\n  }\n\n  var activeItem = container.querySelector(selector);\n\n  if (!activeItem) {\n    return;\n  }\n\n  activeItem === null || activeItem === void 0 ? void 0 : (_activeItem$focus = activeItem.focus) === null || _activeItem$focus === void 0 ? void 0 : _activeItem$focus.call(activeItem);\n}\n\nfunction isSearching(searchKeyword) {\n  return !(0, _isEmpty2.default)(searchKeyword);\n}\n\nfunction getTreeNodeIndent(rtl, layer, absolute) {\n  var _ref12;\n\n  if (absolute === void 0) {\n    absolute = false;\n  }\n\n  // layer start from 1\n  var offset = layer * _constants.TREE_NODE_PADDING + _constants.TREE_NODE_ROOT_PADDING;\n\n  if (absolute) {\n    var _ref11;\n\n    return _ref11 = {}, _ref11[rtl ? 'right' : 'left'] = offset, _ref11;\n  }\n\n  return _ref12 = {}, _ref12[rtl ? 'paddingRight' : 'paddingLeft'] = offset, _ref12;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/treeUtils.ts?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.shouldShowNodeByParentExpanded = shouldShowNodeByParentExpanded;\nexports.flattenTree = flattenTree;\nexports.getNodeParents = getNodeParents;\nexports.getNodeParentKeys = getNodeParentKeys;\nexports.hasVisibleChildren = hasVisibleChildren;\nexports.compareArray = compareArray;\nexports.getDefaultExpandItemValues = getDefaultExpandItemValues;\nexports.getExpandItemValues = getExpandItemValues;\nexports.getDragNodeKeys = getDragNodeKeys;\nexports.calDropNodePosition = calDropNodePosition;\nexports.removeDragNode = removeDragNode;\nexports.createUpdateTreeDataFunction = createUpdateTreeDataFunction;\nexports.findNodeOfTree = findNodeOfTree;\nexports.filterNodesOfTree = filterNodesOfTree;\nexports.leftArrowHandler = leftArrowHandler;\nexports.rightArrowHandler = rightArrowHandler;\nexports.getExpandWhenSearching = getExpandWhenSearching;\nexports.getTreeActiveNode = getTreeActiveNode;\nexports.toggleExpand = toggleExpand;\nexports.getTreeNodeTitle = getTreeNodeTitle;\nexports.getChildrenByFlattenNodes = getChildrenByFlattenNodes;\nexports.useTreeDrag = useTreeDrag;\nexports.useFlattenTreeData = useFlattenTreeData;\nexports.useTreeNodeRefs = useTreeNodeRefs;\nexports.useTreeSearch = useTreeSearch;\nexports.useGetTreeNodeChildren = useGetTreeNodeChildren;\nexports.focusToActiveTreeNode = focusToActiveTreeNode;\nexports.isSearching = isSearching;\nexports.getTreeNodeIndent = getTreeNodeIndent;\nexports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;\n\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _isEmpty2 = _interopRequireDefault(__webpack_require__(/*! lodash/isEmpty */ \"./node_modules/lodash/isEmpty.js\"));\n\nvar _clone2 = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isArray2 = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _intersection2 = _interopRequireDefault(__webpack_require__(/*! lodash/intersection */ \"./node_modules/lodash/intersection.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _shallowEqualArray = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqualArray */ \"./src/utils/shallowEqualArray.ts\"));\n\nvar _utils = __webpack_require__(/*! ../CheckTreePicker/utils */ \"./src/CheckTreePicker/utils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _reactToString = _interopRequireDefault(__webpack_require__(/*! ./reactToString */ \"./src/utils/reactToString.ts\"));\n\nvar _constants = __webpack_require__(/*! ./constants */ \"./src/utils/constants.ts\");\n\n// gap of tree node\nvar TREE_NODE_GAP = 4;\n/**\n * according node parentNode expand state decide node whether to show\n * @param {*} expandItemValues\n * @param {*} parentKeys\n */\n\nfunction shouldShowNodeByParentExpanded(expandItemValues, parentKeys) {\n  if (expandItemValues === void 0) {\n    expandItemValues = [];\n  }\n\n  if (parentKeys === void 0) {\n    parentKeys = [];\n  }\n\n  var intersectionKeys = (0, _intersection2.default)(expandItemValues, parentKeys);\n\n  if (intersectionKeys.length === parentKeys.length) {\n    return true;\n  }\n\n  return false;\n}\n/**\n * flatten tree structure to array\n * @param {*} tree\n * @param {*} childrenKey\n * @param {*} executor\n */\n\n\nfunction flattenTree(tree, childrenKey, executor) {\n  if (childrenKey === void 0) {\n    childrenKey = 'children';\n  }\n\n  var flattenData = [];\n\n  var traverse = function traverse(data, parent) {\n    if (!(0, _isArray2.default)(data)) {\n      return;\n    }\n\n    data.forEach(function (item, index) {\n      var node = typeof executor === 'function' ? executor(item, index) : item;\n      node.parent = parent;\n      flattenData.push((0, _extends3.default)({}, node));\n\n      if (item[childrenKey]) {\n        traverse(item[childrenKey], item);\n      }\n    });\n  };\n\n  traverse(tree, null);\n  return flattenData;\n}\n/**\n * get all ancestor nodes of given node\n * @param {*} node\n */\n\n\nfunction getNodeParents(node, parentKey, valueKey) {\n  if (parentKey === void 0) {\n    parentKey = 'parent';\n  }\n\n  var parents = [];\n\n  var traverse = function traverse(node) {\n    if (node !== null && node !== void 0 && node[parentKey]) {\n      traverse(node[parentKey]);\n\n      if (valueKey) {\n        parents.push(node[parentKey][valueKey]);\n      } else {\n        parents.push(node[parentKey]);\n      }\n    }\n  };\n\n  traverse(node);\n  return parents;\n}\n/**\n * get all parentKeys of given node\n * @param nodes\n * @param node\n * @param valueKey\n */\n\n\nfunction getNodeParentKeys(nodes, node, valueKey) {\n  var parentKeys = [];\n\n  var traverse = function traverse(node) {\n    var _node$parent;\n\n    if (node !== null && node !== void 0 && (_node$parent = node.parent) !== null && _node$parent !== void 0 && _node$parent.refKey) {\n      var _node$parent2;\n\n      traverse(nodes[node.parent.refKey]);\n      parentKeys.push(node === null || node === void 0 ? void 0 : (_node$parent2 = node.parent) === null || _node$parent2 === void 0 ? void 0 : _node$parent2[valueKey]);\n    }\n  };\n\n  traverse(node);\n  return parentKeys;\n}\n\nfunction hasVisibleChildren(node, childrenKey) {\n  if (!Array.isArray(node[childrenKey])) {\n    return false;\n  }\n\n  return node[childrenKey].some(function (child) {\n    return child.visible;\n  });\n}\n/**\n * shallow equal array\n * @param a\n * @param b\n */\n\n\nfunction compareArray(a, b) {\n  return (0, _isArray2.default)(a) && (0, _isArray2.default)(b) && !(0, _shallowEqualArray.default)(a, b);\n}\n\nfunction getDefaultExpandItemValues(data, props) {\n  var valueKey = props.valueKey,\n      defaultExpandAll = props.defaultExpandAll,\n      childrenKey = props.childrenKey,\n      _props$defaultExpandI = props.defaultExpandItemValues,\n      defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI;\n\n  if (defaultExpandAll) {\n    return flattenTree(data, childrenKey).filter(function (item) {\n      return Array.isArray(item[childrenKey]) && item[childrenKey].length > 0;\n    }).map(function (item) {\n      return item[valueKey];\n    });\n  }\n\n  return defaultExpandItemValues;\n}\n/**\n * 获取 expandItemValues 的 value\n * @param props\n */\n\n\nfunction getExpandItemValues(props) {\n  var expandItemValues = props.expandItemValues,\n      defaultExpandItemValues = props.defaultExpandItemValues;\n\n  if (!(0, _isUndefined2.default)(expandItemValues) && Array.isArray(expandItemValues)) {\n    return expandItemValues;\n  }\n\n  if (!(0, _isUndefined2.default)(defaultExpandItemValues) && Array.isArray(defaultExpandItemValues)) {\n    return defaultExpandItemValues;\n  }\n\n  return [];\n}\n/**\n * get dragNode and it's children node keys\n * @param node\n * @param childrenKey\n * @param valueKey\n */\n\n\nfunction getDragNodeKeys(dragNode, childrenKey, valueKey) {\n  var dragNodeKeys = [dragNode[valueKey]];\n\n  var traverse = function traverse(data) {\n    if ((data === null || data === void 0 ? void 0 : data.length) > 0) {\n      data.forEach(function (node) {\n        dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);\n\n        if (node[childrenKey]) {\n          traverse(node[childrenKey]);\n        }\n      });\n    }\n  };\n\n  traverse(dragNode[childrenKey]);\n  return dragNodeKeys;\n}\n\nfunction calDropNodePosition(event, treeNodeElement) {\n  var clientY = event.clientY;\n\n  var _treeNodeElement$getB = treeNodeElement.getBoundingClientRect(),\n      top = _treeNodeElement$getB.top,\n      bottom = _treeNodeElement$getB.bottom;\n\n  var gap = TREE_NODE_GAP; // bottom of node\n\n  if (clientY >= bottom - gap && clientY <= bottom) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;\n  } // top of node\n\n\n  if (clientY <= top + gap && clientY >= top) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP;\n  }\n\n  if (clientY >= top + gap && clientY <= bottom - gap) {\n    return _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER;\n  }\n\n  return -1;\n}\n\nfunction removeDragNode(data, params, _ref) {\n  var valueKey = _ref.valueKey,\n      childrenKey = _ref.childrenKey;\n  var dragNode = params.dragNode;\n\n  var traverse = function traverse(items, parent) {\n    for (var _index = 0; _index < items.length; _index += 1) {\n      var _item = items[_index];\n\n      if ((0, _utils2.shallowEqual)(_item[valueKey], dragNode[valueKey])) {\n        items.splice(_index, 1); // when children is empty, delete children prop for hidden anchor\n\n        if (items.length === 0 && parent) {\n          delete parent.children;\n        }\n\n        break;\n      }\n\n      if (Array.isArray(_item[childrenKey])) {\n        traverse(_item[childrenKey], _item);\n      }\n    }\n  };\n\n  traverse(data);\n}\n\nfunction createUpdateTreeDataFunction(params, _ref2) {\n  var valueKey = _ref2.valueKey,\n      childrenKey = _ref2.childrenKey;\n  return function (tree) {\n    var data = [].concat(tree);\n    var dragNode = params.dragNode,\n        dropNode = params.dropNode,\n        dropNodePosition = params.dropNodePosition;\n    var cloneDragNode = (0, _extends3.default)({}, dragNode);\n    removeDragNode(data, params, {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    });\n\n    var updateTree = function updateTree(items) {\n      for (var _index2 = 0; _index2 < items.length; _index2 += 1) {\n        var _item2 = items[_index2];\n\n        if ((0, _utils2.shallowEqual)(_item2[valueKey], dropNode[valueKey])) {\n          // drag to node inside\n          if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER) {\n            _item2[childrenKey] = (0, _isNil2.default)(_item2[childrenKey]) ? [] : _item2[childrenKey];\n\n            _item2[childrenKey].push(cloneDragNode);\n\n            break;\n          } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {\n            // drag to top of node\n            items.splice(_index2, 0, cloneDragNode);\n            break;\n          } else if (dropNodePosition === _utils2.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {\n            // drag to bottom of node\n            items.splice(_index2 + 1, 0, cloneDragNode);\n            break;\n          }\n        }\n\n        if (Array.isArray(_item2[childrenKey]) && _item2[childrenKey].length > 0) {\n          updateTree(_item2[childrenKey]);\n        }\n      }\n    };\n\n    updateTree(data);\n    return [].concat(data);\n  };\n}\n\nfunction findNodeOfTree(data, check) {\n  var findNode = function findNode(nodes) {\n    if (nodes === void 0) {\n      nodes = [];\n    }\n\n    for (var i = 0; i < nodes.length; i += 1) {\n      var _item3 = nodes[i];\n\n      if ((0, _isArray2.default)(_item3.children)) {\n        var _node = findNode(_item3.children);\n\n        if (_node) {\n          return _node;\n        }\n      }\n\n      if (check(_item3)) {\n        return _item3;\n      }\n    }\n\n    return undefined;\n  };\n\n  return findNode(data);\n}\n\nfunction filterNodesOfTree(data, check) {\n  var findNodes = function findNodes(nodes) {\n    if (nodes === void 0) {\n      nodes = [];\n    }\n\n    var nextNodes = [];\n\n    for (var i = 0; i < nodes.length; i += 1) {\n      if ((0, _isArray2.default)(nodes[i].children)) {\n        var nextChildren = findNodes(nodes[i].children);\n\n        if (nextChildren.length) {\n          var _item4 = (0, _clone2.default)(nodes[i]);\n\n          _item4.children = nextChildren;\n          nextNodes.push(_item4);\n          continue;\n        }\n      }\n\n      if (check(nodes[i])) {\n        nextNodes.push(nodes[i]);\n      }\n    }\n\n    return nextNodes;\n  };\n\n  return findNodes(data);\n}\n/**\n * get all focusable items\n * exclude not visible and disabled node\n * @param filteredData - filtered tree data\n * @param props - TreeProps\n * @param isSearching - component is in Searching\n * @returns\n */\n\n\nvar getFocusableItems = function getFocusableItems(filteredData, props, isSearching) {\n  var disabledItemValues = props.disabledItemValues,\n      valueKey = props.valueKey,\n      childrenKey = props.childrenKey,\n      expandItemValues = props.expandItemValues;\n  var items = [];\n\n  var loop = function loop(nodes) {\n    nodes.forEach(function (node) {\n      var disabled = disabledItemValues.some(function (disabledItem) {\n        return (0, _utils2.shallowEqual)(disabledItem, node[valueKey]);\n      });\n\n      if (!disabled && node.visible) {\n        items.push(node);\n      } // always expand when searching\n\n\n      var expand = isSearching ? true : expandItemValues.includes(node[valueKey]);\n\n      if (node[childrenKey] && expand) {\n        loop(node[childrenKey]);\n      }\n    });\n  };\n\n  loop(filteredData);\n  return items;\n};\n/**\n * return all focusable Item and active Element index\n * @param focusItemValue\n * @param focusableItems items\n */\n\n\nexports.getFocusableItems = getFocusableItems;\n\nvar getActiveIndex = function getActiveIndex(focusItemValue, focusItems, valueKey) {\n  var activeIndex = -1;\n  focusItems.forEach(function (item, index) {\n    if ((0, _utils2.shallowEqual)(item[valueKey], focusItemValue)) {\n      activeIndex = index;\n    }\n  });\n  return activeIndex;\n};\n/**\n * get current active element and node data\n * @param flattenNodes - flattenData\n */\n\n\nexports.getActiveIndex = getActiveIndex;\n\nvar getActiveItem = function getActiveItem(focusItemValue, flattenNodes, valueKey) {\n  var nodeData = null;\n  var activeNode = Object.values(flattenNodes).find(function (node) {\n    return (0, _utils2.shallowEqual)(node[valueKey], focusItemValue);\n  });\n\n  if (activeNode) {\n    nodeData = activeNode;\n  }\n\n  return nodeData;\n};\n\nexports.getActiveItem = getActiveItem;\n\nvar getElementByDataKey = function getElementByDataKey(dataKey, treeNodesRefs, selector) {\n  var ele = treeNodesRefs[dataKey];\n\n  if (ele instanceof Element) {\n    return ele.querySelector(selector);\n  }\n\n  return null;\n};\n/**\n * focus to specify tree node\n * @param refKey - target node refKey\n * @param treeNodeRefs - all tree node refs object\n * @param selector - node css selector\n */\n\n\nexports.getElementByDataKey = getElementByDataKey;\n\nvar focusTreeNode = function focusTreeNode(refKey, treeNodeRefs, selector) {\n  var _node$focus;\n\n  var node = getElementByDataKey(refKey, treeNodeRefs, selector);\n  node === null || node === void 0 ? void 0 : (_node$focus = node.focus) === null || _node$focus === void 0 ? void 0 : _node$focus.call(node);\n};\n\nexports.focusTreeNode = focusTreeNode;\n\n/**\n * focus next item with keyboard\n * @param param\n */\nvar focusNextItem = function focusNextItem(_ref3) {\n  var focusItemValue = _ref3.focusItemValue,\n      focusableItems = _ref3.focusableItems,\n      treeNodesRefs = _ref3.treeNodesRefs,\n      selector = _ref3.selector,\n      valueKey = _ref3.valueKey,\n      callback = _ref3.callback;\n  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);\n\n  if (focusableItems.length === 0) {\n    return;\n  }\n\n  var nextIndex = activeIndex === focusableItems.length - 1 ? 0 : activeIndex + 1;\n  var nextFocusItemValue = focusableItems[nextIndex][valueKey];\n  callback === null || callback === void 0 ? void 0 : callback(nextFocusItemValue);\n  focusTreeNode(focusableItems[nextIndex].refKey, treeNodesRefs, selector);\n};\n/**\n * focus prev item with keyboard\n * @param param\n */\n\n\nexports.focusNextItem = focusNextItem;\n\nvar focusPreviousItem = function focusPreviousItem(_ref4) {\n  var focusItemValue = _ref4.focusItemValue,\n      focusableItems = _ref4.focusableItems,\n      treeNodesRefs = _ref4.treeNodesRefs,\n      selector = _ref4.selector,\n      valueKey = _ref4.valueKey,\n      callback = _ref4.callback;\n  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);\n\n  if (focusableItems.length === 0) {\n    return;\n  }\n\n  var prevIndex = activeIndex === 0 ? focusableItems.length - 1 : activeIndex - 1;\n  prevIndex = prevIndex >= 0 ? prevIndex : 0;\n  var prevFocusItemValue = focusableItems[prevIndex][valueKey];\n  callback === null || callback === void 0 ? void 0 : callback(prevFocusItemValue);\n  focusTreeNode(focusableItems[prevIndex].refKey, treeNodesRefs, selector);\n};\n\nexports.focusPreviousItem = focusPreviousItem;\n\n/**\n * Left arrow keyboard event handler\n * When focus is on an open node, closes the node.\n * When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.\n * When focus is on a root node that is also either an end node or a closed node, does nothing.\n * @see https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\nfunction leftArrowHandler(_ref5) {\n  var focusItem = _ref5.focusItem,\n      expand = _ref5.expand,\n      onExpand = _ref5.onExpand,\n      onFocusItem = _ref5.onFocusItem;\n\n  if ((0, _isEmpty2.default)(focusItem)) {\n    return;\n  }\n\n  if (expand) {\n    onExpand((0, _extends3.default)({}, focusItem, {\n      expand: expand\n    }));\n  } else if (focusItem !== null && focusItem !== void 0 && focusItem.parent) {\n    onFocusItem();\n  }\n}\n/**\n * Right arrow keyboard event handler\n * When focus is on a closed node, opens the node; focus does not move.\n * When focus is on a open node, moves focus to the first child node.\n * When focus is on an end node, does nothing.\n * @see https://www.w3.org/TR/wai-aria-practices/#TreeView\n */\n\n\nfunction rightArrowHandler(_ref6) {\n  var focusItem = _ref6.focusItem,\n      expand = _ref6.expand,\n      childrenKey = _ref6.childrenKey,\n      onExpand = _ref6.onExpand,\n      onFocusItem = _ref6.onFocusItem;\n\n  if ((0, _isEmpty2.default)(focusItem) || !Array.isArray(focusItem[childrenKey])) {\n    return;\n  }\n\n  if (!expand) {\n    onExpand((0, _extends3.default)({}, focusItem, {\n      expand: expand\n    }));\n  } else {\n    onFocusItem();\n  }\n}\n/**\n * get scrollIndex in virtualized list\n * @param nodes - data\n * @param value - activeItem value\n * @param valueKey\n */\n\n\nvar getScrollToIndex = function getScrollToIndex(nodes, value, valueKey) {\n  return nodes.filter(function (n) {\n    return n.visible;\n  }).findIndex(function (item) {\n    return item[valueKey] === value;\n  });\n};\n/**\n * when searching, expand state always return true\n * @param searchKeyword\n * @param expand\n */\n\n\nexports.getScrollToIndex = getScrollToIndex;\n\nfunction getExpandWhenSearching(searchKeyword, expand) {\n  return isSearching(searchKeyword) ? true : expand;\n}\n\nfunction getTreeActiveNode(nodes, value, valueKey) {\n  if ((0, _isUndefined2.default)(value)) {\n    return undefined;\n  }\n\n  for (var refKey in nodes) {\n    if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value)) {\n      return nodes[refKey];\n    }\n  }\n}\n\n/**\n * toggle tree node\n * @param param0\n */\nfunction toggleExpand(_ref7) {\n  var node = _ref7.node,\n      isExpand = _ref7.isExpand,\n      expandItemValues = _ref7.expandItemValues,\n      valueKey = _ref7.valueKey;\n  var newExpandItemValues = new Set(expandItemValues);\n\n  if (isExpand) {\n    newExpandItemValues.add(node[valueKey]);\n  } else {\n    newExpandItemValues.delete(node[valueKey]);\n  }\n\n  return Array.from(newExpandItemValues);\n}\n\nfunction getTreeNodeTitle(label) {\n  if (typeof label === 'string') {\n    return label;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var _nodes = (0, _reactToString.default)(label);\n\n    return _nodes.join('');\n  }\n}\n/**\n * get all children from flattenNodes object by given parent node\n * @param nodes\n * @param parent\n */\n\n\nfunction getChildrenByFlattenNodes(nodes, parent) {\n  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {\n    return [];\n  }\n\n  return Object.values(nodes).filter(function (item) {\n    var _item$parent;\n\n    return (item === null || item === void 0 ? void 0 : (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent.refKey) === parent.refKey && item.refKey && !nodes[item.refKey].uncheckable;\n  });\n}\n\nfunction useTreeDrag() {\n  // current dragging node\n  var dragNode = (0, _react.useRef)(null);\n\n  var _useState = (0, _react.useState)(null),\n      dragOverNodeKey = _useState[0],\n      setDragOverNodeKey = _useState[1]; // drag node and it's children nodes key\n\n\n  var _useState2 = (0, _react.useState)([]),\n      dragNodeKeys = _useState2[0],\n      setDragNodeKeys = _useState2[1];\n\n  var _useState3 = (0, _react.useState)(null),\n      dropNodePosition = _useState3[0],\n      setDropNodePosition = _useState3[1];\n\n  var setDragNode = function setDragNode(node) {\n    dragNode.current = node;\n  };\n\n  return {\n    dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,\n    dragOverNodeKey: dragOverNodeKey,\n    dragNodeKeys: dragNodeKeys,\n    dropNodePosition: dropNodePosition,\n    setDragNode: setDragNode,\n    setDragOverNodeKey: setDragOverNodeKey,\n    setDragNodeKeys: setDragNodeKeys,\n    setDropNodePosition: setDropNodePosition\n  };\n}\n\n/**\n * hooks for flatten tree structure\n * @param param0\n */\nfunction useFlattenTreeData(_ref8) {\n  var data = _ref8.data,\n      labelKey = _ref8.labelKey,\n      valueKey = _ref8.valueKey,\n      childrenKey = _ref8.childrenKey,\n      _ref8$uncheckableItem = _ref8.uncheckableItemValues,\n      uncheckableItemValues = _ref8$uncheckableItem === void 0 ? [] : _ref8$uncheckableItem,\n      callback = _ref8.callback;\n\n  var _useState4 = (0, _react.useState)(Object.create(null)),\n      dispatch = _useState4[1];\n\n  var forceUpdate = (0, _react.useCallback)(function () {\n    dispatch(Object.create(null));\n  }, [dispatch]);\n\n  var _useRef = (0, _react.useRef)({}),\n      _useRef$current = _useRef.current,\n      flattenNodes = _useRef$current === void 0 ? {} : _useRef$current;\n\n  var flattenTreeData = (0, _react.useCallback)(function (treeData, ref, parent, layer) {\n    if (layer === void 0) {\n      layer = 1;\n    }\n\n    if (!Array.isArray(treeData) || treeData.length === 0) {\n      return [];\n    }\n\n    treeData.map(function (node, index) {\n      var _extends2;\n\n      var refKey = ref + \"-\" + index;\n      node.refKey = refKey;\n      flattenNodes[refKey] = (0, _extends3.default)((_extends2 = {\n        layer: layer\n      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {\n        return (0, _utils2.shallowEqual)(node[valueKey], value);\n      }), _extends2), node);\n\n      if (parent) {\n        flattenNodes[refKey].parent = (0, _omit2.default)(parent, 'parent', 'children');\n      }\n\n      flattenTreeData(node[childrenKey], refKey, node, layer + 1);\n    });\n    callback === null || callback === void 0 ? void 0 : callback(flattenNodes);\n  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues, flattenNodes]);\n  var serializeListOnlyParent = (0, _react.useCallback)(function (nodes, key) {\n    var list = [];\n    Object.keys(nodes).forEach(function (refKey) {\n      var currentNode = nodes[refKey];\n\n      if (!(0, _isNil2.default)(currentNode.parent) && !(0, _isNil2.default)(currentNode.parent.refKey)) {\n        var parentNode = nodes[currentNode.parent.refKey];\n\n        if (currentNode[key]) {\n          if (!(parentNode !== null && parentNode !== void 0 && parentNode.checkAll)) {\n            list.push(nodes[refKey][valueKey]);\n          } else if (parentNode !== null && parentNode !== void 0 && parentNode.uncheckable) {\n            list.push(nodes[refKey][valueKey]);\n          }\n        }\n      } else {\n        if (currentNode[key]) {\n          list.push(nodes[refKey][valueKey]);\n        }\n      }\n    });\n    return list;\n  }, [valueKey]);\n  /**\n   * using in CheckTreePicker, to unSerializeList check property\n   */\n\n  var unSerializeList = (0, _react.useCallback)(function (_ref9) {\n    var nodes = _ref9.nodes,\n        key = _ref9.key,\n        _ref9$value = _ref9.value,\n        value = _ref9$value === void 0 ? [] : _ref9$value,\n        cascade = _ref9.cascade,\n        uncheckableItemValues = _ref9.uncheckableItemValues;\n    // Reset values to false\n    Object.keys(nodes).forEach(function (refKey) {\n      var node = nodes[refKey];\n\n      if (cascade && !(0, _isNil2.default)(node.parent) && !(0, _isNil2.default)(node.parent.refKey)) {\n        node[key] = nodes[node.parent.refKey][key];\n      } else {\n        node[key] = false;\n      }\n\n      value.forEach(function (value) {\n        if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value) && !uncheckableItemValues.some(function (uncheckableValue) {\n          return (0, _utils2.shallowEqual)(value, uncheckableValue);\n        })) {\n          nodes[refKey][key] = true;\n        }\n      });\n    });\n  }, [valueKey]);\n\n  var formatVirtualizedTreeData = function formatVirtualizedTreeData(nodes, data, expandItemValues, options) {\n    var cascade = options.cascade,\n        searchKeyword = options.searchKeyword;\n    return flattenTree(data, childrenKey, function (node) {\n      var formatted = {};\n      var curNode = nodes === null || nodes === void 0 ? void 0 : nodes[node.refKey];\n      var parentKeys = getNodeParentKeys(nodes, curNode, valueKey);\n      /**\n       * When using virtualized,\n       * if the parent node is collapsed, the child nodes should be hidden\n       * avoid component height calculation errors\n       */\n\n      var visible = curNode !== null && curNode !== void 0 && curNode.parent ? shouldShowNodeByParentExpanded(expandItemValues, parentKeys) : true;\n      /**\n       * when searching, every node default expand\n       * the node's visible should follow the original state\n       */\n\n      if (isSearching(searchKeyword)) {\n        visible = node.visible;\n      }\n\n      if (curNode) {\n        var checkState = !(0, _isUndefined2.default)(cascade) ? (0, _utils.getNodeCheckState)({\n          node: curNode,\n          cascade: cascade,\n          nodes: nodes,\n          childrenKey: childrenKey\n        }) : undefined;\n        formatted = (0, _extends3.default)({}, node, {\n          check: curNode.check,\n          uncheckable: curNode.uncheckable,\n          hasChildren: !!node[childrenKey],\n          layer: curNode.layer,\n          parent: curNode.parent,\n          checkState: checkState,\n          visible: visible\n        });\n      }\n\n      return formatted;\n    });\n  };\n\n  (0, _react.useEffect)(function () {\n    flattenTreeData(data, '0');\n  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    forceUpdate: forceUpdate,\n    flattenNodes: flattenNodes,\n    flattenTreeData: flattenTreeData,\n    serializeListOnlyParent: serializeListOnlyParent,\n    unSerializeList: unSerializeList,\n    formatVirtualizedTreeData: formatVirtualizedTreeData\n  };\n}\n/**\n * A hook that saving every tree node ref\n */\n\n\nfunction useTreeNodeRefs() {\n  var treeNodeRefs = (0, _react.useRef)({});\n\n  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {\n    if (!(0, _isNil2.default)(refKey)) {\n      treeNodeRefs.current[refKey] = ref;\n    }\n  };\n\n  return {\n    treeNodesRefs: treeNodeRefs.current,\n    saveTreeNodeRef: saveTreeNodeRef\n  };\n}\n\n/**\n * A hook that handles tree search filter options\n * @param props\n */\nfunction useTreeSearch(props) {\n  var labelKey = props.labelKey,\n      childrenKey = props.childrenKey,\n      searchKeyword = props.searchKeyword,\n      data = props.data,\n      searchBy = props.searchBy,\n      callback = props.callback;\n  var filterVisibleData = (0, _react.useCallback)(function (data, searchKeyword) {\n    var setVisible = function setVisible(nodes) {\n      return nodes.forEach(function (item) {\n        item.visible = searchBy ? searchBy(searchKeyword, item[labelKey], item) : (0, _Picker.shouldDisplay)(item[labelKey], searchKeyword);\n\n        if ((0, _isArray2.default)(item[childrenKey])) {\n          filterVisibleData(item[childrenKey], searchKeyword);\n          item[childrenKey].forEach(function (child) {\n            if (child.visible) {\n              item.visible = child.visible;\n            }\n          });\n        }\n      });\n    };\n\n    setVisible(data);\n    return data;\n  }, [childrenKey, labelKey, searchBy]); // Use search keywords to filter options.\n\n  var _useState5 = (0, _react.useState)(function () {\n    return searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '';\n  }),\n      searchKeywordState = _useState5[0],\n      setSearchKeyword = _useState5[1];\n\n  var _useState6 = (0, _react.useState)(function () {\n    return filterVisibleData(data, searchKeywordState);\n  }),\n      filteredData = _useState6[0],\n      setFilteredData = _useState6[1];\n\n  var handleSetFilteredData = (0, _react.useCallback)(function (data, searchKeyword) {\n    setFilteredData(filterVisibleData(data, searchKeyword));\n  }, [filterVisibleData]);\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = filterVisibleData(data, searchKeyword);\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeywordState: searchKeywordState,\n    filteredData: filteredData,\n    setFilteredData: handleSetFilteredData,\n    setSearchKeyword: setSearchKeyword,\n    handleSearch: handleSearch\n  };\n}\n\nfunction useGetTreeNodeChildren(treeData, valueKey, childrenKey) {\n  var _useState7 = (0, _react.useState)([]),\n      loadingNodeValues = _useState7[0],\n      setLoadingNodeValues = _useState7[1];\n\n  var _useState8 = (0, _react.useState)(treeData),\n      data = _useState8[0],\n      setData = _useState8[1];\n\n  var concatChildren = (0, _react.useCallback)(function (treeNode, children) {\n    var value = treeNode[valueKey];\n    treeNode = findNodeOfTree(data, function (item) {\n      return value === item[valueKey];\n    });\n    treeNode[childrenKey] = children;\n    var newData = data.concat([]);\n    setData(newData);\n    return newData;\n  }, [data, valueKey, childrenKey]);\n  var loadChildren = (0, _react.useCallback)(function (node, getChildren) {\n    setLoadingNodeValues(function (prev) {\n      return prev.concat(node[valueKey]);\n    });\n    var children = getChildren(node);\n\n    if (children instanceof Promise) {\n      children.then(function (res) {\n        var newData = concatChildren(node, res);\n        setData(newData);\n        setLoadingNodeValues(function (prev) {\n          return prev.filter(function (item) {\n            return !(0, _utils2.shallowEqual)(item, node[valueKey]);\n          });\n        });\n      });\n    } else {\n      setData(concatChildren(node, children));\n      setLoadingNodeValues(function (prev) {\n        return prev.filter(function (item) {\n          return !(0, _utils2.shallowEqual)(item, node[valueKey]);\n        });\n      });\n    }\n  }, [concatChildren, valueKey]);\n  return {\n    data: data,\n    setData: setData,\n    loadingNodeValues: loadingNodeValues,\n    loadChildren: loadChildren\n  };\n}\n\n/**\n * Focus to active tree node.\n * @param param0\n */\nfunction focusToActiveTreeNode(_ref10) {\n  var _activeItem$focus;\n\n  var list = _ref10.list,\n      valueKey = _ref10.valueKey,\n      activeNode = _ref10.activeNode,\n      virtualized = _ref10.virtualized,\n      container = _ref10.container,\n      selector = _ref10.selector,\n      formattedNodes = _ref10.formattedNodes;\n  if (!container) return;\n\n  if (virtualized && activeNode) {\n    var _list$scrollToRow;\n\n    var scrollIndex = getScrollToIndex(formattedNodes, activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey], valueKey);\n    (_list$scrollToRow = list.scrollToRow) === null || _list$scrollToRow === void 0 ? void 0 : _list$scrollToRow.call(list, scrollIndex);\n    return;\n  }\n\n  var activeItem = container.querySelector(selector);\n\n  if (!activeItem) {\n    return;\n  }\n\n  activeItem === null || activeItem === void 0 ? void 0 : (_activeItem$focus = activeItem.focus) === null || _activeItem$focus === void 0 ? void 0 : _activeItem$focus.call(activeItem);\n}\n\nfunction isSearching(searchKeyword) {\n  return !(0, _isEmpty2.default)(searchKeyword);\n}\n\nfunction getTreeNodeIndent(rtl, layer, absolute) {\n  var _ref12;\n\n  if (absolute === void 0) {\n    absolute = false;\n  }\n\n  // layer start from 1\n  var offset = layer * _constants.TREE_NODE_PADDING + _constants.TREE_NODE_ROOT_PADDING;\n\n  if (absolute) {\n    var _ref11;\n\n    return _ref11 = {}, _ref11[rtl ? 'right' : 'left'] = offset, _ref11;\n  }\n\n  return _ref12 = {}, _ref12[rtl ? 'paddingRight' : 'paddingLeft'] = offset, _ref12;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/treeUtils.ts?");
 
 /***/ }),