@kdcloudjs/kdesign 1.7.21 → 1.7.23

package/es/_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/es/_utils/reactNode.js

@@ -5,6 +5,9 @@ export function replaceElement(element, replacement, props) {
   if (!isValidElement(element)) return replacement;
   return /*#__PURE__*/React.cloneElement(element, typeof props === 'function' ? props(element.props || {}) : props);
 }
+export function isFragment(child) {
+  return child && isValidElement(child) && child.type === React.Fragment;
+}
 export function cloneElement(element, props) {
   return replaceElement(element, element, props);
 }

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

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

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

@@ -7,6 +7,7 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import { Menu, Item } from './menu';
 import usePopper from '../_utils/usePopper';
+import { isFragment } from '../_utils/reactNode';
 var findItem = function findItem(element) {
   var isItem = /dropdown-menu-item/.test(element.className);
   if (isItem) {
@@ -59,9 +60,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: classNames("".concat(prefixCls, "-trigger"), children.props.className, {
+  }) : children) : /*#__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,
+    className: classNames("".concat(prefixCls, "-trigger"), /*#__PURE__*/React.isValidElement(children) && !isFragment(children) && children.props && children.props.className, {
       disabled: disabled
     })
   });

package/es/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/es/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/es/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/es/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/es/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/es/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);

package/es/input/input.js

@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useContext, useState, useRef, useEffect } from 'react';
+import React, { useContext, useState, useRef, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -68,8 +68,7 @@ var InternalInput = function InternalInput(props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showNumberMark = _useState4[0],
     setShowNumberMark = _useState4[1];
-  var thisInputRef = useRef();
-  var inputRef = ref || thisInputRef;
+  var inputRef = useRef();
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
   var addonBefore = others.addonBefore,
     addonAfter = others.addonAfter;
@@ -148,6 +147,25 @@ var InternalInput = function InternalInput(props, ref) {
       setShowNumberMark(false);
     }
   }, [focused]);
+  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.createElement(ClearableInput, _extends({}, inputProps, {
     handleReset: handleReset,
     value: value,

package/es/input-number/inputNumber.js

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

package/es/menu/menu.js

@@ -14,7 +14,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { toArray } from '../_utils/react-children';
 import { ConfigContext } from '../config-provider';
 import { getCompProps } from '../_utils';
@@ -29,10 +29,10 @@ var openSubMenuSet = new _Set();
 var Menu = function Menu(props) {
   var _context2, _classNames;
   var _a;
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    pkgPrefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
   var userSelectedKey = props.selectedKey,
     userOpenKeys = props.openKeys;
   var _b = getCompProps('Menu', userDefaultProps, props),
@@ -48,22 +48,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);
   devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
   devWarning(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedKey = _React$useState2[0],
-    setSelectedKey = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    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];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeyPath = _useState4[0],
+    setSelectedKeyPath = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openKeys = _useState6[0],
+    setOpenKeys = _useState6[1];
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
   }
@@ -78,6 +79,14 @@ var Menu = function Menu(props) {
       setSelectedKey(userSelectedKey);
     }
   }, [userSelectedKey]);
+  useEffect(function () {
+    if (Array.isArray(defaultOpenKeys)) {
+      setOpenKeys(defaultOpenKeys);
+      defaultOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
+      });
+    }
+  }, []);
   useEffect(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);

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

@@ -8,7 +8,7 @@ import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
-import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useImperativeHandle } from 'react';
 import { useMergedState } from '../_utils/hooks';
 import isBoolean from 'lodash/isBoolean';
 import classNames from 'classnames';
@@ -73,8 +73,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     initValue = _useMergedState2[0],
     setInitValue = _useMergedState2[1];
   var realChildren = Array.isArray(options) ? options : toArray(children); // options配置项和默认children
-  var innerRef = useRef();
-  var selectRef = ref || innerRef;
+  var selectRef = useRef();
   var searchRef = useRef(null); // 搜索框ref
   var selectionRef = useRef(null);
   var dropDownRef = useRef(null);
@@ -742,6 +741,21 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
     };
   }, [singleVal, mulOptions]);
+  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 = useState(isShowSearch ? getActiveIndex(0) : -1),
     _useState14 = _slicedToArray(_useState13, 2),
     activeIndex = _useState14[0],