@kdcloudjs/kdesign 1.3.6 → 1.3.9

package/es/menu/style/mixin.less

@@ -20,12 +20,15 @@
   cursor: pointer;
 
   &-title {
-    .menuItemTitle();
-  }
-
-  &-title > span {
-    opacity: 1;
-    transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    display: flex;
+    align-items: center;
+    height: 50px;
+    .ellipsis();
+    & > span {
+      .ellipsis();
+      opacity: 1;
+      transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
+    }
   }
 
   &-collapsed {
@@ -42,7 +45,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);
       }
     }
   }
@@ -54,76 +57,90 @@
 
   &-disabled {
     cursor: not-allowed;
-    color: @menu-color-disabled;
-  }
-
-  &-active {
-    .hover();
+    color: @menu-color-disabled !important;
+    background-color: @menu-color-background !important;
   }
 
   &-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 {
   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;
-}
-
-.light-active {
-  background-color: @menu-light-color-background-active;
-  color: @menu-light-color-active;
-}
-
-.light-default {
-  color: @menu-light-color;
-  background: #ffffff;
+.active {
+  background-color: @menu-sub-color-background;
+  color: @menu-sub-color-hover;
 }
 
-.menuItemTitle() {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  .ellipsis();
-  & > span {
-    .ellipsis();
-  }
+.active-inline-title {
+  color: @menu-sub-color-hover !important;
+  background: @menu-color-background !important;
+  border: none;
 }
 
 
 .light {
   .light-default();
 
-  .@{submenu-prefix-cls}-hover,
-  .@{submenu-prefix-cls}-sub {
-    .light-default();
+  .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
+    background-color: #fff !important;
   }
 
-  .@{submenu-prefix-cls}-title:hover {
-    color: @menu-light-color-hover;
+  .@{submenu-prefix-cls}-sub {
+    color: @menu-light-color;
+    background: #FAFAFA;
   }
 
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+  .@{menuitem-prefix-cls}:hover {
     .light-hover();
   }
 
-  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
     .light-hover();
   }
+
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .light-active();
+  }
+}
+
+.light-default {
+  color: @menu-light-color;
+  background: #ffffff;
+}
+
+.light-hover {
+  background-color: @menu-light-color-background-hover;
+  color: @menu-light-color-hover;
+  border: none;
 }
+
+.light-active {
+  background-color: @menu-light-color-background-active !important;
+  color: @menu-light-color-active !important;
+  border: none;
+}
+
+.light-active-inline-title {
+  color: @menu-light-color-active !important;
+  background: #ffffff !important;
+  border: none;
+}
+
+

package/es/menu/subMenu.js

@@ -50,6 +50,7 @@ var SubMenu = function SubMenu(props) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      selectedKeyPath = _a.selectedKeyPath,
       openKeys = _a.openKeys,
       triggerSubMenuAction = _a.triggerSubMenuAction,
       forceSubMenuRender = _a.forceSubMenuRender,
@@ -59,7 +60,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", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
 
   var isVertical = mode === 'vertical'; // 初始化level
 
@@ -288,7 +289,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
   }, {
@@ -332,7 +333,7 @@ var SubMenu = function SubMenu(props) {
     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 +346,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

package/es/radio/radio.js

@@ -86,6 +86,8 @@ var InternalRadio = function InternalRadio(props, ref) {
   var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(radioPrefixCls), true), _defineProperty(_classNames, "".concat(radioPrefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(radioPrefixCls, "-checked"), context ? radioProps.checked : isChecked), _classNames), className); // 单选包裹元素class名称
 
   useEffect(function () {
+    var _a;
+
     var handleRepeatClick = function handleRepeatClick(e) {
       var element = e.target;
 
@@ -95,10 +97,12 @@ var InternalRadio = function InternalRadio(props, ref) {
     };
 
     var radioRef = mergedRef;
-    radioRef.current.addEventListener('click', handleRepeatClick);
+    (_a = radioRef === null || radioRef === void 0 ? void 0 : radioRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleRepeatClick);
     return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      radioRef.current.removeEventListener('click', handleRepeatClick);
+      var _a; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      (_a = radioRef === null || radioRef === void 0 ? void 0 : radioRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleRepeatClick);
     };
   }, []);
   return (

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

@@ -185,7 +185,7 @@
 .kd-switch-size-small {
   height: var(--kd-c-switch-small-sizing-height, 16px);
   min-width: var(--kd-c-switch-small-sizing-width, 32px);
-  line-height: var(--kd-c-switch-small-line-height, 14px);
+  line-height: var(--kd-c-switch-small-line-height, 16px);
   font-size: var(--kd-c-switch-small-font-size, var(--kd-g-font-size-small, 12px));
   border-radius: var(--kd-c-switch-small-radius-border, 8px);
 }

package/es/switch/style/token.less

@@ -17,7 +17,7 @@
 
 // line-height
 @switch-large-line-height: var(~'@{switch-prefix}-large-line-height', 20px);
-@switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 14px);
+@switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 16px);
 
 //radius
 @switch-small-border-radius: var(~'@{switch-prefix}-small-radius-border', 8px);

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/anchor/anchor.js

@@ -186,7 +186,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
 
   var anchorMenuClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-advanced"), true));
-  var inkClass = (0, _classnames.default)("".concat(anchorPrefixCls, "-ink-line"), {
+  var inkClass = (0, _classnames.default)("".concat(anchorPrefixCls, "-line-slider"), {
     visible: activeLink
   });
 
@@ -343,7 +343,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     getScrollContainer().addEventListener('scroll', handleScroll);
     handleScroll();
     return function () {
-      return window.removeEventListener('scroll', handleScroll);
+      return getScrollContainer().removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, getScrollContainer]);
   (0, _react.useEffect)(function () {
@@ -418,7 +418,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         width: anchorPosition.width
       } : undefined
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(anchorPrefixCls, "-ink")
+      className: "".concat(anchorPrefixCls, "-line")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: inkClass,
       ref: inkRef

package/lib/anchor/style/index.css

@@ -189,7 +189,7 @@
   content: '';
   height: 0;
   width: 40px;
-  border-bottom: var(--kd-c-anchor-ink-line-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
+  border-bottom: var(--kd-c-anchor-line-slider-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
   margin: 4px;
 }
 .kd-anchor-advanced-arrows {
@@ -227,31 +227,31 @@
 .kd-anchor-advanced .kd-anchor {
   max-width: var(--kd-c-anchor-advanced-sizing-width, 160px);
 }
-.kd-anchor-ink {
+.kd-anchor-line {
   position: absolute;
   left: var(--kd-c-anchor-spacing-horizontal, 7px);
   top: 0;
   height: 100%;
 }
-.kd-anchor-ink::before {
+.kd-anchor-line::before {
   position: relative;
   display: block;
-  width: var(--kd-c-anchor-ink-line-spacing-width, 1px);
+  width: var(--kd-c-anchor-line-slider-spacing-width, 1px);
   height: 100%;
   margin: 0 auto;
   background-color: var(--kd-c-anchor-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   content: '';
 }
-.kd-anchor-ink-line {
+.kd-anchor-line-slider {
   position: absolute;
   display: none;
   width: 0;
   height: 16px;
-  border-right: var(--kd-c-anchor-ink-line-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
+  border-right: var(--kd-c-anchor-line-slider-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transition: top 0.3s ease-in-out;
   transition: top 0.3s ease-in-out;
 }
-.kd-anchor-ink-line.visible {
+.kd-anchor-line-slider.visible {
   display: inline-block;
 }
 .kd-anchor-link {

package/lib/anchor/style/index.less

@@ -83,7 +83,7 @@
       content: '';
       height: 0;
       width: 40px;
-      border-bottom: @anchor-ink-line-width dashed @anchor-disabled-border-color;
+      border-bottom: @anchor-line-slider-width dashed @anchor-disabled-border-color;
       margin: 4px;
     }
   }
@@ -123,7 +123,7 @@
     }
   }
 
-  &-ink {
+  &-line {
     position: absolute;
     left: @anchor-link-left;
     top: 0;
@@ -131,19 +131,19 @@
     &::before {
       position: relative;
       display: block;
-      width: @anchor-ink-line-width;
+      width: @anchor-line-slider-width;
       height: 100%;
       margin: 0 auto;
       background-color: @anchor-border-color;
       content: '';
     }
 
-    &-line {
+    &-slider {
       position: absolute;
       display: none;
       width: 0;
       height: 16px;
-      border-right: @anchor-ink-line-width solid @anchor-color-theme;
+      border-right: @anchor-line-slider-width solid @anchor-color-theme;
       transition: top 0.3s ease-in-out;
       &.visible {
         display: inline-block;

package/lib/anchor/style/token.less

@@ -22,7 +22,7 @@
 @anchor-link-secondary-padding: var(~'@{anchor-prefix}-secondary-spacing-padding', 12px 8px);
 @anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
 @anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
-@anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
+@anchor-line-slider-width: var(~'@{anchor-prefix}-line-slider-spacing-width', 1px);
 
 
 // font

package/lib/button/style/index.css

@@ -241,6 +241,15 @@
 .kd-btn-size-small.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-small .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
@@ -255,6 +264,15 @@
 .kd-btn-size-middle.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-middle .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
@@ -269,6 +287,15 @@
 .kd-btn-size-large.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-large .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);
@@ -337,6 +364,15 @@
 }
 .kd-btn-loading {
   cursor: default;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-block {
   width: 100%;

package/lib/button/style/index.less

@@ -114,6 +114,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-small-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -127,6 +130,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-middle-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -140,6 +146,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-large-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -234,6 +243,9 @@
   // 加载中按钮
   &-loading {
     cursor: default;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
   // 按钮开启块化撑满父元素
   &-block {
@@ -271,11 +283,11 @@
             background: @btn-group-trigger-color-background-hover;
             border-color: @btn-group-trigger-color-background-hover;
           }
-  
+
           &:active {
             background: @btn-group-trigger-color-background-active;
           }
-  
+
           &:disabled {
             background: @btn-group-trigger-color-background-disabled !important;
           }

package/lib/checkbox/checkbox.js

@@ -104,6 +104,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     (0, _isBoolean.default)(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);
   (0, _react.useEffect)(function () {
+    var _a;
+
     var handleRepeatClick = function handleRepeatClick(e) {
       var element = e.target;
 
@@ -112,10 +114,12 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       }
     };
 
-    labelRef.current.addEventListener('click', handleRepeatClick);
+    (_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleRepeatClick);
     return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      labelRef.current.removeEventListener('click', handleRepeatClick);
+      var _a; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      (_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleRepeatClick);
     };
   }, []);
 

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: {