@kdcloudjs/kdesign 1.3.9 → 1.5.0

package/es/tree/treeNode.js

@@ -56,6 +56,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = TreeNodeProps.style,
       indeterminate = TreeNodeProps.indeterminate,
       estimatedItemSize = TreeNodeProps.estimatedItemSize,
+      dragOver = TreeNodeProps.dragOver,
       onExpand = TreeNodeProps.onExpand,
       onCheck = TreeNodeProps.onCheck,
       onDragStart = TreeNodeProps.onDragStart,
@@ -65,7 +66,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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", "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", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
 
   var nodeData = React.useMemo(function () {
     return _extends({
@@ -234,7 +235,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       draggable: draggable && !disabled,
-      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _classNames3)),
+      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames3)),
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragOver: handleDragOver,
@@ -242,7 +243,9 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnter: handleDragEnter,
       onDrop: handleDrop,
       ref: dragRef
-    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), checkable ? /*#__PURE__*/React.createElement(Checkbox, {
+    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(treeNodePrefixCls, "-title-wrap")
+    }, checkable ? /*#__PURE__*/React.createElement(Checkbox, {
       onChange: handleOnchange,
       checked: checked,
       indeterminate: !disabled && indeterminate,
@@ -251,9 +254,9 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
     }, title)) : /*#__PURE__*/React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
-    }, title), showDragLine && /*#__PURE__*/React.createElement("span", {
+    }, title), showDragLine && !dragOver && /*#__PURE__*/React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-drag-line"))
-    })));
+    }))));
   };
 
   var handleOnchange = React.useCallback(function (e) {
@@ -278,11 +281,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!draggable) return;
     setDragNode(nodeData);
     onDragStart && onDragStart(e, props);
-  }, [onDragStart, nodeData, props, draggable]);
+  }, [draggable, setDragNode, nodeData, onDragStart, props]);
   var handleDragOver = React.useCallback(function (e) {
     if (!draggable) return;
     e.preventDefault();
-    onDragOver && onDragOver(e, nodeData);
+    onDragOver && onDragOver(e, nodeData, dragRef.current);
   }, [onDragOver, nodeData, draggable]);
   var handleDragLeave = React.useCallback(function (e) {
     var _a;
@@ -300,7 +303,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setForbiddenChildrenPointerEvents(true);
     if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
     setShowDragLine(true);
-    onDragEnter && onDragEnter(e, nodeData);
+    onDragEnter && onDragEnter(e, nodeData, dragRef.current);
   }, [onDragEnter, nodeData, draggable]);
   var handleDragEnd = React.useCallback(function (e) {
     if (!draggable) return;

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

@@ -12,7 +12,8 @@ export declare const getExpand: (expandedKeys: string[], key: string) => boolean
 export declare const getChecked: (checkedKeys: string[], key: string) => boolean;
 export declare const getSelected: (selectedKeys: string[], key: string) => boolean;
 export declare const getHalfChecked: (halfCheckedKeys: string[], key: string) => boolean;
-export declare const getFilterData: (data: any[]) => any[];
+export declare const getAllFilterKeys: (data: any[], filterTreeNode: FunctionConstructor) => any[];
+export declare const getFilterData: (data: any[], filterTreeNode: FunctionConstructor, filterValue: string) => any[];
 export declare const getMaxLevel: (data: any[]) => number;
 /**
  *计算node的属性后返回新的 treedata
@@ -42,5 +43,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[]) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, filterValue: string) => string[];
 export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
+export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;

package/es/tree/utils/treeUtils.js

@@ -4,10 +4,11 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -22,6 +23,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+
+var DRAG_OFFSET = 0.4;
 /**
  * 打平所有数组，并添加pos位置信息，
  * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
@@ -31,7 +34,6 @@ var __rest = this && this.__rest || function (s, e) {
  * @param pos
  */
 
-
 export var flattenAll = function flattenAll(treeData) {
   var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -94,11 +96,37 @@ var isAllParentExpand = function isAllParentExpand(data, pos) {
   return expand;
 };
 
-export var getFilterData = function getFilterData(data) {
+export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode) {
+  var filterData = _filterInstanceProperty(data).call(data, function (item) {
+    return filterTreeNode === null || filterTreeNode === void 0 ? void 0 : filterTreeNode(item);
+  });
+
+  var filterKeys = getAllNodeKeys(filterData);
+  var allFilterKeys = [];
+
+  _mapInstanceProperty(filterKeys).call(filterKeys, function (key) {
+    var _context2;
+
+    return allFilterKeys.push.apply(allFilterKeys, _concatInstanceProperty(_context2 = _toConsumableArray(getAllParentKeys(data, key))).call(_context2, [key]));
+  });
+
+  return _toConsumableArray(new _Set(allFilterKeys));
+};
+export var getFilterData = function getFilterData(data, filterTreeNode, filterValue) {
+  var filterData = data;
+
+  if (typeof filterTreeNode === 'function' && filterValue) {
+    filterData = _filterInstanceProperty(filterData).call(filterData, function (item) {
+      var _context3;
+
+      return _includesInstanceProperty(_context3 = getAllFilterKeys(filterData, filterTreeNode)).call(_context3, item.key);
+    });
+  }
+
   var newData = [];
-  data.forEach(function (item) {
+  filterData.forEach(function (item) {
     var pos = item.pos;
-    var parentExpand = isAllParentExpand(data, pos);
+    var parentExpand = isAllParentExpand(filterData, pos);
 
     if (parentExpand) {
       newData.push(item);
@@ -230,11 +258,11 @@ export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys
   return newTreeData;
 };
 export var addKeys = function addKeys() {
-  var _context2;
+  var _context4;
 
   var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var newKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return _Array$from(new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
 };
 export var getAllParentKeys = function getAllParentKeys(data) {
   var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -287,14 +315,14 @@ export var getPos = function getPos(data, key) {
   return node === null || node === void 0 ? void 0 : node.pos;
 };
 export var getInitCheckedKeys = function getInitCheckedKeys(data, keys) {
-  var _context3;
+  var _context5;
 
   var checkedKeys = [];
   keys.forEach(function (item) {
     var pos = getPos(data, item);
     checkedKeys.push.apply(checkedKeys, _toConsumableArray(getAllChildKeys(data, pos)));
   });
-  return _Array$from(new _Set(_concatInstanceProperty(_context3 = []).call(_context3, checkedKeys, _toConsumableArray(keys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context5 = []).call(_context5, checkedKeys, _toConsumableArray(keys))));
 };
 export var getInitCheckededState = function getInitCheckededState(data) {
   var checkedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -468,6 +496,8 @@ var getRootKeys = function getRootKeys(data) {
 
 export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent) {
   var expandScrollkeys = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
+  var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
+  var filterValue = arguments.length > 8 ? arguments[8] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : _concatInstanceProperty(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
 
   if (defaultExpandAll) {
@@ -490,10 +520,34 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
     }
   }
 
+  if (typeof filterTreeNode === 'function' && filterValue) {
+    var _context6;
+
+    keys = _concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode)));
+  }
+
   return _Array$from(new _Set(_toConsumableArray(keys)));
 };
 export var getExpandedKeys = function getExpandedKeys(expandedKeys) {
   var expandScrollkeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || [];
   return _Array$from(new _Set(_toConsumableArray(keys)));
+};
+export var calcDropPosition = function calcDropPosition(event, dropNode) {
+  var clientY = event.clientY;
+
+  var _dropNode$getBounding = dropNode.getBoundingClientRect(),
+      top = _dropNode$getBounding.top,
+      bottom = _dropNode$getBounding.bottom,
+      height = _dropNode$getBounding.height;
+
+  if (clientY <= top + height * DRAG_OFFSET) {
+    return -1;
+  }
+
+  if (clientY >= bottom - height * DRAG_OFFSET) {
+    return 1;
+  }
+
+  return 0;
 };

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/style/index.css

@@ -356,6 +356,10 @@ 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-textarea {
   width: 100%;
   min-width: 0;
@@ -404,6 +408,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,6 +121,10 @@ textarea {
 
 		&-focused {
 			border-color: @input-border-color-focused;
+
+      .@{input-prefix-cls}-clear-icon, .@{input-prefix-cls}-textarea-clear-icon {
+        color: @input-border-color-focused;
+      }
 		}
 	}
 	&-wrapper-textarea {

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, "'")); // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
+  (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),
@@ -131,26 +133,18 @@ var Menu = function Menu(props) {
   (0, _react.useEffect)(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);
-    }
-  }, [userOpenKeys]);
-  (0, _react.useEffect)(function () {
-    if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
-      setSelectedKeyPath(userOpenKeys);
-      setTimeout(function () {
-        userOpenKeys.forEach(function (d) {
-          openSubMenuSet.add(d);
-        });
+      openSubMenuSet.clear();
+      userOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
       });
     }
-  }, []);
+  }, [userOpenKeys]);
 
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
       setSelectedKey(info.key);
     }
 
-    setSelectedKeyPath(info.keyPath);
-
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
       openSubMenuSet.clear();
@@ -178,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 {
@@ -206,6 +204,7 @@ var Menu = function Menu(props) {
         openKeys: openKeys,
         selectedKey: selectedKey,
         selectedKeyPath: selectedKeyPath,
+        setSelectedKeyPath: setSelectedKeyPath,
         theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,

package/lib/menu/menuItem.js

@@ -17,8 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = require("../config-provider");
@@ -52,7 +56,7 @@ var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 exports.MENU_ITEM_CONTAINER_NAME = MENU_ITEM_CONTAINER_NAME;
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
-  var _classNames;
+  var _context, _classNames;
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -71,6 +75,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       subMenuMode = _a.subMenuMode,
       inlineIndent = _a.inlineIndent,
       className = _a.className,
@@ -78,11 +83,13 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
       style = _a.style,
-      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style"]);
+      parentPath = _a.parentPath,
+      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "setSelectedKeyPath", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style", "parentPath"]);
 
   (0, _devwarning.default)(!keyValue && keyValue !== 0, 'menuitem', 'cannot found children in Menu.Item');
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
+  var menuItemParentPath = Array.isArray(parentPath) ? (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(parentPath), [keyValue]) : [keyValue];
 
   var renderItemChildren = function renderItemChildren(children) {
     if (typeof children === 'string') {
@@ -115,7 +122,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     e.stopPropagation();
     var info = {
       key: keyValue,
-      keyPath: [keyValue],
+      keyPath: menuItemParentPath,
       domEvent: e.nativeEvent
     };
     handleOnClick(info);
@@ -159,6 +166,11 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     return renderItemChildren(children);
   };
 
+  React.useEffect(function () {
+    if (selectedKey && selectedKey === keyValue) {
+      setSelectedKeyPath(menuItemParentPath);
+    }
+  }, [selectedKey]);
   return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
     ref: menuItemRef,
     className: (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, subMenuMode !== 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),