@kdcloudjs/kdesign 1.7.22 → 1.7.24

package/es/select/style/index.less

@@ -132,10 +132,10 @@
     left: 0;
     z-index: @select-z-index;
     box-sizing: border-box;
-    padding: 8px 0; // update
+    padding: @select-dropdown-padding-vertical 0;
     margin: 0;
     overflow: auto;
-    font-size: @select-list-font-size; // update
+    font-size: @select-list-font-size;
     font-variant: initial;
     background-color: @select-dropdown-bg;
     border-radius: @select-g-radius-border;
@@ -159,6 +159,12 @@
     }
   }
 
+  &-multiple-dropdown-panel {
+    .@{select-prefix-cls}-dropdown {
+      padding-bottom: 0;
+    }
+  }
+
   // 下拉列表选项
   &-item {
     .item();
@@ -404,8 +410,8 @@
       align-items: center;
       width: 100%;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 40px;
+      line-height: 40px;
       border-top: 1px solid #d9d9d9;
       box-sizing: border-box;
 

package/es/select/style/token.less

@@ -2,7 +2,6 @@
 
 @select-custom-prefix: ~'--@{kd-prefix}-c-select';
 
-
 // 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', #fff);
@@ -45,6 +44,7 @@
 // spacing
 @select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
 @select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@select-dropdown-padding-vertical: var(~'@{select-custom-prefix}-dropdown-spacing-padding-vertical', 8px);
 
 // radius
 @select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);

package/es/style/core/motion/slide.less

@@ -31,12 +31,15 @@
 .slide-motion(topLeft, kdSlideDown, kd-cascader-menus);
 .slide-motion(bottomLeft, kdSlideUp, kd-cascader-menus);
 
-.slide-motion(topLeft, kdSlideDown, kd-select);
-.slide-motion(bottomLeft, kdSlideUp, kd-select);
+.slide-motion(topLeft, kdSlideDown, kd-select-dropdown-panel);
+.slide-motion(bottomLeft, kdSlideUp, kd-select-dropdown-panel);
 
 .slide-motion(topLeft, kdSlideDown, kd-date-picker-panel);
 .slide-motion(bottomLeft, kdSlideUp, kd-date-picker-panel);
 
+.slide-motion(topLeft, kdSlideDown, kd-city-picker-dropdown);
+.slide-motion(bottomLeft, kdSlideUp, kd-city-picker-dropdown);
+
 @keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/es/style/index.css

@@ -1361,7 +1361,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.topLeft-active {
+.kd-select-dropdown-panel.topLeft-active {
   -webkit-animation-name: kdSlideDownIn;
           animation-name: kdSlideDownIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1369,7 +1369,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.topLeft.hidden {
+.kd-select-dropdown-panel.topLeft.hidden {
   -webkit-animation-name: kdSlideDownOut;
           animation-name: kdSlideDownOut;
   -webkit-animation-duration: 0.1s;
@@ -1377,7 +1377,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.bottomLeft-active {
+.kd-select-dropdown-panel.bottomLeft-active {
   -webkit-animation-name: kdSlideUpIn;
           animation-name: kdSlideUpIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1385,7 +1385,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.bottomLeft.hidden {
+.kd-select-dropdown-panel.bottomLeft.hidden {
   -webkit-animation-name: kdSlideUpOut;
           animation-name: kdSlideUpOut;
   -webkit-animation-duration: 0.1s;
@@ -1425,6 +1425,38 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
+.kd-city-picker-dropdown.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-city-picker-dropdown.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
 @-webkit-keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/es/table/api.js

@@ -77,7 +77,7 @@ export default function getApi(pipelineRef) {
    * @returns
    */
   function ensureColumnVisible(code) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var pipeline = pipelineRef.current;
     var tableBodyContainer = (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.domHelper.tableBody;
     var tableScroll = (_b = pipeline.ref) === null || _b === void 0 ? void 0 : _b.current.domHelper.stickyScroll;
@@ -93,14 +93,30 @@ export default function getApi(pipelineRef) {
     var colLeft = _sliceInstanceProperty(columnNodes).call(columnNodes, 0, index).reduce(function (acc, col) {
       return acc + col.width;
     }, 0);
+    var lockColumnLeft = 0;
+    var lockColumnRight = 0;
+    for (var i = 0; i < columnNodes.length; i++) {
+      if ((_c = columnNodes[i]) === null || _c === void 0 ? void 0 : _c.lock) {
+        lockColumnLeft += columnNodes[i].width;
+      } else {
+        break;
+      }
+    }
+    for (var _i = columnNodes.length - 1; _i >= 0; _i--) {
+      if ((_d = columnNodes[_i]) === null || _d === void 0 ? void 0 : _d.lock) {
+        lockColumnRight += columnNodes[_i].width;
+      } else {
+        break;
+      }
+    }
     var colLeftPixel = colLeft; // 目标列前面列宽总和
     var colRightPixel = colLeftPixel + column.width;
     var viewportWidth = tableBodyContainer.clientWidth; // 表体容器的宽度
     var scrollPosition = tableScroll.scrollLeft; // 滚动条滚动的距离
     var vScrollLeft = scrollPosition;
     var vScrollRight = scrollPosition + viewportWidth;
-    var pxLeft = colLeftPixel;
-    var pxRight = colRightPixel - viewportWidth;
+    var pxLeft = colLeftPixel - lockColumnLeft;
+    var pxRight = colRightPixel - viewportWidth + lockColumnRight;
     var colBeforeViewport = vScrollLeft > colLeftPixel; // 滚动距离大于目标列前面列宽总和，说明目标列在视口之前
     var colPastViewport = vScrollRight < colRightPixel; // 目标列是视口之后
     var colToSmallForViewport = viewportWidth < column.width;

package/es/tag/style/index.css

@@ -126,6 +126,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
   border-radius: calc(var(--kd-c-tag-sizing-height-small, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-middle {
   font-size: var(--kd-c-tag-font-size-middle, var(--kd-g-font-size-small, 12px));
@@ -141,6 +143,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
   border-radius: calc(var(--kd-c-tag-sizing-height-middle, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-large {
   font-size: var(--kd-c-tag-font-size-large, var(--kd-g-font-size-middle, 14px));
@@ -156,6 +160,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
   border-radius: calc(var(--kd-c-tag-sizing-height-large, 24px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-shape-status {
   border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));

package/es/tag/style/index.less

@@ -14,15 +14,15 @@
   }
 
   &-size-small {
-    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
+    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-middle {
-    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal);
+    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-large {
-    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal);
+    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   transition: all @tag-g-motion-duration;

package/es/tag/style/mixin.less

@@ -1,7 +1,7 @@
 @import './token.less';
 
 // code component mixin here
-.tag-size(@size, @height, @padding) {
+.tag-size(@size, @height, @padding, @max-width, @min-width) {
   font-size: @size;
   height: @height;
   box-sizing: border-box;
@@ -10,6 +10,8 @@
   vertical-align: middle;
   padding: 0 @padding;
   border-radius:  calc(@height / 2);
+  max-width: @max-width;
+  min-width: @min-width;
 }
 .tag-status(@color) {
   border: 1px solid @color;

package/es/tag/style/token.less

@@ -35,6 +35,8 @@
 @tag-small-height: var(~'@{tag-custom-prefix}-sizing-height-small', 20px);
 @tag-middle-height: var(~'@{tag-custom-prefix}-sizing-height-middle', 20px);
 @tag-large-height: var(~'@{tag-custom-prefix}-sizing-height-large', 24px);
+@tag-max-width: var(~'@{tag-custom-prefix}-sizing-max-width');
+@tag-min-width: var(~'@{tag-custom-prefix}-sizing-min-width');
 
 // spacing
 @tag-small-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-small', 6px);

package/es/timeline/style/index.css

@@ -189,6 +189,8 @@
   margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
   color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
+  max-width: var(--kd-c-timeline-content-sizing-max-width);
+  min-width: var(--kd-c-timeline-content-sizing-min-width);
 }
 .kd-timeline .kd-timeline-item-content > * {
   margin: 0;

package/es/timeline/style/index.less

@@ -13,6 +13,7 @@
   overflow: hidden;
   list-style: none;
 
+
   .@{timeline-item-prefix-cls} {
     .reset-component;
     position: relative;
@@ -84,6 +85,8 @@
       margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
       word-break: break-word;
       color: @timeline-content-color-text;
+      max-width: @timeline-content-max-width;
+      min-width: @timeline-content-min-width;
 
       > * {
         margin: 0;

package/es/timeline/style/token.less

@@ -21,6 +21,8 @@
 
 // sizing
 @timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
+@timeline-content-max-width: var(~'@{timeline-prefix}-content-sizing-max-width');
+@timeline-content-min-width: var(~'@{timeline-prefix}-content-sizing-min-width');
 
 // spacing
 @timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',24px);

package/es/transfer/style/index.css

@@ -138,12 +138,12 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  width: 250px;
+  width: var(--kd-c-transfer-list-sizing-width, 250px);
   min-height: 300px;
   border: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-transfer-list-with-pagination {
-  width: 250px;
+  width: var(--kd-c-transfer-list-sizing-width, 250px);
   height: auto;
 }
 .kd-transfer-list-header {

package/es/transfer/style/index.less

@@ -25,12 +25,12 @@
   &-list {
     display: flex;
     flex-direction: column;
-    width: 250px;
+    width: @transfer-list-width;
     min-height: 300px;
     border: 1px solid @transfer-border-color;
 
     &-with-pagination {
-      width: 250px;
+      width: @transfer-list-width;
       height: auto;
     }
 

package/es/transfer/style/token.less

@@ -17,6 +17,7 @@
 @transfer-header-height: var(~'@{transfer-custom-prefix}-header-sizing-height', 36px);
 @transfer-search-height: var(~'@{transfer-custom-prefix}-search-sizing-height', 32px);
 @transfer-pagination-height: var(~'@{transfer-custom-prefix}-pagination-sizing-height', 36px);
+@transfer-list-width: var(~'@{transfer-custom-prefix}-list-sizing-width', 250px);
 
 // spacing
 @transfer-padding-base: var(~'@{transfer-custom-prefix}-spacing-horizontal', 14px);

package/es/tree/style/index.css

@@ -135,6 +135,8 @@
   color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
   margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
   padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
+  max-width: var(--kd-c-tree-root-sizing-max-width);
+  min-width: var(--kd-c-tree-root-sizing-min-width);
 }
 .kd-tree-root {
   min-width: 100%;

package/es/tree/style/index.less

@@ -13,6 +13,8 @@
   color: @tree-color-text;
   margin-left: @tree-margin-left;
   padding: @tree-padding-vertical 0;
+  max-width: @tree-root-max-width;
+  min-width: @tree-root-min-width;
   &-root {
     min-width: 100%;
     flex-shrink: 0;

package/es/tree/style/token.less

@@ -22,6 +22,8 @@
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
+@tree-root-max-width: var(~'@{tree-prefix}-root-sizing-max-width');
+@tree-root-min-width: var(~'@{tree-prefix}-root-sizing-min-width');
 
 // spacing
 @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);

package/lib/_utils/usePopper.js

@@ -114,6 +114,19 @@ var getScrollDist = function getScrollDist(el, container) {
   }
   return elScroll;
 };
+var getRealDom = function getRealDom(locatorRef, locatorElement) {
+  var _a;
+  if (!locatorRef.current) return locatorRef.current;
+  var REF_NAME_OBJ = {
+    Input: 'input',
+    InputNumber: 'input',
+    Select: 'select',
+    Upload: 'input'
+  };
+  if (locatorRef.current.tagName) return locatorRef.current;
+  var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
+  return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
+};
 function usePopper(locatorElement, popperElement, props) {
   var _context3, _context4, _arrowStyle;
   var prefixCls = props.prefixCls,
@@ -166,10 +179,11 @@ function usePopper(locatorElement, popperElement, props) {
   var popperEl = (0, _react.useRef)();
   var locatorRef = locatorElement.ref || locatorEl;
   var popperRef = popperElement.ref || popperEl;
-  var container = getPopupContainer(locatorRef.current || document.body);
+  var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
   _promise.default.resolve().then(function () {
-    var triggerNode = getTriggerElement(locatorRef.current);
-    var container = getPopupContainer(locatorRef.current);
+    var realDom = getRealDom(locatorRef, locatorElement);
+    var triggerNode = getTriggerElement(realDom);
+    var container = getPopupContainer(realDom);
     (0, _devwarning.default)(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
     (0, _devwarning.default)(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
   });
@@ -232,30 +246,31 @@ function usePopper(locatorElement, popperElement, props) {
     nextPlacement = _useState18[0],
     setNextPlacement = _useState18[1];
   var alignPopper = (0, _react.useCallback)(function () {
-    if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
+    var realDom = getRealDom(locatorRef, locatorElement);
+    if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
       var _popperRef$current$ge = popperRef.current.getBoundingClientRect(),
         popperWidth = _popperRef$current$ge.width,
         popperHeight = _popperRef$current$ge.height;
-      var _locatorRef$current$g = locatorRef.current.getBoundingClientRect(),
-        top = _locatorRef$current$g.top,
-        bottom = _locatorRef$current$g.bottom,
-        left = _locatorRef$current$g.left,
-        right = _locatorRef$current$g.right,
-        height = _locatorRef$current$g.height,
-        width = _locatorRef$current$g.width;
+      var _realDom$getBoundingC = realDom.getBoundingClientRect(),
+        top = _realDom$getBoundingC.top,
+        bottom = _realDom$getBoundingC.bottom,
+        left = _realDom$getBoundingC.left,
+        right = _realDom$getBoundingC.right,
+        height = _realDom$getBoundingC.height,
+        width = _realDom$getBoundingC.width;
       var _getOffsetPos = getOffsetPos(container),
         containerTop = _getOffsetPos.top,
         containerLeft = _getOffsetPos.left;
-      var _getOffsetPos2 = getOffsetPos(locatorRef.current),
+      var _getOffsetPos2 = getOffsetPos(realDom),
         locatorTop = _getOffsetPos2.top,
         locatorLeft = _getOffsetPos2.left;
-      var _getTranslatePos = getTranslatePos(locatorRef.current),
+      var _getTranslatePos = getTranslatePos(realDom),
         translateTop = _getTranslatePos.top,
         translateLeft = _getTranslatePos.left;
-      var _getBorderWidth = getBorderWidth(locatorRef.current),
+      var _getBorderWidth = getBorderWidth(realDom),
         borderTop = _getBorderWidth.top,
         borderLeft = _getBorderWidth.left;
-      var _getScrollDist = getScrollDist(locatorRef.current.parentElement, container),
+      var _getScrollDist = getScrollDist(realDom.parentElement, container),
         scrollTop = _getScrollDist.top,
         scrollLeft = _getScrollDist.left;
       var locatorPos = {
@@ -441,7 +456,7 @@ function usePopper(locatorElement, popperElement, props) {
     }, "".concat(nextPlacement, "-active"), active))
   };
   var popperNode = popperRef.current;
-  var locatorNode = locatorRef.current;
+  var locatorNode = getRealDom(locatorRef, locatorElement);
   (0, _hooks.useResizeObserver)(popperNode || document.body, alignPopper);
   (0, _hooks.useResizeObserver)(locatorNode || document.body, alignPopper);
   var showPopper = (0, _react.useCallback)(function (evType) {
@@ -472,7 +487,8 @@ function usePopper(locatorElement, popperElement, props) {
   (0, _react.useEffect)(function () {
     if (exist && visible) {
       var mouseleaveTimer;
-      var triggerNode = getTriggerElement(locatorRef.current);
+      var realDom = getRealDom(locatorRef, locatorElement);
+      var triggerNode = getTriggerElement(realDom);
       var handleHidePopper = function handleHidePopper(e) {
         var triggerRect = triggerNode.getBoundingClientRect();
         var popperRect = popperRef.current.getBoundingClientRect();
@@ -546,8 +562,9 @@ function usePopper(locatorElement, popperElement, props) {
       };
     }
   }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
-  _react.default.useEffect(function () {
-    var triggerNode = getTriggerElement(locatorRef.current);
+  (0, _react.useEffect)(function () {
+    var realDom = getRealDom(locatorRef, locatorElement);
+    var triggerNode = getTriggerElement(realDom);
     if (triggerNode) {
       var mouseenterTimer;
       var clearMouseLeave = function clearMouseLeave() {

package/lib/button/style/index.css

@@ -242,6 +242,7 @@
   line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-small);
 }
 .kd-btn-size-small.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
@@ -265,6 +266,7 @@
   line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-middle);
 }
 .kd-btn-size-middle.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
@@ -288,6 +290,7 @@
   line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
   font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
   padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
+  max-width: var(--kd-c-button-sizing-max-width-large);
 }
 .kd-btn-size-large.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);

package/lib/button/style/index.less

@@ -110,7 +110,7 @@
 
   // 小号尺寸按钮
   &-size-small {
-    .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width);
+    .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width, @btn-small-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-small-font-size;
       padding: 0 @btn-icon-padding-horizontal;
@@ -126,7 +126,7 @@
 
   // 中号尺寸按钮
   &-size-middle {
-    .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width);
+    .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width, @btn-middle-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-middle-font-size;
       padding: 0 @btn-icon-padding-horizontal;
@@ -142,7 +142,7 @@
 
   // 大号尺寸按钮
   &-size-large {
-    .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width);
+    .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width, @btn-large-max-width);
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-large-font-size;
       padding: 0 @btn-icon-padding-horizontal;

package/lib/button/style/mixin.less

@@ -30,12 +30,13 @@
 	color: @color;
 }
 // 各个按钮尺寸的样式Mixins
-.btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width) {
+.btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width,@max-width) {
 	height: @height;
 	min-width: @min-width;
 	line-height: calc(@height - (@padding-vertical * 2) - (@btn-border-width * 2));
 	font-size: @font-size;
 	padding: @padding-vertical @padding-horizontal;
+	max-width: @max-width;
 }
 // 圆形按钮不同尺寸的样式Mixins
 .btn-shape-circle-width(@width) {

package/lib/button/style/token.less

@@ -88,11 +88,14 @@
 @btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
 @btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
 @btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
+@btn-small-max-width: var(~'@{button-custom-prefix}-sizing-max-width-small'); // 小号 最大宽度
 @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
 @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
+@btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
 @btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
+@btn-large-max-width: var(~'@{button-custom-prefix}-sizing-max-width-large'); // 大号 最大宽度
 @btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
 @btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);
 

package/lib/checkbox/style/index.css

@@ -162,6 +162,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: var(--kd-c-checkbox-default-input-label-max-width);
 }
 .kd-checkbox-children .kd-input-underline {
   background-color: transparent;

package/lib/checkbox/style/index.less

@@ -44,6 +44,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    max-width: @checkbox-default-input-label-max-width;
 
     .kd-input-underline {
       background-color: transparent;

package/lib/checkbox/style/token.less

@@ -33,6 +33,7 @@
 @checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
 @checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
 @checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-default-input-label-max-width: var(~'@{checkbox-prefix}-default-input-label-max-width'); // 勾选输入框便签文本最大宽度，默认为未设置。
 @checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
 @checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
 @checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小

package/lib/city-picker/city-picker.js

@@ -75,7 +75,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
     _selectProps$foreignL = selectProps.foreignList,
     foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
-    itemRender = selectProps.itemRender;
+    itemRender = selectProps.itemRender,
+    onTabPaneChange = selectProps.onTabPaneChange;
   var _useMergedState = (0, _hooks.useMergedState)(undefined, {
       value: value,
       defaultValue: defaultValue
@@ -258,6 +259,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var toggleTabPane = function toggleTabPane(type) {
     setTabsValue(type);
+    onTabPaneChange === null || onTabPaneChange === void 0 ? void 0 : onTabPaneChange(type);
   };
   // 渲染下拉列表框
   var renderContent = function renderContent() {
@@ -280,12 +282,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (!data) return null;
     if (isDomestic(type)) {
       var _context3;
-      return (0, _concat.default)(_context3 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context3, data === null || data === void 0 ? void 0 : data.province);
+      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      return (0, _concat.default)(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } else {
       var _context4, _context5, _context6;
       return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
-  }, [type]);
+  }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'

package/lib/city-picker/interface.d.ts

@@ -43,6 +43,7 @@ export interface CityPickerProps {
     onSearch?: (value: string) => void;
     onClear?: () => void;
     itemRender?: (city: City) => React.ReactNode;
+    onTabPaneChange?: (id: Type) => void;
 }
 export interface ICityPickerOptionProps {
     disabled?: boolean;

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

@@ -307,6 +307,8 @@
   padding: 8px 0;
   max-height: 320px;
   overflow-y: auto;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
 }
 .kd-city-picker-list-item {
   position: relative;