rsuite 5.60.2 → 5.61.0

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -7,29 +7,22 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Windowing = require("../internals/Windowing");
-var _CheckTreeNode = _interopRequireDefault(require("./CheckTreeNode"));
-var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
-var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
 var _Picker = require("../internals/Picker");
-var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
-var _utils2 = require("./utils");
-var _propTypes2 = require("../internals/propTypes");
-var emptyArray = [];
-var itemSize = function itemSize() {
-  return 36;
-};
-
+var _CheckTreeView = _interopRequireDefault(require("../CheckTree/CheckTreeView"));
+var _utils2 = require("../CheckTree/utils");
+var _useTreeValue2 = _interopRequireDefault(require("../CheckTree/hooks/useTreeValue"));
+var _useFlattenTree = _interopRequireDefault(require("../Tree/hooks/useFlattenTree"));
+var _useTreeWithChildren2 = _interopRequireDefault(require("../Tree/hooks/useTreeWithChildren"));
+var _useExpandTree2 = _interopRequireDefault(require("../Tree/hooks/useExpandTree"));
+var _useFocusState2 = _interopRequireDefault(require("./hooks/useFocusState"));
+var _TreeProvider = require("../Tree/TreeProvider");
 /**
  * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.
  *
@@ -38,82 +31,81 @@ var itemSize = function itemSize() {
 var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$data = props.data,
-    data = _props$data === void 0 ? emptyArray : _props$data,
-    style = props.style,
+    id = props.id,
     _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
     _props$cleanable = props.cleanable,
     cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
     _props$countable = props.countable,
     countable = _props$countable === void 0 ? true : _props$countable,
-    searchBy = props.searchBy,
-    toggleAs = props.toggleAs,
-    searchKeyword = props.searchKeyword,
-    showIndentLine = props.showIndentLine,
-    overrideLocale = props.locale,
     _props$cascade = props.cascade,
     cascade = _props$cascade === void 0 ? true : _props$cascade,
-    disabled = props.disabled,
-    _props$valueKey = props.valueKey,
-    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-    _props$labelKey = props.labelKey,
-    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
     _props$childrenKey = props.childrenKey,
     childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
-    placeholder = props.placeholder,
-    controlledValue = props.value,
+    disabled = props.disabled,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
     _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
     _props$defaultExpandA = props.defaultExpandAll,
     defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
     _props$disabledItemVa = props.disabledItemValues,
-    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
     controlledExpandItemValues = props.expandItemValues,
     _props$defaultExpandI = props.defaultExpandItemValues,
-    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
-    _props$height = props.height,
-    height = _props$height === void 0 ? 360 : _props$height,
-    _props$menuMaxHeight = props.menuMaxHeight,
-    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
-    menuStyle = props.menuStyle,
+    defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI,
+    placeholder = props.placeholder,
+    popupClassName = props.popupClassName,
+    popupStyle = props.popupStyle,
+    _props$popupAutoWidth = props.popupAutoWidth,
+    popupAutoWidth = _props$popupAutoWidth === void 0 ? true : _props$popupAutoWidth,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    _props$treeHeight = props.treeHeight,
+    treeHeight = _props$treeHeight === void 0 ? 320 : _props$treeHeight,
+    toggleAs = props.toggleAs,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? popupAutoWidth : _props$menuAutoWidth,
+    DEPRECATED_menuClassName = props.menuClassName,
+    DEPRECATED_menuStyle = props.menuStyle,
+    style = props.style,
+    searchBy = props.searchBy,
+    searchKeyword = props.searchKeyword,
+    showIndentLine = props.showIndentLine,
     _props$searchable = props.searchable,
     searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    controlledValue = props.value,
     _props$virtualized = props.virtualized,
     virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-    menuClassName = props.menuClassName,
-    _props$menuAutoWidth = props.menuAutoWidth,
-    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
     _props$uncheckableIte = props.uncheckableItemValues,
-    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
-    id = props.id,
+    uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,
+    overrideLocale = props.locale,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
     listProps = props.listProps,
-    renderMenu = props.renderMenu,
     getChildren = props.getChildren,
     renderExtraFooter = props.renderExtraFooter,
-    onEntered = props.onEntered,
+    onEnter = props.onEnter,
     onChange = props.onChange,
     onClean = props.onClean,
-    onExited = props.onExited,
+    onExit = props.onExit,
     onSearch = props.onSearch,
     onSelect = props.onSelect,
     onSelectItem = props.onSelectItem,
     onScroll = props.onScroll,
     onExpand = props.onExpand,
     renderValue = props.renderValue,
+    DEPRECATED_renderMenu = props.renderMenu,
+    _props$renderTree = props.renderTree,
+    renderTree = _props$renderTree === void 0 ? DEPRECATED_renderMenu : _props$renderTree,
     renderTreeIcon = props.renderTreeIcon,
     renderTreeNode = props.renderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onExited", "onSearch", "onSelect", "onSelectItem", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
-  var _useContext = (0, _react.useContext)(_TreeContext.default),
-    inline = _useContext.inline;
-  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {
-      inline: inline
-    }),
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "id", "appearance", "cleanable", "countable", "cascade", "classPrefix", "childrenKey", "disabled", "data", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "placeholder", "popupClassName", "popupStyle", "popupAutoWidth", "placement", "treeHeight", "toggleAs", "menuAutoWidth", "menuClassName", "menuStyle", "style", "searchBy", "searchKeyword", "showIndentLine", "searchable", "valueKey", "value", "virtualized", "uncheckableItemValues", "locale", "labelKey", "listProps", "getChildren", "renderExtraFooter", "onEnter", "onChange", "onClean", "onExit", "onSearch", "onSelect", "onSelectItem", "onScroll", "onExpand", "renderValue", "renderMenu", "renderTree", "renderTreeIcon", "renderTreeNode"]);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -122,368 +114,71 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     searchInput = _usePickerRef.searchInput,
     treeView = _usePickerRef.treeView;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
-    rtl = _useCustom.rtl,
     locale = _useCustom.locale;
-  var _useState = (0, _react.useState)(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    activeNode = _useState2[0],
-    setActiveNode = _useState2[1];
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'check-tree'),
-    checkTreePrefix = _useClassNames2.prefix,
-    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;
-  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
-  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),
-    treeData = _useGetTreeNodeChildr.data,
-    setTreeData = _useGetTreeNodeChildr.setData,
-    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,
-    loadChildren = _useGetTreeNodeChildr.loadChildren;
-  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {
+    prefix = _useClassNames.prefix;
+  var _useTreeValue = (0, _useTreeValue2.default)(controlledValue, {
+      defaultValue: defaultValue,
+      uncheckableItemValues: uncheckableItemValues
+    }),
+    value = _useTreeValue[0],
+    setValue = _useTreeValue[1];
+  var itemDataKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useTreeWithChildren = (0, _useTreeWithChildren2.default)(data, itemDataKeys),
+    treeData = _useTreeWithChildren.treeData,
+    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
+    appendChild = _useTreeWithChildren.appendChild;
+  var _useExpandTree = (0, _useExpandTree2.default)(data, (0, _extends2.default)({}, itemDataKeys, {
       defaultExpandAll: defaultExpandAll,
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      defaultExpandItemValues: defaultExpandItemValues
+      defaultExpandItemValues: defaultExpandItemValues,
+      controlledExpandItemValues: controlledExpandItemValues,
+      onExpand: onExpand,
+      getChildren: getChildren,
+      appendChild: appendChild
     })),
-    expandItemValues = _useControlled2[0],
-    setExpandItemValues = _useControlled2[1];
-  var _useState3 = (0, _react.useState)(null),
-    focusItemValue = _useState3[0],
-    setFocusItemValue = _useState3[1];
-  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({
-      data: treeData,
-      labelKey: labelKey,
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      uncheckableItemValues: uncheckableItemValues,
-      callback: function callback(nodes) {
-        // after flattenData, always unSerialize check property value
-        unSerializeList({
-          nodes: nodes,
-          key: 'check',
-          value: value,
-          cascade: cascade,
-          uncheckableItemValues: uncheckableItemValues
-        });
-        forceUpdate();
-      }
-    }),
-    flattenNodes = _useFlattenTreeData.flattenNodes,
-    forceUpdate = _useFlattenTreeData.forceUpdate,
-    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,
-    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,
-    unSerializeList = _useFlattenTreeData.unSerializeList;
-  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({
-      labelKey: labelKey,
-      childrenKey: childrenKey,
-      searchKeyword: searchKeyword,
-      data: treeData,
-      searchBy: searchBy,
-      callback: function callback(searchKeyword, _filterData, event) {
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-      }
+    expandItemValues = _useExpandTree.expandItemValues,
+    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
+  var flattenedNodes = (0, _useFlattenTree.default)(treeData, (0, _extends2.default)({}, itemDataKeys, {
+    uncheckableItemValues: uncheckableItemValues,
+    multiple: true,
+    cascade: cascade,
+    value: value
+  }));
+  var selectedNodes = (0, _utils2.getSelectedItems)(flattenedNodes, value);
+  var _useTreeImperativeHan = (0, _TreeProvider.useTreeImperativeHandle)(),
+    register = _useTreeImperativeHan.register,
+    focusFirstNode = _useTreeImperativeHan.focusFirstNode;
+  var _useFocusState = (0, _useFocusState2.default)({
+      target: target,
+      onEnter: onEnter,
+      onExit: onExit
     }),
-    filteredData = _useTreeSearch.filteredData,
-    searchKeywordState = _useTreeSearch.searchKeywordState,
-    setSearchKeyword = _useTreeSearch.setSearchKeyword,
-    handleSearch = _useTreeSearch.handleSearch,
-    setFilteredData = _useTreeSearch.setFilteredData;
-  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),
-    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
-    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
-  /**
-   * get formatted nodes for render tree
-   * @params render - renderNode function. only used when virtualized setting false
-   */
-  var getFormattedNodes = function getFormattedNodes(render) {
-    if (virtualized) {
-      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
-        cascade: cascade,
-        searchKeyword: searchKeywordState
-      }).filter(function (item) {
-        return item.visible;
-      });
-    }
-    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {
-      childrenKey: childrenKey,
-      cascade: cascade
-    }).map(function (node) {
-      return render === null || render === void 0 ? void 0 : render(node, 1);
-    });
-  };
-  var getTreeNodeProps = function getTreeNodeProps(node, layer) {
-    return {
-      as: Component,
-      rtl: rtl,
-      value: node[valueKey],
-      label: node[labelKey],
-      layer: layer,
-      focus: focusItemValue === node[valueKey],
-      expand: node.expand,
-      visible: node.visible,
-      loading: loadingNodeValues.some(function (item) {
-        return item === node[valueKey];
-      }),
-      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {
-        disabledItemValues: disabledItemValues,
-        valueKey: valueKey
-      }),
-      nodeData: node,
-      checkState: node.checkState,
-      uncheckable: (0, _utils2.isNodeUncheckable)(node, {
-        uncheckableItemValues: uncheckableItemValues,
-        valueKey: valueKey
-      }),
-      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),
-      onSelect: handleSelect,
-      onExpand: handleExpand,
-      renderTreeNode: renderTreeNode,
-      renderTreeIcon: renderTreeIcon
-    };
-  };
-  var focusActiveNode = function focusActiveNode() {
-    if (list.current) {
-      (0, _treeUtils.focusToActiveTreeNode)({
-        list: list.current,
-        valueKey: valueKey,
-        selector: "." + checkTreePrefix('node-active'),
-        activeNode: activeNode,
-        virtualized: virtualized,
-        container: treeView.current,
-        formattedNodes: getFormattedNodes()
-      });
-    }
-  };
-  (0, _react.useEffect)(function () {
-    setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  (0, _react.useEffect)(function () {
-    setFilteredData(data, searchKeywordState);
-    setTreeData(data);
-  }, [data, searchKeywordState, setFilteredData, setTreeData]);
-  (0, _react.useEffect)(function () {
-    setFilteredData(treeData, searchKeywordState);
-  }, [treeData, searchKeywordState, setFilteredData]);
-  (0, _react.useEffect)(function () {
-    if (Array.isArray(controlledExpandItemValues)) {
-      setExpandItemValues(controlledExpandItemValues);
-    }
-  }, [controlledExpandItemValues, setExpandItemValues]);
-  (0, _react.useEffect)(function () {
-    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
-  }, [searchKeyword, setSearchKeyword]);
-  (0, _react.useEffect)(function () {
-    unSerializeList({
-      nodes: flattenNodes,
-      key: 'check',
-      value: value,
-      cascade: cascade,
-      uncheckableItemValues: uncheckableItemValues
-    });
-    forceUpdate();
-  }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);
-  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {
-    var currentNode = node.refKey ? nodes[node.refKey] : null;
-    if (cascade && currentNode) {
-      if (!checked) {
-        currentNode.check = checked;
-        currentNode.checkAll = checked;
-      } else {
-        if ((0, _utils2.isEveryChildChecked)(nodes, currentNode)) {
-          currentNode.check = true;
-          currentNode.checkAll = true;
-        } else {
-          currentNode.check = false;
-          currentNode.checkAll = false;
-        }
-      }
-      if (currentNode.parent) {
-        toggleUpChecked(nodes, currentNode.parent, checked);
-      }
-    }
-  });
-  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {
-    var currentNode = node.refKey ? nodes[node.refKey] : null;
-    if (!currentNode) {
-      return;
-    }
-    currentNode.check = isChecked;
-    if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {
-      currentNode.checkAll = false;
-    } else {
-      currentNode.checkAll = isChecked;
-      currentNode[childrenKey].forEach(function (child) {
-        toggleDownChecked(nodes, child, isChecked);
-      });
-    }
-  });
-  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {
-    var nodes = (0, _cloneDeep2.default)(flattenNodes);
-    toggleDownChecked(nodes, node, isChecked);
-    node.parent && toggleUpChecked(nodes, node.parent, isChecked);
-    var values = serializeListOnlyParent(nodes, 'check');
-    // filter uncheckableItemValues
-    return values.filter(function (v) {
-      return !uncheckableItemValues.includes(v);
-    });
-  });
-
-  // TODO-Doma
-  // Replace `getKeyParentMap` with `getParentMap`
-  var itemParentMap = (0, _react.useMemo)(function () {
-    return (0, _treeUtils.getKeyParentMap)(data, function (node) {
-      return node[valueKey];
-    }, function (node) {
-      return node[childrenKey];
-    });
-  }, [childrenKey, data, valueKey]);
-  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {
-    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
-    if (!node || !currentNode) {
-      return;
-    }
-    var selectedValues = toggleChecked(node, !currentNode.check);
-    if (!isControlled) {
-      unSerializeList({
-        nodes: flattenNodes,
-        key: 'check',
-        value: selectedValues,
-        cascade: cascade,
-        uncheckableItemValues: uncheckableItemValues
-      });
-      setValue(selectedValues);
-    }
-    setActiveNode(node);
-    setFocusItemValue(node[valueKey]);
-    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);
-    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {
-      return itemParentMap.get(item[valueKey]);
-    }));
-  });
-  var handleOpen = (0, _utils.useEventCallback)(function () {
-    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
-    focusActiveNode();
-    setActive(true);
-  });
-  var handleClose = (0, _utils.useEventCallback)(function () {
-    var _target$current;
-    setSearchKeyword('');
-    setFocusItemValue(null);
-    setActive(false);
-
-    /**
-     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
-     */
-    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
-  });
-  var handleExpand = (0, _utils.useEventCallback)(function (node) {
-    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
-      node: node,
-      isExpand: !node.expand,
-      expandItemValues: expandItemValues,
-      valueKey: valueKey
-    });
-    setExpandItemValues(nextExpandItemValues);
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {
-      valueKey: valueKey,
-      childrenKey: childrenKey
-    }));
-    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
-      loadChildren(node, getChildren);
-    }
-  });
+    focusItemValue = _useFocusState.focusItemValue,
+    setFocusItemValue = _useFocusState.setFocusItemValue,
+    active = _useFocusState.active,
+    triggerProps = _useFocusState.triggerProps;
   var handleClean = (0, _utils.useEventCallback)(function (event) {
     var target = event.target;
     // exclude searchbox
     if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
-    setActiveNode(null);
     setFocusItemValue(null);
-    if (!isControlled) {
-      setValue([]);
-      unSerializeList({
-        nodes: flattenNodes,
-        key: 'check',
-        value: [],
-        cascade: cascade,
-        uncheckableItemValues: uncheckableItemValues
-      });
-    }
+    setValue([]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
   });
-  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {
-    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
-      disabledItemValues: disabledItemValues,
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      expandItemValues: expandItemValues
-    }, (0, _treeUtils.isSearching)(searchKeywordState));
-    var selector = "." + checkTreePrefix('node-label');
-    var focusProps = {
-      focusItemValue: focusItemValue,
-      focusableItems: focusableItems,
-      treeNodesRefs: treeNodesRefs,
-      selector: selector,
-      valueKey: valueKey,
-      callback: function callback(nextFocusItemValue) {
-        setFocusItemValue(nextFocusItemValue);
-      }
-    };
-    if (key === _utils.KEY_VALUES.DOWN) {
-      (0, _treeUtils.focusNextItem)(focusProps);
-      return;
-    }
-    if (key === _utils.KEY_VALUES.UP) {
-      (0, _treeUtils.focusPreviousItem)(focusProps);
-    }
-  });
-  var handleLeftArrow = (0, _utils.useEventCallback)(function () {
-    if ((0, _isNil2.default)(focusItemValue)) return;
-    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
-    (0, _treeUtils.leftArrowHandler)({
-      focusItem: focusItem,
-      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
-      onExpand: handleExpand,
-      childrenKey: childrenKey,
-      onFocusItem: function onFocusItem() {
-        var _focusItem$parent, _focusItem$parent2;
-        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);
-        (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'));
-      }
-    });
-  });
-  var handleRightArrow = (0, _utils.useEventCallback)(function () {
-    if ((0, _isNil2.default)(focusItemValue)) return;
-    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
-    (0, _treeUtils.rightArrowHandler)({
-      focusItem: focusItem,
-      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
-      childrenKey: childrenKey,
-      onExpand: handleExpand,
-      onFocusItem: function onFocusItem() {
-        handleFocusItem(_utils.KEY_VALUES.DOWN);
+  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {
+    (0, _Picker.onMenuKeyDown)(event, {
+      del: handleClean,
+      down: function down() {
+        return focusFirstNode();
       }
     });
   });
-  var selectActiveItem = function selectActiveItem(event) {
-    if ((0, _isNil2.default)(focusItemValue)) return;
-    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
-    if (!(0, _utils2.isNodeUncheckable)(activeItem, {
-      uncheckableItemValues: uncheckableItemValues,
-      valueKey: valueKey
-    }) && activeItem !== null) {
-      handleSelect(activeItem, event);
-    }
-  };
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
     trigger: trigger,
@@ -492,196 +187,82 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     searchInput: searchInput,
     active: active,
     onExit: handleClean,
-    onMenuKeyDown: function onMenuKeyDown(event) {
-      (0, _Picker.onMenuKeyDown)(event, {
-        down: function down() {
-          return handleFocusItem(_utils.KEY_VALUES.DOWN);
-        },
-        up: function up() {
-          return handleFocusItem(_utils.KEY_VALUES.UP);
-        },
-        left: rtl ? handleRightArrow : handleLeftArrow,
-        right: rtl ? handleLeftArrow : handleRightArrow,
-        enter: selectActiveItem,
-        del: handleClean
-      });
-    }
+    onMenuKeyDown: handleTreeKeyDown
   }, rest));
-  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {
-    if (!treeView.current) {
-      return;
-    }
-    (0, _Picker.onMenuKeyDown)(event, {
-      down: function down() {
-        return handleFocusItem(_utils.KEY_VALUES.DOWN);
-      },
-      up: function up() {
-        return handleFocusItem(_utils.KEY_VALUES.UP);
-      },
-      left: rtl ? handleRightArrow : handleLeftArrow,
-      right: rtl ? handleLeftArrow : handleRightArrow,
-      enter: selectActiveItem
-    });
+  var handleChange = (0, _utils.useEventCallback)(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
   });
-  var renderNode = function renderNode(node, layer) {
-    var visible = node.visible,
-      refKey = node.refKey; // when searching, all nodes should be expand
-    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
-    if (!visible) {
-      return null;
-    }
-    var children = node[childrenKey];
-    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);
-    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
-      /**
-       * spread operator don't copy unenumerable properties
-       * so we need to copy them manually
-       */
-      parent: node.parent,
-      expand: expand
-    }), layer), {
-      hasChildren: visibleChildren
-    });
-    if (nodeProps.hasChildren) {
-      var _merge;
-      layer += 1;
-      var openClass = checkTreePrefix('open');
-      var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));
-      var nodes = children || [];
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: childrenClass,
-        key: node[valueKey]
-      }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {
-        ref: function ref(_ref) {
-          return saveTreeNodeRef(_ref, refKey);
-        }
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: checkTreePrefix('group'),
-        role: "group"
-      }, nodes.map(function (child) {
-        return renderNode(child, layer);
-      }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
-        className: checkTreePrefix('indent-line'),
-        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true)
-      })));
-    }
-    return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({
-      key: node[valueKey],
-      ref: function ref(_ref2) {
-        return saveTreeNodeRef(_ref2, refKey);
-      }
-    }, nodeProps));
-  };
-  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
-    var index = _ref3.index,
-      style = _ref3.style,
-      data = _ref3.data;
-    var node = data[index];
-    var layer = node.layer,
-      refKey = node.refKey,
-      visible = node.visible;
-    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
-    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
-      /**
-       * spread operator don't copy unenumerable properties
-       * so we need to copy them manually
-       */
-      parent: node.parent,
-      expand: expand
-    }), layer), {
-      hasChildren: node.hasChildren
-    });
-    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({
-      style: style,
-      ref: function ref(_ref4) {
-        return saveTreeNodeRef(_ref4, refKey);
+  var treeContext = (0, _react.useMemo)(function () {
+    return {
+      register: register,
+      props: {
+        labelKey: labelKey,
+        valueKey: valueKey,
+        childrenKey: childrenKey,
+        virtualized: virtualized,
+        renderTreeIcon: renderTreeIcon,
+        renderTreeNode: renderTreeNode
       }
-    }, nodeProps));
-  };
-  var renderCheckTree = function renderCheckTree() {
-    var _merge2, _merge3;
-    var classes = merge(withCheckTreeClassPrefix({
-      'without-children': !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey),
-      virtualized: virtualized
-    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));
-    var formattedNodes = getFormattedNodes(renderNode);
-    if (!formattedNodes.some(function (v) {
-      return v !== null;
-    })) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('none')
-      }, locale.noResultsText);
-    }
-    var treeNodesClass = merge(checkTreePrefix('root'), (_merge3 = {}, _merge3[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge3));
-    var treeViewProps = {
-      ref: treeView
     };
-    if (inline) {
-      treeViewProps = (0, _extends2.default)({
-        ref: root,
-        style: (0, _extends2.default)({
-          height: height
-        }, style)
-      }, rest);
-    }
-    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {
-      multiselectable: true,
-      treeRootClassName: treeNodesClass,
-      className: classes,
-      onScroll: onScroll,
-      onKeyDown: inline ? handleTreeKeydown : undefined
-    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
-      defaultHeight: inline ? height : menuMaxHeight,
-      style: {
-        width: 'auto',
-        height: 'auto'
-      }
-    }, function (_ref5) {
-      var height = _ref5.height;
-      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
-        ref: list,
-        height: height,
-        itemSize: itemSize,
-        itemCount: formattedNodes.length,
-        itemData: formattedNodes
-      }, listProps), renderVirtualListNode);
-    }) : formattedNodes);
-  };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  }, [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);
+  var checkTreeView = /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {
+    value: treeContext
+  }, /*#__PURE__*/_react.default.createElement(_CheckTreeView.default, {
+    ref: treeView,
+    disabledItemValues: disabledItemValues,
+    expandItemValues: expandItemValues,
+    uncheckableItemValues: uncheckableItemValues,
+    cascade: cascade,
+    virtualized: virtualized,
+    data: treeData,
+    height: treeHeight,
+    showIndentLine: showIndentLine,
+    listProps: listProps,
+    listRef: list,
+    searchBy: searchBy,
+    searchable: searchable,
+    searchKeyword: searchKeyword,
+    searchInputRef: searchInput,
+    onScroll: onScroll,
+    onSelect: onSelect,
+    onSelectItem: onSelectItem,
+    onExpand: handleExpandTreeNode,
+    onSearch: onSearch,
+    onChange: handleChange,
+    onFocusItem: setFocusItemValue,
+    value: value,
+    loadingNodeValues: loadingNodeValues,
+    flattenedNodes: flattenedNodes
+  }));
+  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = (0, _classnames.default)(className, menuClassName, prefix('check-tree-menu'));
-    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {
+    var classes = (0, _classnames.default)(className, popupClassName, DEPRECATED_menuClassName, prefix('check-tree-menu'));
+    var mergedMenuStyle = (0, _extends2.default)({}, popupStyle, DEPRECATED_menuStyle, {
       left: left,
       top: top
     });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
-      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger
-    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
-      placeholder: locale.searchPlaceholder,
-      onChange: handleSearch,
-      value: searchKeywordState,
-      inputRef: searchInput
-    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
+    }, renderTree ? renderTree(checkTreeView) : checkTreeView, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  var selectedItems = (0, _react.useMemo)(function () {
-    return (0, _utils2.getSelectedItems)(flattenNodes, value);
-  }, [flattenNodes, value]);
+
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
-  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);
+  var hasValidValue = selectedNodes.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);
   var selectedElement = placeholder;
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {
-      selectedItems: selectedItems,
+      selectedItems: selectedNodes,
       countable: countable,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -691,7 +272,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       locale: locale
     });
     if ((0, _isFunction2.default)(renderValue)) {
-      selectedElement = renderValue(value, selectedItems, selectedElement);
+      selectedElement = renderValue(value, selectedNodes, selectedElement);
       if ((0, _isNil2.default)(selectedElement)) {
         hasValidValue = false;
       }
@@ -708,21 +289,15 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  if (inline) {
-    return renderCheckTree();
-  }
-  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({
     id: id,
     popupType: "tree",
     multiple: true,
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
-    onEnter: handleOpen,
-    onEntered: onEntered,
-    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),
-    speaker: renderDropdownMenu
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+    speaker: renderTreeView
+  }, triggerProps), /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     style: style,
     ref: root
@@ -742,30 +317,5 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';
-CheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
-  height: _propTypes.default.number,
-  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
-  locale: _propTypes.default.any,
-  cascade: _propTypes.default.bool,
-  countable: _propTypes.default.bool,
-  searchable: _propTypes.default.bool,
-  virtualized: _propTypes.default.bool,
-  searchKeyword: _propTypes.default.string,
-  menuAutoWidth: _propTypes.default.bool,
-  defaultExpandAll: _propTypes.default.bool,
-  containerPadding: _propTypes.default.number,
-  disabledItemValues: _propTypes.default.array,
-  expandItemValues: _propTypes.default.array,
-  defaultExpandItemValues: _propTypes.default.array,
-  uncheckableItemValues: _propTypes.default.array,
-  onSearch: _propTypes.default.func,
-  onExpand: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  renderMenu: _propTypes.default.func,
-  renderTreeNode: _propTypes.default.func,
-  renderTreeIcon: _propTypes.default.func,
-  searchBy: _propTypes.default.func,
-  onScroll: _propTypes.default.func
-});
 var _default = CheckTreePicker;
 exports.default = _default;