@kdcloudjs/kdesign 1.7.35 → 1.7.39

package/es/clipboard/util.js

@@ -0,0 +1,197 @@
+/**
+ * 获取元素的内容
+ * @param {HTMLElement} element
+ * @return {string}
+ */
+var getContent = function getContent(element) {
+  var content;
+  if (element.nodeName === 'SELECT') {
+    content = element.value;
+  } else if (element.nodeName === 'INPUT') {
+    content = element.value;
+  } else if (element.nodeName === 'TEXTAREA') {
+    content = element.value;
+  } else {
+    // 其他类型通过 select 与 range 来获取文本
+    // 获取 select
+    var selection = window.getSelection();
+    // 创建 range
+    var range = document.createRange();
+    // 设置 range 的元素
+    range.selectNodeContents(element);
+    // 重置 select
+    selection.removeAllRanges();
+    // 设置 select 的 range
+    selection.addRange(range);
+    // 获取选中的文本
+    content = selection.toString();
+    // 获取到文本后清空选中范围
+    selection.removeAllRanges();
+  }
+  return content;
+};
+/**
+ * 清空元素的内容
+ * @param {HTMLElement} element
+ */
+var clearElement = function clearElement(element) {
+  if (element.nodeName === 'SELECT') {
+    ;
+    element.value = '';
+  } else if (element.nodeName === 'INPUT') {
+    ;
+    element.value = '';
+  } else if (element.nodeName === 'TEXTAREA') {
+    ;
+    element.value = '';
+  } else {
+    element.innerHTML = '';
+  }
+};
+/**
+ * 由将被复制的文本为 value 创建一个 HTMLTextAreaElement 容器
+ * @param {String} value
+ * @return {HTMLTextAreaElement}
+ */
+var createContainer = function createContainer(value) {
+  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+  var container = document.createElement('textarea');
+  // 防止在 ios 上缩放
+  container.style.fontSize = '12pt';
+  // 重置样式
+  container.style.border = '0';
+  container.style.padding = '0';
+  container.style.margin = '0';
+  // 把元素定位在视窗外
+  container.style.position = 'absolute';
+  container.style[isRTL ? 'right' : 'left'] = '-9999px';
+  var yPosition = window.pageYOffset || document.documentElement.scrollTop;
+  container.style.top = "".concat(yPosition, "px");
+  // 设置为只读
+  container.setAttribute('readonly', '');
+  // 将文本赋值给元素
+  container.value = value;
+  document.body.appendChild(container);
+  return container;
+};
+/**
+ * 删除元素
+ * @param {HTMLElement} container
+ */
+var removeContainer = function removeContainer(container) {
+  document.body.removeChild(container);
+};
+/**
+ * 添加选中状态
+ * @param {HTMLElement} element
+ */
+var addSelection = function addSelection(element) {
+  // 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中，getSelection() 对 <textarea> 及 <input> 元素不起作用
+  // 使用 select 对 <textarea> 及 <input> 单独处理
+  if (element.nodeName === 'INPUT') {
+    ;
+    element.select();
+  } else if (element.nodeName === 'TEXTAREA') {
+    ;
+    element.select();
+  } else {
+    var selection = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(element);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+};
+/**
+ * 移除选中状态
+ * @param {HTMLElement} element
+ */
+var removeSelection = function removeSelection(element) {
+  var _a;
+  // 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中，getSelection() 对 <textarea> 及 <input> 元素不起作用
+  // 使用 setSelectRange 对 <textarea> 及 <input> 单独处理
+  if (element.nodeName === 'INPUT') {
+    ;
+    element.setSelectionRange(0, 0);
+  } else if (element.nodeName === 'TEXTAREA') {
+    ;
+    element.setSelectionRange(0, 0);
+  } else {
+    (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+  }
+};
+/**
+ * 剪贴板复制操作
+ * @param {string | HTMLElement} target
+ * @return {string}
+ */
+var onClipboardCopy = function onClipboardCopy(target) {
+  var copiedValue;
+  if (typeof target === 'string') {
+    // 如果传的是字符串，直接复制值
+    copiedValue = target;
+    if (navigator.clipboard) {
+      // navigator.clipboard api 存在时，优先使用其进行复制操作
+      if (copiedValue !== '') {
+        navigator.clipboard.writeText(copiedValue).then(null, function () {
+          throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
+        });
+      }
+    } else {
+      var container = createContainer(copiedValue);
+      addSelection(container);
+      document.execCommand('copy');
+      removeSelection(container);
+      removeContainer(container);
+    }
+  } else {
+    // 通过元素来复制
+    copiedValue = getContent(target);
+    if (navigator.clipboard) {
+      if (copiedValue !== '') {
+        navigator.clipboard.writeText(copiedValue).then(null, function () {
+          throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
+        });
+      }
+    } else {
+      addSelection(target);
+      document.execCommand('copy');
+      removeSelection(target);
+    }
+  }
+  return copiedValue;
+};
+/**
+ * 剪贴板剪切操作
+ * @param {HTMLElement} target
+ * @return {string}
+ */
+var onClipboardCut = function onClipboardCut(target) {
+  var cutValue = getContent(target);
+  if (target.nodeName === 'SELECT' || target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
+    // 对于输入框，使用 document.execCommand('cut') 来剪切，防止受控的输入框无法清空内容
+    if (document.execCommand) {
+      addSelection(target);
+      document.execCommand('cut');
+      removeSelection(target);
+    } else {
+      // document.execCommand 命令不兼容，则抛出异常，因为受控的输入框无法清空元素内容
+      throw new Error("failed to cut to clipboard through unavailable api \"document.execCommand\"");
+    }
+  } else {
+    // 对于其他标签的元素，使用 navigator 写入剪贴板，并手动清空内容，防止其他标签无法清空内容
+    if (navigator.clipboard) {
+      if (cutValue !== '') {
+        navigator.clipboard.writeText(cutValue).then(null, function () {
+          throw new Error("failed to cut to clipboard of value '".concat(cutValue, "'"));
+        });
+      }
+      clearElement(target);
+    } else {
+      // navigator.clipboard 命令不兼容，则抛出异常，因为非输入框无法适用 document.execCommand('cut')
+      throw new Error("failed to cut to clipboard through unavailable api \"navigator.clipboard\"");
+    }
+  }
+  return cutValue;
+};
+export { onClipboardCopy, onClipboardCut };

package/es/config-provider/compDefaultProps.d.ts

@@ -462,5 +462,10 @@ declare const compDefaultProps: {
         optionHighlightProps: string;
         allowClear: boolean;
     };
+    Clipboard: {
+        action: string;
+        disabled: boolean;
+        size: string;
+    };
 };
 export default compDefaultProps;

package/es/config-provider/compDefaultProps.js

@@ -479,6 +479,11 @@ var compDefaultProps = {
     showDescription: true,
     optionHighlightProps: 'highlightText',
     allowClear: true
+  },
+  Clipboard: {
+    action: 'copy',
+    disabled: false,
+    size: 'middle'
   }
 };
 export default compDefaultProps;

package/es/index.d.ts

@@ -55,3 +55,4 @@ export { default as BaseData } from './base-data';
 export { default as Link } from './link';
 export { default as TreeSelect } from './tree-select';
 export { default as ColorPicker } from './color-picker';
+export { default as Clipboard } from './clipboard';

package/es/index.js

@@ -54,4 +54,5 @@ export { default as Stepper } from './stepper';
 export { default as BaseData } from './base-data';
 export { default as Link } from './link';
 export { default as TreeSelect } from './tree-select';
-export { default as ColorPicker } from './color-picker';
+export { default as ColorPicker } from './color-picker';
+export { default as Clipboard } from './clipboard';

package/es/input-number/inputNumber.js

@@ -58,6 +58,10 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceUpdate = _useState4[0],
+    setForceUpdate = _useState4[1];
   var inputStatus = useRef({
     isHandleChange: false,
     inputFocused: false
@@ -109,10 +113,11 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   var handleChange = function handleChange(event) {
     inputStatus.current.isHandleChange = true;
     var legalNumber = verifiValue(event.target.value);
+    updateSelectionRangePosition(event);
     if (legalNumber === false) {
+      setForceUpdate(forceUpdate + 1);
       return false;
     }
-    updateSelectionRangePosition(event);
     value === undefined && setInputValue(legalNumber);
     onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
@@ -151,23 +156,23 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       if (decimalValueLength <= decimalLength && integerValueLength <= digitLength - decimalLength) {
         resultNumerical = numerical;
       } else if (integerValueLength > digitLength - decimalLength) {
-        var _context;
-        resultNumerical = _concatInstanceProperty(_context = "".concat(sign)).call(_context, integerValue.substr(0, digitLength - decimalLength));
+        var _context, _context2;
+        resultNumerical = mustInPrecisionScope ? inputValue : _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(sign)).call(_context2, integerValue.substr(0, digitLength - decimalLength))).call(_context, decimalValue ? '.' + decimalValue : '');
       } else if (decimalValueLength > decimalLength) {
-        var _context2, _context3;
-        resultNumerical = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(sign)).call(_context3, integerValue, ".")).call(_context2, decimalValue.substr(0, decimalLength));
+        var _context3, _context4;
+        resultNumerical = mustInPrecisionScope ? inputValue : _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(sign)).call(_context4, integerValue, ".")).call(_context3, decimalValue.substr(0, decimalLength));
       }
     } else if (typeof decimalLength !== 'number' && typeof digitLength === 'number') {
       if (integerValueLength >= digitLength) {
-        var _context4;
-        resultNumerical = _concatInstanceProperty(_context4 = "".concat(sign)).call(_context4, integerValue.substr(0, digitLength));
+        var _context5;
+        resultNumerical = _concatInstanceProperty(_context5 = "".concat(sign)).call(_context5, integerValue.substr(0, digitLength));
       } else {
-        var _context5, _context6, _context7;
-        resultNumerical = decimalValueLength ? _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(sign)).call(_context6, integerValue, ".")).call(_context5, decimalValue.substr(0, digitLength - integerValueLength)) : _concatInstanceProperty(_context7 = "".concat(sign)).call(_context7, integerValue);
+        var _context6, _context7, _context8;
+        resultNumerical = decimalValueLength ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "".concat(sign)).call(_context7, integerValue, ".")).call(_context6, decimalValue.substr(0, digitLength - integerValueLength)) : _concatInstanceProperty(_context8 = "".concat(sign)).call(_context8, integerValue);
       }
     } else if (typeof decimalLength === 'number' && typeof digitLength !== 'number') {
-      var _context8, _context9, _context10;
-      resultNumerical = decimalValueLength ? _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "".concat(sign)).call(_context9, integerValue, ".")).call(_context8, decimalValue.substr(0, decimalLength)) : _concatInstanceProperty(_context10 = "".concat(sign)).call(_context10, integerValue);
+      var _context9, _context10, _context11;
+      resultNumerical = decimalValueLength ? _concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "".concat(sign)).call(_context10, integerValue, ".")).call(_context9, decimalValue.substr(0, decimalLength)) : _concatInstanceProperty(_context11 = "".concat(sign)).call(_context11, integerValue);
     } else {
       resultNumerical = numerical;
     }
@@ -197,13 +202,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     });
   };
   var handleKeyDown = function handleKeyDown(event) {
-    var _context11;
+    var _context12;
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     if (!stepOption || props.disabled || props.readOnly) {
       return;
     }
     var keyCode = event.keyCode;
-    if (_includesInstanceProperty(_context11 = [38, 40]).call(_context11, keyCode)) {
+    if (_includesInstanceProperty(_context12 = [38, 40]).call(_context12, keyCode)) {
       event.preventDefault();
       handleStepChang(keyCode === 38 ? 'plus' : 'minus');
     }
@@ -310,7 +315,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   }, [inputValue, formatter]);
   var updateSelectionRangePosition = useSelectionRange({
     inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
-    inputValue: displayedInputValue
+    inputValue: displayedInputValue,
+    forceUpdate: forceUpdate
   });
   return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
     ref: inputNumberRef,

package/es/input-number/useSelectionRange.d.ts

@@ -1,4 +1,5 @@
-export default function useSelectionRange({ inputElement, inputValue, }: {
+export default function useSelectionRange({ inputElement, inputValue, forceUpdate, }: {
     inputElement: HTMLInputElement;
     inputValue: string;
+    forceUpdate: number;
 }): (event: any) => void;

package/es/input-number/useSelectionRange.js

@@ -2,7 +2,8 @@ import { useRef, useLayoutEffect } from 'react';
 import isNumber from 'lodash/isNumber';
 export default function useSelectionRange(_ref) {
   var inputElement = _ref.inputElement,
-    inputValue = _ref.inputValue;
+    inputValue = _ref.inputValue,
+    forceUpdate = _ref.forceUpdate;
   var refSelectionPosition = useRef();
   useLayoutEffect(function () {
     var position = refSelectionPosition.current;
@@ -10,7 +11,7 @@ export default function useSelectionRange(_ref) {
       var start = Math.max(0, inputValue.length - position);
       inputElement.setSelectionRange(start, start);
     }
-  }, [inputValue]);
+  }, [inputValue, forceUpdate]);
   return function (event) {
     var _event$target = event.target,
       end = _event$target.selectionEnd,

package/es/message/content.js

@@ -58,16 +58,13 @@ var Content = function Content(args) {
     }));
   };
   var getMainElement = function getMainElement() {
-    if (typeof content === 'string') {
+    if (typeof content === 'string' || /*#__PURE__*/React.isValidElement(content)) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "".concat(classPrefix, "-main")
       }, renderIcon(), /*#__PURE__*/React.createElement("div", {
         className: "".concat(classPrefix, "-text")
       }, content)), renderCloseIcon());
     }
-    if ( /*#__PURE__*/React.isValidElement(content)) {
-      return content;
-    }
     return null;
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, getMainElement());

package/es/select/interface.d.ts

@@ -53,6 +53,7 @@ export interface ISelectProps<T extends SelectValue> extends AbstractSelectProps
     defaultValue?: T;
     mode?: Mode;
     autoFocus?: boolean;
+    status?: 'error';
     onChange?: (value?: T, option?: React.ReactElement<any> | React.ReactElement<any>[]) => void;
     onSelect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;
     onDeselect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;

package/es/select/select.js

@@ -67,7 +67,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     _selectProps$popperSt = selectProps.popperStyle,
     popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt,
     tagRender = selectProps.tagRender,
-    virtualListProps = selectProps.virtualListProps;
+    virtualListProps = selectProps.virtualListProps,
+    status = selectProps.status;
   var isMultiple = mode === 'multiple'; // 是否多选
   var _useMergedState = useMergedState(undefined, {
       value: value,
@@ -127,7 +128,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   // 多选底部样式
   var multipleFooterCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true));
   // 多选，单选公共样式
-  var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch && focusd), _classNames6));
+  var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch && focusd), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-error"), status === 'error'), _classNames6));
   useEffect(function () {
     if (typeof props.visible !== 'undefined') {
       setOptionShow(props.visible);
@@ -786,12 +787,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       _spliceInstanceProperty(selectMulOpts).call(selectMulOpts, -1, 1);
       setMulOptions(_toConsumableArray(selectMulOpts));
       onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
-      // !isMultiple
-    } else if (which === KeyCode.BACKSPACE && allowClear && !isMultiple) {
-      setInitValue('');
-      onClear && onClear('');
-      setSearchValue('');
-      onChange && onChange(undefined);
     }
     // optionsList: up、down、enter
     if (optionShow) {

package/es/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/es/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/es/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/es/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/es/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/es/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;