@kdcloudjs/kdesign 1.7.35 → 1.7.37

package/lib/select/style/index.css

@@ -296,7 +296,7 @@
 .kd-select-icon-clear:hover {
   color: var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-select-focused {
+.kd-select-focused:not(.kd-select-error) {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-placeholder {
@@ -323,7 +323,7 @@
 .kd-select-underline {
   border-bottom: 1px solid var(--kd-c-select-color-border, var(--kd-g-color-input, #999));
 }
-.kd-select-underline:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
+.kd-select-underline:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled):not( .kd-select-error) {
   border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-bordered {
@@ -331,7 +331,7 @@
   padding-left: var(--kd-c-select-bordered-spacing-padding-left, 8px) !important;
   border-radius: var(--kd-c-select-bordered-radius-border, 2px);
 }
-.kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
+.kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled):not( .kd-select-error) {
   border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-bordered .kd-select-suffix {
@@ -522,7 +522,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-select .kd-select-single-focused {
+.kd-select .kd-select-single-focused:not(.kd-select-error) {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select .kd-select-single-disabled {
@@ -702,6 +702,9 @@
   color: var(--kd-c-select-footer-color-text-selected, #0e5fd8);
   padding: 0 2px;
 }
+.kd-select-error:not(.kd-select-single-disabled):not(.kd-select-multiple-disabled) {
+  border-color: var(--kd-c-select-color-error, var(--kd-g-color-error, #fb2323));
+}
 .kd-select-dropdown-panel.topLeft.hidden,
 .kd-select-dropdown-panel.bottomLeft.hidden,
 .kd-select-dropdown-panel.topRight.hidden,

package/lib/select/style/index.less

@@ -59,7 +59,7 @@
     }
   }
 
-  &-focused {
+  &-focused:not(.@{select-prefix-cls}-error) {
     .focusColor();
   }
   &-placeholder {
@@ -83,7 +83,9 @@
 
   &-underline {
     border-bottom: 1px solid @select-g-color-border;
-    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled):not(
+        .@{select-prefix-cls}-error
+      ) {
       border-bottom: 1px solid @select-g-color-border-hover;
     }
   }
@@ -92,7 +94,9 @@
     border: 1px solid @select-border-g-color-border;
     padding-left: @select-bordered !important;
     border-radius: @select-border-radius-border;
-    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled):not(
+        .@{select-prefix-cls}-error
+      ) {
       border: 1px solid @select-g-color-border-hover;
     }
 
@@ -265,7 +269,7 @@
         .over();
       }
     }
-    &-focused {
+    &-focused:not(.@{select-prefix-cls}-error) {
       .focusColor();
     }
     &-disabled {
@@ -439,6 +443,10 @@
     }
   }
 
+  &-error:not(.@{select-prefix-cls}-single-disabled):not(.@{select-prefix-cls}-multiple-disabled) {
+    border-color: @select-error-color;
+  }
+
   &-dropdown-panel {
     &.topLeft.hidden,
     &.bottomLeft.hidden,

package/lib/select/style/token.less

@@ -22,6 +22,7 @@
 @select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
 @select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
 @select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+@select-error-color: var(~'@{select-custom-prefix}-color-error', @color-error);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/lib/style/components.less

@@ -9,6 +9,7 @@
 @import "../cascader/style/index.less";
 @import "../checkbox/style/index.less";
 @import "../city-picker/style/index.less";
+@import "../clipboard/style/index.less";
 @import "../collapse/style/index.less";
 @import "../color-picker/style/index.less";
 @import "../date-picker/style/index.less";

package/lib/tree/style/index.css

@@ -143,10 +143,24 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
-.kd-tree-plantom {
+.kd-tree-show-line .kd-tree-node-indent {
+  position: relative;
+}
+.kd-tree-show-line .kd-tree-node-indent::before {
   position: absolute;
-  min-width: 100%;
-  z-index: -1;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 1px;
+  border-left: 1px solid #d9d9d9;
+  content: '';
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  top: 0;
+  bottom: 0;
+}
+.kd-tree-show-line .kd-tree-node-indent-active::before {
+  border-color: var(--kd-c-tree-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-node-root {
   position: relative;
@@ -192,20 +206,10 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: 1px;
-  border-top: 0;
-  border-left: 11px;
-  border-bottom: 0;
-  border-right: 10px;
-  border-color: white;
-  border-style: solid;
+  width: var(--kd-c-tree-expand-icon-sizing-width, 16px);
+  margin-right: 6px;
   height: 100%;
   cursor: default;
-  opacity: 0;
-}
-.kd-tree-node-indent-line {
-  background-color: black;
-  opacity: 1;
 }
 .kd-tree-node-icon {
   cursor: pointer;
@@ -316,6 +320,9 @@
   width: 100%;
   height: 100%;
 }
+.kd-tree-node-draggabled.kd-tree-node-dragging .kd-tree-node-indent::before {
+  border-color: transparent;
+}
 .kd-tree-node-drag-over {
   background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
   -webkit-box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);

package/lib/tree/style/index.less

@@ -19,10 +19,26 @@
     min-width: 100%;
     flex-shrink: 0;
   }
-  &-plantom {
-    position: absolute;
-    min-width: 100%;
-    z-index: -1;
+
+  &-show-line {
+    .@{tree-node-prefix-cls}-indent {
+      position: relative;
+      &::before {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1px;
+        border-left: 1px solid #d9d9d9;
+        content: '';
+        box-sizing: border-box;
+        top: 0;
+        bottom: 0;
+      }
+
+      &-active::before {
+        border-color: @tree-color-theme;
+      }
+    }
   }
 }
 
@@ -56,21 +72,13 @@
 
   &-indent {
     display: flex;
-    width: 1px;
-    border-top: 0;
-    border-left: 11px;
-    border-bottom: 0;
-    border-right: 10px;
-    border-color: white;
-    border-style: solid;
+    width: @tree-expand-icon-width;
+    margin-right: 6px;
+
     height: 100%;
     cursor: default;
-    opacity: 0;
-  }
-  &-indent-line {
-    background-color: black;
-    opacity: 1;
   }
+
   &-icon {
     cursor: pointer;
     height: @tree-expand-icon-height;
@@ -135,6 +143,12 @@
     align-items: center;
     width: 100%;
     height: 100%;
+
+    &.@{tree-node-prefix-cls}-dragging {
+      .@{tree-node-prefix-cls}-indent::before {
+        border-color: transparent;
+      }
+    }
   }
 
   &-drag-over {
@@ -143,13 +157,14 @@
   }
 
   &-drag-line {
-    &-top, &-bottom {
+    &-top,
+    &-bottom {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       border-top: 2px solid @tree-node-drag-line-border-color;
-      
+
       &::before {
         content: '';
         width: 4px;

package/lib/tree/tree.d.ts

@@ -70,5 +70,6 @@ export declare type KeysDataType = {
 export declare type PosDataType = {
     [key: string]: TreeNodeData;
 };
+export declare type SearchStatus = 'NONE' | 'SEARCH_START' | 'SEARCH_DONE';
 declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<unknown>>;
 export default Tree;

package/lib/tree/tree.js

@@ -16,6 +16,7 @@ var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-core
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -38,6 +39,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _classNames;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -91,9 +93,10 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onlyExpandOnClickIcon = _TreeProps$onlyExpand === void 0 ? false : _TreeProps$onlyExpand,
     loadData = TreeProps.loadData,
     notFoundContent = TreeProps.notFoundContent,
-    others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent"]);
+    showLine = TreeProps.showLine,
+    others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine"]);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
-  var treeNodeClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(treePrefixCls), true));
+  var treeNodeClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(treePrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(treePrefixCls, "-show-line"), showLine), _classNames));
   var treeRootClassName = "".concat(treePrefixCls, "-root");
   var estimatedItemSize = innerEstimatedItemSize; // 节点高度
   var _React$useMemo = _react.default.useMemo(function () {
@@ -137,17 +140,21 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
     loadingKeys = _React$useState12[0],
     setLoadingKeys = _React$useState12[1];
-  var _React$useState13 = _react.default.useState([]),
+  var _React$useState13 = _react.default.useState('NONE'),
     _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-    searchExpandedKeys = _React$useState14[0],
-    setSearchExpandedKeys = _React$useState14[1];
+    searchStatus = _React$useState14[0],
+    setSearchStatus = _React$useState14[1];
   var isSearching = _react.default.useMemo(function () {
     return typeof filterTreeNode === 'function' && !!filterValue;
   }, [filterValue]);
   (0, _react.useEffect)(function () {
-    setSearchExpandedKeys([]);
+    if (isSearching) {
+      setSearchStatus('SEARCH_START');
+    } else {
+      setSearchStatus('NONE');
+    }
   }, [filterValue]);
-  var _useExpand = (0, _treeHooks.useExpand)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchExpandedKeys),
+  var _useExpand = (0, _treeHooks.useExpand)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus),
     _useExpand2 = (0, _slicedToArray2.default)(_useExpand, 2),
     expandedKeys = _useExpand2[0],
     setExpandedKeys = _useExpand2[1];
@@ -232,12 +239,9 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       node: node,
       expanded: expanded
     });
-    if (isSearching) {
-      var newSearchExpandedKeys = expanded ? (0, _treeUtils.addKeys)(searchExpandedKeys, [key]) : (0, _treeUtils.delKey)(searchExpandedKeys, [key]);
-      setSearchExpandedKeys(newSearchExpandedKeys);
-    }
     setScrollKey(undefined);
     setIsInit(false);
+    setSearchStatus('SEARCH_DONE');
     if (expanded && loadData) {
       handleNodeLoad(loadedKeys, loadingKeys, node);
     }
@@ -382,6 +386,16 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   (0, _react.useEffect)(function () {
     setCheckedKeys(checkedKeys);
   }, [checkedKeys, setCheckedKeys]);
+  var isSelectedNodeChildrenKey = function isSelectedNodeChildrenKey() {
+    var parentKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var key = Array.isArray(selectedKeys) ? selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0] : selectedKeys;
+    return (0, _includes.default)(parentKeys).call(parentKeys, key);
+  };
+  var seletedKeyLevel = (0, _react.useMemo)(function () {
+    var _a;
+    var key = Array.isArray(selectedKeys) ? selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0] : selectedKeys;
+    return (_a = keysData === null || keysData === void 0 ? void 0 : keysData[key]) === null || _a === void 0 ? void 0 : _a.level;
+  }, [keysData, selectedKeys]);
   var renderTreeNode = function renderTreeNode(item) {
     var checked = (0, _treeUtils.getChecked)(checkedKeys, item.key);
     var indeterminate = (0, _treeUtils.getHalfChecked)(halfCheckedKeys, item.key);
@@ -416,9 +430,11 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     item.onlyExpandOnClickIcon = onlyExpandOnClickIcon;
     item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
     item.loadData = loadData;
+    item.isActiveLine = showLine && isSelectedNodeChildrenKey(item.pathParentKeys);
     return /*#__PURE__*/_react.default.createElement(_treeNode.default, (0, _extends2.default)({}, item, {
       key: item.key,
-      ref: treeNodeRef
+      ref: treeNodeRef,
+      activeLevel: seletedKeyLevel
     }));
   };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({

package/lib/tree/treeHooks.d.ts

@@ -1,9 +1,9 @@
-import { TreeNodeData, KeysDataType } from './tree';
+import { TreeNodeData, KeysDataType, SearchStatus } from './tree';
 import React from 'react';
 export declare const useViewportHeight: (height: number, listRef: React.RefObject<HTMLElement>) => number[];
 export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
 export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
 export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
-export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
 export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
 export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];

package/lib/tree/treeHooks.js

@@ -75,22 +75,22 @@ var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultChe
   return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
 };
 exports.useChecked = useChecked;
-var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchExpandedKeys) {
+var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus) {
   var expandScrollkeys = [];
   if (scrollKey) {
     var pos = (0, _treeUtils.getPos)(flattenAllData, scrollKey);
     expandScrollkeys = (0, _treeUtils.getAllParentKeys)(flattenAllData, pos);
   }
   var initialExpandedKeys = _react.default.useMemo(function () {
-    return (0, _treeUtils.getInitExpandedKeys)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching, keysData, searchExpandedKeys, isInit);
-  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching, keysData, searchExpandedKeys, isInit]);
+    return (0, _treeUtils.getInitExpandedKeys)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching, keysData, isInit, searchStatus);
+  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching, keysData, isInit, searchStatus]);
   var _React$useState7 = _react.default.useState(initialExpandedKeys),
     _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
     expandedKeys = _React$useState8[0],
     setExpandedKeys = _React$useState8[1];
   _react.default.useEffect(function () {
     setExpandedKeys(initialExpandedKeys);
-  }, [flattenAllData, expandedKeysProps, searchExpandedKeys, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey]);
+  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus]);
   return [expandedKeys, setExpandedKeys];
 };
 exports.useExpand = useExpand;
@@ -133,8 +133,13 @@ var useSelect = function useSelect(selectedKeysProps, defaultSelectedKeys) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var mounting = (0, _react.useRef)(true);
   (0, _react.useEffect)(function () {
-    selectedKeysProps && setSelectedKeys(selectedKeysProps);
+    if (mounting.current) {
+      mounting.current = false;
+      return;
+    }
+    setSelectedKeys(selectedKeysProps);
   }, [selectedKeysProps]);
   return [selectedKeys, setSelectedKeys];
 };

package/lib/tree/treeNode.d.ts

@@ -10,9 +10,8 @@ export interface TreeNodeProps {
     draggable?: boolean;
     disableCheckbox?: boolean;
     icon?: React.ReactNode | ((props: any) => React.ReactNode);
-    showLine?: boolean | {
-        showLeafIcon: boolean;
-    };
+    isActiveLine?: boolean;
+    activeLevel?: number;
     showIcon?: boolean;
     selected?: boolean;
     style?: Map<string, string>;

package/lib/tree/treeNode.js

@@ -53,7 +53,8 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props) {
     hasChildNode = TreeNodeProps.hasChildNode,
     expand = TreeNodeProps.expand,
     title = TreeNodeProps.title,
-    showLine = TreeNodeProps.showLine,
+    isActiveLine = TreeNodeProps.isActiveLine,
+    activeLevel = TreeNodeProps.activeLevel,
     showIcon = TreeNodeProps.showIcon,
     selected = TreeNodeProps.selected,
     setDragNode = TreeNodeProps.setDragNode,
@@ -74,7 +75,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props) {
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
-    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
   var nodeData = _react.default.useMemo(function () {
     return (0, _extends2.default)({
       selectable: selectable,
@@ -145,12 +146,11 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props) {
     return icon;
   };
   var indent = function indent() {
-    var _classNames;
     var indentArr = [];
-    var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent-line"), !!showLine), _classNames));
     for (var i = 0; i < level; i++) {
+      var _classNames;
       indentArr.push( /*#__PURE__*/_react.default.createElement("span", {
-        className: className,
+        className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent-active"), !!isActiveLine && i === activeLevel), _classNames)),
         key: i,
         style: {
           height: "".concat(estimatedItemSize)
@@ -256,6 +256,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props) {
   }, [expandOnClickNode, handleExpandIconClick, handleSelect, onlyExpandOnClickIcon]);
   var handleDragStart = _react.default.useCallback(function (e) {
     if (!draggable) return;
+    e.target.classList.add("".concat(treeNodePrefixCls, "-dragging"));
     setDragNode(nodeData);
     onDragStart && onDragStart(e, props);
   }, [draggable, setDragNode, nodeData, onDragStart, props]);

package/lib/tree/utils/treeUtils.d.ts

@@ -1,4 +1,4 @@
-import { TreeNodeData, KeysDataType } from '../tree';
+import { TreeNodeData, KeysDataType, SearchStatus } from '../tree';
 /**
  * 打平所有数组，并添加pos位置信息，
  * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
@@ -60,6 +60,6 @@ export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
 };
 export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
 export declare const getAllNodeKeys: (data: any[]) => string[];
-export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[], isInit: boolean) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, isInit: boolean, searchStatus: SearchStatus) => string[];
 export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
 export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;

package/lib/tree/utils/treeUtils.js

@@ -617,8 +617,8 @@ var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys, defau
   var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
   var isSearching = arguments.length > 8 ? arguments[8] : undefined;
   var keysData = arguments.length > 9 ? arguments[9] : undefined;
-  var searchExpandedKeys = arguments.length > 10 ? arguments[10] : undefined;
-  var isInit = arguments.length > 11 ? arguments[11] : undefined;
+  var isInit = arguments.length > 10 ? arguments[10] : undefined;
+  var searchStatus = arguments.length > 11 ? arguments[11] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : (0, _concat.default)(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : (0, _concat.default)(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
   if (isInit) {
     if (defaultExpandAll) {
@@ -639,11 +639,10 @@ var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys, defau
       }
     }
   }
-  if (isSearching) {
-    var _context6;
-    keys = (0, _concat.default)(_context6 = []).call(_context6, (0, _toConsumableArray2.default)(searchExpandedKeys), (0, _toConsumableArray2.default)(getAllFilterKeys(data, filterTreeNode, keysData).filterExpandKeys));
+  if (isSearching && searchStatus === 'SEARCH_START') {
+    keys = (0, _toConsumableArray2.default)(getAllFilterKeys(data, filterTreeNode, keysData).filterExpandKeys);
   }
-  return (0, _from.default)(new _set.default((0, _toConsumableArray2.default)(keys)));
+  return keys;
 };
 exports.getInitExpandedKeys = getInitExpandedKeys;
 var getExpandedKeys = function getExpandedKeys(expandedKeys) {

package/lib/tree-select/interface.d.ts

@@ -56,6 +56,7 @@ export interface ITreeSelectProps<T extends TreeSelectValue> extends AbstractSel
     defaultValue?: T;
     mode?: Mode;
     autoFocus?: boolean;
+    status?: 'error';
     onlyExpandOnClickIcon?: boolean;
     onChange?: (value: T, treeNode: TreeNodeData) => void;
     onSelect?: (value: T extends (infer I)[] ? I : T, { checked, node, event }: any) => void;

package/lib/tree-select/style/index.css

@@ -163,7 +163,7 @@
 .kd-tree-select-icon-clear:hover {
   color: var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-tree-select-focused {
+.kd-tree-select-focused:not(.kd-tree-select-error) {
   border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-tree-select-placeholder {
@@ -181,7 +181,7 @@
 .kd-tree-select-underline {
   border-bottom: 1px solid var(--kd-c-tree-select-color-border, var(--kd-g-color-input, #999));
 }
-.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
   border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-select-bordered {
@@ -189,7 +189,7 @@
   padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px) !important;
   border-radius: var(--kd-c-tree-select-bordered-radius-border, 2px);
 }
-.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
   border: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-select-bordered .kd-tree-select-suffix {
@@ -312,7 +312,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-tree-select .kd-tree-select-single-focused {
+.kd-tree-select .kd-tree-select-single-focused:not(.kd-tree-select-error) {
   border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-tree-select .kd-tree-select-single-disabled {
@@ -495,6 +495,9 @@
   color: var(--kd-c-tree-select-footer-color-text-selected, #0e5fd8);
   padding: 0 2px;
 }
+.kd-tree-select-error:not(.kd-tree-select-single-disabled):not(.kd-tree-select-multiple-disabled) {
+  border-color: var(--kd-c-tree-select-color-error, var(--kd-g-color-error, #fb2323));
+}
 .kd-tree-select.topLeft.hidden,
 .kd-tree-select.bottomLeft.hidden,
 .kd-tree-select.topRight.hidden,

package/lib/tree-select/style/index.less

@@ -59,7 +59,7 @@
     }
   }
 
-  &-focused {
+  &-focused:not(.@{tree-select-prefix-cls}-error) {
     .focusColor();
   }
   &-placeholder {
@@ -78,7 +78,9 @@
 
   &-underline {
     border-bottom: 1px solid @tree-select-g-color-border;
-    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled):not(
+        .@{tree-select-prefix-cls}-error
+      ) {
       border-bottom: 1px solid @tree-select-g-color-border-hover;
     }
   }
@@ -87,7 +89,9 @@
     border: 1px solid @tree-select-border-g-color-border;
     padding-left: @tree-select-bordered !important;
     border-radius: @tree-select-border-radius-border;
-    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled):not(
+        .@{tree-select-prefix-cls}-error
+      ) {
       border: 1px solid @tree-select-g-color-border-hover;
     }
 
@@ -206,7 +210,7 @@
         .over();
       }
     }
-    &-focused {
+    &-focused:not(.@{tree-select-prefix-cls}-error) {
       .focusColor();
     }
     &-disabled {
@@ -383,6 +387,10 @@
     }
   }
 
+  &-error:not(.@{tree-select-prefix-cls}-single-disabled):not(.@{tree-select-prefix-cls}-multiple-disabled) {
+    border-color: @tree-select-error-color;
+  }
+
   &.topLeft.hidden,
   &.bottomLeft.hidden,
   &.topRight.hidden,

package/lib/tree-select/style/token.less

@@ -22,6 +22,7 @@
 @tree-select-single-color-text: var(~'@{tree-select-custom-prefix}-single-color-text', @color-text-primary);
 @tree-select-clear-color: var(~'@{tree-select-custom-prefix}-icon-clear-color-text', #d9d9d9);
 @tree-select-clear-color-hover: var(~'@{tree-select-custom-prefix}-icon-clear-color-text-hover', #999);
+@tree-select-error-color: var(~'@{tree-select-custom-prefix}-color-error', @color-error);
 
 // font
 @tree-select-list-font-size: var(~'@{tree-select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小