@kdcloudjs/kdesign 1.7.21 → 1.7.23

package/lib/input/input.js

@@ -83,8 +83,7 @@ var InternalInput = function InternalInput(props, ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showNumberMark = _useState4[0],
     setShowNumberMark = _useState4[1];
-  var thisInputRef = (0, _react.useRef)();
-  var inputRef = ref || thisInputRef;
+  var inputRef = (0, _react.useRef)();
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
   var addonBefore = others.addonBefore,
     addonAfter = others.addonAfter;
@@ -163,6 +162,25 @@ var InternalInput = function InternalInput(props, ref) {
       setShowNumberMark(false);
     }
   }, [focused]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      input: inputRef.current,
+      focus: function focus() {
+        var _a;
+        setFocused(true);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function blur() {
+        var _a;
+        setFocused(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      },
+      select: function select() {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select();
+      }
+    };
+  });
   return /*#__PURE__*/_react.default.createElement(_ClearableLabeledInput.default, (0, _extends2.default)({}, inputProps, {
     handleReset: handleReset,
     value: value,

package/lib/input-number/inputNumber.js

@@ -84,6 +84,9 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     return true;
   };
   (0, _react.useEffect)(function () {
+    if (typeof value === 'undefined') {
+      return;
+    }
     setInputValue((0, _numberUtil.serialization)(value + ''));
   }, [value]);
   var handleEventAttachValue = function handleEventAttachValue(event, value) {
@@ -252,6 +255,9 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     inputStatus.current.inputFocused = false;
   };
   (0, _react.useEffect)(function () {
+    if (typeof value === 'undefined') {
+      return;
+    }
     var _inputStatus$current = inputStatus.current,
       isHandleChange = _inputStatus$current.isHandleChange,
       inputFocused = _inputStatus$current.inputFocused;

package/lib/menu/menu.js

@@ -41,10 +41,10 @@ var openSubMenuSet = new _set.default();
 var Menu = function Menu(props) {
   var _context2, _classNames;
   var _a;
-  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    pkgPrefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
   var userSelectedKey = props.selectedKey,
     userOpenKeys = props.openKeys;
   var _b = (0, _utils.getCompProps)('Menu', userDefaultProps, props),
@@ -60,22 +60,23 @@ var Menu = function Menu(props) {
     theme = _b.theme,
     collapsed = _b.collapsed,
     accordion = _b.accordion,
-    restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed", "accordion"]);
+    defaultOpenKeys = _b.defaultOpenKeys,
+    restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed", "accordion", "defaultOpenKeys"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
   (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
   (0, _devwarning.default)(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
-  var _React$useState = _react.default.useState(''),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    selectedKey = _React$useState2[0],
-    setSelectedKey = _React$useState2[1];
-  var _React$useState3 = _react.default.useState([]),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    selectedKeyPath = _React$useState4[0],
-    setSelectedKeyPath = _React$useState4[1];
-  var _React$useState5 = _react.default.useState([]),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    openKeys = _React$useState6[0],
-    setOpenKeys = _React$useState6[1];
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedKeyPath = _useState4[0],
+    setSelectedKeyPath = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    openKeys = _useState6[0],
+    setOpenKeys = _useState6[1];
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
   }
@@ -90,6 +91,14 @@ var Menu = function Menu(props) {
       setSelectedKey(userSelectedKey);
     }
   }, [userSelectedKey]);
+  (0, _react.useEffect)(function () {
+    if (Array.isArray(defaultOpenKeys)) {
+      setOpenKeys(defaultOpenKeys);
+      defaultOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
+      });
+    }
+  }, []);
   (0, _react.useEffect)(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);

package/lib/menu/style/index.css

@@ -107,6 +107,7 @@
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .menu-hidden {
+  display: none;
   opacity: 0;
   visibility: hidden;
   -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
@@ -191,7 +192,8 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: var(--kd-c-menu-sizing-min-width, 138px);
+  max-width: var(--kd-c-menu-sizing-max-width);
   background-color: var(--kd-c-menu-color-background, #343848);
   color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
@@ -534,6 +536,7 @@
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-popper.hidden {
+  display: none;
   opacity: 0;
   visibility: hidden;
   -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
@@ -575,6 +578,7 @@
           transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-menu-popper .kd-menu-submenu-sub-hide {
+  display: none;
   opacity: 0;
   visibility: hidden;
   -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;

package/lib/menu/style/mixin.less

@@ -10,7 +10,8 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: @menu-min-width;
+  max-width: @menu-max-width;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }
@@ -79,6 +80,7 @@
 }
 
 .menu-hidden {
+  display: none;
   opacity: 0;
   visibility: hidden;
   animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;

package/lib/menu/style/token.less

@@ -25,6 +25,8 @@
 @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
 
 // sizing
+@menu-max-width: var(~'@{menu-prefix}-sizing-max-width');
+@menu-min-width: var(~'@{menu-prefix}-sizing-min-width',138px);
 @menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
 
 // z-index

package/lib/radio/style/index.css

@@ -125,6 +125,8 @@
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
+  max-width: var(--kd-c-radio-default-label-max-width);
+  overflow: hidden;
 }
 .kd-radio::before {
   position: absolute;
@@ -256,6 +258,7 @@
   border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-square-label-max-width);
 }
 .kd-radio-square::after {
   position: absolute;
@@ -348,6 +351,9 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
@@ -365,6 +371,7 @@
   border-left: none;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-button-label-max-width);
 }
 .kd-radio-button:first-child {
   border-radius: 2px 0 0 2px;

package/lib/radio/style/index.less

@@ -22,6 +22,8 @@
   vertical-align: middle;
   color: @radio-font-color;
   font-size: @radio-font-size;
+  max-width: @radio-default-label-max-width;
+  overflow: hidden;
 
   &::before {
     position: absolute;
@@ -152,6 +154,7 @@
   border-radius: @radius-size;
   border: @radio-border-width solid @radio-color-border;
   transition: all @transition-duration;
+  max-width: @radio-square-label-max-width;
 
   &::after {
     position: absolute;
@@ -241,7 +244,7 @@
 // 按钮类型（切换按钮）
 .@{radio-button-prefix-cls} {
   .reset-component();
-
+  .ellipsis();
   // 默认状态
   position: relative;
   display: inline-block;
@@ -259,6 +262,7 @@
   border: @radio-border-width solid @radio-color-border;
   border-left: none;
   transition: all @transition-duration;
+  max-width: @radio-button-label-max-width;
 
   &:first-child {
     border-radius: @radius-size 0 0 @radius-size;

package/lib/radio/style/token.less

@@ -22,6 +22,9 @@
 // sizing
 @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
+@radio-default-label-max-width:  var(~'@{radio-prefix}-default-label-max-width');//单选默认模式 最大宽度
+@radio-square-label-max-width:  var(~'@{radio-prefix}-square-label-max-width');//单选框模式 最大宽度
+@radio-button-label-max-width:  var(~'@{radio-prefix}-button-label-max-width');//单选按 最大宽度
 
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);

package/lib/search/style/index.css

@@ -335,6 +335,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: var(--kd-c-search-tag-sizing-max-width);
 }
 .kd-quick-search-selection-overflow-item-del {
   height: 14px;

package/lib/search/style/index.less

@@ -140,6 +140,7 @@
         padding: 0 4px;
         align-self: center;
         .ellipsis();
+        max-width: @search-tag-max-width;
       }
       &-del {
         height: 14px;

package/lib/search/style/token.less

@@ -14,6 +14,7 @@
 @search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
 @quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
 @search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
+@search-tag-max-width: var(~'@{search-prefix}-tag-sizing-max-width');
 
 // color
 @search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);

package/lib/select/select.js

@@ -85,8 +85,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     initValue = _useMergedState2[0],
     setInitValue = _useMergedState2[1];
   var realChildren = Array.isArray(options) ? options : (0, _reactChildren.toArray)(children); // options配置项和默认children
-  var innerRef = (0, _react.useRef)();
-  var selectRef = ref || innerRef;
+  var selectRef = (0, _react.useRef)();
   var searchRef = (0, _react.useRef)(null); // 搜索框ref
   var selectionRef = (0, _react.useRef)(null);
   var dropDownRef = (0, _react.useRef)(null);
@@ -754,6 +753,21 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
     };
   }, [singleVal, mulOptions]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      select: selectRef.current,
+      focus: function focus() {
+        var _a;
+        setFocusd(true);
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function blur() {
+        var _a;
+        setFocusd(false);
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    };
+  });
   var _useState13 = (0, _react.useState)(isShowSearch ? getActiveIndex(0) : -1),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
     activeIndex = _useState14[0],

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

@@ -55,6 +55,7 @@ var TimelineItem = function TimelineItem(props) {
   var labelStyle = mode !== 'alternate' ? (0, _defineProperty2.default)({
     width: "".concat(labelWidth, "px")
   }, (0, _concat.default)(_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", (0, _extends2.default)({}, restProps, {
     className: itemClassName
   }), label && /*#__PURE__*/React.createElement("div", {
@@ -65,7 +66,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/lib/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/lib/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/lib/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/lib/tooltip/tooltip.js

@@ -11,6 +11,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../_utils");
+var _reactNode = require("../_utils/reactNode");
 var _configProvider = require("../config-provider");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 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); }
@@ -28,8 +29,8 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     customPrefixcls = allProps.prefixCls;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
-  var tiplocator = /*#__PURE__*/_react.default.cloneElement(_react.default.Children.count(children) === 1 && children.type ? children : /*#__PURE__*/_react.default.createElement("span", null, children), {
-    ref: children.ref || ref
+  var tiplocator = /*#__PURE__*/_react.default.cloneElement( /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/_react.default.createElement("span", null, children), {
+    ref: /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) && children.ref ? children.ref : ref
   });
   var onVisibleChange = function onVisibleChange(v) {
     if (status.current === v && allProps.visible === undefined) return;

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

@@ -438,7 +438,14 @@ var InternalTree = /*#__PURE__*/_react.default.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) : (0, _map.default)(filterData).call(filterData, renderTreeNode)));
 });
 var Tree = InternalTree;

package/lib/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/lib/virtual-list/Filler.js

@@ -16,7 +16,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',
@@ -29,13 +30,13 @@ var Filler = function Filler(_ref) {
       overflow: 'hidden',
       zIndex: 0
     }, propsOuterStyle);
-    innerStyle = (0, _extends2.default)((0, _extends2.default)({}, innerStyle), {
+    innerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, innerStyle), {
       transform: "translateY(".concat(offset, "px)"),
       position: 'absolute',
       left: 0,
       right: 0,
       top: 0
-    });
+    }), propsInnerStyle);
   }
   return /*#__PURE__*/React.createElement("div", {
     style: outerStyle

package/lib/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'>;