rsuite 5.23.0 → 5.23.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.23.1](https://github.com/rsuite/rsuite/compare/v5.23.0...v5.23.1) (2022-12-02)
+
+### Bug Fixes
+
+- **AutoComplete:** fix animation props being passed on Input ([#2950](https://github.com/rsuite/rsuite/issues/2950)) ([4c21993](https://github.com/rsuite/rsuite/commit/4c21993531ef775e9b505d8d1d1fafce04e1b49b))
+- **MultiCascader:** fix unable to search for child items when `childKey` is set a value other than "children" ([#2926](https://github.com/rsuite/rsuite/issues/2926)) ([5d35f6c](https://github.com/rsuite/rsuite/commit/5d35f6c1639a49174274ccabf2edd3b40a388c32))
+
 # [5.23.0](https://github.com/rsuite/rsuite/compare/v5.22.2...v5.23.0) (2022-11-25)
 
 ### Bug Fixes

package/cjs/AutoComplete/AutoComplete.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
 var _Input = _interopRequireDefault(require("../Input"));
 
 var _utils = require("../utils");
@@ -174,6 +176,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     disabled: disabled
   }));
   var triggerRef = (0, _react.useRef)(null);
+
+  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys)),
+      htmlInputProps = _partitionHTMLProps[0],
+      restProps = _partitionHTMLProps[1];
+
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef
@@ -217,10 +224,10 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     trigger: ['click', 'focus'],
     open: open || focus && hasItems,
     speaker: renderDropdownMenu
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: classes,
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, rest, {
+  }, restProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
     id: id,
     disabled: disabled,
     value: value,

package/cjs/MultiCascader/utils.js

@@ -192,7 +192,7 @@ exports.removeAllChildrenValue = removeAllChildrenValue;
 function useFlattenData(data, itemKeys) {
   var childrenKey = itemKeys.childrenKey;
 
-  var _useState = (0, _react.useState)((0, _treeUtils.flattenTree)(data)),
+  var _useState = (0, _react.useState)((0, _treeUtils.flattenTree)(data, itemKeys.childrenKey)),
       flattenData = _useState[0],
       setFlattenData = _useState[1];
 
@@ -204,8 +204,8 @@ function useFlattenData(data, itemKeys) {
     setFlattenData([].concat(flattenData, nodes));
   }, [childrenKey, flattenData]);
   (0, _react.useEffect)(function () {
-    setFlattenData((0, _treeUtils.flattenTree)(data));
-  }, [data]);
+    setFlattenData((0, _treeUtils.flattenTree)(data, itemKeys.childrenKey));
+  }, [data, itemKeys.childrenKey]);
   return {
     addFlattenData: addFlattenData,
     flattenData: flattenData

package/dist/rsuite.js

@@ -1687,7 +1687,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../Animation/utils */ \"./src/Animation/utils.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/AutoComplete/AutoComplete.tsx\",\n    _this = void 0;\n\n/**\n * TODO: Remove unnecessary .rs-auto-complete element\n * TODO: role=combobox and aria-autocomplete on input element\n */\nvar AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      disabled = props.disabled,\n      className = props.className,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      _props$selectOnEnter = props.selectOnEnter,\n      selectOnEnter = _props$selectOnEnter === void 0 ? true : _props$selectOnEnter,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'auto-complete' : _props$classPrefix,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      data = props.data,\n      valueProp = props.value,\n      open = props.open,\n      style = props.style,\n      menuClassName = props.menuClassName,\n      id = props.id,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      onSelect = props.onSelect,\n      filterBy = props.filterBy,\n      onKeyDown = props.onKeyDown,\n      onChange = props.onChange,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onMenuFocus = props.onMenuFocus,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"disabled\", \"className\", \"placement\", \"selectOnEnter\", \"classPrefix\", \"defaultValue\", \"menuAutoWidth\", \"data\", \"value\", \"open\", \"style\", \"menuClassName\", \"id\", \"renderMenu\", \"renderMenuItem\", \"onSelect\", \"filterBy\", \"onKeyDown\", \"onChange\", \"onClose\", \"onOpen\", \"onFocus\", \"onBlur\", \"onMenuFocus\"]);\n  var datalist = (0, _utils3.transformData)(data);\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var _useState = (0, _react.useState)(false),\n      focus = _useState[0],\n      setFocus = _useState[1];\n\n  var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];\n  var hasItems = items.length > 0;\n  var overlayRef = (0, _react.useRef)(null);\n  var isMounted = (0, _utils.useIsMounted)(); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    data: datalist,\n    callback: onMenuFocus,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      handleKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleKeyDownEvent = function handleKeyDownEvent(event) {\n    if (!overlayRef.current) {\n      return;\n    }\n\n    (0, _Picker.onMenuKeyDown)(event, {\n      enter: selectOnEnter ? selectFocusMenuItem : undefined,\n      esc: handleClose\n    });\n    handleKeyDown(event);\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n\n  var selectFocusMenuItem = function selectFocusMenuItem(event) {\n    if (!focusItemValue) {\n      return;\n    }\n\n    var focusItem = datalist.find(function (item) {\n      return (item === null || item === void 0 ? void 0 : item.value) === focusItemValue;\n    });\n    setValue(focusItemValue);\n    setFocusItemValue(focusItemValue);\n    handleSelect(focusItem, event);\n\n    if (value !== focusItemValue) {\n      handleChangeValue(focusItemValue, event);\n    }\n\n    handleClose();\n  };\n\n  var handleSelect = (0, _react.useCallback)(function (item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);\n  }, [onSelect]);\n  var handleChangeValue = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n\n  var handleChange = function handleChange(value, event) {\n    setFocusItemValue('');\n    setValue(value);\n    setFocus(true);\n    handleChangeValue(value, event);\n  };\n\n  var handleClose = (0, _react.useCallback)(function () {\n    if (isMounted()) {\n      setFocus(false);\n      onClose === null || onClose === void 0 ? void 0 : onClose();\n    }\n  }, [isMounted, onClose]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    setFocus(true);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen]);\n  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {\n    setValue(nextItemValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(item, event);\n\n    if (value !== nextItemValue) {\n      handleChangeValue(nextItemValue, event);\n    }\n\n    handleClose();\n  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);\n  var handleInputFocus = (0, _react.useCallback)(function (event) {\n    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    handleOpen();\n  }, [onFocus, handleOpen]);\n  var handleInputBlur = (0, _react.useCallback)(function (event) {\n    setTimeout(handleClose, 300);\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [onBlur, handleClose]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    disabled: disabled\n  }));\n  var triggerRef = (0, _react.useRef)(null);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef\n  });\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var styles = {\n      left: left,\n      top: top\n    };\n\n    var menu = /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      classPrefix: \"auto-complete-menu\",\n      dropdownMenuItemClassPrefix: \"auto-complete-item\",\n      dropdownMenuItemAs: _Picker.DropdownMenuItem,\n      focusItemValue: focusItemValue,\n      onSelect: handleItemSelect,\n      renderMenuItem: renderMenuItem,\n      data: items,\n      className: menuClassName,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 241,\n        columnNumber: 9\n      }\n    });\n\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      className: className,\n      onKeyDown: handleKeyDownEvent,\n      target: triggerRef,\n      autoWidth: menuAutoWidth,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 255,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    ref: triggerRef,\n    placement: placement,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    trigger: ['click', 'focus'],\n    open: open || focus && hasItems,\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 269,\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: 277,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, rest, {\n    id: id,\n    disabled: disabled,\n    value: value,\n    onBlur: handleInputBlur,\n    onFocus: handleInputFocus,\n    onChange: handleChange,\n    onKeyDown: handleKeyDownEvent,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 278,\n      columnNumber: 11\n    }\n  }))));\n});\n\nAutoComplete.displayName = 'AutoComplete';\nAutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {\n  data: _propTypes.default.array,\n  disabled: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onChange: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  value: _propTypes.default.string,\n  defaultValue: _propTypes.default.string,\n  className: _propTypes.default.string,\n  menuClassName: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT),\n  onFocus: _propTypes.default.func,\n  onMenuFocus: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onClose: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  style: _propTypes.default.object,\n  open: _propTypes.default.bool,\n  selectOnEnter: _propTypes.default.bool,\n  filterBy: _propTypes.default.func\n});\nvar _default = AutoComplete;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/AutoComplete.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _utils2 = __webpack_require__(/*! ../Animation/utils */ \"./src/Animation/utils.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/AutoComplete/AutoComplete.tsx\",\n    _this = void 0;\n\n/**\n * TODO: Remove unnecessary .rs-auto-complete element\n * TODO: role=combobox and aria-autocomplete on input element\n */\nvar AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      disabled = props.disabled,\n      className = props.className,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      _props$selectOnEnter = props.selectOnEnter,\n      selectOnEnter = _props$selectOnEnter === void 0 ? true : _props$selectOnEnter,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'auto-complete' : _props$classPrefix,\n      _props$defaultValue = props.defaultValue,\n      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      data = props.data,\n      valueProp = props.value,\n      open = props.open,\n      style = props.style,\n      menuClassName = props.menuClassName,\n      id = props.id,\n      renderMenu = props.renderMenu,\n      renderMenuItem = props.renderMenuItem,\n      onSelect = props.onSelect,\n      filterBy = props.filterBy,\n      onKeyDown = props.onKeyDown,\n      onChange = props.onChange,\n      onClose = props.onClose,\n      onOpen = props.onOpen,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onMenuFocus = props.onMenuFocus,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"disabled\", \"className\", \"placement\", \"selectOnEnter\", \"classPrefix\", \"defaultValue\", \"menuAutoWidth\", \"data\", \"value\", \"open\", \"style\", \"menuClassName\", \"id\", \"renderMenu\", \"renderMenuItem\", \"onSelect\", \"filterBy\", \"onKeyDown\", \"onChange\", \"onClose\", \"onOpen\", \"onFocus\", \"onBlur\", \"onMenuFocus\"]);\n  var datalist = (0, _utils3.transformData)(data);\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1];\n\n  var _useState = (0, _react.useState)(false),\n      focus = _useState[0],\n      setFocus = _useState[1];\n\n  var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];\n  var hasItems = items.length > 0;\n  var overlayRef = (0, _react.useRef)(null);\n  var isMounted = (0, _utils.useIsMounted)(); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {\n    data: datalist,\n    callback: onMenuFocus,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      handleKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleKeyDownEvent = function handleKeyDownEvent(event) {\n    if (!overlayRef.current) {\n      return;\n    }\n\n    (0, _Picker.onMenuKeyDown)(event, {\n      enter: selectOnEnter ? selectFocusMenuItem : undefined,\n      esc: handleClose\n    });\n    handleKeyDown(event);\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  };\n\n  var selectFocusMenuItem = function selectFocusMenuItem(event) {\n    if (!focusItemValue) {\n      return;\n    }\n\n    var focusItem = datalist.find(function (item) {\n      return (item === null || item === void 0 ? void 0 : item.value) === focusItemValue;\n    });\n    setValue(focusItemValue);\n    setFocusItemValue(focusItemValue);\n    handleSelect(focusItem, event);\n\n    if (value !== focusItemValue) {\n      handleChangeValue(focusItemValue, event);\n    }\n\n    handleClose();\n  };\n\n  var handleSelect = (0, _react.useCallback)(function (item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);\n  }, [onSelect]);\n  var handleChangeValue = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n\n  var handleChange = function handleChange(value, event) {\n    setFocusItemValue('');\n    setValue(value);\n    setFocus(true);\n    handleChangeValue(value, event);\n  };\n\n  var handleClose = (0, _react.useCallback)(function () {\n    if (isMounted()) {\n      setFocus(false);\n      onClose === null || onClose === void 0 ? void 0 : onClose();\n    }\n  }, [isMounted, onClose]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    setFocus(true);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen]);\n  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {\n    setValue(nextItemValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(item, event);\n\n    if (value !== nextItemValue) {\n      handleChangeValue(nextItemValue, event);\n    }\n\n    handleClose();\n  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);\n  var handleInputFocus = (0, _react.useCallback)(function (event) {\n    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n    handleOpen();\n  }, [onFocus, handleOpen]);\n  var handleInputBlur = (0, _react.useCallback)(function (event) {\n    setTimeout(handleClose, 300);\n    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n  }, [onBlur, handleClose]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix({\n    disabled: disabled\n  }));\n  var triggerRef = (0, _react.useRef)(null);\n\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys)),\n      htmlInputProps = _partitionHTMLProps[0],\n      restProps = _partitionHTMLProps[1];\n\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef\n  });\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var styles = {\n      left: left,\n      top: top\n    };\n\n    var menu = /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      classPrefix: \"auto-complete-menu\",\n      dropdownMenuItemClassPrefix: \"auto-complete-item\",\n      dropdownMenuItemAs: _Picker.DropdownMenuItem,\n      focusItemValue: focusItemValue,\n      onSelect: handleItemSelect,\n      renderMenuItem: renderMenuItem,\n      data: items,\n      className: menuClassName,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 250,\n        columnNumber: 9\n      }\n    });\n\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      style: styles,\n      className: className,\n      onKeyDown: handleKeyDownEvent,\n      target: triggerRef,\n      autoWidth: menuAutoWidth,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 264,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu);\n  };\n\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    ref: triggerRef,\n    placement: placement,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    trigger: ['click', 'focus'],\n    open: open || focus && hasItems,\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 278,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes,\n    style: style\n  }, restProps, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 286,\n      columnNumber: 9\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {\n    id: id,\n    disabled: disabled,\n    value: value,\n    onBlur: handleInputBlur,\n    onFocus: handleInputFocus,\n    onChange: handleChange,\n    onKeyDown: handleKeyDownEvent,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 287,\n      columnNumber: 11\n    }\n  }))));\n});\n\nAutoComplete.displayName = 'AutoComplete';\nAutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {\n  data: _propTypes.default.array,\n  disabled: _propTypes.default.bool,\n  onSelect: _propTypes.default.func,\n  onChange: _propTypes.default.func,\n  classPrefix: _propTypes.default.string,\n  value: _propTypes.default.string,\n  defaultValue: _propTypes.default.string,\n  className: _propTypes.default.string,\n  menuClassName: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  placement: _propTypes.default.oneOf(_utils.PLACEMENT),\n  onFocus: _propTypes.default.func,\n  onMenuFocus: _propTypes.default.func,\n  onBlur: _propTypes.default.func,\n  onKeyDown: _propTypes.default.func,\n  onOpen: _propTypes.default.func,\n  onClose: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  style: _propTypes.default.object,\n  open: _propTypes.default.bool,\n  selectOnEnter: _propTypes.default.bool,\n  filterBy: _propTypes.default.func\n});\nvar _default = AutoComplete;\nexports.default = _default;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/AutoComplete.tsx?");
 
 /***/ }),
 
@@ -3524,7 +3524,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   * 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?");
+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, itemKeys.childrenKey)),\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, itemKeys.childrenKey));\n  }, [data, itemKeys.childrenKey]);\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?");
 
 /***/ }),