@kdcloudjs/kdesign 1.4.1 → 1.5.2

package/lib/avatar/avatar.js

@@ -64,7 +64,8 @@ var InternalAvatar = function InternalAvatar(props, ref) {
       alt = avatarProps.alt,
       children = avatarProps.children,
       gap = avatarProps.gap,
-      disabled = avatarProps.disabled;
+      disabled = avatarProps.disabled,
+      srcSet = avatarProps.srcSet;
   (0, _devwarning.default)(AvatarSizes.indexOf(size) === -1 && typeof size !== 'number', 'avatar', "cannot found avatar type '".concat(size, "'"));
   (0, _devwarning.default)(AvatarShapes.indexOf(shape) === -1, 'avatar', "cannot found avatar shape '".concat(shape, "'"));
 
@@ -145,6 +146,7 @@ var InternalAvatar = function InternalAvatar(props, ref) {
   if (typeof src === 'string' && isImgExist) {
     childrenToRender = /*#__PURE__*/_react.default.createElement("img", {
       src: src,
+      srcSet: srcSet,
       draggable: draggable,
       onError: handleImgLoadError,
       alt: alt

package/lib/carousel/carousel.js

@@ -136,7 +136,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
     }
-  }, [isFadeEffect, beforeChange, currentIndex, children.length]);
+  }, [isFadeEffect, beforeChange, currentIndex, children === null || children === void 0 ? void 0 : children.length]);
 
   var next = _react.default.useCallback(function () {
     jumpTo(currentIndex + 1, true);
@@ -234,7 +234,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   }, [beforeChange, currentIndex]);
 
   var handleTransitionEnd = _react.default.useCallback(function () {
-    if (!autoplay) return;
+    if (!autoplay || !(children === null || children === void 0 ? void 0 : children.length)) return;
     var childrenL = children.length;
     var newCurrentIndex = currentIndex;
 
@@ -251,7 +251,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     afterChange && afterChange(currentIndex);
     setCurrentIndex(newCurrentIndex);
     isScrollxEffect && setNeedAnimation(false);
-  }, [currentIndex, children.length, afterChange, isScrollxEffect, autoplay]);
+  }, [currentIndex, children === null || children === void 0 ? void 0 : children.length, afterChange, isScrollxEffect, autoplay]);
 
   var handleMouseEnter = _react.default.useCallback(function () {
     autoplayRef.current && clearTimeout(autoplayRef.current);
@@ -302,7 +302,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, renderDisplayList(), showDot() && /*#__PURE__*/_react.default.createElement(_slidebar.Slidebar, {
+  }, (children === null || children === void 0 ? void 0 : children.length) && renderDisplayList(), (children === null || children === void 0 ? void 0 : children.length) && showDot() && /*#__PURE__*/_react.default.createElement(_slidebar.Slidebar, {
     number: children.length,
     currentIndex: currentIndex,
     dotsClassName: dots,

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

@@ -210,7 +210,6 @@ declare const compDefaultProps: {
         strokeWidth: number;
     };
     Radio: {
-        checked: boolean;
         defaultChecked: boolean;
         disabled: boolean;
     };

package/lib/config-provider/compDefaultProps.js

@@ -235,7 +235,6 @@ var compDefaultProps = {
     strokeWidth: 4
   },
   Radio: {
-    checked: false,
     defaultChecked: false,
     disabled: false
   },

package/lib/date-picker/range-picker.d.ts

@@ -17,6 +17,7 @@ export interface RangePickerSharedProps {
     ranges?: Record<string, DateType[] | (() => DateType[])>;
     separator?: React.ReactNode;
     allowEmpty?: [boolean, boolean];
+    suffixIcon?: React.ReactNode;
     mode?: [PanelMode, PanelMode];
     onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
     onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;

package/lib/date-picker/range-picker.js

@@ -150,6 +150,7 @@ function DatePicker(props) {
       minuteStep = _datePickerProps$minu === void 0 ? 1 : _datePickerProps$minu,
       _datePickerProps$seco = datePickerProps.secondStep,
       secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
+      suffixIcon = datePickerProps.suffixIcon,
       renderExtraFooter = datePickerProps.renderExtraFooter,
       disabledHours = datePickerProps.disabledHours,
       disabledMinutes = datePickerProps.disabledMinutes,
@@ -732,6 +733,7 @@ function DatePicker(props) {
     startOpen: startOpen,
     endOpen: endOpen,
     needConfirmButton: needConfirmButton,
+    suffixIcon: suffixIcon,
     format: _format,
     open: mergedOpen,
     readOnly: inputReadOnly,

package/lib/date-picker/style/index.css

@@ -128,7 +128,7 @@
   right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 1px);
 }
 .kd-date-picker-small.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 9px);
+  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 12px);
 }
 .kd-date-picker-large {
   height: var(--kd-c-date-picker-large-sizing-height, 36px);
@@ -158,7 +158,7 @@
   right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 1px);
 }
 .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 9px);
+  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
 }
 .kd-date-picker-borderless {
   border: 0;
@@ -276,7 +276,7 @@
   -ms-flex-item-align: center;
       align-self: center;
   margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
-  color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-secondary, #666));
   line-height: 1;
   pointer-events: none;
 }
@@ -286,6 +286,9 @@
 .kd-date-picker:hover .kd-date-picker-clear {
   opacity: 1;
 }
+.kd-date-picker:hover .kd-date-picker-suffix {
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
 .kd-date-picker-clear {
   position: absolute;
   top: 50%;

package/lib/date-picker/style/index.less

@@ -27,7 +27,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 9px);
+      right: calc(@date-small-font-size + 12px);
     }
   }
 
@@ -59,7 +59,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 9px);
+      right: calc(@date-middle-font-size + 11px);
     }
   }
 
@@ -131,7 +131,7 @@
   &-suffix {
     align-self: center;
     margin-left: @date-suffix-spacing-margin-left;
-    color: @date-icon-color;
+    color: @date-input-color;
     line-height: 1;
     pointer-events: none;
 
@@ -144,6 +144,10 @@
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
+
+    .@{datePicker-prefix-cls}-suffix {
+      color: @date-color-background-checked;
+    }
   }
 
   &-clear {

package/lib/dropdown/style/index.css

@@ -229,6 +229,9 @@
 .kd-dropdown-menu-item:not(.disabled):hover {
   background-color: var(--kd-c-dropdown-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
+.kd-dropdown-menu-item:not(.disabled):hover > a {
+  color: var(--kd-c-dropdown-item-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
   color: var(--kd-g-color-theme, #5582f3);

package/lib/dropdown/style/index.less

@@ -72,6 +72,10 @@
       transition: background-color @duration-promptly;
       &:not(.disabled):hover {
         background-color: @dropdown-item-hover-bg-color;
+
+        > a {
+          color: @dropdown-item-hover-color-text;
+        }
       }
 
       &:not(.disabled):active,

package/lib/dropdown/style/token.less

@@ -8,6 +8,7 @@
 @dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
 @dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
 @dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
+@dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
 @dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
 @dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
 

package/lib/input/ClearableLabeledInput.js

@@ -69,7 +69,7 @@ var ClearableInput = function ClearableInput(props) {
 
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-suffix")
-    }, renderClearIcon(), suffix);
+    }, !disabled && renderClearIcon(), suffix);
   };
 
   var renderInputWithFixNode = function renderInputWithFixNode(originElement) {
@@ -93,7 +93,7 @@ var ClearableInput = function ClearableInput(props) {
   };
 
   var renderInputWithLabel = function renderInputWithLabel(originElement) {
-    var _classNames4, _context2, _classNames5, _context3;
+    var _classNames4, _context2, _classNames5;
 
     if (!addonBefore && !addonAfter) {
       return originElement;
@@ -113,8 +113,7 @@ var ClearableInput = function ClearableInput(props) {
       className: inputGroupClasses,
       style: style
     }, addonBeforeNode, /*#__PURE__*/_react.default.cloneElement(originElement, {
-      style: null,
-      className: (0, _concat.default)(_context3 = "".concat(originElement.props.className || '', " ")).call(_context3, prefixCls, "-wrapper")
+      style: null
     }), addonAfterNode));
   };
 

package/lib/input/style/index.css

@@ -356,6 +356,15 @@ textarea {
 .kd-input-wrapper-focused {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
+.kd-input-wrapper-focused .kd-input-clear-icon,
+.kd-input-wrapper-focused .kd-input-textarea-clear-icon {
+  color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
+}
+.kd-input-wrapper-disabled {
+  background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  cursor: not-allowed;
+}
 .kd-input-wrapper-textarea {
   width: 100%;
   min-width: 0;
@@ -404,6 +413,10 @@ textarea {
 .kd-input-clear-icon,
 .kd-input-textarea-clear-icon {
   cursor: pointer;
+  color: var(--kd-c-input-color-border, #999);
+}
+.kd-input-clear-icon:hover,
+.kd-input-textarea-clear-icon:hover {
   color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-clear-icon i,

package/lib/input/style/index.less

@@ -121,7 +121,17 @@ textarea {
 
 		&-focused {
 			border-color: @input-border-color-focused;
+
+      .@{input-prefix-cls}-clear-icon, .@{input-prefix-cls}-textarea-clear-icon {
+        color: @input-border-color-focused;
+      }
 		}
+
+    &-disabled {
+      background-color: @input-background-color-disabled-inner;
+      border-color: @input-border-color-disabled-inner;
+      cursor: not-allowed;
+    }
 	}
 	&-wrapper-textarea {
 		.input(@input-prefix-cls);

package/lib/input/style/mixin.less

@@ -47,7 +47,12 @@
 
 .input-clear-icon() {
   cursor: pointer;
-  color: @input-border-color-focused;
+  color: @input-color-border;
+
+  &:hover {
+    color: @input-border-color-focused;
+  }
+
   i {
     vertical-align: middle;
     font-size: 12px !important;

package/lib/menu/menu.d.ts

@@ -15,6 +15,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
     additionalTools?: React.ReactNode;
     onOpenChange?: SubMenuChangeEventHandler;
     theme?: MenuTheme;
+    accordion?: boolean;
 }
 interface MenuType extends React.FC<MenuProps> {
     Item: typeof MenuItem;

package/lib/menu/menu.js

@@ -93,10 +93,12 @@ var Menu = function Menu(props) {
       className = _b.className,
       theme = _b.theme,
       collapsed = _b.collapsed,
-      restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
+      accordion = _b.accordion,
+      restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed", "accordion"]);
 
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
   (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
+  (0, _devwarning.default)(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
 
   var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -170,6 +172,10 @@ var Menu = function Menu(props) {
     if (clean) {
       openSubMenuSet.clear();
     } else {
+      if (mode === 'inline' && accordion) {
+        openSubMenuSet.clear();
+      }
+
       if (isAdd) {
         openSubMenuSet.add(openKey);
       } else {

package/lib/radio/radio.js

@@ -25,6 +25,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 
 var _utils = require("../_utils");
@@ -73,13 +75,17 @@ var InternalRadio = function InternalRadio(props, ref) {
       restProps = __rest(_a, ["style", "checked", "children", "className", "radioType", "defaultChecked", "prefixCls"]); // 属性需要合并一遍用户定义的默认属性
 
 
+  var getChecked = function getChecked() {
+    return (0, _isBoolean.default)(checked) ? checked : defaultChecked;
+  };
+
   var getPrefix = function getPrefix(radioType) {
     return "radio".concat(radioType === 'square' ? "-".concat(radioType) : '');
   };
 
   var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, getPrefix(radioType), customPrefixcls); // 样式前缀
 
-  var _React$useState = _react.default.useState(checked || defaultChecked),
+  var _React$useState = _react.default.useState(getChecked()),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isChecked = _React$useState2[0],
       setIsChecked = _React$useState2[1];

package/lib/select/select.js

@@ -476,7 +476,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var selectedVal = multipleRef.current.selectedVal; // 选择器下拉icon样式
 
     var arrowIconCls = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
-    var iconShow = allowClear && (isMultiple ? mulOptions.length > 0 : selectedVal);
+    var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : selectedVal);
     var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
       onClick: handleReset,

package/lib/select/style/index.css

@@ -428,7 +428,7 @@
 .kd-select-item-option-disabled {
   color: var(--kd-c-select-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
-  background-color: var(--kd-c-select-item-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+  background-color: var(--kd-c-select-item-color-background-disabled, #fff);
 }
 .kd-select-size-small {
   min-height: var(--kd-c-select-sizing-height-small, 24px);
@@ -472,7 +472,7 @@
 }
 .kd-select-single-disabled {
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
-  color: var(--kd-c-select-color-text-disabled, #212121);
+  color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-select-single-disabled:hover {
   cursor: not-allowed;
@@ -484,13 +484,13 @@
   opacity: 1;
 }
 .kd-select-single-text {
-  color: #666;
+  color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .kd-select-single-disabled-text {
-  color: var(--kd-c-select-color-text-disabled, #212121);
+  color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-select .kd-select-selection-item {
   display: -webkit-inline-box;
@@ -564,7 +564,7 @@
 .kd-select-multiple-disabled {
   cursor: not-allowed;
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
-  color: var(--kd-c-select-color-text-disabled, #212121);
+  color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-select-multiple-disabled .kd-select-suffix {
   color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);

package/lib/select/style/index.less

@@ -234,7 +234,7 @@
       opacity: 1;
     }
     &-text {
-      color: #666;
+      color: @select-single-color-text;
       .over();
     }
     &-disabled-text {

package/lib/select/style/token.less

@@ -5,7 +5,7 @@
 
 // color
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
-@select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
+@select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
 @select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
 @select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
 @select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
@@ -18,8 +18,9 @@
 @select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
 @select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
-@select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', #212121);
+@select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
 @select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
+@select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/lib/table/table.js

@@ -87,7 +87,10 @@ function Table(props) {
       getTableProps = props.getTableProps,
       contextMenu = props.contextMenu,
       rangeSelection = props.rangeSelection,
-      cssVariables = props.cssVariables;
+      cssVariables = props.cssVariables,
+      stickyScrollHeight = props.stickyScrollHeight,
+      scrollbarWidth = props.scrollbarWidth,
+      scrollLoad = props.scrollLoad;
 
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
       getPrefixCls = _useContext.getPrefixCls,
@@ -166,7 +169,10 @@ function Table(props) {
     hasHeader: hasHeader,
     useOuterBorder: useOuterBorder,
     defaultColumnWidth: defaultColumnWidth,
-    cssVariables: cssVariables
+    cssVariables: cssVariables,
+    stickyScrollHeight: stickyScrollHeight,
+    scrollbarWidth: scrollbarWidth,
+    scrollLoad: scrollLoad
   }));
 }
 

package/lib/tree/style/index.css

@@ -221,6 +221,19 @@
 .kd-tree-node-title-disabled {
   color: var(--kd-c-tree-node-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-tree-node-title-wrap {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+}
 .kd-tree-node-title {
   white-space: nowrap;
   margin-left: 6px;
@@ -248,12 +261,28 @@
   width: 100%;
   height: 100%;
 }
+.kd-tree-node-drag-over {
+  background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
+  border: 2px solid var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+}
 .kd-tree-node-drag-line {
   position: absolute;
   left: 0;
   top: 100%;
   width: 100%;
-  border-top: 1px solid #fc8555;
+  border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
+}
+.kd-tree-node-drag-line::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
+  position: absolute;
+  top: -1px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
 .kd-tree-node-leaf-icon {
   height: var(--kd-c-tree-node-icon-sizing-height, 20px);

package/lib/tree/style/index.less

@@ -93,6 +93,13 @@
   &-title-disabled {
     color: @tree-node-disabled-color;
   }
+  &-title-wrap {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
   &-title {
     white-space: nowrap;
     margin-left: 6px;
@@ -118,12 +125,29 @@
     height: 100%;
   }
 
+  &-drag-over {
+    background-color: @tree-node-drag-over-color-background;
+    border: 2px solid @tree-node-drag-over-border-color;
+  }
+
   &-drag-line {
     position: absolute;
     left: 0;
     top: 100%;
     width: 100%;
-    border-top: 1px solid #fc8555;
+    border-top: 2px solid @tree-node-drag-line-border-color;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 4px;
+      background-color: #fff;
+      border-radius: 50%;
+      border: 2px solid @tree-node-drag-line-border-color;
+      position: absolute;
+      top: -1px;
+      transform: translateY(-50%);
+    }
   }
   &-leaf-icon {
     height: @tree-node-icon-height;

package/lib/tree/style/token.less

@@ -11,6 +11,9 @@
 @tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
 @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
+@tree-node-drag-over-border-color: var(~'@{tree-prefix}-node-drag-over-color-border', #5582f3);
+@tree-node-drag-over-color-background: var(~'@{tree-prefix}-node-drag-over-color-background', #E3EBFF);
+@tree-node-drag-line-border-color: var(~'@{tree-prefix}-node-drag-line-color-background', #276FF5);
 
 // sizing
 @tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);

package/lib/tree/tree.d.ts

@@ -12,6 +12,8 @@ export interface TreeProps {
     disabled?: boolean;
     draggable?: boolean;
     expandedKeys?: string[];
+    filterValue?: string;
+    filterTreeNode?: () => boolean;
     height?: number;
     icon?: ReactNode | ((props: any) => ReactNode);
     switcherIcon?: ReactNode | ((props: any) => ReactNode) | [ReactNode | ((props: any) => ReactNode)];