@kdcloudjs/kdesign 1.7.28 → 1.7.30

package/es/select/style/index.css

@@ -280,6 +280,14 @@
 .kd-select-icon-clear {
   opacity: 0;
   z-index: 1;
+  top: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   position: absolute;
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
@@ -299,6 +307,15 @@
   text-overflow: ellipsis;
   right: 28px;
   left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-select-borderless {
   border: none;
@@ -433,18 +450,32 @@
   max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-small, 12px);
 }
+.kd-select-size-small .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
+}
 .kd-select-size-middle {
   min-height: var(--kd-c-select-sizing-height-middle, 30px);
   max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-middle, 14px);
 }
+.kd-select-size-middle .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
+}
 .kd-select-size-large {
   min-height: var(--kd-c-select-sizing-height-large, 36px);
   max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
   font-size: var(--kd-c-select-font-size-large, 16px);
 }
+.kd-select-size-large .kd-select-selection-item {
+  min-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
+  line-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
+}
 .kd-select-suffix {
   right: 0;
+  top: 0;
+  bottom: 0;
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -467,6 +498,14 @@
   right: 28px;
   left: 0;
   height: 100%;
+  top: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-select .kd-select-single .kd-select-selection-search-input {
   outline: 0;
@@ -525,9 +564,6 @@
           align-items: center;
   vertical-align: middle;
   max-width: 100%;
-  height: 20px;
-  line-height: 20px;
-  margin: 2px 8px 2px 0;
   cursor: default;
   -webkit-user-select: none;
      -moz-user-select: none;

package/es/select/style/index.less

@@ -46,6 +46,10 @@
     &-clear {
       opacity: 0;
       z-index: 1;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
       position: absolute;
       background: #fff;
       transition: opacity 0.15s ease;
@@ -66,6 +70,11 @@
     text-overflow: ellipsis;
     right: 28px;
     left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
   }
 
   &-borderless {
@@ -220,6 +229,8 @@
 
   &-suffix {
     right: 0;
+    top: 0;
+    bottom: 0;
     position: absolute;
     display: flex;
     flex: 0;
@@ -235,6 +246,10 @@
         right: 28px;
         left: 0;
         height: 100%;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
         &-input {
           outline: 0;
           border-radius: 0;
@@ -289,9 +304,6 @@
     align-items: center;
     vertical-align: middle;
     max-width: 100%;
-    height: 20px;
-    line-height: 20px;
-    margin: 2px 8px 2px 0;
     cursor: default;
     user-select: none;
     &-small {

package/es/select/style/mixin.less

@@ -19,6 +19,11 @@
   min-height: @height;
   max-height: calc(@maxHeight * 3 - 10px);
   font-size: @fontSize;
+
+  .@{select-prefix-cls}-selection-item {
+    min-height: calc(@height - 4px);
+    line-height: calc(@height - 4px);
+  }
 }
 
 .over() {
@@ -52,7 +57,6 @@
   }
 }
 
-
 @keyframes SlideUpIn {
   0% {
     transform: scaleY(0.8);
@@ -77,4 +81,4 @@
     transform-origin: 100% 100%;
     opacity: 0;
   }
-}
+}

package/lib/checkbox/checkbox.js

@@ -109,6 +109,17 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   }, []);
   var getDefaultCheckbox = function getDefaultCheckbox() {
     var _context20, _context21;
+    var inputProps = {
+      type: 'checkbox',
+      className: inputClassName,
+      onChange: handleChange,
+      checked: selected,
+      disabled: mergedDisabled,
+      name: mergedName
+    };
+    if ((value !== null && value !== void 0 ? value : '') !== '') {
+      inputProps.value = value;
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
@@ -118,30 +129,24 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
         ref: labelRef
       }, rest), /*#__PURE__*/_react.default.createElement("span", {
         className: checkedWrapperClassName
-      }, selected && /*#__PURE__*/_react.default.createElement("span", {
+      }, selected ? /*#__PURE__*/_react.default.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "right-bold",
         className: (0, _concat.default)(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, mergedCheckboxType, "-inner-icon")
-      })), /*#__PURE__*/_react.default.createElement("input", {
+      })) : null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
         type: "checkbox",
-        className: inputClassName,
-        onChange: handleChange,
-        ref: ref,
-        value: value,
-        checked: selected,
-        disabled: mergedDisabled,
-        name: mergedName
-      })), children && /*#__PURE__*/_react.default.createElement("span", {
+        ref: ref
+      }, inputProps))), children ? /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(checkboxPrefixCls, "-children")
-      }, children), !isDefaultType() && /*#__PURE__*/_react.default.createElement("span", {
+      }, children) : null, !isDefaultType() ? /*#__PURE__*/_react.default.createElement("span", {
         className: triangleClassName
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "right-bold",
         className: (0, _concat.default)(_context21 = "".concat(checkboxPrefixCls, "-")).call(_context21, mergedCheckboxType, "-inner-icon")
-      }))))
+      }))) : null)
     );
   };
   return getDefaultCheckbox();

package/lib/city-picker/city-picker.js

@@ -35,7 +35,7 @@ var getCityId = function getCityId(data) {
   return data;
 };
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames3, _classNames5;
+  var _context, _classNames3, _classNames6;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -114,14 +114,18 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     focusd = _useState6[0],
     setFocusd = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    seletedCity = _useState8[0],
-    setSeletedCity = _useState8[1];
-  var _useState9 = (0, _react.useState)('domestic'),
+    afterChangeFocus = _useState8[0],
+    setAfterChangeFocus = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    tabsValue = _useState10[0],
-    setTabsValue = _useState10[1];
+    seletedCity = _useState10[0],
+    setSeletedCity = _useState10[1];
+  var _useState11 = (0, _react.useState)('domestic'),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    tabsValue = _useState12[0],
+    setTabsValue = _useState12[1];
   var isDomestic = function isDomestic(type) {
     return type === 'domestic';
   };
@@ -156,6 +160,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var handleBlur = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setFocusd(false);
+    setAfterChangeFocus(false);
     onBlur && onBlur(e);
   }, [onBlur]);
   (0, _react.useEffect)(function () {
@@ -205,7 +210,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-icon-clear"),
       ref: clearRef
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close-solid"
+      type: "close"
     })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
@@ -236,9 +241,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     }));
   };
   var handleOption = function handleOption(city) {
+    var _a;
     handleVisibleChange(false);
     city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
     (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
+    (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setAfterChangeFocus(true);
     if (typeof value === 'undefined') {
       setSeletedCity(city);
       setInitValue(city === null || city === void 0 ? void 0 : city.id);
@@ -251,7 +259,10 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(selectPrefixCls, "-list"),
-      ref: optionsListRef
+      ref: optionsListRef,
+      onMouseDown: function onMouseDown(e) {
+        return e === null || e === void 0 ? void 0 : e.preventDefault();
+      }
     }, (0, _map.default)(data).call(data, function (item, index) {
       return /*#__PURE__*/_react.default.createElement(_option.default, {
         key: item.id,
@@ -322,9 +333,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'
     } : undefined;
+    var itemCls = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-content-item"), true), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-content-item-seleted"), afterChangeFocus), _classNames5));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: singleCls,
       ref: selectionRef
@@ -341,18 +354,18 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: handleBlur,
       readOnly: !!disabled
     }), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(selectPrefixCls, "-content-item"),
+      className: itemCls,
       title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
     }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-content-info")
     }, _renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
-    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    }, !disabled ? placeholder : null), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix())));
   };
-  var singleCls = (0, _classnames.default)(commCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  var singleCls = (0, _classnames.default)(commCls, (_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames6));
   (0, _react.useEffect)(function () {
     if (optionShow && !disabled) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
@@ -389,16 +402,17 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return -1;
   };
-  var _useState11 = (0, _react.useState)(getActiveIndex(0)),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    activeIndex = _useState12[0],
-    setActiveIndex = _useState12[1];
+  var _useState13 = (0, _react.useState)(-1),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    activeIndex = _useState14[0],
+    setActiveIndex = _useState14[1];
   var initActiveIndex = function initActiveIndex() {
-    setActiveIndex(getActiveIndex(0));
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    setActiveIndex(index === undefined ? getActiveIndex(0) : index);
   };
   (0, _react.useEffect)(function () {
-    initActiveIndex();
-  }, [searchValue, tabsValue]);
+    initActiveIndex(searchValue ? undefined : -1);
+  }, [searchValue, tabsValue, curkeyboardList]);
   var onInternalKeyDown = function onInternalKeyDown(e) {
     var _a, _b, _c;
     var which = e.which;
@@ -422,11 +436,11 @@ var InternalSelect = function InternalSelect(props, ref) {
             var item = curkeyboardList[activeIndex];
             if (!item) return;
             handleOption(item);
-            setOptionShow(false);
+            handleVisibleChange(false);
             break;
           }
         case _KeyCode.default.ESC:
-          setOptionShow(false);
+          handleVisibleChange(false);
           break;
         default:
           break;
@@ -482,7 +496,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
     if (!visible) {
-      initActiveIndex();
+      initActiveIndex(-1);
     }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);

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

@@ -170,6 +170,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
+  font-size: var(--kd-c-city-picker-icon-clear-font-size, 16px);
 }
 .kd-city-picker-icon-clear:hover {
   color: var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
@@ -239,10 +240,10 @@
   opacity: 1;
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear {
-  color: var(--kd-c-city-picker-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-city-picker-icon-clear-color-text, #666666);
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear:hover {
-  color: var(--kd-c-city-picker-icon-clear-color-text-hover, #999);
+  color: var(--kd-c-city-picker-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-show-search {
   cursor: text;
@@ -419,7 +420,7 @@
 .kd-city-picker-focused {
   border-color: var(--kd-c-city-picker-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
-.kd-city-picker-focused .kd-city-picker-content-item {
+.kd-city-picker-focused .kd-city-picker-content-item:not(.kd-city-picker-content-item-seleted) {
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
 }
 .kd-city-picker-disabled {

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

@@ -61,6 +61,7 @@
       top: 0;
       background: #fff;
       transition: opacity 0.15s ease;
+      font-size: @city-picker-clear-font-size;
       &:hover {
         color: @city-picker-g-color-border-hover;
       }
@@ -297,7 +298,7 @@
   &-focused {
     .focusColor();
 
-    .@{city-picker-prefix-cls}-content-item {
+    .@{city-picker-prefix-cls}-content-item:not(.@{city-picker-prefix-cls}-content-item-seleted) {
       color: @city-picker-placeholder-color;
     }
   }

package/lib/city-picker/style/token.less

@@ -17,8 +17,8 @@
 @city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
 @city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
 @city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
-@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
+@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #666666);
+@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', @color-theme);
 @city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
 @city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
 
@@ -27,6 +27,7 @@
 @city-picker-large-font-size: var(~'@{city-picker-custom-prefix}-font-size-large', 16px); // 大号字体
 @city-picker-middle-font-size: var(~'@{city-picker-custom-prefix}-font-size-middle', 14px); // 中号高度
 @city-picker-small-font-size: var(~'@{city-picker-custom-prefix}-font-size-small', 12px); // 小号高度
+@city-picker-clear-font-size: var(~'@{city-picker-custom-prefix}-icon-clear-font-size', 16px);
 
 // line-height
 @city-picker-dropdown-line-height: var(~'@{city-picker-custom-prefix}-dropdown-line-height', 22px);

package/lib/grid/col.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface ColBase {
     span?: number;
     pull?: number;

package/lib/grid/col.js

@@ -8,40 +8,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
 var _testBrowserType = require("../_utils/testBrowserType");
+var _row = require("./row");
 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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var Col = function Col(props) {
-  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
   // 属性需要合并一遍用户定义的默认属性
-  var _getCompProps = (0, _utils.getCompProps)('Col', userDefaultProps, props),
-    xs = _getCompProps.xs,
-    sm = _getCompProps.sm,
-    md = _getCompProps.md,
-    lg = _getCompProps.lg,
-    xl = _getCompProps.xl,
-    flex = _getCompProps.flex,
-    span = _getCompProps.span,
-    pull = _getCompProps.pull,
-    push = _getCompProps.push,
-    style = _getCompProps.style,
-    order = _getCompProps.order,
-    offset = _getCompProps.offset,
-    winWidth = _getCompProps.winWidth,
-    children = _getCompProps.children,
-    className = _getCompProps.className,
-    customPrefixcls = _getCompProps.prefixCls;
+  var _a = (0, _utils.getCompProps)('Col', userDefaultProps, props),
+    xs = _a.xs,
+    sm = _a.sm,
+    md = _a.md,
+    lg = _a.lg,
+    xl = _a.xl,
+    flex = _a.flex,
+    span = _a.span,
+    pull = _a.pull,
+    push = _a.push,
+    style = _a.style,
+    order = _a.order,
+    offset = _a.offset,
+    children = _a.children,
+    className = _a.className,
+    customPrefixcls = _a.prefixCls,
+    others = __rest(_a, ["xs", "sm", "md", "lg", "xl", "flex", "span", "pull", "push", "style", "order", "offset", "children", "className", "prefixCls"]);
+  var rowGroup = (0, _react.useContext)(_row.GapContext);
+  var mergedWinWidth = rowGroup.winWidth;
+  var gap = rowGroup.gap;
   // 浏览器名称
-  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var isSogouOrIE = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
+  var colGapStyle = {
+    padding: "0 ".concat(gap.h / 2, "px")
+  };
+  if (isSogouOrIE && gap.v) colGapStyle.marginBottom = gap.v;
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'col', customPrefixcls);
   var columns = 24;
@@ -52,23 +69,23 @@ var Col = function Col(props) {
     offset: offset,
     order: order
   };
-  if (xs && winWidth > 0) {
+  if (xs && mergedWinWidth > 0) {
     if (xs.constructor === Number) base.span = xs;
     if (xs.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), xs);
   }
-  if (sm && winWidth >= 600) {
+  if (sm && mergedWinWidth >= 600) {
     if (sm.constructor === Number) base.span = sm;
     if (sm.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), sm);
   }
-  if (md && winWidth >= 1024) {
+  if (md && mergedWinWidth >= 1024) {
     if (md.constructor === Number) base.span = md;
     if (md.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), md);
   }
-  if (lg && winWidth >= 1280) {
+  if (lg && mergedWinWidth >= 1280) {
     if (lg.constructor === Number) base.span = lg;
     if (lg.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), lg);
   }
-  if (xl && winWidth >= 1920) {
+  if (xl && mergedWinWidth >= 1920) {
     if (xl.constructor === Number) base.span = xl;
     if (xl.constructor === Object) base = (0, _extends2.default)((0, _extends2.default)({}, base), xl);
   }
@@ -88,20 +105,18 @@ var Col = function Col(props) {
       }
     }
   }
-  var styleString = (0, _extends2.default)({
+  var styleString = (0, _extends2.default)((0, _extends2.default)({
     flex: flexstr,
     maxWidth: width,
     order: base.order,
     left: base.push && base.push / columns * 100 + '%',
     right: base.pull && base.pull / columns * 100 + '%',
     marginLeft: base.offset && base.offset / columns * 100 + '%'
-  }, style);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, className, {
-      'sogou-col': isSogou
-    }),
+  }, colGapStyle), style);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _classnames.default)(prefixCls, className),
     style: styleString
-  }, children);
+  }, others), children);
 };
 Col.displayName = 'Col';
 var _default = Col;

package/lib/grid/row.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 declare type Align = 'top' | 'middle' | 'bottom' | 'stretch';
 declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 interface gutterObject {
@@ -17,5 +17,13 @@ export interface RowProps {
     style?: React.CSSProperties;
     gutter?: number | gutterObject | Array<number | gutterObject>;
 }
+export interface GridContext {
+    gap: {
+        v: number;
+        h: number;
+    };
+    winWidth: number;
+}
+export declare const GapContext: React.Context<GridContext>;
 declare const Row: React.FC<RowProps>;
 export default Row;