@kdcloudjs/kdesign 1.7.21 → 1.7.23

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

@@ -43,6 +43,7 @@ var TimelineItem = function TimelineItem(props) {
   var labelStyle = mode !== 'alternate' ? _defineProperty({
     width: "".concat(labelWidth, "px")
   }, _concatInstanceProperty(_context = "margin".concat(mode === null || mode === void 0 ? void 0 : mode.substring(0, 1).toUpperCase())).call(_context, mode === null || mode === void 0 ? void 0 : mode.substring(1)), "-".concat(labelWidth, "px")) : {};
+  var marginDistance = pending ? Math.round(lineHeight / 2 + 12 / 2 + 2) : Math.round(lineHeight / 2 + 9 / 2 + 2);
   return /*#__PURE__*/React.createElement("li", _extends({}, restProps, {
     className: itemClassName
   }), label && /*#__PURE__*/React.createElement("div", {
@@ -53,7 +54,7 @@ var TimelineItem = function TimelineItem(props) {
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-tail"),
     style: {
-      marginTop: lineHeight - 2
+      marginTop: marginDistance
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: dotClassName,

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;
@@ -297,16 +299,15 @@
 .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {
   display: block;
   height: calc(100% - 14px);
-  border-left: 2px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
+  border-left: 1px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline.reverse .kd-timeline-item.last .kd-timeline-item-tail {
   display: none;
 }
 .kd-timeline.reverse .kd-timeline-item.pending .kd-timeline-item-tail {
-  top: 15px;
   display: block;
   height: calc(100% - 15px);
-  border-left: 2px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
+  border-left: 1px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline.reverse .kd-timeline-item.pending .kd-timeline-item-content {
   min-height: 48px;

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;
@@ -241,7 +244,7 @@
   &.pending .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
     display: block;
     height: calc(100% - 14px);
-    border-left: 2px dotted @timeline-line-color;
+    border-left: 1px dotted @timeline-line-color;
   }
 
   &.reverse .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
@@ -250,10 +253,9 @@
 
   &.reverse .@{timeline-item-prefix-cls}.pending {
     .@{timeline-item-prefix-cls}-tail {
-      top: 15px;
       display: block;
       height: calc(100% - 15px);
-      border-left: 2px dotted @timeline-line-color;
+      border-left: 1px dotted @timeline-line-color;
     }
     .@{timeline-item-prefix-cls}-content {
       min-height: 48px;

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import React, { useRef } from 'react';
 import { getCompProps } from '../_utils';
+import { isFragment } from '../_utils/reactNode';
 import { ConfigContext } from '../config-provider';
 import usePopper from '../_utils/usePopper';
 var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -16,8 +17,8 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
     customPrefixcls = allProps.prefixCls;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
-  var tiplocator = /*#__PURE__*/React.cloneElement(React.Children.count(children) === 1 && children.type ? children : /*#__PURE__*/React.createElement("span", null, children), {
-    ref: children.ref || ref
+  var tiplocator = /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.isValidElement(children) && !isFragment(children) ? children : /*#__PURE__*/React.createElement("span", null, children), {
+    ref: /*#__PURE__*/React.isValidElement(children) && !isFragment(children) && children.ref ? children.ref : ref
   });
   var onVisibleChange = function onVisibleChange(v) {
     if (status.current === v && allProps.visible === undefined) return;

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

@@ -426,7 +426,14 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return item === null || item === void 0 ? void 0 : item.key;
     },
     height: height,
-    itemHeight: estimatedItemSize
+    itemHeight: estimatedItemSize,
+    outerStyle: {
+      overflow: 'unset'
+    },
+    innerStyle: {
+      minWidth: '100%',
+      width: 'max-contnet'
+    }
   }, renderTreeNode) : _mapInstanceProperty(filterData).call(filterData, renderTreeNode)));
 });
 var Tree = InternalTree;

package/es/virtual-list/Filler.d.ts

@@ -3,6 +3,7 @@ interface FillerProps {
     height: number;
     offset?: number;
     outerStyle?: React.CSSProperties;
+    innerStyle?: React.CSSProperties;
     children: React.ReactNode;
 }
 declare const Filler: React.FC<FillerProps>;

package/es/virtual-list/Filler.js

@@ -4,7 +4,8 @@ var Filler = function Filler(_ref) {
   var height = _ref.height,
     offset = _ref.offset,
     children = _ref.children,
-    propsOuterStyle = _ref.outerStyle;
+    propsOuterStyle = _ref.outerStyle,
+    propsInnerStyle = _ref.innerStyle;
   var outerStyle = {};
   var innerStyle = {
     display: 'flex',
@@ -17,13 +18,13 @@ var Filler = function Filler(_ref) {
       overflow: 'hidden',
       zIndex: 0
     }, propsOuterStyle);
-    innerStyle = _extends(_extends({}, innerStyle), {
+    innerStyle = _extends(_extends(_extends({}, innerStyle), {
       transform: "translateY(".concat(offset, "px)"),
       position: 'absolute',
       left: 0,
       right: 0,
       top: 0
-    });
+    }), propsInnerStyle);
   }
   return /*#__PURE__*/React.createElement("div", {
     style: outerStyle

package/es/virtual-list/virtual-list.d.ts

@@ -17,6 +17,7 @@ export interface VirtualListProps<T> extends Omit<React.HTMLAttributes<any>, 'ch
     scrollOptions?: ScrollIntoViewOptions;
     needFiller?: boolean;
     outerStyle?: CSSProperties;
+    innerStyle?: CSSProperties;
     onScroll?: React.UIEventHandler<HTMLElement>;
 }
 export declare type AvailableVirtualListProps = Pick<VirtualListProps<any>, 'height' | 'itemHeight' | 'threshold' | 'isStaticItemHeight' | 'scrollOptions'>;

package/es/virtual-list/virtual-list.js

@@ -74,7 +74,7 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$wrapper = props.wrapper,
     WrapperTagName = _props$wrapper === void 0 ? 'div' : _props$wrapper,
     _props$height = props.height,
-    propHeight = _props$height === void 0 ? 300 : _props$height,
+    propHeight = _props$height === void 0 ? '100%' : _props$height,
     _props$isStaticItemHe = props.isStaticItemHeight,
     isStaticItemHeight = _props$isStaticItemHe === void 0 ? true : _props$isStaticItemHe,
     propItemHeight = props.itemHeight,
@@ -84,7 +84,8 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$needFiller = props.needFiller,
     needFiller = _props$needFiller === void 0 ? true : _props$needFiller,
     outerStyle = props.outerStyle,
-    restProps = __rest(props, ["style", "className", "children", "data", "itemKey", "threshold", "wrapper", "height", "isStaticItemHeight", "itemHeight", "measureLongestItem", "scrollOptions", "onScroll", "needFiller", "outerStyle"]);
+    innerStyle = props.innerStyle,
+    restProps = __rest(props, ["style", "className", "children", "data", "itemKey", "threshold", "wrapper", "height", "isStaticItemHeight", "itemHeight", "measureLongestItem", "scrollOptions", "onScroll", "needFiller", "outerStyle", "innerStyle"]);
   var styleListMaxHeight = style && style.maxHeight || propHeight;
   var refItemHeightMap = useRef({});
   var _useState = useState(200),
@@ -507,7 +508,8 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, restProps), isVirtual ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filler, {
     height: itemTotalHeight,
     offset: state.status === 'MEASURE_DONE' ? state.startItemTop : 0,
-    outerStyle: outerStyle
+    outerStyle: outerStyle,
+    innerStyle: innerStyle
   }, renderChildren(_sliceInstanceProperty(data).call(data, state.startIndex, state.endIndex + 1), state.startIndex)), renderLongestItem()) : needFiller ? /*#__PURE__*/React.createElement(Filler, {
     height: viewportHeight
   }, renderChildren(data, 0)) : renderChildren(data, 0)));

package/lib/_utils/reactNode.d.ts

@@ -3,5 +3,6 @@ export declare const isValidElement: typeof React.isValidElement;
 declare type AnyObject = Record<any, any>;
 declare type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
 export declare function replaceElement(element: React.ReactNode, replacement: React.ReactNode, props: RenderProps): React.ReactNode;
+export declare function isFragment(child: any): boolean;
 export declare function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement;
 export {};

package/lib/_utils/reactNode.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cloneElement = cloneElement;
+exports.isFragment = isFragment;
 exports.isValidElement = void 0;
 exports.replaceElement = replaceElement;
 var React = _interopRequireWildcard(require("react"));
@@ -18,6 +19,9 @@ function replaceElement(element, replacement, props) {
   if (!isValidElement(element)) return replacement;
   return /*#__PURE__*/React.cloneElement(element, typeof props === 'function' ? props(element.props || {}) : props);
 }
+function isFragment(child) {
+  return child && isValidElement(child) && child.type === React.Fragment;
+}
 function cloneElement(element, props) {
   return replaceElement(element, element, props);
 }

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

@@ -43,7 +43,7 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps;
-  var CheckboxProps = (0, _utils.getCompProps)('Checkbox', userDefaultProps, props); // 按钮属性需要合并一遍用户定义的默认属性
+  var CheckboxProps = (0, _utils.getCompProps)('CheckboxGroup', userDefaultProps, props); // 多选组属性需要合并一遍用户定义的默认属性
   var checkboxType = CheckboxProps.checkboxType,
     className = CheckboxProps.className,
     style = CheckboxProps.style,

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

@@ -116,6 +116,9 @@
 .kd-collapse-panel:last-child {
   border-top: none;
 }
+.kd-collapse-panel:first-child {
+  border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
+}
 .kd-collapse-panel {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/lib/collapse/style/index.less

@@ -9,6 +9,9 @@
   &-panel:last-child {
     border-top: none;
   }
+  &-panel:first-child {
+    border-top: @collapse-border-width solid @collapse-border-color;
+  }
   &-panel {
     display: inline-flex;
     flex-direction: column;

package/lib/dropdown/dropdown.js

@@ -17,6 +17,7 @@ var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigCo
 var _utils = require("../_utils");
 var _menu = require("./menu");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _reactNode = require("../_utils/reactNode");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var findItem = function findItem(element) {
@@ -71,9 +72,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       children.props.onBlur && children.props.onBlur(e);
       handleVisibleChange(false);
     }
-  }) : children) : /*#__PURE__*/React.cloneElement(React.Children.only(children), {
-    ref: children.ref || ref,
-    className: (0, _classnames.default)("".concat(prefixCls, "-trigger"), children.props.className, {
+  }) : children) : /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.isValidElement(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/React.createElement("span", null, children), {
+    ref: /*#__PURE__*/React.isValidElement(children) && !(0, _reactNode.isFragment)(children) && children.ref ? children.ref : ref,
+    className: (0, _classnames.default)("".concat(prefixCls, "-trigger"), /*#__PURE__*/React.isValidElement(children) && !(0, _reactNode.isFragment)(children) && children.props && children.props.className, {
       disabled: disabled
     })
   });

package/lib/filter/style/index.css

@@ -145,6 +145,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 .kd-filter .kd-filter-header-search {
   min-width: 200px;
@@ -240,6 +241,7 @@
   padding: 11px 0 10px;
   color: var(--kd-g-color-text-third, #999);
   line-height: 18px;
+  width: var(--kd-c-filter-body-condition-label-width);
 }
 .kd-filter .kd-filter-body-condition-options {
   display: -webkit-box;
@@ -269,6 +271,10 @@
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
+  max-width: var(--kd-c-filter-body-condition-option-max-width);
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
 }
 .kd-filter .kd-filter-body-condition-option:not(:last-child) {
   margin-right: 24px;

package/lib/filter/style/index.less

@@ -36,6 +36,7 @@
       &-item-text {
         max-width: 224px;
         .ellipsis;
+        display: block;
       }
     }
 
@@ -130,6 +131,7 @@
         padding: 11px 0 10px;
         color: @color-text-third;
         line-height: 18px;
+        width: @filter-body-condition-label-width;
       }
 
       &-options {
@@ -154,6 +156,11 @@
         border: 1px solid transparent;
         cursor: pointer;
         white-space: nowrap;
+        max-width: @filter-body-condition-option-max-width;
+        overflow: hidden;
+        display: inline-block;
+        text-overflow: ellipsis;
+
 
         &:not(:last-child) {
           margin-right: 24px;

package/lib/filter/style/token.less

@@ -26,3 +26,7 @@
 @filter-condition-label-font-size: var(~'@{filter-custom-prefix}-condition-label-font-size', @font-size-middle);
 @filter-handle-font-size: var(~'@{filter-custom-prefix}-handle-font-size', @font-size-middle);
 @filter-body-tabs-item-font-size: var(~'@{filter-custom-prefix}-body-tabs-item-font-size', @font-size-middle);
+
+//sizing
+@filter-body-condition-label-width: var(~'@{filter-custom-prefix}-body-condition-label-width');
+@filter-body-condition-option-max-width: var(~'@{filter-custom-prefix}-body-condition-option-max-width');

package/lib/form/style/index.css

@@ -147,7 +147,7 @@
           flex-direction: column;
 }
 .kd-form-field-vertical .kd-form-field-label {
-  margin-bottom: 5px;
+  margin-bottom: var(--kd-c-form-field-label-spacing-margin-bottom, 5px);
 }
 .kd-form-field-hidden {
   display: none !important;

package/lib/form/style/index.less

@@ -39,7 +39,7 @@
     flex-direction: column;
 
     .@{field-label-cls} {
-      margin-bottom: 5px;
+      margin-bottom: @form-field-label-spacing-margin-bottom;
     }
   }
 

package/lib/form/style/token.less

@@ -19,4 +19,4 @@
 @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
 @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
 @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
-
+@form-field-label-spacing-margin-bottom: var(~'@{form-prefix}-field-label-spacing-margin-bottom', 5px);