@kdcloudjs/kdesign 1.3.6 → 1.3.9

package/es/anchor/anchor.js

@@ -139,7 +139,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
 
   var anchorMenuClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-advanced"), true));
-  var inkClass = classNames("".concat(anchorPrefixCls, "-ink-line"), {
+  var inkClass = classNames("".concat(anchorPrefixCls, "-line-slider"), {
     visible: activeLink
   });
   React.useEffect(function () {
@@ -296,7 +296,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]);
   useEffect(function () {
@@ -371,7 +371,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         width: anchorPosition.width
       } : undefined
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(anchorPrefixCls, "-ink")
+      className: "".concat(anchorPrefixCls, "-line")
     }, /*#__PURE__*/React.createElement("span", {
       className: inkClass,
       ref: inkRef

package/es/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/es/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/es/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/es/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/es/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/es/checkbox/checkbox.js

@@ -72,6 +72,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     isBoolean(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);
   useEffect(function () {
+    var _a;
+
     var handleRepeatClick = function handleRepeatClick(e) {
       var element = e.target;
 
@@ -80,10 +82,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/es/config-provider/compDefaultProps.d.ts

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

package/es/config-provider/compDefaultProps.js

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

package/es/menu/menu.js

@@ -72,8 +72,13 @@ var Menu = function Menu(props) {
 
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      openKeys = _React$useState4[0],
-      setOpenKeys = _React$useState4[1];
+      selectedKeyPath = _React$useState4[0],
+      setSelectedKeyPath = _React$useState4[1];
+
+  var _React$useState5 = React.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      openKeys = _React$useState6[0],
+      setOpenKeys = _React$useState6[1];
 
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
@@ -82,6 +87,7 @@ var Menu = function Menu(props) {
   useEffect(function () {
     setOpenKeys([]);
     setSelectedKey('');
+    setSelectedKeyPath([]);
     openSubMenuSet.clear();
   }, [mode]);
   useEffect(function () {
@@ -92,22 +98,29 @@ var Menu = function Menu(props) {
   useEffect(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);
-      openSubMenuSet.clear();
-      userOpenKeys.forEach(function (d) {
-        openSubMenuSet.add(d);
+    }
+  }, [userOpenKeys]);
+  useEffect(function () {
+    if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
+      setSelectedKeyPath(userOpenKeys);
+      setTimeout(function () {
+        userOpenKeys.forEach(function (d) {
+          openSubMenuSet.add(d);
+        });
       });
     }
-  }, [userOpenKeys]); // React.useEffect(() => {
-  //   setCollapsed(restProps.collapsed)
-  // }, [restProps.collapsed])
+  }, []);
 
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
       setSelectedKey(info.key);
     }
 
+    setSelectedKeyPath(info.keyPath);
+
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
+      openSubMenuSet.clear();
     }
 
     onClick && onClick(info);
@@ -159,6 +172,7 @@ var Menu = function Menu(props) {
         mode: mode,
         openKeys: openKeys,
         selectedKey: selectedKey,
+        selectedKeyPath: selectedKeyPath,
         theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,