@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/treeSelect/index.js

@@ -0,0 +1,1274 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodashEs = require("lodash-es");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/treeSelect/foundation"));
+
+var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/treeSelect/constants");
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _reactWindow = require("react-window");
+
+require("@douyinfe/semi-foundation/lib/cjs/tree/tree.css");
+
+require("@douyinfe/semi-foundation/lib/cjs/treeSelect/treeSelect.css");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _context2 = _interopRequireDefault(require("../configProvider/context"));
+
+var _group = _interopRequireDefault(require("../tag/group"));
+
+var _index = _interopRequireDefault(require("../tag/index"));
+
+var _index2 = _interopRequireDefault(require("../input/index"));
+
+var _index3 = _interopRequireDefault(require("../popover/index"));
+
+var _autoSizer = _interopRequireDefault(require("../tree/autoSizer"));
+
+var _treeContext = _interopRequireDefault(require("../tree/treeContext"));
+
+var _treeNode = _interopRequireDefault(require("../tree/treeNode"));
+
+var _nodeList = _interopRequireDefault(require("../tree/nodeList"));
+
+var _treeUtil2 = require("../tree/treeUtil");
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _tagInput = _interopRequireDefault(require("../tagInput"));
+
+var _utils = require("../_utils");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const prefixcls = _constants.cssClasses.PREFIX;
+const prefixTree = _constants.cssClasses.PREFIXTREE;
+const key = 0;
+
+class TreeSelect extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.renderSuffix = () => {
+      const {
+        suffix
+      } = this.props;
+      const suffixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixcls, "-suffix")]: true,
+        ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _lodashEs.isString)(suffix),
+        ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: suffixWrapperCls
+      }, suffix);
+    };
+
+    this.renderPrefix = () => {
+      const {
+        prefix,
+        insetLabel
+      } = this.props;
+      const labelNode = prefix || insetLabel;
+      const prefixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixcls, "-prefix")]: true,
+        // to be doublechecked
+        ["".concat(prefixcls, "-inset-label")]: insetLabel,
+        ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _lodashEs.isString)(labelNode),
+        ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixWrapperCls
+      }, labelNode);
+    };
+
+    this.renderContent = () => {
+      const {
+        dropdownMinWidth
+      } = this.state;
+      const {
+        dropdownStyle,
+        dropdownClassName
+      } = this.props;
+      const style = (0, _assign.default)({
+        minWidth: dropdownMinWidth
+      }, dropdownStyle);
+      const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: popoverCls,
+        role: "list-box",
+        style: style
+      }, this.renderTree());
+    };
+
+    this.removeTag = removedKey => {
+      this.foundation.removeTag(removedKey);
+    };
+
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+    };
+
+    this.showClearBtn = () => {
+      const {
+        searchPosition
+      } = this.props;
+      const {
+        inputValue
+      } = this.state;
+      const triggerSearchHasInputValue = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue;
+      const {
+        showClear,
+        disabled,
+        multiple
+      } = this.props;
+      const {
+        selectedKeys,
+        checkedKeys,
+        isOpen,
+        isHovering
+      } = this.state;
+      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
+      return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
+    };
+
+    this.renderTagList = () => {
+      const {
+        checkedKeys,
+        keyEntities,
+        disabledKeys
+      } = this.state;
+      const {
+        treeNodeLabelProp,
+        leafOnly,
+        disabled,
+        disableStrictly,
+        size,
+        renderSelectedItem: propRenderSelectedItem
+      } = this.props;
+      const renderSelectedItem = (0, _lodashEs.isFunction)(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
+        isRenderInTag: true,
+        content: (0, _lodashEs.get)(item, treeNodeLabelProp, null)
+      });
+      const renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
+      const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
+
+      (0, _forEach.default)(renderKeys).call(renderKeys, key => {
+        const item = keyEntities[key].data;
+
+        const onClose = (tagContent, e) => {
+          if (e && typeof e.preventDefault === 'function') {
+            // make sure that tag will not hidden immediately in controlled mode
+            e.preventDefault();
+          }
+
+          this.removeTag(key);
+        };
+
+        const {
+          content,
+          isRenderInTag
+        } = treeNodeLabelProp in item && item ? renderSelectedItem(item, {
+          index: key,
+          onClose
+        }) : null;
+
+        if (!content) {
+          return;
+        }
+
+        const isDisabled = disabled || item.disabled || disableStrictly && disabledKeys.has(item.key);
+        const tag = {
+          closable: !isDisabled,
+          color: 'white',
+          visible: true,
+          onClose,
+          key,
+          size: size === 'small' ? 'small' : 'large'
+        };
+
+        if (isRenderInTag) {
+          // pass ReactNode list to tagList when using tagGroup custom mode
+          tagList.push( /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, tag), content));
+        } else {
+          tagList.push(content);
+        }
+      });
+      return tagList;
+    };
+    /**
+     * When single selection and the search box is on trigger, the items displayed in the rendered search box
+     */
+
+
+    this.renderSingleTriggerSearchItem = () => {
+      const {
+        placeholder,
+        disabled
+      } = this.props;
+      const {
+        inputTriggerFocus
+      } = this.state;
+      const renderText = this.foundation.getRenderTextInSingle();
+      const spanCls = (0, _classnames.default)("".concat(prefixcls, "-selection-TriggerSearchItem"), {
+        ["".concat(prefixcls, "-selection-TriggerSearchItem-placeholder")]: (inputTriggerFocus || !renderText) && !disabled,
+        ["".concat(prefixcls, "-selection-TriggerSearchItem-disabled")]: disabled
+      });
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: spanCls
+      }, renderText ? renderText : placeholder);
+    };
+    /**
+     * Single selection and the search box content rendered when the search box is on trigger
+     */
+
+
+    this.renderSingleTriggerSearch = () => {
+      const {
+        inputValue
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !inputValue && this.renderSingleTriggerSearchItem(), this.renderInput());
+    };
+
+    this.renderSelectContent = () => {
+      const {
+        multiple,
+        placeholder,
+        maxTagCount,
+        searchPosition,
+        filterTreeNode
+      } = this.props;
+      const {
+        selectedKeys,
+        checkedKeys
+      } = this.state;
+      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
+      const isTriggerPositionSearch = filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
+
+      if (isTriggerPositionSearch) {
+        return multiple ? this.renderTagInput() : this.renderSingleTriggerSearch();
+      } // searchPosition = dropdown and single seleciton
+
+
+      if (!multiple || !hasValue) {
+        const renderText = this.foundation.getRenderTextInSingle();
+        const spanCls = (0, _classnames.default)({
+          ["".concat(prefixcls, "-selection-placeholder")]: !renderText
+        });
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: spanCls
+        }, renderText ? renderText : placeholder);
+      } // searchPosition = dropdown and multiple seleciton
+
+
+      const tagList = this.renderTagList(); // mode=custom to return tagList directly
+
+      return /*#__PURE__*/_react.default.createElement(_group.default, {
+        maxTagCount: maxTagCount,
+        tagList: tagList,
+        size: "large",
+        mode: "custom"
+      });
+    };
+
+    this.handleClear = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClear(e);
+    };
+
+    this.handleMouseOver = e => {
+      this.foundation.toggleHoverState(true);
+    };
+
+    this.handleMouseLeave = e => {
+      this.foundation.toggleHoverState(false);
+    };
+
+    this.search = value => {
+      this.foundation.handleInputChange(value);
+    };
+
+    this.close = () => {
+      this.foundation.close(null);
+    };
+
+    this.renderArrow = () => {
+      const showClearBtn = this.showClearBtn();
+      const {
+        arrowIcon
+      } = this.props;
+
+      if (showClearBtn) {
+        return null;
+      }
+
+      return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(prefixcls, "-arrow"))
+      }, arrowIcon) : null;
+    };
+
+    this.renderClearBtn = () => {
+      const showClearBtn = this.showClearBtn();
+      const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
+
+      if (showClearBtn) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: clearCls,
+          onClick: this.handleClear
+        }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+      }
+
+      return null;
+    };
+
+    this.renderSelection = () => {
+      const {
+        disabled,
+        multiple,
+        filterTreeNode,
+        validateStatus,
+        prefix,
+        suffix,
+        style,
+        size,
+        insetLabel,
+        className,
+        placeholder,
+        showClear,
+        leafOnly,
+        searchPosition,
+        triggerRender
+      } = this.props;
+      const {
+        isOpen,
+        isInput,
+        inputValue,
+        selectedKeys,
+        checkedKeys,
+        keyEntities
+      } = this.state;
+      const filterable = Boolean(filterTreeNode);
+      const useCustomTrigger = typeof triggerRender === 'function';
+      const mouseEvent = showClear ? {
+        onMouseEnter: e => this.handleMouseOver(e),
+        onMouseLeave: e => this.handleMouseLeave(e)
+      } : {};
+      const isTriggerPositionSearch = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && filterable;
+      const isEmptyTriggerSearch = isTriggerPositionSearch && (0, _lodashEs.isEmpty)(checkedKeys);
+      const isValueTriggerSearch = isTriggerPositionSearch && !(0, _lodashEs.isEmpty)(checkedKeys);
+      const classNames = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, {
+        ["".concat(prefixcls, "-focus")]: isOpen && !isInput,
+        ["".concat(prefixcls, "-disabled")]: disabled,
+        ["".concat(prefixcls, "-single")]: !multiple,
+        ["".concat(prefixcls, "-multiple")]: multiple,
+        ["".concat(prefixcls, "-multiple-tagInput-empty")]: multiple && isEmptyTriggerSearch,
+        ["".concat(prefixcls, "-multiple-tagInput-notEmpty")]: multiple && isValueTriggerSearch,
+        ["".concat(prefixcls, "-filterable")]: filterable,
+        ["".concat(prefixcls, "-error")]: validateStatus === 'error',
+        ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
+        ["".concat(prefixcls, "-small")]: size === 'small',
+        ["".concat(prefixcls, "-large")]: size === 'large',
+        ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
+        ["".concat(prefixcls, "-with-suffix")]: suffix,
+        ["".concat(prefixcls, "-with-suffix")]: suffix
+      }, className);
+      const triggerRenderKeys = multiple ? (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly) : selectedKeys;
+      const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
+        inputValue: inputValue,
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        value: (0, _map.default)(triggerRenderKeys).call(triggerRenderKeys, key => (0, _lodashEs.get)(keyEntities, [key, 'data'])),
+        disabled: disabled,
+        placeholder: placeholder,
+        onClear: this.handleClear,
+        componentName: 'TreeSelect',
+        triggerRender: triggerRender,
+        componentProps: (0, _assign.default)({}, this.props)
+      }) : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'prefix'
+      }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'selection'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixcls, "-selection")
+      }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'suffix'
+      }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'clearBtn'
+      }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'arrow'
+      }, this.renderArrow())];
+      return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+        className: classNames,
+        style: style,
+        ref: this.triggerRef,
+        onClick: this.handleClick
+      }, mouseEvent), inner);
+    }; // eslint-disable-next-line @typescript-eslint/no-shadow
+
+
+    this.renderTagItem = (key, idx) => {
+      var _context;
+
+      const {
+        keyEntities,
+        disabledKeys
+      } = this.state;
+      const {
+        size,
+        leafOnly,
+        disabled,
+        disableStrictly,
+        renderSelectedItem: propRenderSelectedItem,
+        treeNodeLabelProp
+      } = this.props;
+      const keyList = (0, _treeUtil.normalizeKeyList)([key], keyEntities, leafOnly);
+      const nodes = (0, _map.default)(keyList).call(keyList, i => keyEntities[i].data);
+      const value = (0, _treeUtil.getValueOrKey)(nodes);
+      const tagCls = (0, _classnames.default)("".concat(prefixcls, "-selection-tag"), {
+        ["".concat(prefixcls, "-selection-tag-disabled")]: disabled
+      });
+      const nodeHaveData = !(0, _lodashEs.isEmpty)(nodes) && !(0, _lodashEs.isEmpty)(nodes[0]);
+      const isDisableStrictlyNode = disableStrictly && nodeHaveData && disabledKeys.has(nodes[0].key);
+      const closable = nodeHaveData && !nodes[0].disabled && !disabled && !isDisableStrictlyNode;
+
+      const onClose = (tagChildren, e) => {
+        // When value has not changed, prevent clicking tag closeBtn to close tag
+        e.preventDefault();
+        this.removeTag(key);
+      };
+
+      const tagProps = {
+        size: size === 'small' ? 'small' : 'large',
+        key: (0, _concat.default)(_context = "tag-".concat(value, "-")).call(_context, idx),
+        color: 'white',
+        className: tagCls,
+        closable,
+        onClose
+      };
+      const item = nodes[0];
+      const renderSelectedItem = (0, _lodashEs.isFunction)(propRenderSelectedItem) ? propRenderSelectedItem : selectedItem => ({
+        isRenderInTag: true,
+        content: (0, _lodashEs.get)(selectedItem, treeNodeLabelProp, null)
+      });
+
+      if ((0, _lodashEs.isFunction)(renderSelectedItem)) {
+        const {
+          content,
+          isRenderInTag
+        } = treeNodeLabelProp in item && item ? renderSelectedItem(item, {
+          index: idx,
+          onClose
+        }) : null;
+
+        if (isRenderInTag) {
+          return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, tagProps), content);
+        } else {
+          return content;
+        }
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, tagProps), value);
+    };
+
+    this.renderTagInput = () => {
+      const {
+        leafOnly,
+        disabled,
+        size,
+        searchAutoFocus,
+        placeholder
+      } = this.props;
+      const {
+        keyEntities,
+        checkedKeys,
+        inputValue
+      } = this.state;
+      const keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
+      return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
+        disabled: disabled,
+        onInputChange: v => this.search(v),
+        ref: this.tagInputRef,
+        placeholder: placeholder,
+        value: keyList,
+        inputValue: inputValue,
+        size: size,
+        autoFocus: searchAutoFocus,
+        renderTagItem: (itemKey, index) => this.renderTagItem(itemKey, index),
+        onRemove: itemKey => this.removeTag(itemKey)
+      });
+    }; // render Tree
+
+
+    this.renderInput = () => {
+      const {
+        searchPlaceholder,
+        searchRender,
+        showSearchClear,
+        searchPosition,
+        searchAutoFocus,
+        multiple,
+        disabled
+      } = this.props;
+      const isDropdownPositionSearch = searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN;
+      const inputcls = (0, _classnames.default)({
+        ["".concat(prefixTree, "-input")]: isDropdownPositionSearch,
+        ["".concat(prefixcls, "-inputTrigger")]: !isDropdownPositionSearch
+      });
+      const {
+        inputValue
+      } = this.state;
+      const baseInputProps = {
+        value: inputValue,
+        className: inputcls,
+        onChange: value => this.search(value)
+      };
+      const inputDropdownProps = {
+        showClear: showSearchClear,
+        prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null)
+      };
+      const inputTriggerProps = {
+        onFocus: e => this.foundation.handleInputTriggerFocus(),
+        onBlur: e => this.foundation.handleInputTriggerBlur(),
+        disabled
+      };
+      const realInputProps = isDropdownPositionSearch ? inputDropdownProps : inputTriggerProps;
+      const wrapperCls = (0, _classnames.default)({
+        ["".concat(prefixTree, "-search-wrapper")]: isDropdownPositionSearch,
+        ["".concat(prefixcls, "-triggerSingleSearch-wrapper")]: !isDropdownPositionSearch && !multiple
+      });
+      const useCusSearch = typeof searchRender === 'function' || typeof searchRender === 'boolean';
+
+      if (useCusSearch && !searchRender) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapperCls
+      }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "TreeSelect"
+      }, locale => {
+        const placeholder = isDropdownPositionSearch ? searchPlaceholder || locale.searchPlaceholder : '';
+
+        if (useCusSearch) {
+          return searchRender((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, realInputProps), baseInputProps), {
+            placeholder
+          }));
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
+          ref: this.inputRef,
+          autofocus: searchAutoFocus,
+          placeholder: placeholder
+        }, baseInputProps, realInputProps));
+      }));
+    };
+
+    this.renderEmpty = () => {
+      const {
+        emptyContent
+      } = this.props;
+
+      if (emptyContent) {
+        return /*#__PURE__*/_react.default.createElement(_treeNode.default, {
+          empty: true,
+          emptyContent: this.props.emptyContent
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+          componentName: "Tree"
+        }, locale => /*#__PURE__*/_react.default.createElement(_treeNode.default, {
+          empty: true,
+          emptyContent: locale.emptyText
+        }));
+      }
+    };
+
+    this.onNodeLoad = data => new _promise.default(resolve => this.foundation.setLoadKeys(data, resolve));
+
+    this.onNodeSelect = (e, treeNode) => {
+      this.foundation.handleNodeSelect(e, treeNode);
+    };
+
+    this.onNodeCheck = (e, treeNode) => {
+      this.foundation.handleNodeSelect(e, treeNode);
+    };
+
+    this.onNodeExpand = (e, treeNode) => {
+      this.foundation.handleNodeExpand(e, treeNode);
+    };
+
+    this.getTreeNodeRequiredProps = () => {
+      const {
+        expandedKeys,
+        selectedKeys,
+        checkedKeys,
+        halfCheckedKeys,
+        keyEntities,
+        filteredKeys
+      } = this.state;
+      return {
+        expandedKeys: expandedKeys || new _set.default(),
+        selectedKeys: selectedKeys || [],
+        checkedKeys: checkedKeys || new _set.default(),
+        halfCheckedKeys: halfCheckedKeys || new _set.default(),
+        filteredKeys: filteredKeys || new _set.default(),
+        keyEntities
+      };
+    };
+
+    this.getTreeNodeKey = treeNode => {
+      const {
+        data
+      } = treeNode; // eslint-disable-next-line @typescript-eslint/no-shadow
+
+      const {
+        key
+      } = data;
+      return key;
+    };
+    /* Event handler function after popover is closed */
+
+
+    this.handlePopoverClose = isVisible => {
+      const {
+        filterTreeNode
+      } = this.props;
+
+      if (isVisible === false && Boolean(filterTreeNode)) {
+        this.foundation.clearInput();
+      }
+    };
+
+    this.renderTreeNode = (treeNode, ind, style) => {
+      const {
+        data
+      } = treeNode; // eslint-disable-next-line @typescript-eslint/no-shadow
+
+      const {
+        key
+      } = data;
+      const treeNodeProps = this.foundation.getTreeNodeProps(key);
+
+      if (!treeNodeProps) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_treeNode.default, (0, _assign.default)({}, treeNodeProps, data, {
+        key: key,
+        data: data,
+        style: style
+      }));
+    };
+
+    this.itemKey = (index, data) => {
+      // Find the item at the specified index.
+      const item = data[index]; // Return a value that uniquely identifies this item.
+
+      return item.key;
+    };
+
+    this.renderNodeList = () => {
+      const {
+        flattenNodes,
+        motionKeys,
+        motionType
+      } = this.state;
+      const {
+        direction
+      } = this.context;
+      const {
+        virtualize,
+        motionExpand
+      } = this.props;
+
+      if (!virtualize || (0, _lodashEs.isEmpty)(virtualize)) {
+        return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
+          flattenNodes: flattenNodes,
+          flattenList: this._flattenNodes,
+          motionKeys: motionExpand ? motionKeys : new _set.default([]),
+          motionType: motionType,
+          onMotionEnd: this.onMotionEnd,
+          renderTreeNode: this.renderTreeNode
+        });
+      }
+
+      const option = _ref => {
+        let {
+          index,
+          style,
+          data
+        } = _ref;
+        return this.renderTreeNode(data[index], index, style);
+      };
+
+      return /*#__PURE__*/_react.default.createElement(_autoSizer.default, {
+        defaultHeight: virtualize.height,
+        defaultWidth: virtualize.width
+      }, _ref2 => {
+        let {
+          height,
+          width
+        } = _ref2;
+        return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+          itemCount: flattenNodes.length,
+          itemSize: virtualize.itemSize,
+          height: height,
+          width: width,
+          itemKey: this.itemKey,
+          itemData: flattenNodes,
+          className: "".concat(prefixTree, "-virtual-list"),
+          style: {
+            direction
+          }
+        }, option);
+      });
+    };
+
+    this.renderTree = () => {
+      const {
+        keyEntities,
+        motionKeys,
+        motionType,
+        inputValue,
+        filteredKeys,
+        flattenNodes
+      } = this.state;
+      const {
+        loadData,
+        filterTreeNode,
+        disabled,
+        multiple,
+        showFilteredOnly,
+        motionExpand,
+        outerBottomSlot,
+        outerTopSlot,
+        expandAction,
+        labelEllipsis,
+        virtualize,
+        optionListStyle,
+        searchPosition,
+        renderLabel,
+        renderFullLabel
+      } = this.props;
+      const wrapperCls = (0, _classnames.default)("".concat(prefixTree, "-wrapper"));
+      const listCls = (0, _classnames.default)("".concat(prefixTree, "-option-list"), {
+        ["".concat(prefixTree, "-option-list-block")]: true
+      });
+      const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
+      const noData = (0, _lodashEs.isEmpty)(flattenNodes) || showFilteredOnly && searchNoRes;
+      const isDropdownPositionSearch = searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN;
+      return /*#__PURE__*/_react.default.createElement(_treeContext.default.Provider, {
+        value: {
+          loadData,
+          treeDisabled: disabled,
+          motion: motionExpand,
+          motionKeys,
+          motionType,
+          expandAction,
+          filterTreeNode,
+          keyEntities,
+          onNodeClick: this.onNodeClick,
+          onNodeDoubleClick: this.onNodeDoubleClick,
+          // tree node will call this function when treeNode is right clicked
+          onNodeRightClick: _lodashEs.noop,
+          onNodeExpand: this.onNodeExpand,
+          onNodeSelect: this.onNodeSelect,
+          onNodeCheck: this.onNodeCheck,
+          renderTreeNode: this.renderTreeNode,
+          multiple,
+          showFilteredOnly,
+          isSearching: Boolean(inputValue),
+          renderLabel,
+          renderFullLabel,
+          labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapperCls,
+        role: "list-box"
+      }, outerTopSlot, !outerTopSlot && filterTreeNode && isDropdownPositionSearch && this.renderInput(), /*#__PURE__*/_react.default.createElement("div", {
+        className: listCls,
+        role: "tree",
+        style: optionListStyle
+      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+    };
+
+    this.state = {
+      inputTriggerFocus: false,
+      isOpen: false,
+      isInput: false,
+      rePosKey: key,
+      dropdownMinWidth: null,
+      inputValue: '',
+      keyEntities: {},
+      treeData: [],
+      flattenNodes: [],
+      selectedKeys: [],
+      checkedKeys: new _set.default(),
+      halfCheckedKeys: new _set.default(),
+      disabledKeys: new _set.default(),
+      motionKeys: new _set.default([]),
+      motionType: 'hide',
+      expandedKeys: new _set.default(props.expandedKeys),
+      filteredKeys: new _set.default(),
+      filteredExpandedKeys: new _set.default(),
+      filteredShownKeys: new _set.default(),
+      prevProps: null,
+      isHovering: false,
+      cachedKeyValuePairs: {},
+      loadedKeys: new _set.default(),
+      loadingKeys: new _set.default()
+    };
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.tagInputRef = /*#__PURE__*/_react.default.createRef();
+    this.triggerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
+    this.foundation = new _foundation.default(this.adapter);
+  } // eslint-disable-next-line max-lines-per-function
+
+
+  static getDerivedStateFromProps(props, prevState) {
+    const {
+      prevProps,
+      rePosKey
+    } = prevState;
+
+    const needUpdate = name => !prevProps && name in props || prevProps && !(0, _lodashEs.isEqual)(prevProps[name], props[name]);
+
+    let treeData;
+    const withObject = props.onChangeWithObject;
+    let keyEntities = prevState.keyEntities || {};
+    let valueEntities = prevState.cachedKeyValuePairs || {};
+    const newState = {
+      prevProps: props
+    }; // TreeNode
+
+    if (needUpdate('treeData')) {
+      treeData = props.treeData;
+      newState.treeData = treeData;
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      newState.keyEntities = (0, _assign.default)({}, entitiesMap.keyEntities);
+      keyEntities = newState.keyEntities;
+      newState.cachedKeyValuePairs = (0, _assign.default)({}, entitiesMap.valueEntities);
+      valueEntities = newState.cachedKeyValuePairs;
+    } // if treeData keys changes, we won't show animation
+
+
+    if (treeData && props.motion && !(0, _lodashEs.isEqual)(new _set.default((0, _keys.default)(newState.keyEntities)), new _set.default((0, _keys.default)(prevState.keyEntities)))) {
+      if (prevProps && props.motion) {
+        newState.motionKeys = new _set.default([]);
+        newState.motionType = null;
+      }
+    }
+
+    const expandAllWhenDataChange = needUpdate('treeData') && props.expandAll; // expandedKeys
+
+    if (needUpdate('expandedKeys') || prevProps && needUpdate('autoExpandParent')) {
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps); // only show animation when treeData does not change
+
+      if (prevProps && props.motion && !treeData) {
+        const {
+          motionKeys,
+          motionType
+        } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+        newState.motionKeys = new _set.default(motionKeys);
+        newState.motionType = motionType;
+      }
+    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+      newState.expandedKeys = new _set.default((0, _keys.default)(keyEntities));
+    } else if (!prevProps && props.defaultExpandedKeys) {
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
+    } else if (!prevProps && props.defaultValue) {
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), keyEntities, props.multiple, valueEntities);
+    } else if (!prevProps && props.value) {
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), keyEntities, props.multiple, valueEntities);
+    } // flattenNodes
+
+
+    if (treeData || needUpdate('expandedKeys')) {
+      const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+      newState.flattenNodes = flattenNodes;
+    } // selectedKeys: single mode controlled
+
+
+    const isMultiple = props.multiple;
+
+    if (!isMultiple) {
+      if (needUpdate('value')) {
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+      } else if (!prevProps && props.defaultValue) {
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+      } else if (treeData) {
+        // If `treeData` changed, we also need check it
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+      }
+    } else {
+      // checkedKeys: multiple mode controlled || data changed
+      let checkedKeyValues;
+
+      if (needUpdate('value')) {
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+      } else if (!prevProps && props.defaultValue) {
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+      } else if (treeData) {
+        // If `treeData` changed, we also need check it
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+      }
+
+      if (checkedKeyValues) {
+        const {
+          checkedKeys,
+          halfCheckedKeys
+        } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
+        newState.checkedKeys = checkedKeys;
+        newState.halfCheckedKeys = halfCheckedKeys;
+      }
+    } // loadedKeys
+
+
+    if (needUpdate('loadedKeys')) {
+      newState.loadedKeys = new _set.default(props.loadedKeys);
+    } // ================== rePosKey ==================
+
+
+    if (needUpdate('treeData') || needUpdate('value')) {
+      newState.rePosKey = rePosKey + 1;
+    } // ================ disableStrictly =================
+
+
+    if (treeData && props.disableStrictly) {
+      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
+    }
+
+    return newState;
+  }
+
+  get adapter() {
+    var _this = this;
+
+    const filterAdapter = {
+      updateInputValue: value => {
+        this.setState({
+          inputValue: value
+        });
+      }
+    };
+    const treeSelectAdapter = {
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const optionInstance = this.optionsRef && this.optionsRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current;
+
+          const optionsDom = _reactDom.default.findDOMNode(optionInstance);
+
+          const target = e.target;
+
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
+            cb(e);
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+        this.clickOutsideHandler = null;
+      },
+      rePositionDropdown: () => {
+        let {
+          rePosKey
+        } = this.state;
+        rePosKey = rePosKey + 1;
+        this.setState({
+          rePosKey
+        });
+      }
+    };
+    const treeAdapter = {
+      updateState: states => {
+        this.setState((0, _assign.default)({}, states));
+      },
+      notifySelect: (selectKey, bool, node) => {
+        this.props.onSelect && this.props.onSelect(selectKey, bool, node);
+      },
+      notifySearch: input => {
+        this.props.onSearch && this.props.onSearch(input);
+      },
+      cacheFlattenNodes: bool => {
+        this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;
+      },
+      notifyLoad: (newLoadedKeys, data) => {
+        const {
+          onLoad
+        } = this.props;
+        (0, _lodashEs.isFunction)(onLoad) && onLoad(newLoadedKeys, data);
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
+      updateLoadKeys: (data, resolve) => {
+        this.setState(_ref3 => {
+          let {
+            loadedKeys,
+            loadingKeys
+          } = _ref3;
+          return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
+        });
+      },
+      updateState: states => {
+        this.setState((0, _assign.default)({}, states));
+      },
+      openMenu: () => {
+        this.setState({
+          isOpen: true
+        }, () => {
+          this.props.onVisibleChange(true);
+        });
+      },
+      closeMenu: cb => {
+        this.setState({
+          isOpen: false
+        }, () => {
+          cb && cb();
+          this.props.onVisibleChange(false);
+        });
+      },
+      getTriggerWidth: () => {
+        const el = this.triggerRef.current;
+        return el && el.getBoundingClientRect().width;
+      },
+      setOptionWrapperWidth: width => {
+        this.setState({
+          dropdownMinWidth: width
+        });
+      },
+      notifyChange: (value, node, e) => {
+        this.props.onChange && this.props.onChange(value, node, e);
+      },
+      notifyChangeWithObject: (node, e) => {
+        this.props.onChange && this.props.onChange(node, e);
+      },
+      notifyExpand: (expandedKeys, _ref4) => {
+        let {
+          expanded: bool,
+          node
+        } = _ref4;
+        this.props.onExpand && this.props.onExpand([...expandedKeys], {
+          expanded: bool,
+          node
+        });
+
+        if (bool && this.props.loadData) {
+          this.onNodeLoad(node);
+        }
+      },
+      notifyFocus: function () {
+        _this.props.onFocus && _this.props.onFocus(...arguments);
+      },
+      notifyBlur: function () {
+        _this.props.onBlur && _this.props.onBlur(...arguments);
+      },
+      toggleHovering: bool => {
+        this.setState({
+          isHovering: bool
+        });
+      },
+      updateInputFocus: bool => {} // eslint-disable-line
+
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    const content = this.renderContent();
+    const {
+      motion,
+      zIndex,
+      mouseLeaveDelay,
+      mouseEnterDelay,
+      autoAdjustOverflow,
+      stopPropagation,
+      getPopupContainer
+    } = this.props;
+    const {
+      isOpen,
+      rePosKey
+    } = this.state;
+    const selection = this.renderSelection();
+    const pos = 'bottomLeft';
+    return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      stopPropagation: stopPropagation,
+      getPopupContainer: getPopupContainer,
+      zIndex: zIndex,
+      motion: motion,
+      ref: this.optionsRef,
+      content: content,
+      visible: isOpen,
+      trigger: "custom",
+      rePosKey: rePosKey,
+      position: pos,
+      autoAdjustOverflow: autoAdjustOverflow,
+      mouseLeaveDelay: mouseLeaveDelay,
+      mouseEnterDelay: mouseEnterDelay,
+      onVisibleChange: this.handlePopoverClose
+    }, selection);
+  }
+
+}
+
+TreeSelect.contextType = _context2.default;
+TreeSelect.propTypes = {
+  loadedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+  loadData: _propTypes.default.func,
+  onLoad: _propTypes.default.func,
+  arrowIcon: _propTypes.default.node,
+  defaultOpen: _propTypes.default.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  defaultExpandAll: _propTypes.default.bool,
+  defaultExpandedKeys: _propTypes.default.array,
+  expandAll: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  disableStrictly: _propTypes.default.bool,
+  // Whether to turn on the input box filtering function, when it is a function, it represents a custom filtering function
+  filterTreeNode: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  multiple: _propTypes.default.bool,
+  searchPlaceholder: _propTypes.default.string,
+  searchAutoFocus: _propTypes.default.bool,
+  virtualize: _propTypes.default.object,
+  treeNodeFilterProp: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onExpand: _propTypes.default.func,
+  onChangeWithObject: _propTypes.default.bool,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
+  expandedKeys: _propTypes.default.array,
+  autoExpandParent: _propTypes.default.bool,
+  showClear: _propTypes.default.bool,
+  showSearchClear: _propTypes.default.bool,
+  autoAdjustOverflow: _propTypes.default.bool,
+  showFilteredOnly: _propTypes.default.bool,
+  motionExpand: _propTypes.default.bool,
+  emptyContent: _propTypes.default.node,
+  leafOnly: _propTypes.default.bool,
+  treeData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    label: _propTypes.default.any
+  })),
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
+  placeholder: _propTypes.default.string,
+  maxTagCount: _propTypes.default.number,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  treeNodeLabelProp: _propTypes.default.string,
+  suffix: _propTypes.default.node,
+  prefix: _propTypes.default.node,
+  insetLabel: _propTypes.default.node,
+  zIndex: _propTypes.default.number,
+  getPopupContainer: _propTypes.default.func,
+  dropdownMatchSelectWidth: _propTypes.default.bool,
+  validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
+  mouseEnterDelay: _propTypes.default.number,
+  mouseLeaveDelay: _propTypes.default.number,
+  triggerRender: _propTypes.default.func,
+  stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  outerBottomSlot: _propTypes.default.node,
+  outerTopSlot: _propTypes.default.node,
+  onVisibleChange: _propTypes.default.func,
+  expandAction: _propTypes.default.oneOf(['click', 'doubleClick', false]),
+  searchPosition: _propTypes.default.oneOf([_constants.strings.SEARCH_POSITION_DROPDOWN, _constants.strings.SEARCH_POSITION_TRIGGER]),
+  clickToHide: _propTypes.default.bool,
+  renderLabel: _propTypes.default.func,
+  renderFullLabel: _propTypes.default.func,
+  labelEllipsis: _propTypes.default.bool,
+  optionListStyle: _propTypes.default.object,
+  searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  renderSelectedItem: _propTypes.default.func
+};
+TreeSelect.defaultProps = {
+  searchPosition: _constants.strings.SEARCH_POSITION_DROPDOWN,
+  arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null),
+  autoExpandParent: false,
+  autoAdjustOverflow: true,
+  stopPropagation: true,
+  motion: true,
+  motionExpand: true,
+  expandAll: false,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  disabled: false,
+  disableStrictly: false,
+  multiple: false,
+  filterTreeNode: false,
+  size: 'default',
+  treeNodeFilterProp: 'label',
+  onChangeWithObject: false,
+  treeNodeLabelProp: 'label',
+  dropdownMatchSelectWidth: true,
+  defaultOpen: false,
+  showSearchClear: true,
+  showClear: false,
+  onVisibleChange: _lodashEs.noop,
+  expandAction: false,
+  clickToHide: true,
+  searchAutoFocus: false
+};
+var _default = TreeSelect;
+exports.default = _default;