rsuite 5.60.1 → 5.61.0

package/esm/TreePicker/TreePicker.js

@@ -3,25 +3,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isFunction from "lodash/isFunction";
 import _isNil from "lodash/isNil";
-import _isUndefined from "lodash/isUndefined";
 import _omit from "lodash/omit";
 import _pick from "lodash/pick";
-import React, { useState, useEffect, useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { List, AutoSizer } from '../internals/Windowing';
-import { oneOf } from '../internals/propTypes';
-import TreeNode from './TreeNode';
-import { createDragPreview, getKeyParentMap, getPathTowardsItem, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
-import { createChainedFunction, useClassNames, useCustom, useControlled, useEventCallback, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
-import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { PickerToggle, PickerPopup, TreeView, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../internals/Picker';
-import SearchBox from '../internals/SearchBox';
-import TreeContext from '../Tree/TreeContext';
-var emptyArray = [];
-var itemSize = function itemSize() {
-  return 36;
-};
-
+import React, { useMemo } from 'react';
+import { createChainedFunction, useClassNames, useCustom, useControlled, useEventCallback, mergeRefs } from '../utils';
+import { getActiveItem, getTreeActiveNode } from '../Tree/utils';
+import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerClassName, usePickerRef, onMenuKeyDown, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../internals/Picker';
+import useTreeWithChildren from '../Tree/hooks/useTreeWithChildren';
+import useFlattenTree from '../Tree/hooks/useFlattenTree';
+import useFocusState from './hooks/useFocusState';
+import useExpandTree from '../Tree/hooks/useExpandTree';
+import TreeView from '../Tree/TreeView';
+import { TreeProvider, useTreeImperativeHandle } from '../Tree/TreeProvider';
 /**
  * The `TreePicker` component is used for selecting single options which are organized in a tree structure.
  *
@@ -30,85 +23,76 @@ var itemSize = function itemSize() {
 var TreePicker = /*#__PURE__*/React.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,
     _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-    style = props.style,
-    showIndentLine = props.showIndentLine,
-    controlledValue = props.value,
-    overrideLocale = props.locale,
-    _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,
-    className = props.className,
-    disabled = props.disabled,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-    _props$cleanable = props.cleanable,
-    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-    _props$searchable = props.searchable,
-    searchable = _props$searchable === void 0 ? true : _props$searchable,
-    _props$virtualized = props.virtualized,
-    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-    defaultValue = props.defaultValue,
-    placeholder = props.placeholder,
-    searchKeyword = props.searchKeyword,
-    menuClassName = props.menuClassName,
-    _props$menuAutoWidth = props.menuAutoWidth,
-    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-    searchBy = props.searchBy,
-    toggleAs = props.toggleAs,
-    _props$labelKey = props.labelKey,
-    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-    _props$valueKey = props.valueKey,
-    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
     _props$childrenKey = props.childrenKey,
     childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
-    draggable = props.draggable,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    disabled = props.disabled,
+    defaultValue = 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,
-    controlledExpandItemValues = props.expandItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
     _props$defaultExpandI = props.defaultExpandItemValues,
-    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
+    defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI,
+    controlledExpandItemValues = props.expandItemValues,
     id = props.id,
+    overrideLocale = props.locale,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    placeholder = props.placeholder,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    style = props.style,
+    searchKeyword = props.searchKeyword,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    showIndentLine = props.showIndentLine,
+    DEPRECATED_menuClassName = props.menuClassName,
+    DEPRECATED_menuStyle = props.menuStyle,
+    popupClassName = props.popupClassName,
+    popupStyle = props.popupStyle,
+    _props$popupAutoWidth = props.popupAutoWidth,
+    popupAutoWidth = _props$popupAutoWidth === void 0 ? true : _props$popupAutoWidth,
+    _props$treeHeight = props.treeHeight,
+    treeHeight = _props$treeHeight === void 0 ? 320 : _props$treeHeight,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? popupAutoWidth : _props$menuAutoWidth,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    controlledValue = props.value,
     listProps = props.listProps,
+    toggleAs = props.toggleAs,
+    searchBy = props.searchBy,
     getChildren = props.getChildren,
-    renderTreeIcon = props.renderTreeIcon,
-    renderTreeNode = props.renderTreeNode,
-    onExit = props.onExit,
-    onExited = props.onExited,
     onClean = props.onClean,
     onSearch = props.onSearch,
     onSelect = props.onSelect,
     onSelectItem = props.onSelectItem,
     onChange = props.onChange,
-    onEntered = props.onEntered,
-    onDragEnd = props.onDragEnd,
-    onDragStart = props.onDragStart,
-    onDragEnter = props.onDragEnter,
-    onDragLeave = props.onDragLeave,
-    onDragOver = props.onDragOver,
-    onDrop = props.onDrop,
     onExpand = props.onExpand,
-    renderExtraFooter = props.renderExtraFooter,
-    renderMenu = props.renderMenu,
+    onEnter = props.onEnter,
+    onExit = props.onExit,
+    onEntered = props.onEntered,
     renderValue = props.renderValue,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
+    DEPRECATED_renderMenu = props.renderMenu,
+    _props$renderTree = props.renderTree,
+    renderTree = _props$renderTree === void 0 ? DEPRECATED_renderMenu : _props$renderTree,
+    renderTreeIcon = props.renderTreeIcon,
+    renderTreeNode = props.renderTreeNode,
+    renderExtraFooter = props.renderExtraFooter,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "classPrefix", "cleanable", "childrenKey", "data", "disabled", "defaultValue", "defaultExpandAll", "disabledItemValues", "defaultExpandItemValues", "expandItemValues", "id", "locale", "labelKey", "placeholder", "placement", "style", "searchKeyword", "searchable", "showIndentLine", "menuClassName", "menuStyle", "popupClassName", "popupStyle", "popupAutoWidth", "treeHeight", "menuAutoWidth", "valueKey", "virtualized", "value", "listProps", "toggleAs", "searchBy", "getChildren", "onClean", "onSearch", "onSelect", "onSelectItem", "onChange", "onExpand", "onEnter", "onExit", "onEntered", "renderValue", "renderMenu", "renderTree", "renderTreeIcon", "renderTreeNode", "renderExtraFooter"]);
   var _useCustom = useCustom('Picker', overrideLocale),
-    rtl = _useCustom.rtl,
     locale = _useCustom.locale;
-  var _useContext = useContext(TreeContext),
-    inline = _useContext.inline;
-  var _usePickerRef = usePickerRef(ref, {
-      inline: inline
-    }),
+  var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -118,359 +102,78 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     treeView = _usePickerRef.treeView;
   var _useControlled = useControlled(controlledValue, defaultValue),
     value = _useControlled[0],
-    setValue = _useControlled[1],
-    isControlled = _useControlled[2];
-  var _useGetTreeNodeChildr = useGetTreeNodeChildren(data, valueKey, childrenKey),
-    treeData = _useGetTreeNodeChildr.data,
-    setTreeData = _useGetTreeNodeChildr.setData,
-    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,
-    loadChildren = _useGetTreeNodeChildr.loadChildren;
-  var _useControlled2 = useControlled(controlledExpandItemValues, getDefaultExpandItemValues(treeData, {
+    setValue = _useControlled[1];
+  var itemDataKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useTreeWithChildren = useTreeWithChildren(data, itemDataKeys),
+    treeData = _useTreeWithChildren.treeData,
+    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
+    appendChild = _useTreeWithChildren.appendChild;
+  var flattenedNodes = useFlattenTree(treeData, _extends({}, itemDataKeys));
+  var _useExpandTree = useExpandTree(data, _extends({}, 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 _useState = useState(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var _useState2 = useState(null),
-    focusItemValue = _useState2[0],
-    setFocusItemValue = _useState2[1];
-  var _useFlattenTreeData = useFlattenTreeData({
-      data: treeData,
-      labelKey: labelKey,
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      callback: function callback() {
-        // after flattenData, always trigger re-render
-        forceUpdate();
-      }
-    }),
-    flattenNodes = _useFlattenTreeData.flattenNodes,
-    forceUpdate = _useFlattenTreeData.forceUpdate,
-    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;
+    expandItemValues = _useExpandTree.expandItemValues,
+    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useClassNames2 = useClassNames(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),
-    treePrefix = _useClassNames2.prefix,
-    withTreeClassPrefix = _useClassNames2.withClassPrefix;
-  var _useTreeSearch = 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);
-      }
+  var activeNode = getTreeActiveNode(flattenedNodes, value, valueKey);
+  var _useTreeImperativeHan = useTreeImperativeHandle(),
+    register = _useTreeImperativeHan.register,
+    focusFirstNode = _useTreeImperativeHan.focusFirstNode,
+    focusActiveNode = _useTreeImperativeHan.focusActiveNode;
+  var _useFocusState = useFocusState({
+      focusActiveNode: focusActiveNode,
+      target: target,
+      value: value,
+      onEnter: onEnter,
+      onExit: onExit,
+      onEntered: onEntered
     }),
-    filteredData = _useTreeSearch.filteredData,
-    searchKeywordState = _useTreeSearch.searchKeywordState,
-    setSearchKeyword = _useTreeSearch.setSearchKeyword,
-    handleSearch = _useTreeSearch.handleSearch,
-    setFilteredData = _useTreeSearch.setFilteredData;
-  var _useTreeDrag = useTreeDrag(),
-    dragNodeKeys = _useTreeDrag.dragNodeKeys,
-    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
-    dragNode = _useTreeDrag.dragNode,
-    dropNodePosition = _useTreeDrag.dropNodePosition,
-    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,
-    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,
-    setDragNode = _useTreeDrag.setDragNode,
-    setDropNodePosition = _useTreeDrag.setDropNodePosition;
-  var _useTreeNodeRefs = useTreeNodeRefs(),
-    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
-    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
-  var activeNode = getTreeActiveNode(flattenNodes, value, valueKey);
-  var getFormattedNodes = function getFormattedNodes(render) {
-    if (virtualized) {
-      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
-        searchKeyword: searchKeywordState
-      }).filter(function (n) {
-        return n.visible;
-      });
-    }
-    return filteredData.map(function (dataItem, index) {
-      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
-    });
-  };
-  var focusActiveNode = function focusActiveNode() {
-    if (list.current) {
-      focusToActiveTreeNode({
-        list: list.current,
-        valueKey: valueKey,
-        selector: "." + treePrefix('node-active'),
-        activeNode: activeNode,
-        virtualized: virtualized,
-        container: treeView.current,
-        formattedNodes: getFormattedNodes()
-      });
-    }
-  };
-  useEffect(function () {
-    setFilteredData(data, searchKeywordState);
-    setTreeData(data);
-  }, [data, searchKeywordState, setFilteredData, setTreeData]);
-  useEffect(function () {
-    setFilteredData(treeData, searchKeywordState);
-  }, [treeData, searchKeywordState, setFilteredData]);
-  useEffect(function () {
-    if (Array.isArray(controlledExpandItemValues)) {
-      setExpandItemValues(controlledExpandItemValues);
-    }
-  }, [controlledExpandItemValues, setExpandItemValues]);
-  useEffect(function () {
-    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
-  }, [searchKeyword, setSearchKeyword]);
-  var getDropData = function getDropData(nodeData) {
-    var options = {
-      valueKey: valueKey,
-      childrenKey: childrenKey
-    };
-    return {
-      /** draggingNode */
-      dragNode: dragNode,
-      /** dropNode */
-      dropNode: nodeData,
-      /** dragAndDrop Position type */
-      dropNodePosition: dropNodePosition,
-      createUpdateDataFunction: createUpdateTreeDataFunction({
-        dragNode: dragNode,
-        dropNode: nodeData,
-        dropNodePosition: dropNodePosition
-      }, options)
-    };
-  };
-  var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {
-    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
-    return {
-      as: Component,
-      rtl: rtl,
-      value: node[valueKey],
-      label: node[labelKey],
-      index: index,
-      layer: layer,
-      loading: loadingNodeValues.some(function (item) {
-        return shallowEqual(item, node[valueKey]);
-      }),
-      expand: node.expand,
-      active: shallowEqual(node[valueKey], value),
-      focus: shallowEqual(node[valueKey], focusItemValue),
-      visible: node.visible,
-      draggable: draggable,
-      dragging: shallowEqual(node[valueKey], draggingNode[valueKey]),
-      children: node[childrenKey],
-      nodeData: node,
-      disabled: disabledItemValues.some(function (disabledItem) {
-        return shallowEqual(disabledItem, node[valueKey]);
-      }),
-      dragOver: shallowEqual(node[valueKey], dragOverNodeKey) && dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER,
-      dragOverTop: shallowEqual(node[valueKey], dragOverNodeKey) && dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,
-      dragOverBottom: shallowEqual(node[valueKey], dragOverNodeKey) && dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,
-      onSelect: handleSelect,
-      onDragStart: handleDragStart,
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDragEnd: handleDragEnd,
-      onDrop: handleDrop,
-      onExpand: handleExpand,
-      renderTreeNode: renderTreeNode,
-      renderTreeIcon: renderTreeIcon
-    };
-  };
-
-  // TODO-Doma
-  // Replace `getKeyParentMap` with `getParentMap`
-  var itemParentMap = useMemo(function () {
-    return getKeyParentMap(data, function (node) {
-      return node[valueKey];
-    }, function (node) {
-      return node[childrenKey];
-    });
-  }, [childrenKey, data, valueKey]);
-  var handleSelect = useEventCallback(function (nodeData, event) {
+    active = _useFocusState.active,
+    focusItemValue = _useFocusState.focusItemValue,
+    setFocusItemValue = _useFocusState.setFocusItemValue,
+    triggerProps = _useFocusState.triggerProps;
+  var handleSelect = useEventCallback(function (treeNode, value, event) {
     var _target$current, _trigger$current, _trigger$current$clos;
-    if (!nodeData) {
-      return;
-    }
-    var nodeValue = nodeData[valueKey];
-    if (!isControlled) {
-      setValue(nodeValue);
-    }
-    setFocusItemValue(nodeData[valueKey]);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);
-    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, getPathTowardsItem(nodeData, function (item) {
-      return itemParentMap.get(item[valueKey]);
-    }));
+    setFocusItemValue(value);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(treeNode, value, event);
     (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
   });
-  var handleExpand = useEventCallback(function (node) {
-    var nextExpandItemValues = toggleExpand({
-      node: node,
-      isExpand: !node.expand,
-      expandItemValues: expandItemValues,
-      valueKey: valueKey
-    });
-    setExpandItemValues(nextExpandItemValues);
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, createConcatChildrenFunction(node, node[valueKey], {
-      valueKey: valueKey,
-      childrenKey: childrenKey
-    }));
-    if (_isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
-      loadChildren(node, getChildren);
-    }
-  });
-  var handleDragStart = useEventCallback(function (nodeData, event) {
-    if (draggable) {
-      var _event$dataTransfer;
-      var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
-      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
-      setDragNodeKeys(getDragNodeKeys(nodeData, childrenKey, valueKey));
-      setDragNode(flattenNodes[nodeData.refKey]);
-      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-    }
-  });
-  var handleDragEnter = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return shallowEqual(d, nodeData[valueKey]);
-    })) {
-      return;
-    }
-    if (dragNode) {
-      setDragOverNodeKey(nodeData[valueKey]);
-      setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
-    }
-    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  });
-  var handleDragOver = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return shallowEqual(d, nodeData[valueKey]);
-    })) {
-      event.dataTransfer.dropEffect = 'none';
-      return;
-    }
-    if (dragNode && shallowEqual(nodeData[valueKey], dragOverNodeKey)) {
-      var lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
-      if (lastDropNodePosition === dropNodePosition) return;
-      setDropNodePosition(lastDropNodePosition);
-    }
-    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  });
-  var handleDragLeave = useEventCallback(function (nodeData, event) {
-    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  });
-  var handleDragEnd = useEventCallback(function (nodeData, event) {
-    removeDragPreview();
-    setDragNode(null);
-    setDragNodeKeys([]);
-    setDragOverNodeKey(null);
-    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  });
-  var handleDrop = useEventCallback(function (nodeData, event) {
-    if (dragNodeKeys.some(function (d) {
-      return shallowEqual(d, nodeData[valueKey]);
-    })) {
-      console.error('Cannot drag a node to itself and its children');
-    } else {
-      var dropData = getDropData(nodeData);
-      onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
-    }
-    removeDragPreview();
-    setDragNode(null);
-    setDragNodeKeys([]);
-    setDragOverNodeKey(null);
-  });
-  var handleOpen = useEventCallback(function () {
-    focusActiveNode();
-    setActive(true);
-  });
-  var handleClose = useEventCallback(function () {
-    var _target$current2;
-    setSearchKeyword('');
-    setActive(false);
-    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
-    /**
-     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
-     */
-    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();
-  });
-  var handleFocusItem = useEventCallback(function (key) {
-    var focusableItems = getFocusableItems(filteredData, {
-      disabledItemValues: disabledItemValues,
-      valueKey: valueKey,
-      childrenKey: childrenKey,
-      expandItemValues: expandItemValues
-    }, isSearching(searchKeywordState));
-    var selector = "." + treePrefix('node-label');
-    var focusProps = {
-      focusItemValue: focusItemValue,
-      focusableItems: focusableItems,
-      treeNodesRefs: treeNodesRefs,
-      selector: selector,
-      valueKey: valueKey,
-      callback: function callback(nextFocusItemValue) {
-        setFocusItemValue(nextFocusItemValue);
-      }
-    };
-    if (key === KEY_VALUES.DOWN) {
-      focusNextItem(focusProps);
-      return;
-    }
-    if (key === KEY_VALUES.UP) {
-      focusPreviousItem(focusProps);
-    }
-  });
-  var handleLeftArrow = useEventCallback(function () {
-    if (_isNil(focusItemValue)) return;
-    var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
-    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]);
-        focusTreeNode(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + treePrefix('node-label'));
-      }
-    });
-  });
-  var handleRightArrow = useEventCallback(function () {
-    if (_isNil(focusItemValue)) return;
-    var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
-    rightArrowHandler({
-      focusItem: focusItem,
-      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
-      childrenKey: childrenKey,
-      onExpand: handleExpand,
-      onFocusItem: function onFocusItem() {
-        handleFocusItem(KEY_VALUES.DOWN);
-      }
-    });
-  });
-  var selectActiveItem = useEventCallback(function (event) {
-    if (_isNil(focusItemValue)) return;
-    var activeItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
-    handleSelect(activeItem, event);
-  });
   var handleClean = useEventCallback(function (event) {
-    var nullValue = null;
     var target = event.target;
     // exclude searchbox
     if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
-    if (!isControlled) {
-      setValue(null);
+    setValue(null);
+    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
+  });
+  var handleTreePressEnter = useEventCallback(function (event) {
+    if (_isNil(focusItemValue)) {
+      return;
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
+    var activeItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    handleSelect(activeItem, event);
+  });
+  var handleTreeKeyDown = useEventCallback(function (event) {
+    onMenuKeyDown(event, {
+      del: handleClean,
+      down: function down() {
+        return focusFirstNode();
+      },
+      enter: handleTreePressEnter
+    });
   });
   var onPickerKeydown = useToggleKeyDownEvent(_extends({
     toggle: !activeNode || !active,
@@ -480,146 +183,56 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     searchInput: searchInput,
     active: active,
     onExit: handleClean,
-    onMenuKeyDown: function onMenuKeyDown(event) {
-      _onMenuKeyDown(event, {
-        down: function down() {
-          return handleFocusItem(KEY_VALUES.DOWN);
-        },
-        up: function up() {
-          return handleFocusItem(KEY_VALUES.UP);
-        },
-        left: rtl ? handleRightArrow : handleLeftArrow,
-        right: rtl ? handleLeftArrow : handleRightArrow,
-        enter: selectActiveItem,
-        del: handleClean
-      });
-    }
+    onMenuKeyDown: handleTreeKeyDown
   }, rest));
-  var handleTreeKeyDown = useEventCallback(function (event) {
-    if (!treeView.current) {
-      return;
-    }
-    _onMenuKeyDown(event, {
-      down: function down() {
-        return handleFocusItem(KEY_VALUES.DOWN);
-      },
-      up: function up() {
-        return handleFocusItem(KEY_VALUES.UP);
-      },
-      left: rtl ? handleRightArrow : handleLeftArrow,
-      right: rtl ? handleLeftArrow : handleRightArrow,
-      enter: selectActiveItem
-    });
+  var handleChange = useEventCallback(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
   });
-  var renderNode = function renderNode(node, index, layer) {
-    if (!node.visible) {
-      return null;
-    }
-    var children = node[childrenKey];
-    var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-    var visibleChildren = _isUndefined(searchKeywordState) || searchKeywordState.length === 0 ? !!children : hasVisibleChildren(node, childrenKey);
-    var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
-      expand: expand
-    }), layer, index), {
-      hasChildren: visibleChildren
-    });
-    if (nodeProps.hasChildren) {
-      var _merge;
-      layer += 1;
-      var openClass = treePrefix('open');
-      var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));
-      var nodes = children || [];
-      return /*#__PURE__*/React.createElement("div", {
-        className: childrenClass,
-        key: node[valueKey]
-      }, /*#__PURE__*/React.createElement(TreeNode, _extends({}, nodeProps, {
-        ref: function ref(_ref) {
-          return saveTreeNodeRef(_ref, node.refKey);
-        }
-      })), /*#__PURE__*/React.createElement("div", {
-        className: treePrefix('group'),
-        role: "group"
-      }, nodes.map(function (child, i) {
-        return renderNode(child, i, layer);
-      }), showIndentLine && /*#__PURE__*/React.createElement("span", {
-        className: treePrefix('indent-line'),
-        style: getTreeNodeIndent(rtl, layer - 1, true)
-      })));
-    }
-    return /*#__PURE__*/React.createElement(TreeNode, _extends({
-      ref: function ref(_ref2) {
-        return saveTreeNodeRef(_ref2, node.refKey);
-      },
-      key: node[valueKey]
-    }, nodeProps));
-  };
-  var renderVirtualListNode = function renderVirtualListNode(_ref3) {
-    var index = _ref3.index,
-      style = _ref3.style,
-      data = _ref3.data;
-    var node = data[index];
-    var layer = node.layer,
-      visible = node.visible;
-    var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-    if (!node.visible) {
-      return null;
-    }
-    var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
-      expand: expand
-    }), layer), {
-      style: style,
-      hasChildren: node.hasChildren
-    });
-    return visible && /*#__PURE__*/React.createElement(TreeNode, _extends({
-      ref: function ref(_ref4) {
-        return saveTreeNodeRef(_ref4, node.refKey);
+  var treeContext = useMemo(function () {
+    return {
+      register: register,
+      props: {
+        labelKey: labelKey,
+        valueKey: valueKey,
+        childrenKey: childrenKey,
+        virtualized: virtualized,
+        renderTreeIcon: renderTreeIcon,
+        renderTreeNode: renderTreeNode
       }
-    }, nodeProps));
-  };
-  var renderTree = function renderTree() {
-    var _merge2;
-    var classes = merge(withTreeClassPrefix({
-      virtualized: virtualized
-    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));
-    var formattedNodes = getFormattedNodes(renderNode);
-    var treeViewProps = {
-      ref: treeView
     };
-    if (inline) {
-      treeViewProps = _extends({
-        ref: root,
-        style: _extends({
-          height: height
-        }, style),
-        onKeyDown: handleTreeKeyDown
-      }, rest);
-    }
-    return /*#__PURE__*/React.createElement(TreeView, _extends({}, treeViewProps, {
-      treeRootClassName: treePrefix('root'),
-      className: classes
-    }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
-      defaultHeight: inline ? height : menuMaxHeight,
-      style: {
-        width: 'auto',
-        height: 'auto'
-      }
-    }, function (_ref5) {
-      var height = _ref5.height;
-      return /*#__PURE__*/React.createElement(List, _extends({
-        ref: list,
-        height: height,
-        itemSize: itemSize,
-        itemCount: formattedNodes.length,
-        itemData: formattedNodes
-      }, listProps), renderVirtualListNode);
-    }) : formattedNodes);
-  };
+  }, [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);
+  var tree = /*#__PURE__*/React.createElement(TreeProvider, {
+    value: treeContext
+  }, /*#__PURE__*/React.createElement(TreeView, {
+    ref: treeView,
+    virtualized: virtualized,
+    value: value,
+    data: treeData,
+    disabledItemValues: disabledItemValues,
+    expandItemValues: expandItemValues,
+    showIndentLine: showIndentLine,
+    searchable: searchable,
+    searchKeyword: searchKeyword,
+    searchBy: searchBy,
+    loadingNodeValues: loadingNodeValues,
+    flattenedNodes: flattenedNodes,
+    listProps: listProps,
+    listRef: list,
+    height: treeHeight,
+    onExpand: handleExpandTreeNode,
+    onSearch: onSearch,
+    onChange: handleChange,
+    onSelect: handleSelect,
+    onSelectItem: onSelectItem,
+    onFocusItem: setFocusItemValue
+  }));
   var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(className, menuClassName, prefix('tree-menu'));
-    var mergedMenuStyle = _extends({}, menuStyle, {
+    var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('tree-menu'));
+    var mergedMenuStyle = _extends({}, DEPRECATED_menuStyle, popupStyle, {
       left: left,
       top: top
     });
@@ -630,12 +243,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger
-    }, searchable ? /*#__PURE__*/React.createElement(SearchBox, {
-      placeholder: locale.searchPlaceholder,
-      onChange: handleSearch,
-      value: searchKeywordState,
-      inputRef: searchInput
-    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
+    }, renderTree ? renderTree(tree) : tree, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
 
   /**
@@ -663,21 +271,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  if (inline) {
-    return renderTree();
-  }
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
     id: id,
     popupType: "tree",
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
-    onEnter: handleOpen,
-    onEntered: onEntered,
-    onExit: onExit,
-    onExited: createChainedFunction(handleClose, onExited),
     speaker: renderTreeView
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, triggerProps), /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     ref: root
@@ -697,26 +298,4 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), selectedElement || locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';
-TreePicker.propTypes = _extends({}, listPickerPropTypes, {
-  locale: PropTypes.any,
-  appearance: oneOf(['default', 'subtle']),
-  height: PropTypes.number,
-  draggable: PropTypes.bool,
-  virtualized: PropTypes.bool,
-  searchable: PropTypes.bool,
-  menuAutoWidth: PropTypes.bool,
-  searchKeyword: PropTypes.string,
-  defaultExpandAll: PropTypes.bool,
-  expandItemValues: PropTypes.array,
-  defaultExpandItemValues: PropTypes.array,
-  onSearch: PropTypes.func,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  renderMenu: PropTypes.func,
-  renderTreeNode: PropTypes.func,
-  renderTreeIcon: PropTypes.func,
-  renderExtraFooter: PropTypes.func,
-  renderDragNode: PropTypes.func,
-  searchBy: PropTypes.func
-});
 export default TreePicker;