@kdcloudjs/kdesign 1.7.16 → 1.7.18

package/lib/cascader/style/index.css

@@ -108,9 +108,9 @@
 /** 浮层箭头样式 **/
 .kd-cascader-picker {
   position: relative;
-  display: inline-block;
   outline: none;
   cursor: pointer;
+  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input {
   border-color: var(--kd-c-cascader-color-active, #999);
@@ -139,7 +139,7 @@
   left: 0;
   width: 100%;
   height: 20px;
-  padding: 0 24px 0 9px;
+  padding: 0 24px 0 0;
   line-height: 20px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -169,7 +169,7 @@
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
-.kd-cascader-picker.allowClear:hover > .kd-cascader-picker-close {
+.kd-cascader-picker.allowClear:hover .kd-cascader-picker-close {
   opacity: 1;
   visibility: visible;
   -webkit-transition: all 0.2s;
@@ -186,7 +186,7 @@
 .kd-cascader-picker-close {
   position: absolute;
   top: 50%;
-  right: 9px;
+  right: 0;
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
@@ -278,11 +278,20 @@
 .kd-cascader-menus .kd-empty {
   padding: 10px 0 20px;
 }
-.kd-cascader-bordered {
+.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-label {
+  padding-left: 9px;
+}
+.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-close {
+  right: 10px;
+}
+.kd-cascader-bordered.kd-cascader-multiple {
   border: 1px solid #d9d9d9;
-  padding-left: 8px !important;
+  padding-left: 8px;
   border-radius: 2px;
 }
+.kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
+  right: 9px;
+}
 .kd-cascader-multiple {
   padding: 1px 28px 1px 0;
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -301,6 +310,7 @@
   overflow-x: hidden;
   position: relative;
   border-bottom: 1px solid #d9d9d9;
+  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
 .kd-cascader-multiple-wrapper {
   display: -webkit-box;

package/lib/cascader/style/index.less

@@ -8,9 +8,9 @@
 
 .@{cascader-picker-prefix-cls} {
   position: relative;
-  display: inline-block;
   outline: none;
   cursor: pointer;
+  background: @cascader-bg-color;
 
   &:focus > &-input {
     border-color: @cascader-active-color;
@@ -47,7 +47,7 @@
     left: 0;
     width: 100%;
     height: 20px;
-    padding: 0 24px 0 9px;
+    padding: 0 24px 0 0;
     line-height: 20px;
     transform: translateY(-50%);
     .ellipsis;
@@ -78,7 +78,7 @@
   }
 
   &.allowClear:hover {
-    > .@{cascader-picker-prefix-cls}-close {
+    .@{cascader-picker-prefix-cls}-close {
       opacity: 1;
       visibility: visible;
       transition: all 0.2s;
@@ -95,7 +95,7 @@
   &-close {
     position: absolute;
     top: 50%;
-    right: 9px;
+    right: 0;
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
@@ -183,10 +183,23 @@
 }
 
 .@{kd-prefix}-cascader {
-  &-bordered {
+  &-bordered:not(.@{kd-prefix}-cascader-multiple) {
+    .@{cascader-picker-prefix-cls}-label {
+      padding-left: 9px;
+    }
+    .@{cascader-picker-prefix-cls}-close {
+      right: 10px;
+    }
+  }
+
+  &-bordered&-multiple {
     border: 1px solid #d9d9d9;
-    padding-left: 8px !important;
+    padding-left: 8px;
     border-radius: 2px;
+
+    .@{kd-prefix}-cascader-suffix {
+      right: 9px;
+    }
   }
 
   &-multiple {
@@ -203,6 +216,7 @@
     overflow-x: hidden;
     position: relative;
     border-bottom: 1px solid #d9d9d9;
+    background: @cascader-bg-color;
   }
 
   &-multiple-wrapper {

package/lib/color-picker/color-picker-panel.js

@@ -55,6 +55,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     showColorTransfer = props.showColorTransfer,
     showPresetColor = props.showPresetColor,
     showColorPickerBox = props.showColorPickerBox,
+    showColorPickerPanel = props.showColorPickerPanel,
     value = props.value;
   var panelInputRef = (0, _react.useRef)(null);
   var panelClsRef = (0, _react.useRef)(null);
@@ -69,7 +70,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var panelFollowThemeCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-switch"));
   var panelInputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-input"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
   var transparentCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-transparent"));
-  var colorDivContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"));
+  var colorDivContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0));
   var colorLiClick = function colorLiClick(index, colorValue) {
     var formatArr = (0, _colorFormat.colorFormat)(colorValue, alpha);
     var formatValue = (0, _convertLetters.toLowerCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value);
@@ -185,7 +186,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   (0, _useOnClickOutside.default)([panelClsRef, inputRef], function () {
     setShowPanel(false);
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showColorPickerPanel && /*#__PURE__*/_react.default.createElement("div", {
     className: panelCls,
     ref: panelClsRef
   }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
@@ -242,7 +243,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
         'square-click': clickedColorIndex === i
       })
     }));
-  })));
+  }))));
 };
 ColorPickerPanel.displayName = 'ColorPickerPanel';
 var _default = ColorPickerPanel;

package/lib/color-picker/color-picker.js

@@ -91,6 +91,7 @@ var ColorPicker = function ColorPicker(props) {
   var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"));
   var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"), className);
   var inputRef = (0, _react.useRef)(null);
+  var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || typeof showPresetColor === 'undefined' || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
   var setIconColor = function setIconColor(value) {
     value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
     var inpValue = value === functionalColorName ? functionalColor : value;
@@ -148,7 +149,7 @@ var ColorPicker = function ColorPicker(props) {
       style: {
         backgroundColor: "".concat(colTypeArr[2].value || _defaultColor.defaultSystemColor)
       }
-    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+    }, showColorPickerPanel && /*#__PURE__*/_react.default.createElement(_index.Icon, {
       type: "arrow-down"
     }));
   };
@@ -198,7 +199,8 @@ var ColorPicker = function ColorPicker(props) {
     colTypeArr: colTypeArr,
     setColTypeArr: setColTypeArr,
     currentColorType: currentColorType,
-    setCurrentColorType: setCurrentColorType
+    setCurrentColorType: setCurrentColorType,
+    showColorPickerPanel: showColorPickerPanel
   });
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, colorPickerProps), {
     popperClassName: popUpLayer,

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

@@ -58,6 +58,7 @@ export interface IColorPickerPanelProps {
         showHue?: boolean;
         showOpacity?: boolean;
     };
+    showColorPickerPanel: boolean;
     value: string;
     setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
     setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;

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

@@ -262,7 +262,7 @@
   font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-color-picker-pop .kd-color-picker-panel-input-no-recommend {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 .kd-color-picker-pop .kd-color-picker-panel-input .kd-select.bottomLeft,
 .kd-color-picker-pop .kd-color-picker-panel-input .kd-select.topLeft {
@@ -311,6 +311,9 @@
   grid-row-gap: 8px;
   margin-top: 12px;
 }
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer-unset-color {
+  margin-top: 0;
+}
 .kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li {
   position: relative;
   -webkit-box-sizing: border-box;

package/lib/color-picker/style/index.less

@@ -209,7 +209,7 @@
       font-size: @color-picker-panel-select-font-size;
 
       &-no-recommend {
-        margin-bottom: 8px;
+        margin-bottom: 0;
       }
 
       .@{kd-prefix}-select {
@@ -266,6 +266,10 @@
       grid-row-gap: 8px;
       margin-top: 12px;
 
+      &-unset-color {
+        margin-top: 0;
+      }
+
       li {
         position: relative;
         box-sizing: border-box;

package/lib/dropdown/dropdown.js

@@ -28,7 +28,7 @@ var findItem = function findItem(element) {
   }
 };
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   var _React$useContext = React.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
@@ -42,6 +42,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onItemClick = allProps.onItemClick,
     defaultVisible = allProps.defaultVisible,
     onVisibleChange = allProps.onVisibleChange,
+    trigger = allProps.trigger,
     customPrefixcls = allProps.prefixCls;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown', customPrefixcls);
@@ -52,14 +53,30 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     setVisible(!!props.visible);
   }, [props.visible]);
-  var child = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    props.visible === undefined && setVisible(visible);
+    onVisibleChange && onVisibleChange(visible);
+  };
+  var child = children && ((_a = children === null || children === void 0 ? void 0 : children.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Input' ? /*#__PURE__*/React.createElement("span", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-trigger"), "".concat(prefixCls, "-trigger-container")),
+    ref: ref
+  }, trigger === 'focus' ? /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+    onFocus: function onFocus(e) {
+      children.props.onFocus && children.props.onFocus(e);
+      handleVisibleChange(true);
+    },
+    onBlur: function onBlur(e) {
+      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, {
       disabled: disabled
     })
   });
   var isMenu = menu.type === _menu.Menu;
-  var _React$useState3 = React.useState(props.selectedKey || ((_a = menu.props) === null || _a === void 0 ? void 0 : _a.defaultKey) || props.defaultKey || ''),
+  var _React$useState3 = React.useState(props.selectedKey || ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.defaultKey) || props.defaultKey || ''),
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     selectedKey = _React$useState4[0],
     setSelectedKey = _React$useState4[1];
@@ -68,7 +85,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setSelectedKey(props.selectedKey);
     }
   }, [props.selectedKey]);
-  var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
+  var menuSelectable = ((_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable) === undefined ? selectable : (_d = menu.props) === null || _d === void 0 ? void 0 : _d.selectable;
   var handleItemClick = function handleItemClick(e) {
     var _a;
     var item = findItem(e.target);
@@ -119,10 +136,6 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "menuitem"
     }, href === undefined || disabled ? /*#__PURE__*/React.createElement("span", null, label) : /*#__PURE__*/React.createElement("a", (0, _extends2.default)({}, alinkProps), /*#__PURE__*/React.createElement("span", null, label)));
   }));
-  var handleVisibleChange = function handleVisibleChange(visible) {
-    props.visible === undefined && setVisible(visible);
-    onVisibleChange && onVisibleChange(visible);
-  };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
     visible: visible,
     prefixCls: prefixCls,

package/lib/dropdown/style/index.css

@@ -109,6 +109,9 @@
 .kd-dropdown-trigger {
   outline: none;
 }
+.kd-dropdown-trigger-container {
+  display: inline-block;
+}
 .kd-dropdown {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/lib/dropdown/style/index.less

@@ -9,6 +9,10 @@
 
 .@{dropdown-trigger-prefix-cls} {
   outline: none;
+
+  &-container {
+    display: inline-block;
+  }
 }
 
 .@{dropdown-prefix-cls} {

package/lib/filter/scheme.js

@@ -165,8 +165,9 @@ var SchemeFilter = function SchemeFilter(props) {
   };
   var handleChangeOption = function handleChangeOption(index, value) {
     var nextScheme = (0, _cloneDeep.default)(scheme);
+    var realValue = value.target !== undefined ? value.target.value : value;
     nextScheme.items[index] = (0, _extends2.default)((0, _extends2.default)({}, nextScheme.items[index]), {
-      value: value
+      value: realValue
     });
     setScheme(nextScheme);
   };

package/lib/filter/style/index.css

@@ -327,7 +327,8 @@
   list-style: none;
 }
 .kd-filter .kd-filter-body-scheme-detail > li {
-  line-height: 40px;
+  line-height: normal;
+  padding: 7px 0 5px 0;
   color: var(--kd-g-color-text-primary, #212121);
   font-size: var(--kd-g-font-size-small, 12px);
 }

package/lib/filter/style/index.less

@@ -117,7 +117,7 @@
         display: block;
       }
     }
-    
+
     &-condition {
       display: flex;
       font-size: @font-size-small;
@@ -221,7 +221,8 @@
       &-detail {
         list-style: none;
         > li {
-          line-height: 40px;
+          line-height: normal;
+          padding: 7px 0 5px 0;
           color: @color-text-primary;
           font-size: @font-size-small;
 

package/lib/input/ClearableLabeledInput.js

@@ -43,6 +43,7 @@ var ClearableInput = function ClearableInput(props) {
     inputCount = props.inputCount,
     count = props.count,
     status = props.status;
+  var fixRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMouseEnter = _useState2[0],
@@ -57,6 +58,11 @@ var ClearableInput = function ClearableInput(props) {
     e.stopPropagation();
     e.preventDefault();
   };
+  var clickHandle = function clickHandle(e) {
+    var _a, _b;
+    e.stopPropagation();
+    (_b = (_a = fixRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+  };
   var renderClearIcon = function renderClearIcon() {
     var _classNames;
     if (!allowClear) {
@@ -98,7 +104,9 @@ var ClearableInput = function ClearableInput(props) {
     var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/_react.default.createElement("span", {
       className: inputWrapperClasses,
+      ref: fixRef,
       style: style,
+      onClick: clickHandle,
       onMouseEnter: mouseEnterHandle,
       onMouseLeave: mouseLeaveHandle
     }, prefixNode, /*#__PURE__*/_react.default.cloneElement(originElement, {

package/lib/select/option.js

@@ -60,9 +60,12 @@ var InternalOption = function InternalOption(props, ref) {
     }
     onChangeSelect && onChangeSelect(value, children, isSelected);
   };
-  var handleOnMouseMove = function handleOnMouseMove() {
+  var handleOnMouseEnter = function handleOnMouseEnter() {
     onChangeActiveIndex && onChangeActiveIndex(index);
   };
+  var handleOnMouseLeave = function handleOnMouseLeave() {
+    onChangeActiveIndex && onChangeActiveIndex(-1);
+  };
   var titleText = title || ((0, _typeof2.default)(children) !== 'object' ? children : null);
   var checkStyle = {
     minHeight: '22px',
@@ -73,7 +76,8 @@ var InternalOption = function InternalOption(props, ref) {
     className: optionCls,
     title: titleText,
     onClick: handleClick,
-    onMouseMove: handleOnMouseMove
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: contentCls
   }, isMultiple ? /*#__PURE__*/_react.default.createElement(_index.Checkbox, {

package/lib/select/select.js

@@ -65,7 +65,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     children = selectProps.children,
     options = selectProps.options,
     placeholder = selectProps.placeholder,
-    dropdownStyle = selectProps.dropdownStyle,
+    _selectProps$dropdown = selectProps.dropdownStyle,
+    dropdownStyle = _selectProps$dropdown === void 0 ? {} : _selectProps$dropdown,
     style = selectProps.style,
     clearIcon = selectProps.clearIcon,
     filterOption = selectProps.filterOption,
@@ -94,6 +95,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     selectMulOpts: []
   }); // 多选ref已选中项
   var measureRef = (0, _react.useRef)(null);
+  var clearRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     mulOptions = _useState2[0],
@@ -134,7 +136,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   // 多选底部样式
   var multipleFooterCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-multiple-footer"), true));
   // 多选，单选公共样式
-  var commCls = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames6, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch), _classNames6));
+  var commCls = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames6, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch && focusd), _classNames6));
   (0, _react.useEffect)(function () {
     if (typeof props.visible !== 'undefined') {
       setOptionShow(props.visible);
@@ -280,7 +282,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   }, [optionLabelProp, selectProps]);
   // 点击下拉列表中某项回调
   var handleOption = function handleOption(key, label, isSelected) {
-    var _a;
+    var _a, _b;
     var onSelect = selectProps.onSelect,
       onDeselect = selectProps.onDeselect,
       labelInValue = selectProps.labelInValue,
@@ -295,6 +297,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     })) || {};
     if (isMultiple) {
       (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.blur();
     }
     var optionsObj = obj.props ? obj.props : obj || {};
     if (value !== undefined) {
@@ -451,17 +455,17 @@ var InternalSelect = function InternalSelect(props, ref) {
   var renderSuffix = function renderSuffix() {
     var _classNames7;
     var suffixIcon = selectProps.suffixIcon;
-    var selectedVal = multipleRef.current.selectedVal;
     // 选择器下拉icon样式
     var arrowIconCls = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames7));
-    var iconShow = allowClear && !disabled && ((isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '') || searchValue);
+    var iconShow = allowClear && !disabled && ((isMultiple ? mulOptions.length > 0 : (singleVal !== null && singleVal !== void 0 ? singleVal : '') !== '') || searchValue);
     var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
       onClick: handleReset,
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
-      className: clearIconCls
+      className: clearIconCls,
+      ref: clearRef
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
       type: "close-solid"
     })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
@@ -557,9 +561,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       maxHeight: listHeight || '300px'
     };
     // 下拉框style属性
-    var dropDownStyle = (0, _extends2.default)({
-      width: style === null || style === void 0 ? void 0 : style.width
-    }, dropdownStyle);
     var checkboxStyle = {
       height: '30px',
       background: 'none'
@@ -568,7 +569,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var checked = mulOptions.length === filledOptions.length;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: dropDownCls,
-      style: dropDownStyle,
+      style: dropdownStyle,
       ref: dropDownRef
     }, !dropdownRender && childrenToRender.length > 0 && dropRender(eleOptionList, heightStyle), renderNotContent(), /*#__PURE__*/_react.default.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && realChildren.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: multipleFooterCls
@@ -732,7 +733,18 @@ var InternalSelect = function InternalSelect(props, ref) {
       onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
   }, [optionShow]);
-  var _useState13 = (0, _react.useState)(getActiveIndex(0)),
+  (0, _react.useEffect)(function () {
+    var _a;
+    var fn = function fn(e) {
+      e.stopPropagation();
+    };
+    (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', fn);
+    return function () {
+      var _a;
+      (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
+    };
+  }, [singleVal, mulOptions]);
+  var _useState13 = (0, _react.useState)(isShowSearch ? getActiveIndex(0) : -1),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
     activeIndex = _useState14[0],
     setActiveIndex = _useState14[1];
@@ -826,13 +838,19 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
       var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
         width = _ref2.width;
-      return (0, _extends2.default)({
-        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
+      return (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+        minWidth: width,
+        maxWidth: 600
+      }, dropdownStyle), {
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || 'auto',
         zIndex: 1050
-      }, popperStyle);
+      }), popperStyle);
     }
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      setActiveIndex(isShowSearch ? getActiveIndex(0) : -1);
+    }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);
       onVisibleChange && onVisibleChange(visible);

package/lib/select/style/index.css

@@ -249,7 +249,7 @@
 .kd-select-visible .kd-select-icon-active {
   color: #3761ca;
 }
-.kd-select-visible .kd-select-selection-item {
+.kd-select-visible div.kd-select-show-search .kd-select-selection-item {
   color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
 }
 .kd-select-icon-arrow {
@@ -277,9 +277,6 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-select-icon-arrow-focus {
-  color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
-}
 .kd-select-icon-clear {
   opacity: 0;
   z-index: 1;
@@ -362,7 +359,7 @@
   z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 4px 0;
+  padding: 8px 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-select-dropdown-font-size, 12px);
@@ -415,9 +412,6 @@
 .kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
   display: inline-block;
 }
-.kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
-  background-color: var(--kd-c-select-color-background, #f5f5f5);
-}
 .kd-select-item-option-active:not(.kd-select-item-option-disabled) {
   background-color: var(--kd-c-select-color-background, #f5f5f5);
 }

package/lib/select/style/index.less

@@ -21,7 +21,8 @@
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
-    .@{select-prefix-cls}-selection-item {
+
+    & div.@{select-prefix-cls}-show-search .@{select-prefix-cls}-selection-item {
       color: @select-placeholder-color;
     }
   }
@@ -40,10 +41,6 @@
         transform: rotate(0deg);
         transition: transform calc(@transition-duration - 0.1s) @ease;
       }
-
-      &-focus {
-        color: @select-g-color-border-foucs;
-      }
     }
 
     &-clear {
@@ -135,7 +132,7 @@
     left: 0;
     z-index: @select-z-index;
     box-sizing: border-box;
-    padding: 4px 0; // update
+    padding: 8px 0; // update
     margin: 0;
     overflow: auto;
     font-size: @select-list-font-size; // update
@@ -184,10 +181,6 @@
         }
       }
 
-      &:hover:not(&-selected):not(&-disabled) {
-        background-color: @select-item-active-bg;
-      }
-
       &-active:not(&-disabled) {
         background-color: @select-item-active-bg;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.16",
+  "version": "1.7.18",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [