@kdcloudjs/kdesign 1.8.55 → 1.8.57

package/es/_utils/usePopper.js

@@ -222,6 +222,10 @@ function usePopper(locatorElement, popperElement, props) {
     _useState16 = _slicedToArray(_useState15, 2),
     maxWidth = _useState16[0],
     setMaxWidth = _useState16[1];
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    forceStyle = _useState18[0],
+    setForceStyle = _useState18[1];
   useEffect(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -231,18 +235,18 @@ function usePopper(locatorElement, popperElement, props) {
       setVisible(false);
     }
   }, [exist, props.visible]);
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    evType = _useState18[0],
-    setEvType = _useState18[1];
-  var _useState19 = useState(),
+  var _useState19 = useState(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    align = _useState20[0],
-    setAlign = _useState20[1];
-  var _useState21 = useState(_includesInstanceProperty(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    evType = _useState20[0],
+    setEvType = _useState20[1];
+  var _useState21 = useState(),
     _useState22 = _slicedToArray(_useState21, 2),
-    nextPlacement = _useState22[0],
-    setNextPlacement = _useState22[1];
+    align = _useState22[0],
+    setAlign = _useState22[1];
+  var _useState23 = useState(_includesInstanceProperty(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    _useState24 = _slicedToArray(_useState23, 2),
+    nextPlacement = _useState24[0],
+    setNextPlacement = _useState24[1];
   useEffect(function () {
     if (isMobile) return;
     if (nextPlacement !== placement && _includesInstanceProperty(Placements).call(Placements, placement)) {
@@ -502,6 +506,7 @@ function usePopper(locatorElement, popperElement, props) {
         }
         var newMaxHeight = 0;
         var newMaxWidth;
+        var newForceStyle = {};
         if (/top/.test(placementForCalc)) {
           newMaxHeight = rect.top - gap;
         } else if (/bottom/.test(placementForCalc)) {
@@ -515,9 +520,19 @@ function usePopper(locatorElement, popperElement, props) {
           } else if (/right/.test(placementForCalc)) {
             newMaxWidth = viewportWidth - rect.right - gap;
           }
+          var triggerWidth = rect.width;
+          if (triggerWidth >= viewportWidth * 0.8) {
+            newForceStyle = {
+              left: 0,
+              right: 'auto',
+              transform: 'none',
+              maxWidth: '100vw'
+            };
+          }
         }
         setMaxHeight(Math.max(newMaxHeight, 0));
         setMaxWidth(newMaxWidth && newMaxWidth > 0 ? newMaxWidth : undefined);
+        setForceStyle(newForceStyle);
       }
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
@@ -531,13 +546,13 @@ function usePopper(locatorElement, popperElement, props) {
   var arrowStyle = (_arrowStyle = {}, _defineProperty(_arrowStyle, "--arrowSize", arrowSize + 'px'), _defineProperty(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
   if (arrowPos.top) arrowStyle["--arrowTop"] = arrowPos.top + 'px';
   if (arrowPos.left) arrowStyle["--arrowLeft"] = arrowPos.left + 'px';
-  var popperContainerStyle = _extends(_extends(_extends(_extends(_extends({
+  var popperContainerStyle = _extends(_extends(_extends(_extends(_extends(_extends({
     position: 'absolute'
   }, align), arrow ? arrowStyle : {}), maxHeight ? {
     maxHeight: maxHeight + 'px'
   } : {}), maxWidth ? {
     maxWidth: maxWidth + 'px'
-  } : {}), popperStyle);
+  } : {}), forceStyle), popperStyle);
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,

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

@@ -425,7 +425,10 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  min-width: auto;
+  /* IE */
   min-width: unset;
+  /* 现代浏览器 */
 }
 .kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-bordered {
   border-radius: 2px;
@@ -562,12 +565,13 @@
   grid-column-gap: 8px;
   grid-row-gap: 8px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 .kd-color-picker-panel-color-box-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  width: 100%;
 }
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li {
   margin-right: 8px;
@@ -719,10 +723,6 @@
 .kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
-.kd-color-picker-rtl.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-no-color-line {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
 .kd-color-picker-rtl.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
   margin-left: 0;
 }
@@ -734,10 +734,6 @@
   margin-left: 4px;
   margin-right: 0;
 }
-.kd-color-picker-rtl .kd-color-picker-panel-clear-box::after {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
 .kd-color-picker-rtl .kd-color-picker-panel-container-select .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item {
   -webkit-box-pack: right;
       -ms-flex-pack: right;

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

@@ -347,7 +347,8 @@
             .@{kd-prefix}-select-item-option {
               display: flex;
               justify-content: center;
-              min-width: unset;
+              min-width: auto; /* IE */
+              min-width: unset; /* 现代浏览器 */
             }
           }
         }
@@ -501,9 +502,11 @@
         grid-row-gap: 8px;
 
         &-ie11 {
-          display: flex;
-          flex-wrap: wrap;
-
+          .@{color-picker-prefix-cls}-panel-color-box-container {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+          }
           li {
             margin-right: 8px;
             margin-top: 8px;
@@ -678,15 +681,6 @@
       }
     }
   }
-  &.@{color-picker-prefix-cls}-container {
-    .@{color-picker-prefix-cls}-icon-container {
-      .@{color-picker-prefix-cls}-icon {
-        &-no-color-line {
-          transform: rotate(-45deg);
-        }
-      }
-    }
-  }
   
   &.@{color-picker-prefix-cls}-container-pure {
     .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
@@ -712,9 +706,6 @@
       &-box {
         margin-left: 4px;
         margin-right: 0;
-        &::after {
-          transform: rotate(-45deg);
-        }
       }
     }
     &-container {

package/es/popconfirm/popconfirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonType, IButtonProps } from '../button';
-import { PopperProps } from '../_utils/usePopper';
+import { PopperProps } from '../popper';
 export declare type RenderFunction = () => React.ReactNode;
 export interface PopconfirmProps extends PopperProps {
     okText?: string;

package/es/popconfirm/popconfirm.js

@@ -6,7 +6,7 @@ import Icon from '../icon';
 import Button from '../button';
 import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
-import usePopper from '../_utils/usePopper';
+import Popper from '../popper';
 var Popconfirm = function Popconfirm(props) {
   var _context;
   var _React$useContext = React.useContext(ConfigContext),
@@ -78,7 +78,9 @@ var Popconfirm = function Popconfirm(props) {
     arrow: true,
     onVisibleChange: handleVisibleChange
   });
-  return usePopper(confirmLocator, confirmPopper, popperProps);
+  return React.createElement(Popper, _extends({
+    tip: confirmPopper
+  }, popperProps), confirmLocator);
 };
 Popconfirm.displayName = 'Popconfirm';
 export default Popconfirm;

package/es/popconfirm/style/index.css

@@ -235,6 +235,9 @@
 .kd-popconfirm-interaction button:not(:last-child) {
   margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
 }
+.kd-popconfirm .arrow::before {
+  border-color: #fff;
+}
 .kd-popconfirm-rtl {
   direction: rtl;
 }

package/es/popconfirm/style/index.less

@@ -78,6 +78,10 @@
       margin-right: @popconfirm-button-spacing;
     }
   }
+  
+  .arrow::before {
+    border-color: @tooltip-background-color;
+  }
 }
 .@{popconfirm-prefix-cls}-rtl {
   direction: rtl;
@@ -97,4 +101,4 @@
     }
   }
 }
-/*! rtl:end:ignore */
+/*! rtl:end:ignore */

package/es/select/select.js

@@ -36,7 +36,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
     locale = _useContext.locale,
-    direction = _useContext.direction;
+    direction = _useContext.direction,
+    isMobile = _useContext.isMobile;
   var selectProps = getCompProps('Select', userDefaultProps, props);
   var selectLangMsg = locale.getCompLangMsg({
     componentName: 'Select'
@@ -753,7 +754,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix()));
   };
-  var singleCls = classNames(commCls, (_classNames12 = {}, _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames12));
+  var singleCls = classNames(commCls, (_classNames12 = {}, _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-isnotMobile"), !isMobile), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames12));
   var getActiveIndex = function getActiveIndex(index) {
     var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
     var len = filledOptions.length;

package/es/select/style/index.css

@@ -539,9 +539,6 @@
 .kd-select .kd-select-single-disabled .kd-select-suffix {
   color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
 }
-.kd-select .kd-select-single:hover .kd-select-icon-clear {
-  opacity: 1;
-}
 .kd-select .kd-select-single .kd-select-icon-clear {
   color: var(--kd-c-select-icon-clear-color-text, #666);
 }
@@ -557,6 +554,9 @@
 .kd-select .kd-select-single-disabled-text {
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-select .kd-select-single-isnotMobile:hover .kd-select-icon-clear {
+  opacity: 1;
+}
 .kd-select .kd-select-selection-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/es/select/style/index.less

@@ -285,9 +285,7 @@
         color: @select-arrow-icon-color-text-disabled;
       }
     }
-    &:hover .@{select-prefix-cls}-icon-clear {
-      opacity: 1;
-    }
+
 
     .@{select-prefix-cls}-icon-clear {
       color: @select-clear-color;
@@ -303,6 +301,9 @@
       color: @select-color-text-disabled;
     }
   }
+    .@{select-prefix-cls}-single-isnotMobile:hover .@{select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }  
 
   .@{select-prefix-cls}-selection-item {
     display: inline-flex;

package/lib/_utils/usePopper.js

@@ -236,6 +236,10 @@ function usePopper(locatorElement, popperElement, props) {
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
     maxWidth = _useState16[0],
     setMaxWidth = _useState16[1];
+  var _useState17 = (0, _react.useState)({}),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    forceStyle = _useState18[0],
+    setForceStyle = _useState18[1];
   (0, _react.useEffect)(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -245,18 +249,18 @@ function usePopper(locatorElement, popperElement, props) {
       setVisible(false);
     }
   }, [exist, props.visible]);
-  var _useState17 = (0, _react.useState)(''),
-    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    evType = _useState18[0],
-    setEvType = _useState18[1];
-  var _useState19 = (0, _react.useState)(),
+  var _useState19 = (0, _react.useState)(''),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    align = _useState20[0],
-    setAlign = _useState20[1];
-  var _useState21 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    evType = _useState20[0],
+    setEvType = _useState20[1];
+  var _useState21 = (0, _react.useState)(),
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    nextPlacement = _useState22[0],
-    setNextPlacement = _useState22[1];
+    align = _useState22[0],
+    setAlign = _useState22[1];
+  var _useState23 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    nextPlacement = _useState24[0],
+    setNextPlacement = _useState24[1];
   (0, _react.useEffect)(function () {
     if (isMobile) return;
     if (nextPlacement !== placement && (0, _includes.default)(Placements).call(Placements, placement)) {
@@ -516,6 +520,7 @@ function usePopper(locatorElement, popperElement, props) {
         }
         var newMaxHeight = 0;
         var newMaxWidth;
+        var newForceStyle = {};
         if (/top/.test(placementForCalc)) {
           newMaxHeight = rect.top - gap;
         } else if (/bottom/.test(placementForCalc)) {
@@ -529,9 +534,19 @@ function usePopper(locatorElement, popperElement, props) {
           } else if (/right/.test(placementForCalc)) {
             newMaxWidth = viewportWidth - rect.right - gap;
           }
+          var triggerWidth = rect.width;
+          if (triggerWidth >= viewportWidth * 0.8) {
+            newForceStyle = {
+              left: 0,
+              right: 'auto',
+              transform: 'none',
+              maxWidth: '100vw'
+            };
+          }
         }
         setMaxHeight(Math.max(newMaxHeight, 0));
         setMaxWidth(newMaxWidth && newMaxWidth > 0 ? newMaxWidth : undefined);
+        setForceStyle(newForceStyle);
       }
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
@@ -545,13 +560,13 @@ function usePopper(locatorElement, popperElement, props) {
   var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
   if (arrowPos.top) arrowStyle["--arrowTop"] = arrowPos.top + 'px';
   if (arrowPos.left) arrowStyle["--arrowLeft"] = arrowPos.left + 'px';
-  var popperContainerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+  var popperContainerStyle = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
     position: 'absolute'
   }, align), arrow ? arrowStyle : {}), maxHeight ? {
     maxHeight: maxHeight + 'px'
   } : {}), maxWidth ? {
     maxWidth: maxWidth + 'px'
-  } : {}), popperStyle);
+  } : {}), forceStyle), popperStyle);
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,

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

@@ -425,7 +425,10 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  min-width: auto;
+  /* IE */
   min-width: unset;
+  /* 现代浏览器 */
 }
 .kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-bordered {
   border-radius: 2px;
@@ -562,12 +565,13 @@
   grid-column-gap: 8px;
   grid-row-gap: 8px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 .kd-color-picker-panel-color-box-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  width: 100%;
 }
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li {
   margin-right: 8px;
@@ -719,10 +723,6 @@
 .kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
-.kd-color-picker-rtl.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-no-color-line {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
 .kd-color-picker-rtl.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
   margin-left: 0;
 }
@@ -734,10 +734,6 @@
   margin-left: 4px;
   margin-right: 0;
 }
-.kd-color-picker-rtl .kd-color-picker-panel-clear-box::after {
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
 .kd-color-picker-rtl .kd-color-picker-panel-container-select .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item {
   -webkit-box-pack: right;
       -ms-flex-pack: right;

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

@@ -347,7 +347,8 @@
             .@{kd-prefix}-select-item-option {
               display: flex;
               justify-content: center;
-              min-width: unset;
+              min-width: auto; /* IE */
+              min-width: unset; /* 现代浏览器 */
             }
           }
         }
@@ -501,9 +502,11 @@
         grid-row-gap: 8px;
 
         &-ie11 {
-          display: flex;
-          flex-wrap: wrap;
-
+          .@{color-picker-prefix-cls}-panel-color-box-container {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+          }
           li {
             margin-right: 8px;
             margin-top: 8px;
@@ -678,15 +681,6 @@
       }
     }
   }
-  &.@{color-picker-prefix-cls}-container {
-    .@{color-picker-prefix-cls}-icon-container {
-      .@{color-picker-prefix-cls}-icon {
-        &-no-color-line {
-          transform: rotate(-45deg);
-        }
-      }
-    }
-  }
   
   &.@{color-picker-prefix-cls}-container-pure {
     .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
@@ -712,9 +706,6 @@
       &-box {
         margin-left: 4px;
         margin-right: 0;
-        &::after {
-          transform: rotate(-45deg);
-        }
       }
     }
     &-container {

package/lib/popconfirm/popconfirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonType, IButtonProps } from '../button';
-import { PopperProps } from '../_utils/usePopper';
+import { PopperProps } from '../popper';
 export declare type RenderFunction = () => React.ReactNode;
 export interface PopconfirmProps extends PopperProps {
     okText?: string;

package/lib/popconfirm/popconfirm.js

@@ -16,7 +16,7 @@ var _icon = _interopRequireDefault(require("../icon"));
 var _button = _interopRequireDefault(require("../button"));
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _popper = _interopRequireDefault(require("../popper"));
 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 Popconfirm = function Popconfirm(props) {
@@ -90,7 +90,9 @@ var Popconfirm = function Popconfirm(props) {
     arrow: true,
     onVisibleChange: handleVisibleChange
   });
-  return (0, _usePopper.default)(confirmLocator, confirmPopper, popperProps);
+  return React.createElement(_popper.default, (0, _extends2.default)({
+    tip: confirmPopper
+  }, popperProps), confirmLocator);
 };
 Popconfirm.displayName = 'Popconfirm';
 var _default = Popconfirm;

package/lib/popconfirm/style/index.css

@@ -235,6 +235,9 @@
 .kd-popconfirm-interaction button:not(:last-child) {
   margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
 }
+.kd-popconfirm .arrow::before {
+  border-color: #fff;
+}
 .kd-popconfirm-rtl {
   direction: rtl;
 }

package/lib/popconfirm/style/index.less

@@ -78,6 +78,10 @@
       margin-right: @popconfirm-button-spacing;
     }
   }
+  
+  .arrow::before {
+    border-color: @tooltip-background-color;
+  }
 }
 .@{popconfirm-prefix-cls}-rtl {
   direction: rtl;
@@ -97,4 +101,4 @@
     }
   }
 }
-/*! rtl:end:ignore */
+/*! rtl:end:ignore */

package/lib/select/select.js

@@ -48,7 +48,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
     locale = _useContext.locale,
-    direction = _useContext.direction;
+    direction = _useContext.direction,
+    isMobile = _useContext.isMobile;
   var selectProps = (0, _utils.getCompProps)('Select', userDefaultProps, props);
   var selectLangMsg = locale.getCompLangMsg({
     componentName: 'Select'
@@ -765,7 +766,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix()));
   };
-  var singleCls = (0, _classnames.default)(commCls, (_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames12));
+  var singleCls = (0, _classnames.default)(commCls, (_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-isnotMobile"), !isMobile), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-focused"), focusd && !disabled || optionShow), _classNames12));
   var getActiveIndex = function getActiveIndex(index) {
     var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
     var len = filledOptions.length;

package/lib/select/style/index.css

@@ -539,9 +539,6 @@
 .kd-select .kd-select-single-disabled .kd-select-suffix {
   color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
 }
-.kd-select .kd-select-single:hover .kd-select-icon-clear {
-  opacity: 1;
-}
 .kd-select .kd-select-single .kd-select-icon-clear {
   color: var(--kd-c-select-icon-clear-color-text, #666);
 }
@@ -557,6 +554,9 @@
 .kd-select .kd-select-single-disabled-text {
   color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-select .kd-select-single-isnotMobile:hover .kd-select-icon-clear {
+  opacity: 1;
+}
 .kd-select .kd-select-selection-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/lib/select/style/index.less

@@ -285,9 +285,7 @@
         color: @select-arrow-icon-color-text-disabled;
       }
     }
-    &:hover .@{select-prefix-cls}-icon-clear {
-      opacity: 1;
-    }
+
 
     .@{select-prefix-cls}-icon-clear {
       color: @select-clear-color;
@@ -303,6 +301,9 @@
       color: @select-color-text-disabled;
     }
   }
+    .@{select-prefix-cls}-single-isnotMobile:hover .@{select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }  
 
   .@{select-prefix-cls}-selection-item {
     display: inline-flex;

package/package.json

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