rsuite 5.19.0 → 5.19.1

package/dist/rsuite.js

@@ -417,7 +417,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"isSVG\": function() { return /* binding */ isSVG; },\n/* harmony export */   \"isHidden\": function() { return /* binding */ isHidden; },\n/* harmony export */   \"isElement\": function() { return /* binding */ isElement; },\n/* harmony export */   \"isReplacedElement\": function() { return /* binding */ isReplacedElement; }\n/* harmony export */ });\nvar isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };\nvar isHidden = function (target) {\n    if (isSVG(target)) {\n        var _a = target.getBBox(), width = _a.width, height = _a.height;\n        return !width && !height;\n    }\n    var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;\n    return !(offsetWidth || offsetHeight || target.getClientRects().length);\n};\nvar isElement = function (obj) {\n    var _a, _b;\n    if (obj instanceof Element) {\n        return true;\n    }\n    var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;\n    return !!(scope && obj instanceof scope.Element);\n};\nvar isReplacedElement = function (target) {\n    switch (target.tagName) {\n        case 'INPUT':\n            if (target.type !== 'image') {\n                break;\n            }\n        case 'VIDEO':\n        case 'AUDIO':\n        case 'EMBED':\n        case 'OBJECT':\n        case 'CANVAS':\n        case 'IFRAME':\n        case 'IMG':\n            return true;\n    }\n    return false;\n};\n\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@juggle/resize-observer/lib/utils/element.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"isSVG\": function() { return /* binding */ isSVG; },\n/* harmony export */   \"isHidden\": function() { return /* binding */ isHidden; },\n/* harmony export */   \"isElement\": function() { return /* binding */ isElement; },\n/* harmony export */   \"isReplacedElement\": function() { return /* binding */ isReplacedElement; }\n/* harmony export */ });\nvar isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };\nvar isHidden = function (target) {\n    if (isSVG(target)) {\n        var _a = target.getBBox(), width = _a.width, height = _a.height;\n        return !width && !height;\n    }\n    var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;\n    return !(offsetWidth || offsetHeight || target.getClientRects().length);\n};\nvar isElement = function (obj) {\n    var _a;\n    if (obj instanceof Element) {\n        return true;\n    }\n    var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;\n    return !!(scope && obj instanceof scope.Element);\n};\nvar isReplacedElement = function (target) {\n    switch (target.tagName) {\n        case 'INPUT':\n            if (target.type !== 'image') {\n                break;\n            }\n        case 'VIDEO':\n        case 'AUDIO':\n        case 'EMBED':\n        case 'OBJECT':\n        case 'CANVAS':\n        case 'IFRAME':\n        case 'IMG':\n            return true;\n    }\n    return false;\n};\n\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@juggle/resize-observer/lib/utils/element.js?");
 
 /***/ }),
 
@@ -461,7 +461,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"queueMicroTask\": function() { return /* binding */ queueMicroTask; }\n/* harmony export */ });\nvar trigger;\nvar callbacks = [];\nvar notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };\nvar queueMicroTask = function (callback) {\n    if (!trigger) {\n        var toggle_1 = 0;\n        var el_1 = document.createTextNode('');\n        var config = { characterData: true };\n        new MutationObserver(function () { return notify(); }).observe(el_1, config);\n        trigger = function () { el_1.textContent = \"\" + (toggle_1 ? toggle_1-- : toggle_1++); };\n    }\n    callbacks.push(callback);\n    trigger();\n};\n\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@juggle/resize-observer/lib/utils/queueMicroTask.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"queueMicroTask\": function() { return /* binding */ queueMicroTask; }\n/* harmony export */ });\nvar trigger;\nvar callbacks = [];\nvar notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };\nvar queueMicroTask = function (callback) {\n    if (!trigger) {\n        var toggle_1 = 0;\n        var el_1 = document.createTextNode('');\n        var config = { characterData: true };\n        new MutationObserver(function () { return notify(); }).observe(el_1, config);\n        trigger = function () { el_1.textContent = \"\".concat(toggle_1 ? toggle_1-- : toggle_1++); };\n    }\n    callbacks.push(callback);\n    trigger();\n};\n\n\n\n//# sourceURL=webpack://rsuite/./node_modules/@juggle/resize-observer/lib/utils/queueMicroTask.js?");
 
 /***/ }),
 
@@ -2122,7 +2122,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 _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _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 _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 _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Cascader/DropdownMenu.tsx\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/Cascader/utils.ts\");\n\nvar _utils2 = __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/Cascader/Cascader.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$data = props.data,\n      data = _props$data === void 0 ? emptyArray : _props$data,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      defaultValue = props.defaultValue,\n      placeholder = props.placeholder,\n      disabled = props.disabled,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      valueProp = props.value,\n      inline = props.inline,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      menuWidth = props.menuWidth,\n      menuHeight = props.menuHeight,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      parentSelectable = props.parentSelectable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      id = props.id,\n      renderMenuItem = props.renderMenuItem,\n      renderSearchItem = props.renderSearchItem,\n      renderValue = props.renderValue,\n      renderMenu = props.renderMenu,\n      renderExtraFooter = props.renderExtraFooter,\n      onEnter = props.onEnter,\n      onExited = props.onExited,\n      onClean = props.onClean,\n      onChange = props.onChange,\n      onSelect = props.onSelect,\n      onSearch = props.onSearch,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      getChildren = props.getChildren,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"childrenKey\", \"valueKey\", \"labelKey\", \"defaultValue\", \"placeholder\", \"disabled\", \"disabledItemValues\", \"appearance\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"value\", \"inline\", \"menuClassName\", \"menuStyle\", \"menuWidth\", \"menuHeight\", \"searchable\", \"parentSelectable\", \"placement\", \"id\", \"renderMenuItem\", \"renderSearchItem\", \"renderValue\", \"renderMenu\", \"renderExtraFooter\", \"onEnter\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"onClose\", \"onOpen\", \"getChildren\"]); // Use component active state to support keyboard events.\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)((0, _treeUtils.flattenTree)(data, childrenKey)),\n      flattenData = _useState2[0],\n      setFlattenData = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n\n  var _ref = (0, _utils2.useControlled)(valueProp, defaultValue),\n      value = _ref[0],\n      setValue = _ref[1];\n\n  var _usePaths = (0, _utils.usePaths)({\n    data: data,\n    valueKey: valueKey,\n    childrenKey: childrenKey,\n    value: value\n  }),\n      selectedPaths = _usePaths.selectedPaths,\n      valueToPaths = _usePaths.valueToPaths,\n      columnData = _usePaths.columnData,\n      addColumn = _usePaths.addColumn,\n      setValueToPaths = _usePaths.setValueToPaths,\n      setColumnData = _usePaths.setColumnData,\n      setSelectedPaths = _usePaths.setSelectedPaths,\n      enforceUpdate = _usePaths.enforceUpdate;\n\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.flattenTree)(data, childrenKey));\n  }, [data, childrenKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale,\n      rtl = _useCustom.rtl;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n\n\n  var hasValue = valueToPaths.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState3 = (0, _react.useState)(''),\n      searchKeyword = _useState3[0],\n      setSearchKeyword = _useState3[1];\n\n  var someKeyword = (0, _react.useCallback)(function (item, keyword) {\n    if (item[labelKey].match(new RegExp((0, _utils2.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {\n      return true;\n    }\n\n    if (item.parent && someKeyword(item.parent)) {\n      return true;\n    }\n\n    return false;\n  }, [labelKey, searchKeyword]);\n  var getSearchResult = (0, _react.useCallback)(function (keyword) {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (!parentSelectable && item[childrenKey]) {\n        return false;\n      }\n\n      return someKeyword(item, keyword);\n    });\n\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]); // A maximum of 100 search results are returned.\n\n      if (i === 99) {\n        return items;\n      }\n    }\n\n    return items;\n  }, [childrenKey, flattenData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    rtl: rtl,\n    data: flattenData,\n    valueKey: valueKey,\n    defaultLayer: valueToPaths !== null && valueToPaths !== void 0 && valueToPaths.length ? valueToPaths.length - 1 : 0,\n    target: function target() {\n      return overlayRef.current;\n    },\n    callback: (0, _react.useCallback)(function (value) {\n      enforceUpdate(value, true);\n    }, [enforceUpdate])\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      setLayer = _useFocusItemValue.setLayer,\n      setKeys = _useFocusItemValue.setKeys,\n      onFocusItem = _useFocusItemValue.onKeyDown;\n\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    var items = getSearchResult(value);\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    if (!targetRef.current) {\n      return;\n    }\n\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    if (!targetRef.current) {\n      return;\n    }\n\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n    setSearchKeyword('');\n  }, [onClose]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n\n    setColumnData([data]);\n    setValue(null);\n    setSelectedPaths([]);\n    setValueToPaths([]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);\n  }, [data, disabled, onChange, setSelectedPaths, setColumnData, setValueToPaths, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var isLeafNode = focusItem && !focusItem[childrenKey];\n\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      setValueToPaths(selectedPaths);\n\n      if (selectedPaths.length) {\n        setLayer(selectedPaths.length - 1);\n      }\n\n      if (!(0, _shallowEqual.default)(value, focusItemValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n\n      handleClose();\n    }\n  }, [childrenKey, data, focusItemValue, handleClose, onChange, selectedPaths, setLayer, setValue, setValueToPaths, value, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n\n  var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;\n\n    var nextValue = node[valueKey];\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    setSelectedPaths(cascadePaths); // Lazy load node's children\n\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n\n          if (targetRef.current) {\n            addColumn(data, cascadePaths.length);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addColumn(children, cascadePaths.length);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], cascadePaths.length);\n    }\n\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose(); // Update the selected path to the value path.\n      // That is, the selected path will be displayed on the button after clicking the child node.\n\n      setValueToPaths(cascadePaths);\n      setValue(nextValue);\n\n      if (!(0, _shallowEqual.default)(value, nextValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      }\n\n      return;\n    }\n    /** When the parent is optional, the value and the displayed path are updated. */\n\n\n    if (parentSelectable && !(0, _shallowEqual.default)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      setValueToPaths(cascadePaths);\n    } // Update menu position\n\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.updatePosition();\n  };\n  /**\n   * The search structure option is processed after being selected.\n   */\n\n\n  var handleSearchRowSelect = function handleSearchRowSelect(node, nodes, event) {\n    var nextValue = node[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    setValueToPaths(nodes);\n    enforceUpdate(nextValue);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  };\n\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var regx = new RegExp((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    nodes.push(item);\n    var formattedNodes = nodes.map(function (node) {\n      var _extends2;\n\n      var labelElements = [];\n      var a = node[labelKey].split(regx);\n      var b = node[labelKey].match(regx);\n\n      for (var i = 0; i < a.length; i++) {\n        labelElements.push(a[i]);\n\n        if (b && b[i]) {\n          labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n            key: i,\n            className: prefix('cascader-search-match'),\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 451,\n              columnNumber: 13\n            }\n          }, b[i]));\n        }\n      }\n\n      return (0, _extends3.default)({}, node, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2));\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return formattedNodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    var label = formattedNodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 472,\n          columnNumber: 7\n        }\n      }, node[labelKey]);\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      className: itemClasses,\n      onClick: function onClick(event) {\n        if (!disabled) {\n          handleSearchRowSelect(item, nodes, event);\n        }\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 478,\n        columnNumber: 7\n      }\n    }, renderSearchItem ? renderSearchItem(label, nodes) : label);\n  };\n\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 501,\n        columnNumber: 7\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 505,\n        columnNumber: 11\n      }\n    }, locale.noResultsText));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref2 = positionProps || {},\n        left = _ref2.left,\n        top = _ref2.top,\n        className = _ref2.className;\n\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils2.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 517,\n        columnNumber: 7\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: 525,\n        columnNumber: 11\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      activeItemValue: value,\n      onSelect: handleSelect,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 535,\n        columnNumber: 11\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var selectedElement = placeholder;\n\n  if (valueToPaths.length > 0) {\n    selectedElement = [];\n    valueToPaths.forEach(function (item, index) {\n      var key = item[valueKey] || item[labelKey];\n      selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 564,\n          columnNumber: 28\n        }\n      }, item[labelKey]));\n\n      if (index < valueToPaths.length - 1) {\n        selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: key + \"-separator\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 567,\n            columnNumber: 11\n          }\n        }, ' / '));\n      }\n    });\n  }\n\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, valueToPaths, 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 _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n    classPrefix: classPrefix,\n    hasValue: hasValue,\n    name: 'cascader',\n    appearance: appearance,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design\n  //       consider an isolated Menu component\n\n\n  if (inline) {\n    return renderDropdownMenu();\n  }\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, _utils2.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 599,\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: 607,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 608,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\n\nCascader.displayName = 'Cascader';\nCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  cleanable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderSearchItem: _propTypes.default.func,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  searchable: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  parentSelectable: _propTypes.default.bool\n});\nvar _default = Cascader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\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 _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _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 _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 _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Cascader/DropdownMenu.tsx\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/Cascader/utils.ts\");\n\nvar _utils2 = __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/Cascader/Cascader.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$data = props.data,\n      data = _props$data === void 0 ? emptyArray : _props$data,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      defaultValue = props.defaultValue,\n      placeholder = props.placeholder,\n      disabled = props.disabled,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      valueProp = props.value,\n      inline = props.inline,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      menuWidth = props.menuWidth,\n      menuHeight = props.menuHeight,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      parentSelectable = props.parentSelectable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      id = props.id,\n      renderMenuItem = props.renderMenuItem,\n      renderSearchItem = props.renderSearchItem,\n      renderValue = props.renderValue,\n      renderMenu = props.renderMenu,\n      renderExtraFooter = props.renderExtraFooter,\n      onEnter = props.onEnter,\n      onExited = props.onExited,\n      onClean = props.onClean,\n      onChange = props.onChange,\n      onSelect = props.onSelect,\n      onSearch = props.onSearch,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      getChildren = props.getChildren,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"childrenKey\", \"valueKey\", \"labelKey\", \"defaultValue\", \"placeholder\", \"disabled\", \"disabledItemValues\", \"appearance\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"value\", \"inline\", \"menuClassName\", \"menuStyle\", \"menuWidth\", \"menuHeight\", \"searchable\", \"parentSelectable\", \"placement\", \"id\", \"renderMenuItem\", \"renderSearchItem\", \"renderValue\", \"renderMenu\", \"renderExtraFooter\", \"onEnter\", \"onExited\", \"onClean\", \"onChange\", \"onSelect\", \"onSearch\", \"onClose\", \"onOpen\", \"getChildren\"]); // Use component active state to support keyboard events.\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useState2 = (0, _react.useState)((0, _treeUtils.flattenTree)(data, childrenKey)),\n      flattenData = _useState2[0],\n      setFlattenData = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n\n  var _ref = (0, _utils2.useControlled)(valueProp, defaultValue),\n      value = _ref[0],\n      setValue = _ref[1];\n\n  var _usePaths = (0, _utils.usePaths)({\n    data: data,\n    valueKey: valueKey,\n    childrenKey: childrenKey,\n    value: value\n  }),\n      selectedPaths = _usePaths.selectedPaths,\n      valueToPaths = _usePaths.valueToPaths,\n      columnData = _usePaths.columnData,\n      addColumn = _usePaths.addColumn,\n      romoveColumnByIndex = _usePaths.romoveColumnByIndex,\n      setValueToPaths = _usePaths.setValueToPaths,\n      setColumnData = _usePaths.setColumnData,\n      setSelectedPaths = _usePaths.setSelectedPaths,\n      enforceUpdate = _usePaths.enforceUpdate;\n\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.flattenTree)(data, childrenKey));\n  }, [data, childrenKey]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale,\n      rtl = _useCustom.rtl;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n\n\n  var hasValue = valueToPaths.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState3 = (0, _react.useState)(''),\n      searchKeyword = _useState3[0],\n      setSearchKeyword = _useState3[1];\n\n  var someKeyword = (0, _react.useCallback)(function (item, keyword) {\n    if (item[labelKey].match(new RegExp((0, _utils2.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {\n      return true;\n    }\n\n    if (item.parent && someKeyword(item.parent)) {\n      return true;\n    }\n\n    return false;\n  }, [labelKey, searchKeyword]);\n  var getSearchResult = (0, _react.useCallback)(function (keyword) {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (!parentSelectable && item[childrenKey]) {\n        return false;\n      }\n\n      return someKeyword(item, keyword);\n    });\n\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]); // A maximum of 100 search results are returned.\n\n      if (i === 99) {\n        return items;\n      }\n    }\n\n    return items;\n  }, [childrenKey, flattenData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    rtl: rtl,\n    data: flattenData,\n    valueKey: valueKey,\n    defaultLayer: valueToPaths !== null && valueToPaths !== void 0 && valueToPaths.length ? valueToPaths.length - 1 : 0,\n    target: function target() {\n      return overlayRef.current;\n    },\n    callback: (0, _react.useCallback)(function (value) {\n      enforceUpdate(value, true);\n    }, [enforceUpdate])\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      setLayer = _useFocusItemValue.setLayer,\n      setKeys = _useFocusItemValue.setKeys,\n      onFocusItem = _useFocusItemValue.onKeyDown;\n\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    var items = getSearchResult(value);\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    if (!targetRef.current) {\n      return;\n    }\n\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    if (!targetRef.current) {\n      return;\n    }\n\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setActive(false);\n    setSearchKeyword('');\n  }, [onClose]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n\n    setColumnData([data]);\n    setValue(null);\n    setSelectedPaths([]);\n    setValueToPaths([]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);\n  }, [data, disabled, onChange, setSelectedPaths, setColumnData, setValueToPaths, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var isLeafNode = focusItem && !focusItem[childrenKey];\n\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      setValueToPaths(selectedPaths);\n\n      if (selectedPaths.length) {\n        setLayer(selectedPaths.length - 1);\n      }\n\n      if (!(0, _shallowEqual.default)(value, focusItemValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n\n      handleClose();\n    }\n  }, [childrenKey, data, focusItemValue, handleClose, onChange, selectedPaths, setLayer, setValue, setValueToPaths, value, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n\n  var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;\n\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    setSelectedPaths(cascadePaths);\n    var nextValue = node[valueKey];\n    var columnIndex = cascadePaths.length; // Lazy load node's children\n\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n\n          if (targetRef.current) {\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      romoveColumnByIndex(columnIndex);\n    }\n\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose(); // Update the selected path to the value path.\n      // That is, the selected path will be displayed on the button after clicking the child node.\n\n      setValueToPaths(cascadePaths);\n      setValue(nextValue);\n\n      if (!(0, _shallowEqual.default)(value, nextValue)) {\n        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      }\n\n      return;\n    }\n    /** When the parent is optional, the value and the displayed path are updated. */\n\n\n    if (parentSelectable && !(0, _shallowEqual.default)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n      setValueToPaths(cascadePaths);\n    } // Update menu position\n\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.updatePosition();\n  };\n  /**\n   * The search structure option is processed after being selected.\n   */\n\n\n  var handleSearchRowSelect = function handleSearchRowSelect(node, nodes, event) {\n    var nextValue = node[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    setValueToPaths(nodes);\n    enforceUpdate(nextValue);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n  };\n\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var regx = new RegExp((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    nodes.push(item);\n    var formattedNodes = nodes.map(function (node) {\n      var _extends2;\n\n      var labelElements = [];\n      var a = node[labelKey].split(regx);\n      var b = node[labelKey].match(regx);\n\n      for (var i = 0; i < a.length; i++) {\n        labelElements.push(a[i]);\n\n        if (b && b[i]) {\n          labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n            key: i,\n            className: prefix('cascader-search-match'),\n            __self: _this,\n            __source: {\n              fileName: _jsxFileName,\n              lineNumber: 456,\n              columnNumber: 13\n            }\n          }, b[i]));\n        }\n      }\n\n      return (0, _extends3.default)({}, node, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2));\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return formattedNodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    var label = formattedNodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 477,\n          columnNumber: 7\n        }\n      }, node[labelKey]);\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      className: itemClasses,\n      onClick: function onClick(event) {\n        if (!disabled) {\n          handleSearchRowSelect(item, nodes, event);\n        }\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 483,\n        columnNumber: 7\n      }\n    }, renderSearchItem ? renderSearchItem(label, nodes) : label);\n  };\n\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 506,\n        columnNumber: 7\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 510,\n        columnNumber: 11\n      }\n    }, locale.noResultsText));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref2 = positionProps || {},\n        left = _ref2.left,\n        top = _ref2.top,\n        className = _ref2.className;\n\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils2.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 522,\n        columnNumber: 7\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: 530,\n        columnNumber: 11\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      activeItemValue: value,\n      onSelect: handleSelect,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 540,\n        columnNumber: 11\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var selectedElement = placeholder;\n\n  if (valueToPaths.length > 0) {\n    selectedElement = [];\n    valueToPaths.forEach(function (item, index) {\n      var key = item[valueKey] || item[labelKey];\n      selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 569,\n          columnNumber: 28\n        }\n      }, item[labelKey]));\n\n      if (index < valueToPaths.length - 1) {\n        selectedElement.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: key + \"-separator\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 572,\n            columnNumber: 11\n          }\n        }, ' / '));\n      }\n    });\n  }\n\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, valueToPaths, 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 _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n    classPrefix: classPrefix,\n    hasValue: hasValue,\n    name: 'cascader',\n    appearance: appearance,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design\n  //       consider an isolated Menu component\n\n\n  if (inline) {\n    return renderDropdownMenu();\n  }\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, _utils2.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 604,\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: 612,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    ref: targetRef,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 613,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\n\nCascader.displayName = 'Cascader';\nCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  renderMenu: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  cleanable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderSearchItem: _propTypes.default.func,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  searchable: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  parentSelectable: _propTypes.default.bool\n});\nvar _default = Cascader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
 
 /***/ }),
 
@@ -2155,7 +2155,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.getColumnsAndPaths = getColumnsAndPaths;\nexports.usePaths = usePaths;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.ts\");\n\nfunction getColumnsAndPaths(data, value, options) {\n  var childrenKey = options.childrenKey,\n      valueKey = options.valueKey,\n      isAttachChildren = options.isAttachChildren;\n  var columns = [];\n  var paths = [];\n\n  var findNode = function findNode(items) {\n    var _loop = function _loop(i) {\n      var children = items[i][childrenKey];\n\n      if ((0, _utils.shallowEqual)(items[i][valueKey], value)) {\n        return {\n          v: {\n            items: items,\n            active: items[i]\n          }\n        };\n      } else if (children) {\n        var node = findNode(children);\n\n        if (node) {\n          columns.push(children.map(function (item) {\n            return (0, _attachParent.attachParent)(item, items[i]);\n          }));\n          paths.push(node.active);\n          return {\n            v: {\n              items: items,\n              active: items[i]\n            }\n          };\n        }\n      }\n    };\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _ret = _loop(i);\n\n      if (typeof _ret === \"object\") return _ret.v;\n    }\n\n    return null;\n  };\n\n  var selectedNode = findNode(data);\n  columns.push(data);\n\n  if (selectedNode) {\n    paths.push(selectedNode.active);\n  }\n\n  if (isAttachChildren) {\n    var valueToNode = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === value;\n    });\n\n    if (valueToNode !== null && valueToNode !== void 0 && valueToNode[childrenKey]) {\n      columns.unshift(valueToNode[childrenKey]);\n    }\n  }\n\n  columns.reverse();\n  paths.reverse();\n  return {\n    columns: columns,\n    paths: paths\n  };\n}\n\nfunction usePaths(props) {\n  var data = props.data,\n      valueKey = props.valueKey,\n      childrenKey = props.childrenKey,\n      value = props.value;\n\n  var _useMemo = (0, _react.useMemo)(function () {\n    return getColumnsAndPaths(data, value, {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    });\n  }, [data, value, valueKey, childrenKey]),\n      columns = _useMemo.columns,\n      paths = _useMemo.paths; // The columns displayed in the cascading panel.\n\n\n  var _useState = (0, _react.useState)(columns),\n      columnData = _useState[0],\n      setColumnData = _useState[1]; // The path after cascading data selection.\n\n\n  var _useState2 = (0, _react.useState)(paths),\n      selectedPaths = _useState2[0],\n      setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.\n\n\n  var _useState3 = (0, _react.useState)(paths),\n      valueToPaths = _useState3[0],\n      setValueToPaths = _useState3[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   * Enforce update of columns and paths.\n   * @param nextValue  Selected value\n   * @param isAttachChildren  Whether to attach the children of the selected node.\n   */\n\n\n  function enforceUpdate(nextValue, isAttachChildren) {\n    var _getColumnsAndPaths = getColumnsAndPaths(data, nextValue, {\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      isAttachChildren: isAttachChildren\n    }),\n        columns = _getColumnsAndPaths.columns,\n        paths = _getColumnsAndPaths.paths;\n\n    setColumnData(columns);\n    setSelectedPaths(paths);\n  }\n\n  (0, _utils.useUpdateEffect)(function () {\n    // Update paths when value is updated, then update valueToPaths.\n    setValueToPaths(paths);\n  }, [paths]);\n  (0, _utils.useUpdateEffect)(function () {\n    enforceUpdate(value);\n  }, [data]);\n  return {\n    enforceUpdate: enforceUpdate,\n    columnData: columnData,\n    valueToPaths: valueToPaths,\n    selectedPaths: selectedPaths,\n    setValueToPaths: setValueToPaths,\n    setColumnData: setColumnData,\n    setSelectedPaths: setSelectedPaths,\n    addColumn: addColumn\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Cascader/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAndPaths;\nexports.usePaths = usePaths;\n\nvar _react = __webpack_require__(/*! react */ \"react\");\n\nvar _slice = _interopRequireDefault(__webpack_require__(/*! lodash/slice */ \"./node_modules/lodash/slice.js\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.ts\");\n\nfunction getColumnsAndPaths(data, value, options) {\n  var childrenKey = options.childrenKey,\n      valueKey = options.valueKey,\n      isAttachChildren = options.isAttachChildren;\n  var columns = [];\n  var paths = [];\n\n  var findNode = function findNode(items) {\n    var _loop = function _loop(i) {\n      var children = items[i][childrenKey];\n\n      if ((0, _utils.shallowEqual)(items[i][valueKey], value)) {\n        return {\n          v: {\n            items: items,\n            active: items[i]\n          }\n        };\n      } else if (children) {\n        var node = findNode(children);\n\n        if (node) {\n          columns.push(children.map(function (item) {\n            return (0, _attachParent.attachParent)(item, items[i]);\n          }));\n          paths.push(node.active);\n          return {\n            v: {\n              items: items,\n              active: items[i]\n            }\n          };\n        }\n      }\n    };\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _ret = _loop(i);\n\n      if (typeof _ret === \"object\") return _ret.v;\n    }\n\n    return null;\n  };\n\n  var selectedNode = findNode(data);\n  columns.push(data);\n\n  if (selectedNode) {\n    paths.push(selectedNode.active);\n  }\n\n  if (isAttachChildren) {\n    var valueToNode = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === value;\n    });\n\n    if (valueToNode !== null && valueToNode !== void 0 && valueToNode[childrenKey]) {\n      columns.unshift(valueToNode[childrenKey]);\n    }\n  }\n\n  columns.reverse();\n  paths.reverse();\n  return {\n    columns: columns,\n    paths: paths\n  };\n}\n\nfunction usePaths(props) {\n  var data = props.data,\n      valueKey = props.valueKey,\n      childrenKey = props.childrenKey,\n      value = props.value;\n\n  var _useMemo = (0, _react.useMemo)(function () {\n    return getColumnsAndPaths(data, value, {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    });\n  }, [data, value, valueKey, childrenKey]),\n      columns = _useMemo.columns,\n      paths = _useMemo.paths; // The columns displayed in the cascading panel.\n\n\n  var _useState = (0, _react.useState)(columns),\n      columnData = _useState[0],\n      setColumnData = _useState[1]; // The path after cascading data selection.\n\n\n  var _useState2 = (0, _react.useState)(paths),\n      selectedPaths = _useState2[0],\n      setSelectedPaths = _useState2[1]; // The path corresponding to the selected value.\n\n\n  var _useState3 = (0, _react.useState)(paths),\n      valueToPaths = _useState3[0],\n      setValueToPaths = _useState3[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   * Remove subsequent columns of the specified column\n   * @param index\n   */\n\n\n  function romoveColumnByIndex(index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));\n  }\n  /**\n   * Enforce update of columns and paths.\n   * @param nextValue  Selected value\n   * @param isAttachChildren  Whether to attach the children of the selected node.\n   */\n\n\n  function enforceUpdate(nextValue, isAttachChildren) {\n    var _getColumnsAndPaths = getColumnsAndPaths(data, nextValue, {\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      isAttachChildren: isAttachChildren\n    }),\n        columns = _getColumnsAndPaths.columns,\n        paths = _getColumnsAndPaths.paths;\n\n    setColumnData(columns);\n    setSelectedPaths(paths);\n  }\n\n  (0, _utils.useUpdateEffect)(function () {\n    // Update paths when value is updated, then update valueToPaths.\n    setValueToPaths(paths);\n  }, [paths]);\n  (0, _utils.useUpdateEffect)(function () {\n    enforceUpdate(value);\n  }, [data]);\n  return {\n    enforceUpdate: enforceUpdate,\n    columnData: columnData,\n    valueToPaths: valueToPaths,\n    selectedPaths: selectedPaths,\n    setValueToPaths: setValueToPaths,\n    setColumnData: setColumnData,\n    setSelectedPaths: setSelectedPaths,\n    addColumn: addColumn,\n    romoveColumnByIndex: romoveColumnByIndex\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Cascader/utils.ts?");
 
 /***/ }),
 
@@ -2210,7 +2210,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 = 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      /**\n       * spread operator dont copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n\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: 730,\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: 731,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 732,\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: 735,\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: 746,\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: 770,\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: 790,\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: 803,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treeNodesClass,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 813,\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: 815,\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: 820,\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: 847,\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: 856,\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: 879,\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: 914,\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: 923,\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: 924,\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 _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      _props$menuMaxHeight = props.menuMaxHeight,\n      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n      menuStyle = props.menuStyle,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      _props$virtualized = props.virtualized,\n      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n      className = props.className,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      menuClassName = props.menuClassName,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      _props$uncheckableIte = props.uncheckableItemValues,\n      uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n      id = props.id,\n      listProps = props.listProps,\n      renderMenu = props.renderMenu,\n      getChildren = props.getChildren,\n      renderExtraFooter = props.renderExtraFooter,\n      onEntered = props.onEntered,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onExited = props.onExited,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onOpen = props.onOpen,\n      onScroll = props.onScroll,\n      onExpand = props.onExpand,\n      renderValue = props.renderValue,\n      renderTreeIcon = props.renderTreeIcon,\n      renderTreeNode = props.renderTreeNode,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"style\", \"appearance\", \"cleanable\", \"countable\", \"searchBy\", \"toggleAs\", \"searchKeyword\", \"showIndentLine\", \"locale\", \"cascade\", \"disabled\", \"valueKey\", \"labelKey\", \"placement\", \"childrenKey\", \"placeholder\", \"value\", \"defaultValue\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"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: focusItemValue === node[valueKey],\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return item === node[valueKey];\n      }),\n      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {\n        disabledItemValues: disabledItemValues,\n        valueKey: valueKey\n      }),\n      nodeData: node,\n      checkState: node.checkState,\n      uncheckable: (0, _utils2.isNodeUncheckable)(node, {\n        uncheckableItemValues: uncheckableItemValues,\n        valueKey: valueKey\n      }),\n      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),\n      onSelect: handleSelect,\n      onExpand: handleExpand,\n      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  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') || disabled || !cleanable) {\n      return;\n    }\n\n    setActiveNode(null);\n    setFocusItemValue(null);\n\n    if (!isControlled) {\n      setValue([]);\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: [],\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n    }\n\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);\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      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n\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: 734,\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: 735,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 736,\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: 739,\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: 750,\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        /**\n         * spread operator don't copy unenumerable properties\n         * so we need to copy them manually\n         */\n        parent: node.parent,\n        expand: expand\n      }), layer), {\n        hasChildren: node.hasChildren\n      });\n      return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n        style: style,\n        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: 784,\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: 804,\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: 817,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treeNodesClass,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 827,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 829,\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: 834,\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    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 860,\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: 869,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var selectedItems = (0, _react.useMemo)(function () {\n    return (0, _utils2.getSelectedItems)(flattenNodes, value);\n  }, [flattenNodes, value]);\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n\n  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\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: 892,\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: 927,\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: 936,\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: 937,\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?");
 
 /***/ }),
 
@@ -2232,7 +2232,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\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.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      (0, _attachParent.attachParent)(formatted, 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?");
+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\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.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 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      (0, _attachParent.attachParent)(formatted, 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 && 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, values) {\n  var checkedItems = [];\n  values.forEach(function (value) {\n    var refKey = (0, _treeUtils.getNodeFormattedRefKey)(value);\n    var node = nodes[refKey];\n\n    if (!(0, _isNil2.default)(node)) {\n      checkedItems.push(node);\n    }\n  });\n  return checkedItems;\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?");
 
 /***/ }),
 
@@ -2452,7 +2452,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\n\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/PredefinedRanges.tsx\",\n    _this = void 0;\n\nvar PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var className = props.className,\n      disabledShortcut = props.disabledShortcut,\n      onClickShortcut = props.onClickShortcut,\n      calendarDate = props.calendarDate,\n      rangesProp = props.ranges,\n      locale = props.locale,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"className\", \"disabledShortcut\", \"onClickShortcut\", \"calendarDate\", \"ranges\", \"locale\"]);\n\n  var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),\n      ranges = _useState[0],\n      setRanges = _useState[1];\n\n  (0, _utils.useUpdateEffect)(function () {\n    setRanges((0, _utils2.getRanges)({\n      ranges: rangesProp,\n      calendarDate: calendarDate\n    }));\n  }, [calendarDate, rangesProp]);\n  var hasLocaleKey = (0, _react.useCallback)(function (key) {\n    return (0, _utils2.getDefaultRanges)(calendarDate).some(function (item) {\n      return item.label === key;\n    });\n  }, [calendarDate]);\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    className: className,\n    ref: ref,\n    alignItems: \"flex-start\",\n    spacing: 4\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 39,\n      columnNumber: 5\n    }\n  }), ranges.map(function (_ref, index) {\n    var value = _ref.value,\n        closeOverlay = _ref.closeOverlay,\n        label = _ref.label,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"value\", \"closeOverlay\", \"label\"]);\n    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);\n\n    var handleClickShortcut = function handleClickShortcut(event) {\n      if (disabled) {\n        return;\n      }\n\n      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);\n    };\n\n    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({\n      appearance: \"link\",\n      size: \"sm\",\n      key: index,\n      disabled: disabled,\n      onClick: handleClickShortcut\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 11\n      }\n    }), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);\n  }));\n});\n\nvar _default = PredefinedRanges;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/PredefinedRanges.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 _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\n\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DatePicker/PredefinedRanges.tsx\",\n    _this = void 0;\n\nvar PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var className = props.className,\n      disabledShortcut = props.disabledShortcut,\n      onClickShortcut = props.onClickShortcut,\n      calendarDate = props.calendarDate,\n      rangesProp = props.ranges,\n      locale = props.locale,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"className\", \"disabledShortcut\", \"onClickShortcut\", \"calendarDate\", \"ranges\", \"locale\"]);\n\n  var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),\n      ranges = _useState[0],\n      setRanges = _useState[1];\n\n  (0, _utils.useUpdateEffect)(function () {\n    setRanges((0, _utils2.getRanges)({\n      ranges: rangesProp,\n      calendarDate: calendarDate\n    }));\n  }, [calendarDate, rangesProp]);\n  var hasLocaleKey = (0, _react.useCallback)(function (key) {\n    return (0, _utils2.getDefaultRanges)(calendarDate).some(function (item) {\n      return item.label === key;\n    });\n  }, [calendarDate]);\n\n  if (ranges.length === 0) {\n    return null;\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    className: className,\n    ref: ref,\n    alignItems: \"flex-start\",\n    spacing: 4\n  }, rest, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 5\n    }\n  }), ranges.map(function (_ref, index) {\n    var value = _ref.value,\n        closeOverlay = _ref.closeOverlay,\n        label = _ref.label,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, [\"value\", \"closeOverlay\", \"label\"]);\n    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);\n\n    var handleClickShortcut = function handleClickShortcut(event) {\n      if (disabled) {\n        return;\n      }\n\n      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);\n    };\n\n    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({\n      appearance: \"link\",\n      size: \"sm\",\n      key: index,\n      disabled: disabled,\n      onClick: handleClickShortcut\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 55,\n        columnNumber: 11\n      }\n    }), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);\n  }));\n});\n\nvar _default = PredefinedRanges;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/PredefinedRanges.tsx?");
 
 /***/ }),
 
@@ -2507,7 +2507,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\n\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      className = props.className,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$editable = props.editable,\n      editable = _props$editable === void 0 ? true : _props$editable,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$character = props.character,\n      character = _props$character === void 0 ? ' ~ ' : _props$character,\n      defaultCalendarValue = props.defaultCalendarValue,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\n      _props$isoWeek = props.isoWeek,\n      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      ranges = props.ranges,\n      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      renderTitle = props.renderTitle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"renderTitle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n\n\n  var hasDoneSelect = (0, _react.useRef)(true);\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n\n  var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {\n    var nextValue = value;\n    var shouldRenderTime = _utils.DateUtils.shouldRenderTime,\n        getHours = _utils.DateUtils.getHours,\n        getMinutes = _utils.DateUtils.getMinutes,\n        getSeconds = _utils.DateUtils.getSeconds,\n        set = _utils.DateUtils.set;\n\n    if (shouldRenderTime(formatStr) && calendarKey === undefined && (value === null || value === void 0 ? void 0 : value.length) === 1 && (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue.length) === 2) {\n      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || defaultCalendarValue[1];\n      var _startDate = value[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.\n\n      var _endDate = set((0, _dateUtils.addMonths)(_startDate, 1), {\n        hours: getHours(calendarEndDate),\n        minutes: getMinutes(calendarEndDate),\n        seconds: getSeconds(calendarEndDate)\n      });\n\n      nextValue = [_startDate, _endDate];\n    }\n\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey\n    }));\n  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue\n\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 300,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 302,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n\n    if (!hasDoneSelect.current) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDateRange(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');\n  }, [calendarDate, updateCalendarDateRange]);\n  var updateSingleCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    updateSingleCalendarDate(index, date);\n  }, [updateSingleCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    updateCalendarDateRange(value);\n\n    if (closeOverlay) {\n      handleValueUpdate(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    } // End unfinished selections.\n\n\n    hasDoneSelect.current = true;\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDateRange(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDateRange(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDateRange]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate2 = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDateRange(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: updateSingleCalendarDate,\n      onChangeCalendarTime: updateSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 748,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 755,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 756,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n      })) || [],\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onClickShortcut: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 757,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 768,\n        columnNumber: 15\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 769,\n        columnNumber: 17\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 770,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 773,\n        columnNumber: 19\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 774,\n        columnNumber: 40\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n        return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n      }),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 777,\n        columnNumber: 15\n      }\n    })))));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'daterange',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 807,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 816,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: editable,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 823,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([_propTypes.default.oneOf(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\n\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\n\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\n\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\n\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\n\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\n\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n    _this = void 0;\n\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      className = props.className,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$editable = props.editable,\n      editable = _props$editable === void 0 ? true : _props$editable,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$character = props.character,\n      character = _props$character === void 0 ? ' ~ ' : _props$character,\n      defaultCalendarValue = props.defaultCalendarValue,\n      defaultValue = props.defaultValue,\n      disabled = props.disabled,\n      disabledDateProp = props.disabledDate,\n      _props$format = props.format,\n      formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n      hoverRange = props.hoverRange,\n      _props$isoWeek = props.isoWeek,\n      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n      _props$limitEndYear = props.limitEndYear,\n      limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n      overrideLocale = props.locale,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      oneTap = props.oneTap,\n      _props$placeholder = props.placeholder,\n      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      ranges = props.ranges,\n      renderValue = props.renderValue,\n      _props$showOneCalenda = props.showOneCalendar,\n      showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n      showWeekNumbers = props.showWeekNumbers,\n      showMeridian = props.showMeridian,\n      style = props.style,\n      toggleAs = props.toggleAs,\n      caretAs = props.caretAs,\n      valueProp = props.value,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onClose = props.onClose,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExited = props.onExited,\n      onOk = props.onOk,\n      onOpen = props.onOpen,\n      onSelect = props.onSelect,\n      renderTitle = props.renderTitle,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"disabled\", \"disabledDate\", \"format\", \"hoverRange\", \"isoWeek\", \"limitEndYear\", \"locale\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"renderValue\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"style\", \"toggleAs\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"renderTitle\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      merge = _useClassNames.merge,\n      prefix = _useClassNames.prefix;\n\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n      locale = _useCustom.locale,\n      formatDate = _useCustom.formatDate,\n      parseDate = _useCustom.parseDate;\n\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n\n\n  var hasDoneSelect = (0, _react.useRef)(true);\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n\n  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n      selectedDates = _useState[0],\n      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n\n\n  var _useState2 = (0, _react.useState)(null),\n      hoverDateRange = _useState2[0],\n      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.\n\n\n  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({\n    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n  })),\n      calendarDate = _useState3[0],\n      setCalendarDate = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(),\n      inputState = _useState4[0],\n      setInputState = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n\n\n  var selectRangeValueRef = (0, _react.useRef)(null);\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n\n  var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {\n    var nextValue = value;\n    var shouldRenderTime = _utils.DateUtils.shouldRenderTime,\n        getHours = _utils.DateUtils.getHours,\n        getMinutes = _utils.DateUtils.getMinutes,\n        getSeconds = _utils.DateUtils.getSeconds,\n        set = _utils.DateUtils.set;\n\n    if (shouldRenderTime(formatStr) && calendarKey === undefined && (value === null || value === void 0 ? void 0 : value.length) === 1 && (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue.length) === 2) {\n      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || defaultCalendarValue[1];\n      var _startDate = value[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.\n\n      var _endDate = set((0, _dateUtils.addMonths)(_startDate, 1), {\n        hours: getHours(calendarEndDate),\n        minutes: getMinutes(calendarEndDate),\n        seconds: getSeconds(calendarEndDate)\n      });\n\n      nextValue = [_startDate, _endDate];\n    }\n\n    setCalendarDate((0, _utils2.getCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey\n    }));\n  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue\n\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n\n  var _useState5 = (0, _react.useState)(false),\n      isPickerToggleActive = _useState5[0],\n      setPickerToggleActive = _useState5[1];\n\n  var rootRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var handleCloseDropdown = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n  }, []);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    rootRef: rootRef\n  });\n  var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {\n    var _nextValue$, _nextValue$2;\n\n    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;\n    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;\n\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n\n      if (isPlaintext) {\n        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);\n      }\n\n      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 300,\n          columnNumber: 13\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 302,\n          columnNumber: 13\n        }\n      }));\n    }\n\n    return isPlaintext ? '' : placeholder || rangeFormatStr;\n  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);\n  /**\n   * preset hover range\n   */\n\n  var getHoverRangeValue = (0, _react.useCallback)(function (date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n\n      return hoverRange;\n    }\n\n    var hoverRangeFunc = getHoverRangeFunc();\n\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n\n    if (!isHoverRangeValid) {\n      return null;\n    }\n\n    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {\n      hoverValues.reverse();\n    }\n\n    return hoverValues;\n  }, [hoverRange, isoWeek]);\n  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    } // `closeOverlay` default value is `true`\n\n\n    if (closeOverlay !== false) {\n      handleCloseDropdown();\n    }\n  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n\n  var handleMouseMove = (0, _react.useCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n\n    if (!hasDoneSelect.current) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n\n        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  }, [getHoverRangeValue]);\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n\n  var handleSelectDate = (0, _react.useCallback)(function (date, event) {\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode\n\n    if (hasDoneSelect.current && oneTap) {\n      handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      hasDoneSelect.current = false;\n      return;\n    } // no preset hover range can use\n\n\n    if (noHoverRangeValid) {\n      // start select\n      if (hasDoneSelect.current) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!hasDoneSelect.current) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    } // If user have completed the selection, then sort\n\n\n    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {\n      nextSelectDates.reverse();\n    }\n\n    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);\n    setSelectedDates(nextSelectDates);\n    updateCalendarDateRange(nextSelectDates);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    hasDoneSelect.current = !hasDoneSelect.current;\n  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');\n  }, [calendarDate, updateCalendarDateRange]);\n  var updateSingleCalendarTime = (0, _react.useCallback)(function (index, date) {\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day\n\n      if (next[index]) {\n        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());\n      }\n\n      next[index] = clonedDate;\n      return next;\n    });\n    updateSingleCalendarDate(index, date);\n  }, [updateSingleCalendarDate]);\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n\n  var handleToggleMeridian = (0, _react.useCallback)(function (index) {\n    var next = Array.from(calendarDate);\n    var clonedDate = new Date(next[index].valueOf());\n\n    var hours = _utils.DateUtils.getHours(clonedDate);\n\n    var nextHours = hours >= 12 ? hours - 12 : hours + 12;\n    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);\n    setCalendarDate(next); // If the value already exists, update the value again.\n\n    if (selectedDates.length === 2) {\n      setSelectedDates(next);\n    }\n  }, [calendarDate, selectedDates]);\n  /**\n   * Toolbar operation callback function\n   */\n\n  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n\n    updateCalendarDateRange(value);\n\n    if (closeOverlay) {\n      handleValueUpdate(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    } // End unfinished selections.\n\n\n    hasDoneSelect.current = true;\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  var handleOK = (0, _react.useCallback)(function (event) {\n    handleValueUpdate(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  }, [handleValueUpdate, onOk, selectedDates]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    updateCalendarDateRange(null);\n    handleValueUpdate(event, null);\n  }, [handleValueUpdate, updateCalendarDateRange]);\n  /**\n   * Callback after the input box value is changed.\n   */\n\n  var handleInputChange = (0, _react.useCallback)(function (value) {\n    setInputState('Typing');\n    var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true\n    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false\n\n    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {\n      locale: locale.dateLocale\n    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {\n      locale: locale.dateLocale\n    })) {\n      setInputState('Error');\n      return;\n    }\n\n    var startDate = parseDate(rangeValue[0], formatStr);\n    var endDate = parseDate(rangeValue[1], formatStr);\n    var selectValue = [startDate, endDate];\n\n    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {\n      setInputState('Error');\n      return;\n    }\n\n    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {\n      setInputState('Error');\n      return;\n    }\n\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    updateCalendarDateRange(selectValue);\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  [character, rangeFormatStr, updateCalendarDateRange]);\n  /**\n   * The callback after the enter key is triggered on the input\n   */\n\n  var handleInputPressEnd = (0, _react.useCallback)(function (event) {\n    if (inputState === 'Typing') {\n      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);\n    }\n\n    setInputState('Initial');\n  }, [handleValueUpdate, selectedDates, inputState]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    var nextCalendarDate;\n\n    if (value && value.length) {\n      var _startDate2 = value[0],\n          endData = value[1];\n      nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    updateCalendarDateRange(nextCalendarDate);\n  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setPickerToggleActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setPickerToggleActive(false);\n    hasDoneSelect.current = true;\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose]);\n  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {\n    var _disabledDateProp;\n\n    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;\n  }, [disabledDateProp]);\n  var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {\n      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {\n        return true;\n      }\n\n      start = _utils.DateUtils.addDays(start, 1);\n    }\n\n    return false;\n  }, [isDateDisabled, selectedDates]);\n  var disabledOkButton = (0, _react.useCallback)(function () {\n    var start = selectedDates[0],\n        end = selectedDates[1];\n\n    if (!start || !end || !hasDoneSelect.current) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  }, [disabledByBetween, selectedDates]);\n  var disabledShortcutButton = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n\n    var _value = value,\n        start = _value[0],\n        end = _value[1];\n\n    if (!start || !end) {\n      return true;\n    }\n\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  }, [disabledByBetween]);\n  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {\n    return isDateDisabled(date, values, hasDoneSelect.current, type);\n  }, [isDateDisabled]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    active: isPickerToggleActive,\n    onExit: handleClean\n  }, rest));\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: handleDisabledDate,\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarDate: updateSingleCalendarDate,\n      onChangeCalendarTime: updateSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      role: \"dialog\",\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      target: triggerRef,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 753,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 760,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 761,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onClickShortcut: handleShortcutPageDate,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 763,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 776,\n        columnNumber: 15\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 777,\n        columnNumber: 17\n      }\n    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 778,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 781,\n        columnNumber: 19\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 782,\n        columnNumber: 40\n      }\n    })))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onClickShortcut: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 785,\n        columnNumber: 15\n      }\n    })))));\n  };\n\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    name: 'daterange',\n    appearance: appearance,\n    hasValue: hasValue,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 813,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: rootRef,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 822,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {\n    as: toggleAs,\n    ref: targetRef,\n    appearance: appearance,\n    editable: editable,\n    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),\n    inputValue: value ? getDisplayString(value, true) : '',\n    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,\n    onInputChange: handleInputChange,\n    onInputBlur: handleInputPressEnd,\n    onInputPressEnter: handleInputPressEnd,\n    onKeyDown: onPickerKeyDown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: isPickerToggleActive,\n    placement: placement,\n    disabled: disabled,\n    caretAs: caretAs || _Calendar.default,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 829,\n      columnNumber: 9\n    }\n  }), getDisplayString(value))));\n});\n\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([_propTypes.default.oneOf(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -3552,7 +3552,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 _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/MultiCascader/DropdownMenu.tsx\"));\n\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../Cascader/utils */ \"./src/Cascader/utils.ts\");\n\nvar _utils3 = __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/MultiCascader/MultiCascader.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$data = props.data,\n      data = _props$data === void 0 ? emptyArray : _props$data,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      defaultValue = props.defaultValue,\n      valueProp = props.value,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      disabled = props.disabled,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      _props$countable = props.countable,\n      countable = _props$countable === void 0 ? true : _props$countable,\n      _props$cascade = props.cascade,\n      cascade = _props$cascade === void 0 ? true : _props$cascade,\n      inline = props.inline,\n      placeholder = props.placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      menuWidth = props.menuWidth,\n      menuHeight = props.menuHeight,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      _props$uncheckableIte = props.uncheckableItemValues,\n      uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n      id = props.id,\n      getChildren = props.getChildren,\n      renderValue = props.renderValue,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      renderExtraFooter = props.renderExtraFooter,\n      onEnter = props.onEnter,\n      onExit = props.onExit,\n      onExited = props.onExited,\n      onClean = props.onClean,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onChange = props.onChange,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onCheck = props.onCheck,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"defaultValue\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabled\", \"disabledItemValues\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"inline\", \"placeholder\", \"placement\", \"appearance\", \"menuWidth\", \"menuHeight\", \"menuClassName\", \"menuStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderMenu\", \"renderMenuItem\", \"renderExtraFooter\", \"onEnter\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onOpen\", \"onClose\", \"onCheck\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),\n      flattenData = _useFlattenData.flattenData,\n      addFlattenData = _useFlattenData.addFlattenData;\n\n  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    value: valueProp || defaultValue\n  }), flattenData),\n      value = _useCascadeValue.value,\n      setValue = _useCascadeValue.setValue,\n      splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.\n\n\n  var _useColumnData = (0, _utils.useColumnData)(flattenData),\n      columnData = _useColumnData.columnData,\n      setColumnData = _useColumnData.setColumnData,\n      addColumn = _useColumnData.addColumn,\n      enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n\n  (0, _utils3.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]); // The path after cascading data selection.\n\n  var _useState2 = (0, _react.useState)(),\n      selectedPaths = _useState2[0],\n      setSelectedPaths = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale,\n      rtl = _useCustom.rtl;\n\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || []; // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n    rtl: rtl,\n    data: flattenData,\n    valueKey: valueKey,\n    defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n    target: function target() {\n      return overlayRef.current;\n    },\n    callback: (0, _react.useCallback)(function (value) {\n      var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey,\n        isAttachChildren: true\n      }),\n          columns = _getColumnsAndPaths.columns,\n          paths = _getColumnsAndPaths.paths;\n\n      setColumnData(columns);\n      setSelectedPaths(paths);\n    }, [childrenKey, data, setColumnData, valueKey])\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setLayer = _useFocusItemValue.setLayer,\n      setKeys = _useFocusItemValue.setKeys,\n      onFocusItem = _useFocusItemValue.onKeyDown;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n\n\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState3 = (0, _react.useState)(''),\n      searchKeyword = _useState3[0],\n      setSearchKeyword = _useState3[1];\n\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setActive(false);\n    setSearchKeyword('');\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;\n\n    setSelectedPaths(cascadePaths);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event); // Lazy load node's children\n\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n\n          if (targetRef.current) {\n            addFlattenData(data, node);\n            addColumn(data, cascadePaths.length);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, cascadePaths.length);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], cascadePaths.length);\n    }\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);\n  }, [onSelect, getChildren, childrenKey, addColumn, addFlattenData]);\n  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [data, disabled, onChange, setColumnData, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var _overlayRef$current;\n\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  }, [data, focusItemValue, handleCheck, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n\n    setKeys([]);\n  }, [onSearch, selectedPaths, setKeys, setLayer]);\n  var getSearchResult = (0, _react.useCallback)(function () {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n\n      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n\n      return false;\n    });\n\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]); // A maximum of 100 search results are returned.\n\n      if (i === 99) {\n        return items;\n      }\n    }\n\n    return items;\n  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);\n\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');\n    var labelElements = [];\n    var a = item[labelKey].split(regx);\n    var b = item[labelKey].match(regx);\n\n    for (var i = 0; i < a.length; i++) {\n      labelElements.push(a[i]);\n\n      if (b[i]) {\n        labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: i,\n          className: prefix('cascader-search-match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 389,\n            columnNumber: 13\n          }\n        }, b[i]));\n      }\n    }\n\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      className: itemClasses,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 414,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onChange: function onChange(_value, checked, event) {\n        handleCheck(item, event, checked);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 415,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('cascader-cols'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 426,\n        columnNumber: 13\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 428,\n          columnNumber: 17\n        }\n      }, node[labelKey]);\n    }))));\n  };\n\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 445,\n        columnNumber: 9\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 449,\n        columnNumber: 13\n      }\n    }, locale.noResultsText));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n        left = _ref.left,\n        top = _ref.top,\n        className = _ref.className;\n\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 466,\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: 474,\n        columnNumber: 13\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      cascade: cascade,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 485,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var selectedElement = placeholder;\n\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 515,\n        columnNumber: 9\n      }\n    });\n  }\n\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, 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 _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n    classPrefix: classPrefix,\n    hasValue: hasValue,\n    countable: countable,\n    name: 'cascader',\n    appearance: appearance,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  if (inline) {\n    return renderDropdownMenu();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 555,\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: 564,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: targetRef,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 565,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n});\nvar _default = MultiCascader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\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 _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/MultiCascader/DropdownMenu.tsx\"));\n\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../Checkbox */ \"./src/Checkbox/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/MultiCascader/utils.ts\");\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../Cascader/utils */ \"./src/Cascader/utils.ts\");\n\nvar _utils3 = __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/MultiCascader/MultiCascader.tsx\",\n    _this = void 0;\n\nvar emptyArray = [];\n\nvar MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _selectedPaths;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$data = props.data,\n      data = _props$data === void 0 ? emptyArray : _props$data,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      defaultValue = props.defaultValue,\n      valueProp = props.value,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      disabled = props.disabled,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      _props$countable = props.countable,\n      countable = _props$countable === void 0 ? true : _props$countable,\n      _props$cascade = props.cascade,\n      cascade = _props$cascade === void 0 ? true : _props$cascade,\n      inline = props.inline,\n      placeholder = props.placeholder,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      menuWidth = props.menuWidth,\n      menuHeight = props.menuHeight,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      _props$uncheckableIte = props.uncheckableItemValues,\n      uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n      id = props.id,\n      getChildren = props.getChildren,\n      renderValue = props.renderValue,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      renderExtraFooter = props.renderExtraFooter,\n      onEnter = props.onEnter,\n      onExit = props.onExit,\n      onExited = props.onExited,\n      onClean = props.onClean,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onChange = props.onChange,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onCheck = props.onCheck,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"classPrefix\", \"defaultValue\", \"value\", \"valueKey\", \"labelKey\", \"childrenKey\", \"disabled\", \"disabledItemValues\", \"cleanable\", \"locale\", \"toggleAs\", \"style\", \"countable\", \"cascade\", \"inline\", \"placeholder\", \"placement\", \"appearance\", \"menuWidth\", \"menuHeight\", \"menuClassName\", \"menuStyle\", \"searchable\", \"uncheckableItemValues\", \"id\", \"getChildren\", \"renderValue\", \"renderMenu\", \"renderMenuItem\", \"renderExtraFooter\", \"onEnter\", \"onExit\", \"onExited\", \"onClean\", \"onSearch\", \"onSelect\", \"onChange\", \"onOpen\", \"onClose\", \"onCheck\"]);\n  var itemKeys = {\n    childrenKey: childrenKey,\n    labelKey: labelKey,\n    valueKey: valueKey\n  };\n\n  var _useState = (0, _react.useState)(false),\n      active = _useState[0],\n      setActive = _useState[1];\n\n  var _useFlattenData = (0, _utils.useFlattenData)(data, itemKeys),\n      flattenData = _useFlattenData.flattenData,\n      addFlattenData = _useFlattenData.addFlattenData;\n\n  var _useCascadeValue = (0, _utils.useCascadeValue)((0, _extends3.default)({}, itemKeys, {\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    value: valueProp || defaultValue\n  }), flattenData),\n      value = _useCascadeValue.value,\n      setValue = _useCascadeValue.setValue,\n      splitValue = _useCascadeValue.splitValue; // The columns displayed in the cascading panel.\n\n\n  var _useColumnData = (0, _utils.useColumnData)(flattenData),\n      columnData = _useColumnData.columnData,\n      setColumnData = _useColumnData.setColumnData,\n      addColumn = _useColumnData.addColumn,\n      romoveColumnByIndex = _useColumnData.romoveColumnByIndex,\n      enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;\n\n  (0, _utils3.useUpdateEffect)(function () {\n    enforceUpdateColumnData(data);\n  }, [data]); // The path after cascading data selection.\n\n  var _useState2 = (0, _react.useState)(),\n      selectedPaths = _useState2[0],\n      setSelectedPaths = _useState2[1];\n\n  var triggerRef = (0, _react.useRef)(null);\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var searchInputRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef\n  });\n\n  var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),\n      locale = _useCustom.locale,\n      rtl = _useCustom.rtl;\n\n  var selectedItems = flattenData.filter(function (item) {\n    return value.some(function (v) {\n      return v === item[valueKey];\n    });\n  }) || []; // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 ? void 0 : (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n    rtl: rtl,\n    data: flattenData,\n    valueKey: valueKey,\n    defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n    target: function target() {\n      return overlayRef.current;\n    },\n    callback: (0, _react.useCallback)(function (value) {\n      var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey,\n        isAttachChildren: true\n      }),\n          columns = _getColumnsAndPaths.columns,\n          paths = _getColumnsAndPaths.paths;\n\n      setColumnData(columns);\n      setSelectedPaths(paths);\n    }, [childrenKey, data, setColumnData, valueKey])\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setLayer = _useFocusItemValue.setLayer,\n      setKeys = _useFocusItemValue.setKeys,\n      onFocusItem = _useFocusItemValue.onKeyDown;\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n\n\n  var hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n\n  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState3 = (0, _react.useState)(''),\n      searchKeyword = _useState3[0],\n      setSearchKeyword = _useState3[1];\n\n  var handleEntered = (0, _react.useCallback)(function () {\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  }, [onOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setActive(false);\n    setSearchKeyword('');\n  }, []);\n  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {\n    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;\n\n    setSelectedPaths(cascadePaths);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);\n    var columnIndex = cascadePaths.length; // Lazy load node's children\n\n    if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {\n      node.loading = true;\n      var children = getChildren(node);\n\n      if (children instanceof Promise) {\n        children.then(function (data) {\n          node.loading = false;\n          node[childrenKey] = data;\n\n          if (targetRef.current) {\n            addFlattenData(data, node);\n            addColumn(data, columnIndex);\n          }\n        });\n      } else {\n        node.loading = false;\n        node[childrenKey] = children;\n        addFlattenData(children, node);\n        addColumn(children, columnIndex);\n      }\n    } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {\n      addColumn(node[childrenKey], columnIndex);\n    } else {\n      // Removes subsequent columns of the current column when the clicked node is a leaf node.\n      romoveColumnByIndex(columnIndex);\n    }\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);\n  }, [onSelect, getChildren, childrenKey, addFlattenData, addColumn, romoveColumnByIndex]);\n  var handleCheck = (0, _react.useCallback)(function (node, event, checked) {\n    var nodeValue = node[valueKey];\n    var nextValue = [];\n\n    if (cascade) {\n      nextValue = splitValue(node, checked, value).value;\n    } else {\n      nextValue = [].concat(value);\n\n      if (checked) {\n        nextValue.push(nodeValue);\n      } else {\n        nextValue = nextValue.filter(function (n) {\n          return n !== nodeValue;\n        });\n      }\n    }\n\n    setValue(nextValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);\n  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || !targetRef.current) {\n      return;\n    }\n\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  }, [data, disabled, onChange, setColumnData, setValue]);\n  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {\n    var _overlayRef$current;\n\n    var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return item[valueKey] === focusItemValue;\n    });\n    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(\"[data-key=\\\"\" + focusItemValue + \"\\\"] [type=\\\"checkbox\\\"]\");\n\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  }, [data, focusItemValue, handleCheck, valueKey]);\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({\n    toggle: !focusItemValue || !active,\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef,\n    searchInputRef: searchInputRef,\n    active: active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter\n  }, rest));\n  var handleSearch = (0, _react.useCallback)(function (value, event) {\n    setSearchKeyword(value);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);\n\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n\n    setKeys([]);\n  }, [onSearch, selectedPaths, setKeys, setLayer]);\n  var getSearchResult = (0, _react.useCallback)(function () {\n    var items = [];\n    var result = flattenData.filter(function (item) {\n      if (uncheckableItemValues.some(function (value) {\n        return item[valueKey] === value;\n      })) {\n        return false;\n      }\n\n      if (item[labelKey].match(new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'i'))) {\n        return true;\n      }\n\n      return false;\n    });\n\n    for (var i = 0; i < result.length; i++) {\n      items.push(result[i]); // A maximum of 100 search results are returned.\n\n      if (i === 99) {\n        return items;\n      }\n    }\n\n    return items;\n  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);\n\n  var renderSearchRow = function renderSearchRow(item, key) {\n    var _extends2;\n\n    var nodes = (0, _treeUtils.getNodeParents)(item);\n    var regx = new RegExp((0, _utils3.getSafeRegExpString)(searchKeyword), 'ig');\n    var labelElements = [];\n    var a = item[labelKey].split(regx);\n    var b = item[labelKey].match(regx);\n\n    for (var i = 0; i < a.length; i++) {\n      labelElements.push(a[i]);\n\n      if (b[i]) {\n        labelElements.push( /*#__PURE__*/_react.default.createElement(\"span\", {\n          key: i,\n          className: prefix('cascader-search-match'),\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 394,\n            columnNumber: 13\n          }\n        }, b[i]));\n      }\n    }\n\n    nodes.push((0, _extends3.default)({}, item, (_extends2 = {}, _extends2[labelKey] = labelElements, _extends2)));\n    var active = value.some(function (value) {\n      if (cascade) {\n        return nodes.some(function (node) {\n          return node[valueKey] === value;\n        });\n      }\n\n      return item[valueKey] === value;\n    });\n    var disabled = disabledItemValues.some(function (value) {\n      return nodes.some(function (node) {\n        return node[valueKey] === value;\n      });\n    });\n    var itemClasses = prefix('cascader-row', {\n      'cascader-row-disabled': disabled,\n      'cascader-row-focus': item[valueKey] === focusItemValue\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      key: key,\n      className: itemClasses,\n      \"aria-disabled\": disabled,\n      \"data-key\": item[valueKey],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 419,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {\n      disabled: disabled,\n      checked: active,\n      value: item[valueKey],\n      indeterminate: cascade && !active && (0, _utils.isSomeChildChecked)(item, value, {\n        valueKey: valueKey,\n        childrenKey: childrenKey\n      }),\n      onChange: function onChange(_value, checked, event) {\n        handleCheck(item, event, checked);\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 420,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix('cascader-cols'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 431,\n        columnNumber: 13\n      }\n    }, nodes.map(function (node, index) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        key: \"col-\" + index,\n        className: prefix('cascader-col'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 433,\n          columnNumber: 17\n        }\n      }, node[labelKey]);\n    }))));\n  };\n\n  var renderSearchResultPanel = function renderSearchResultPanel() {\n    if (searchKeyword === '') {\n      return null;\n    }\n\n    var items = getSearchResult();\n    return /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('cascader-search-panel'),\n      \"data-layer\": 0,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 450,\n        columnNumber: 9\n      }\n    }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('none'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 454,\n        columnNumber: 13\n      }\n    }, locale.noResultsText));\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var _ref = positionProps || {},\n        left = _ref.left,\n        top = _ref.top,\n        className = _ref.className;\n\n    var styles = (0, _extends3.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {\n      inline: inline\n    }));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 471,\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: 479,\n        columnNumber: 13\n      }\n    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {\n      id: id ? id + \"-listbox\" : undefined,\n      cascade: cascade,\n      menuWidth: menuWidth,\n      menuHeight: menuHeight,\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'picker-cascader-menu',\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderMenu: renderMenu,\n      renderMenuItem: renderMenuItem,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 490,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var selectedElement = placeholder;\n\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 520,\n        columnNumber: 9\n      }\n    });\n  }\n\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, 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 _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {\n    classPrefix: classPrefix,\n    hasValue: hasValue,\n    countable: countable,\n    name: 'cascader',\n    appearance: appearance,\n    cleanable: cleanable\n  })),\n      classes = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  if (inline) {\n    return renderDropdownMenu();\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    placement: placement,\n    onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 560,\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: 569,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: targetRef,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 570,\n      columnNumber: 11\n    }\n  }), selectedElement || locale.placeholder)));\n});\n\nMultiCascader.displayName = 'MultiCascader';\nMultiCascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {\n  value: _propTypes.default.array,\n  disabledItemValues: _propTypes.default.array,\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cascade: _propTypes.default.bool,\n  inline: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  menuWidth: _propTypes.default.number,\n  menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n  uncheckableItemValues: _propTypes.default.array,\n  searchable: _propTypes.default.bool,\n  renderMenuItem: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onCheck: _propTypes.default.func\n});\nvar _default = MultiCascader;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
 
 /***/ }),
 
@@ -3574,7 +3574,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\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.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      return (0, _attachParent.attachParent)(child, parent);\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.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?");
+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\nvar _attachParent = __webpack_require__(/*! ../utils/attachParent */ \"./src/utils/attachParent.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      return (0, _attachParent.attachParent)(child, parent);\n    });\n    parent[childrenKey] = nodes;\n    setFlattenData([].concat(flattenData, nodes));\n  }, [childrenKey, flattenData]);\n  (0, _react.useEffect)(function () {\n    setFlattenData((0, _treeUtils.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   * Remove subsequent columns of the specified column\n   * @param index\n   */\n\n\n  function romoveColumnByIndex(index) {\n    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));\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    romoveColumnByIndex: romoveColumnByIndex,\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?");
 
 /***/ }),
 
@@ -5037,7 +5037,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: 714,\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: 715,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 716,\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: 719,\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: 729,\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: 759,\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: 773,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treePrefix('nodes'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 781,\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: 783,\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: 788,\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: 815,\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: 824,\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: 869,\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: 879,\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: 880,\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 = 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\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      _props$menuMaxHeight = props.menuMaxHeight,\n      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n      menuStyle = props.menuStyle,\n      className = props.className,\n      disabled = props.disabled,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      _props$virtualized = props.virtualized,\n      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      defaultValue = props.defaultValue,\n      placeholder = props.placeholder,\n      searchKeyword = props.searchKeyword,\n      menuClassName = props.menuClassName,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      searchBy = props.searchBy,\n      toggleAs = props.toggleAs,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$childrenKey = props.childrenKey,\n      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n      draggable = props.draggable,\n      _props$defaultExpandA = props.defaultExpandAll,\n      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n      controlledExpandItemValues = props.expandItemValues,\n      _props$defaultExpandI = props.defaultExpandItemValues,\n      defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n      id = props.id,\n      listProps = props.listProps,\n      getChildren = props.getChildren,\n      renderTreeIcon = props.renderTreeIcon,\n      renderTreeNode = props.renderTreeNode,\n      onExit = props.onExit,\n      onExited = props.onExited,\n      onClean = props.onClean,\n      onOpen = props.onOpen,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onChange = props.onChange,\n      onEntered = props.onEntered,\n      onClose = props.onClose,\n      onDragEnd = props.onDragEnd,\n      onDragStart = props.onDragStart,\n      onDragEnter = props.onDragEnter,\n      onDragLeave = props.onDragLeave,\n      onDragOver = props.onDragOver,\n      onDrop = props.onDrop,\n      onExpand = props.onExpand,\n      renderExtraFooter = props.renderExtraFooter,\n      renderMenu = props.renderMenu,\n      renderValue = props.renderValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"appearance\", \"style\", \"showIndentLine\", \"value\", \"locale\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"searchable\", \"virtualized\", \"classPrefix\", \"defaultValue\", \"placeholder\", \"searchKeyword\", \"menuClassName\", \"menuAutoWidth\", \"searchBy\", \"toggleAs\", \"labelKey\", \"valueKey\", \"childrenKey\", \"draggable\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"id\", \"listProps\", \"getChildren\", \"renderTreeIcon\", \"renderTreeNode\", \"onExit\", \"onExited\", \"onClean\", \"onOpen\", \"onSearch\", \"onSelect\", \"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') || disabled || !cleanable) {\n      return;\n    }\n\n    if (!isControlled) {\n      setValue(null);\n    }\n\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  }, [cleanable, disabled, onChange, setValue, isControlled]);\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: 714,\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: 715,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('children'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 716,\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: 719,\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: 729,\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: 759,\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: 773,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: treePrefix('nodes'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 781,\n        columnNumber: 9\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 783,\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: 788,\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    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: triggerRef,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\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: 823,\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: 868,\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: 878,\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: 879,\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?");
 
 /***/ }),
 
@@ -5565,7 +5565,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\nvar _attachParent = __webpack_require__(/*! ./attachParent */ \"./src/utils/attachParent.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      flattenData.push((0, _attachParent.attachParent)(node, parent));\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  var flattenNodes = (0, _react.useRef)({});\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.current[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.current[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.current);\n  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues]);\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    // when data is changed, should clear the flattenNodes, avoid duplicate keys\n    flattenNodes.current = {};\n    flattenTreeData(data, '0');\n  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    forceUpdate: forceUpdate,\n    flattenNodes: flattenNodes.current,\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.getNodeFormattedRefKey = getNodeFormattedRefKey;\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\nvar _attachParent = __webpack_require__(/*! ./attachParent */ \"./src/utils/attachParent.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      flattenData.push((0, _attachParent.attachParent)(node, parent));\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  var flattenNodes = (0, _react.useRef)({});\n  var flattenTreeData = (0, _react.useCallback)(function (treeData, 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) {\n      var _extends2;\n\n      var value = node[valueKey];\n      /**\n       * because the value of the node's type is string or number,\n       * so it can used as the key of the object directly\n       * to avoid number value is converted to string. 1 and '1' will be convert to '1'\n       *  we used `String_` or `Number_` prefix\n       */\n\n      var refKey = getNodeFormattedRefKey(value);\n      node.refKey = refKey;\n      flattenNodes.current[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.current[refKey].parent = (0, _omit2.default)(parent, 'parent', 'children');\n      }\n\n      flattenTreeData(node[childrenKey], node, layer + 1);\n    });\n    callback === null || callback === void 0 ? void 0 : callback(flattenNodes.current);\n  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues]);\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    // when data is changed, should clear the flattenNodes, avoid duplicate keys\n    flattenNodes.current = {};\n    flattenTreeData(data);\n  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    forceUpdate: forceUpdate,\n    flattenNodes: flattenNodes.current,\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 * according to the value type to get the formatted valueKey of the node\n * @param value\n * @returns\n */\n\n\nfunction getNodeFormattedRefKey(value) {\n  return \"\" + (typeof value === 'number' ? 'Number_' : 'String_') + value;\n}\n\n//# sourceURL=webpack://rsuite/./src/utils/treeUtils.ts?");
 
 /***/ }),
 
@@ -7137,7 +7137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _on_
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/emptyFunction */ \"./node_modules/dom-lib/esm/utils/emptyFunction.js\");\n/* harmony import */ var _utils_normalizeWheel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/normalizeWheel */ \"./node_modules/dom-lib/esm/utils/normalizeWheel.js\");\n/* harmony import */ var _requestAnimationFramePolyfill__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./requestAnimationFramePolyfill */ \"./node_modules/dom-lib/esm/requestAnimationFramePolyfill.js\");\n\n\n\n\nvar WheelHandler = /*#__PURE__*/function () {\n  function WheelHandler(onWheel, handleScrollX, handleScrollY, stopPropagation) {\n    this.animationFrameID = null;\n    this.deltaX = 0;\n    this.deltaY = 0;\n    this.handleScrollX = null;\n    this.handleScrollY = null;\n    this.stopPropagation = null;\n    this.onWheelCallback = null;\n    this.didWheel = this.didWheel.bind(this);\n\n    if (typeof handleScrollX !== 'function') {\n      handleScrollX = handleScrollX ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    if (typeof handleScrollY !== 'function') {\n      handleScrollY = handleScrollY ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    if (typeof stopPropagation !== 'function') {\n      stopPropagation = stopPropagation ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    this.handleScrollX = handleScrollX;\n    this.handleScrollY = handleScrollY;\n    this.stopPropagation = stopPropagation;\n    this.onWheelCallback = onWheel;\n    this.onWheel = this.onWheel.bind(this);\n  }\n\n  var _proto = WheelHandler.prototype;\n\n  _proto.onWheel = function onWheel(event) {\n    var normalizedEvent = (0,_utils_normalizeWheel__WEBPACK_IMPORTED_MODULE_1__.default)(event);\n    var deltaX = this.deltaX + normalizedEvent.pixelX;\n    var deltaY = this.deltaY + normalizedEvent.pixelY;\n    var handleScrollX = this.handleScrollX(deltaX, deltaY);\n    var handleScrollY = this.handleScrollY(deltaY, deltaX);\n\n    if (!handleScrollX && !handleScrollY) {\n      return;\n    }\n\n    this.deltaX += handleScrollX ? normalizedEvent.pixelX : 0;\n    this.deltaY += handleScrollY ? normalizedEvent.pixelY : 0;\n    event.preventDefault();\n    var changed;\n\n    if (this.deltaX !== 0 || this.deltaY !== 0) {\n      if (this.stopPropagation()) {\n        event.stopPropagation();\n      }\n\n      changed = true;\n    }\n\n    if (changed === true && this.animationFrameID === null) {\n      this.animationFrameID = (0,_requestAnimationFramePolyfill__WEBPACK_IMPORTED_MODULE_2__.default)(this.didWheel);\n    }\n  };\n\n  _proto.didWheel = function didWheel() {\n    this.animationFrameID = null;\n    this.onWheelCallback(this.deltaX, this.deltaY);\n    this.deltaX = 0;\n    this.deltaY = 0;\n  };\n\n  return WheelHandler;\n}();\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (WheelHandler);\n\n//# sourceURL=webpack://rsuite/./node_modules/dom-lib/esm/WheelHandler.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/emptyFunction */ \"./node_modules/dom-lib/esm/utils/emptyFunction.js\");\n/* harmony import */ var _utils_normalizeWheel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/normalizeWheel */ \"./node_modules/dom-lib/esm/utils/normalizeWheel.js\");\n/* harmony import */ var _requestAnimationFramePolyfill__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./requestAnimationFramePolyfill */ \"./node_modules/dom-lib/esm/requestAnimationFramePolyfill.js\");\n\n\n\n\nvar swapWheelAxis = function swapWheelAxis(normalizedEvent) {\n  return {\n    spinX: normalizedEvent.spinY,\n    spinY: normalizedEvent.spinX,\n    pixelX: normalizedEvent.pixelY,\n    pixelY: normalizedEvent.pixelX\n  };\n};\n\nvar WheelHandler = /*#__PURE__*/function () {\n  function WheelHandler(onWheel, handleScrollX, handleScrollY, stopPropagation) {\n    this.animationFrameID = null;\n    this.deltaX = 0;\n    this.deltaY = 0;\n    this.handleScrollX = null;\n    this.handleScrollY = null;\n    this.stopPropagation = null;\n    this.onWheelCallback = null;\n    this.didWheel = this.didWheel.bind(this);\n\n    if (typeof handleScrollX !== 'function') {\n      handleScrollX = handleScrollX ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    if (typeof handleScrollY !== 'function') {\n      handleScrollY = handleScrollY ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    if (typeof stopPropagation !== 'function') {\n      stopPropagation = stopPropagation ? _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsTrue : _utils_emptyFunction__WEBPACK_IMPORTED_MODULE_0__.default.thatReturnsFalse;\n    }\n\n    this.handleScrollX = handleScrollX;\n    this.handleScrollY = handleScrollY;\n    this.stopPropagation = stopPropagation;\n    this.onWheelCallback = onWheel;\n    this.onWheel = this.onWheel.bind(this);\n  }\n\n  var _proto = WheelHandler.prototype;\n\n  _proto.onWheel = function onWheel(event) {\n    var normalizedEvent = (0,_utils_normalizeWheel__WEBPACK_IMPORTED_MODULE_1__.default)(event); // on some platforms (e.g. Win10), browsers do not automatically swap deltas for horizontal scroll\n\n    if (navigator.platform !== 'MacIntel' && event.shiftKey) {\n      normalizedEvent = swapWheelAxis(normalizedEvent);\n    }\n\n    var deltaX = this.deltaX + normalizedEvent.pixelX;\n    var deltaY = this.deltaY + normalizedEvent.pixelY;\n    var handleScrollX = this.handleScrollX(deltaX, deltaY);\n    var handleScrollY = this.handleScrollY(deltaY, deltaX);\n\n    if (!handleScrollX && !handleScrollY) {\n      return;\n    }\n\n    this.deltaX += handleScrollX ? normalizedEvent.pixelX : 0;\n    this.deltaY += handleScrollY ? normalizedEvent.pixelY : 0;\n    event.preventDefault();\n    var changed;\n\n    if (this.deltaX !== 0 || this.deltaY !== 0) {\n      if (this.stopPropagation()) {\n        event.stopPropagation();\n      }\n\n      changed = true;\n    }\n\n    if (changed === true && this.animationFrameID === null) {\n      this.animationFrameID = (0,_requestAnimationFramePolyfill__WEBPACK_IMPORTED_MODULE_2__.default)(this.didWheel);\n    }\n  };\n\n  _proto.didWheel = function didWheel() {\n    this.animationFrameID = null;\n    this.onWheelCallback(this.deltaX, this.deltaY);\n    this.deltaX = 0;\n    this.deltaY = 0;\n  };\n\n  return WheelHandler;\n}();\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (WheelHandler);\n\n//# sourceURL=webpack://rsuite/./node_modules/dom-lib/esm/WheelHandler.js?");
 
 /***/ }),
 
@@ -9826,7 +9826,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _bab
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Loader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {\n  var loadAnimation = props.loadAnimation,\n      loading = props.loading,\n      locale = props.locale,\n      addPrefix = props.addPrefix,\n      renderLoading = props.renderLoading;\n\n  if (!loadAnimation && !loading) {\n    return null;\n  }\n\n  var loadingElement = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: ref,\n    className: addPrefix('loader-wrapper')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: addPrefix('loader')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"i\", {\n    className: addPrefix('loader-icon')\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n    className: addPrefix('loader-text')\n  }, locale === null || locale === void 0 ? void 0 : locale.loading)));\n  return renderLoading ? renderLoading(loadingElement) : loadingElement;\n});\nLoader.displayName = 'Table.Loader';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Loader);\n\n//# sourceURL=webpack://rsuite/./node_modules/rsuite-table/es/Loader.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar Loader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {\n  var loadAnimation = props.loadAnimation,\n      loading = props.loading,\n      locale = props.locale,\n      addPrefix = props.addPrefix,\n      renderLoading = props.renderLoading;\n  var loadingElement = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: ref,\n    className: addPrefix('loader-wrapper')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: addPrefix('loader')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"i\", {\n    className: addPrefix('loader-icon')\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n    className: addPrefix('loader-text')\n  }, locale === null || locale === void 0 ? void 0 : locale.loading))); // Custom render a loader\n\n  if (typeof renderLoading === 'function') {\n    return loading ? renderLoading(loadingElement) : null;\n  } // If loadAnimation is true , it returns the DOM element,\n  // and controls whether the loader is displayed through CSS to achieve animation effect.\n\n\n  return loading || loadAnimation ? loadingElement : null;\n});\nLoader.displayName = 'Table.Loader';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Loader);\n\n//# sourceURL=webpack://rsuite/./node_modules/rsuite-table/es/Loader.js?");
 
 /***/ }),