@kdcloudjs/kdesign 1.3.8 → 1.4.1

package/es/menu/style/index.less

@@ -6,6 +6,8 @@
 @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
 @menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
 @menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
+@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
+@menu-inline-prefix-cls: ~'@{menu-prefix-cls}-inline';
 @menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
 @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
 
@@ -15,56 +17,17 @@
   &-inline {
     .@{menuitem-prefix-cls} {
       .ellipsis();
-
-      &-active {
-        color: @menu-inline-color-active;
-      }
     }
 
     .@{submenu-prefix-cls} {
       padding-right: 0;
     }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      color: @menu-inline-color-active;
-    }
   }
 
   &-collapsed {
     width: 50px;
     min-width: auto;
   }
-
-  &-vertical {
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
-    .@{submenu-prefix-cls}-hover {
-      .hover();
-    }
-  }
-
-  &-light {
-    .light()
-  }
-
-  &-light&-vertical {
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls} {
-      &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
-        .light-hover();
-        border: none;
-      }
-
-      &-active {
-        color: @menu-light-color-active;
-        background-color: @menu-light-color-background-active;
-        border: none !important;
-      }
-    }
-  }
 }
 
 .@{menuitem-prefix-cls} {
@@ -73,10 +36,6 @@
   transition: color, background-color;
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-
-  &:not(&-disabled):hover {
-    .hover();
-  }
 }
 
 .@{submenu-prefix-cls} {
@@ -86,13 +45,8 @@
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
-  &-hover {
-    .hover();
-  }
-
   &-sub {
     line-height: @menu-item-height;
-    color: @menu-sub-color;
   }
 
   &-thrid {
@@ -168,26 +122,68 @@
   }
 }
 
+// dark
 .@{menu-dark-prefix-cls} {
+
   .@{submenu-prefix-cls}-sub {
+    color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
   .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
+
+  .@{menuitem-prefix-cls} {
+    &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+      .menu-dark-hover();
+    }
+
+    &-active {
+      .menu-dark-active()
+    }
+  }
+
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .menu-dark-active()
+  }
+
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
+    .menu-dark-hover()
+  }
 }
 
+.@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .menu-dark-active-inline-title()
+    }
+  }
+
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
+    > .@{submenu-prefix-cls}-title:hover {
+      .menu-dark-active-inline-title()
+    }
+  }
+}
+
+// light
 .@{menu-light-prefix-cls} {
-  .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
-    .light-active()
+  .menu-light-base();
+}
+
+.@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .menu-light-active-inline-title()
+    }
   }
 }
 
 .@{menu-popper-prefix-cls} {
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active):hover,
   .@{submenu-prefix-cls}-hover {
-    .hover();
+    .menu-dark-hover();
   }
 
   &.hidden {
@@ -204,12 +200,15 @@
     padding-right: 0;
 
     &-sub {
+      color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
-        &:hover,
+        &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          color: @menu-sub-color-active;
+          .menu-dark-hover()
         }
       }
 
@@ -235,28 +234,7 @@
   }
 
   &.light {
-    .light();
-
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
-      .light-active();
-      border: none;
-    }
+    .menu-light-base();
   }
 }
 

package/es/menu/style/mixin.less

@@ -20,12 +20,16 @@
   cursor: pointer;
 
   &-title {
-    .menuItemTitle();
-  }
+    display: flex;
+    align-items: center;
+    height: 50px;
+    .ellipsis();
 
-  &-title > span {
-    opacity: 1;
-    transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    & > span {
+      .ellipsis();
+      opacity: 1;
+      transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
+    }
   }
 
   &-collapsed {
@@ -42,7 +46,7 @@
 
       & > span {
         opacity: 0;
-        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+        transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
       }
     }
   }
@@ -55,75 +59,88 @@
   &-disabled {
     cursor: not-allowed;
     color: @menu-color-disabled;
-  }
-
-  &-active {
-    .hover();
+    background-color: @menu-color-background;
   }
 
   &-arrow {
     margin-left: auto;
     font-size: 16px;
+
     &-up {
       transform: rotate(180deg);
-      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
     }
 
     &-down {
       transform: rotate(0deg);
-      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
+      transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
   }
 }
 
-.hover {
+
+.menu-dark-hover {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.light-hover {
-  background-color: @menu-light-color-background-hover;
-  color: @menu-light-color-hover;
+.menu-dark-active {
+  background-color: @menu-sub-color-background;
+  color: @menu-sub-color-hover;
 }
 
-.light-active {
-  background-color: @menu-light-color-background-active;
-  color: @menu-light-color-active;
+.menu-dark-active-inline-title {
+  color: @menu-sub-color-hover;
+  background: @menu-color-background;
+  border: none;
 }
 
-.light-default {
-  color: @menu-light-color;
-  background: #ffffff;
-}
+.menu-light-base {
+  .menu-light-default();
 
-.menuItemTitle() {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  .ellipsis();
-  & > span {
-    .ellipsis();
+  .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
+    background-color: #fff;
   }
-}
-
 
-.light {
-  .light-default();
-
-  .@{submenu-prefix-cls}-hover,
   .@{submenu-prefix-cls}-sub {
-    .light-default();
+    color: @menu-light-color;
+    background: #fafafa;
   }
 
-  .@{submenu-prefix-cls}-title:hover {
-    color: @menu-light-color-hover;
+  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+    .menu-light-hover();
   }
 
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-    .light-hover();
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
+    .menu-light-hover();
   }
 
-  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
-    .light-hover();
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .menu-light-active();
   }
 }
+
+.menu-light-default {
+  color: @menu-light-color;
+  background: #ffffff;
+}
+
+.menu-light-hover {
+  background-color: @menu-light-color-background-hover;
+  color: @menu-light-color-hover;
+  border: none;
+}
+
+.menu-light-active {
+  background-color: @menu-light-color-background-active;
+  color: @menu-light-color-active;
+  border: none;
+}
+
+.menu-light-active-inline-title {
+  color: @menu-light-color-active;
+  background: #ffffff;
+  border: none;
+}
+
+

package/es/menu/subMenu.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -50,6 +51,8 @@ var SubMenu = function SubMenu(props) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      selectedKeyPath = _a.selectedKeyPath,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       openKeys = _a.openKeys,
       triggerSubMenuAction = _a.triggerSubMenuAction,
       forceSubMenuRender = _a.forceSubMenuRender,
@@ -59,7 +62,7 @@ var SubMenu = function SubMenu(props) {
       handleOnOpenChange = _a.handleOnOpenChange,
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
-      restProps = __rest(_a, ["prefixCls", "theme", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
+      restProps = __rest(_a, ["prefixCls", "theme", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "selectedKeyPath", "setSelectedKeyPath", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
 
   var isVertical = mode === 'vertical'; // 初始化level
 
@@ -67,6 +70,14 @@ var SubMenu = function SubMenu(props) {
     restProps.level = 1;
   }
 
+  if (Array.isArray(restProps.parentPath)) {
+    var _context;
+
+    restProps.parentPath = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(restProps.parentPath), [keyValue]);
+  } else {
+    restProps.parentPath = [keyValue];
+  }
+
   if (mode === 'inline') {
     restProps.subMenuMode = 'vertical';
     restProps.popupOffset = [];
@@ -188,10 +199,7 @@ var SubMenu = function SubMenu(props) {
     if (!_includesInstanceProperty(className).call(className, MENU_ITEM_CONTAINER_NAME)) {
       closeSubMenu();
     }
-  }); // // 缩略模式自动关闭子菜单
-  // if (triggerSubMenuAction === 'click' && mode === 'vertical' && collapsed) {
-  //   closeSubMenu()
-  // }
+  });
 
   var handleMouseEvent = function handleMouseEvent(status) {
     if (disabled || triggerSubMenuAction === 'click') return;
@@ -207,11 +215,6 @@ var SubMenu = function SubMenu(props) {
   };
 
   var handleOnClick = function handleOnClick(info) {
-    var _context;
-
-    // 保存路径
-    info.keyPath = _concatInstanceProperty(_context = info.keyPath).call(_context, [keyValue]);
-
     if (triggerSubMenuAction === 'click' && isVertical) {
       closeSubMenu();
     }
@@ -288,7 +291,7 @@ var SubMenu = function SubMenu(props) {
   }; // eslint-disable-next-line react-hooks/rules-of-hooks
 
   var verticalView = usePopper( /*#__PURE__*/React.createElement("li", _extends({
-    className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "light", theme === 'light'), _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && visible), _defineProperty(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _classNames2)),
+    className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "light", theme === 'light'), _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _defineProperty(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(selectedKeyPath) && _includesInstanceProperty(selectedKeyPath).call(selectedKeyPath, keyValue)), _classNames2)),
     ref: subMenuVerticalRef,
     key: keyValue
   }, {
@@ -320,19 +323,21 @@ var SubMenu = function SubMenu(props) {
       mode: mode,
       theme: theme,
       selectedKey: selectedKey,
+      setSelectedKeyPath: setSelectedKeyPath,
       openKeys: openKeys,
       forceSubMenuRender: forceSubMenuRender,
       triggerSubMenuAction: triggerSubMenuAction,
       handleOnOpenChange: handleOnOpenChange,
       handleOnClick: handleOnClick,
       inlineIndent: inlineIndent,
-      paddingLeft: curPaddingLeft
+      paddingLeft: curPaddingLeft,
+      parentPath: restProps.parentPath
     });
   }))), {
     arrow: false,
     placement: 'rightTop',
     gap: 0,
-    visible: isVertical ? visible : false,
+    visible: isVertical && !disabled ? visible : false,
     disabled: isVertical ? undefined : true,
     prefixCls: 'kd-menu-popper',
     popperClassName: theme === 'light' ? 'light' : ''
@@ -345,7 +350,7 @@ var SubMenu = function SubMenu(props) {
 
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: subMenuRef,
-      className: classNames(prefixCls, className, (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames4, "".concat(prefixCls, "-disabled"), disabled), _classNames4)),
+      className: classNames(prefixCls, className, (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames4, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames4, "".concat(prefixCls, "-active"), Array.isArray(selectedKeyPath) && _includesInstanceProperty(selectedKeyPath).call(selectedKeyPath, keyValue)), _classNames4)),
       key: keyValue
     }, mouseEvent, {
       style: style
@@ -368,13 +373,15 @@ var SubMenu = function SubMenu(props) {
         collapsed: collapsed,
         mode: mode,
         selectedKey: selectedKey,
+        setSelectedKeyPath: setSelectedKeyPath,
         openKeys: openKeys,
         forceSubMenuRender: forceSubMenuRender,
         triggerSubMenuAction: triggerSubMenuAction,
         handleOnOpenChange: handleOnOpenChange,
         handleOnClick: handleOnClick,
         inlineIndent: inlineIndent,
-        paddingLeft: curPaddingLeft
+        paddingLeft: curPaddingLeft,
+        parentPath: restProps.parentPath
       });
     }))));
   }

package/es/select/select.js

@@ -55,7 +55,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       placeholder = selectProps.placeholder,
       dropdownStyle = selectProps.dropdownStyle,
       style = selectProps.style,
-      clearIcon = selectProps.clearIcon;
+      clearIcon = selectProps.clearIcon,
+      _selectProps$popperSt = selectProps.popperStyle,
+      popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt;
   var isMultiple = mode === 'multiple'; // 是否多选
 
   var _useMergedState = useMergedState(undefined, {
@@ -116,7 +118,7 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   var searchCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-search"), true)); // 下拉子项列表样式
 
-  var dropContentCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-scroll"), isMultiple ? (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 8 : (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 10)); // 多选底部样式
+  var dropContentCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-scroll"), (isMultiple ? (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 8 : (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 10) || selectProps.dropdownRender)); // 多选底部样式
 
   var multipleFooterCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
 
@@ -668,10 +670,10 @@ var InternalSelect = function InternalSelect(props, ref) {
       var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
           width = _ref2.width;
 
-      return {
+      return _extends({
         width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
         zIndex: 1050
-      };
+      }, popperStyle);
     }
   };
 

package/es/table/table.js

@@ -67,6 +67,8 @@ function Table(props) {
   });
 
   if (footerDataSource) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     pipeline.footerDataSource(footerDataSource);
   }
   /* -------------------------------------------------------------------------- */

package/es/tree/style/index.css

@@ -140,7 +140,6 @@
   pointer-events: none;
 }
 .kd-tree-node-item {
-  height: var(--kd-c-tree-node-sizing-height, 32px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -167,7 +166,7 @@
   border-right: 10px;
   border-color: white;
   border-style: solid;
-  height: var(--kd-c-tree-node-sizing-height, 32px);
+  height: 100%;
   cursor: default;
   opacity: 0;
 }

package/es/tree/style/index.less

@@ -33,7 +33,6 @@
     pointer-events: none;
   }
   &-item {
-    height: @tree-node-height;
     display: flex;
     align-items: center;
   }
@@ -54,7 +53,7 @@
     border-right: 10px;
     border-color: white;
     border-style: solid;
-    height: @tree-node-height;
+    height: 100%;
     cursor: default;
     opacity: 0;
   }

package/es/tree/style/token.less

@@ -13,7 +13,6 @@
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
 
 // sizing
-@tree-node-height: var(~'@{tree-prefix}-node-sizing-height', 32px);
 @tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);
 @tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 22px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 20px);

package/es/tree/tree.js

@@ -57,8 +57,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setTreeNodeClassName = _TreeProps$setTreeNod2 === void 0 ? function () {
     return '';
   } : _TreeProps$setTreeNod2,
-      _TreeProps$estimatedI = TreeProps.estimatedItemSize,
-      innerEstimatedItemSize = _TreeProps$estimatedI === void 0 ? 28 : _TreeProps$estimatedI,
+      innerEstimatedItemSize = TreeProps.estimatedItemSize,
       style = TreeProps.style;
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
 

package/es/tree/treeNode.js

@@ -324,7 +324,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
     style: _extends({
-      height: "".concat(estimatedItemSize)
+      height: "".concat(estimatedItemSize, "px")
     }, style),
     onClick: handleClick
   }, renderNode());

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

@@ -305,6 +305,7 @@ declare const compDefaultProps: {
         draggable: boolean;
         virtual: boolean;
         switcherIcon: () => JSX.Element;
+        estimatedItemSize: number;
     };
     TreeNode: {};
     ToolTip: {

package/lib/config-provider/compDefaultProps.js

@@ -337,7 +337,8 @@ var compDefaultProps = {
       return /*#__PURE__*/React.createElement(_index.Icon, {
         type: "arrow-right-solid"
       });
-    }
+    },
+    estimatedItemSize: 32
   },
   TreeNode: {},
   ToolTip: {

package/lib/menu/menu.js

@@ -96,7 +96,7 @@ var Menu = function Menu(props) {
       restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
 
   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, "'"));
 
   var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -105,8 +105,13 @@ var Menu = function Menu(props) {
 
   var _React$useState3 = _react.default.useState([]),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      openKeys = _React$useState4[0],
-      setOpenKeys = _React$useState4[1];
+      selectedKeyPath = _React$useState4[0],
+      setSelectedKeyPath = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState([]),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      openKeys = _React$useState6[0],
+      setOpenKeys = _React$useState6[1];
 
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
@@ -115,6 +120,7 @@ var Menu = function Menu(props) {
   (0, _react.useEffect)(function () {
     setOpenKeys([]);
     setSelectedKey('');
+    setSelectedKeyPath([]);
     openSubMenuSet.clear();
   }, [mode]);
   (0, _react.useEffect)(function () {
@@ -130,9 +136,7 @@ var Menu = function Menu(props) {
         openSubMenuSet.add(d);
       });
     }
-  }, [userOpenKeys]); // React.useEffect(() => {
-  //   setCollapsed(restProps.collapsed)
-  // }, [restProps.collapsed])
+  }, [userOpenKeys]);
 
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
@@ -141,6 +145,7 @@ var Menu = function Menu(props) {
 
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
+      openSubMenuSet.clear();
     }
 
     onClick && onClick(info);
@@ -192,6 +197,8 @@ var Menu = function Menu(props) {
         mode: mode,
         openKeys: openKeys,
         selectedKey: selectedKey,
+        selectedKeyPath: selectedKeyPath,
+        setSelectedKeyPath: setSelectedKeyPath,
         theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,