@kdcloudjs/kdesign 1.7.23 → 1.7.25

package/es/select/select.js

@@ -22,7 +22,7 @@ import VirtualList from '../virtual-list';
 import KeyCode from '../_utils/KeyCode';
 var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames6, _classNames12;
+  var _context, _classNames6, _classNames12, _context5;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -766,7 +766,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     // open
     if (which === KeyCode.ENTER || which === KeyCode.UP || which === KeyCode.DOWN) {
       e.preventDefault();
-      setOptionShow(true);
+      handleVisibleChange(true);
     }
     // backspace
     var _multipleRef$current5 = multipleRef.current,
@@ -794,6 +794,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         offset = 1;
       } else if (which === KeyCode.ENTER) {
         var item = filledOptions[activeIndex];
+        if (!item) return;
         var key = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) || item.value;
         var label = ((_b = item.props) === null || _b === void 0 ? void 0 : _b.children) || item.label;
         handleOption(key, label, true);
@@ -809,10 +810,10 @@ var InternalSelect = function InternalSelect(props, ref) {
           }));
         }
         if (!isMultiple) {
-          setOptionShow(false);
+          handleVisibleChange(false);
         }
       } else if (which === KeyCode.ESC) {
-        setOptionShow(false);
+        handleVisibleChange(false);
       }
       if (offset !== 0) {
         var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
@@ -869,7 +870,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = _extends(_extends({}, selectProps), {
-    prefixCls: selectPrefixCls,
+    prefixCls: _concatInstanceProperty(_context5 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context5, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : ''),
     placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,

package/es/select/style/index.css

@@ -359,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: 8px 0;
+  padding: var(--kd-c-select-dropdown-spacing-padding-vertical, 8px) 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-select-dropdown-font-size, 12px);
@@ -382,6 +382,9 @@
 .kd-select-dropdown-search-hidden {
   display: none;
 }
+.kd-select-multiple-dropdown-panel .kd-select-dropdown {
+  padding-bottom: 0;
+}
 .kd-select-item {
   position: relative;
   display: block;
@@ -648,8 +651,8 @@
           align-items: center;
   width: 100%;
   padding: 0 12px;
-  height: 32px;
-  line-height: 32px;
+  height: 40px;
+  line-height: 40px;
   border-top: 1px solid #d9d9d9;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/es/select/style/index.less

@@ -132,10 +132,10 @@
     left: 0;
     z-index: @select-z-index;
     box-sizing: border-box;
-    padding: 8px 0; // update
+    padding: @select-dropdown-padding-vertical 0;
     margin: 0;
     overflow: auto;
-    font-size: @select-list-font-size; // update
+    font-size: @select-list-font-size;
     font-variant: initial;
     background-color: @select-dropdown-bg;
     border-radius: @select-g-radius-border;
@@ -159,6 +159,12 @@
     }
   }
 
+  &-multiple-dropdown-panel {
+    .@{select-prefix-cls}-dropdown {
+      padding-bottom: 0;
+    }
+  }
+
   // 下拉列表选项
   &-item {
     .item();
@@ -404,8 +410,8 @@
       align-items: center;
       width: 100%;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 40px;
+      line-height: 40px;
       border-top: 1px solid #d9d9d9;
       box-sizing: border-box;
 

package/es/select/style/token.less

@@ -2,7 +2,6 @@
 
 @select-custom-prefix: ~'--@{kd-prefix}-c-select';
 
-
 // color
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
@@ -45,6 +44,7 @@
 // spacing
 @select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
 @select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@select-dropdown-padding-vertical: var(~'@{select-custom-prefix}-dropdown-spacing-padding-vertical', 8px);
 
 // radius
 @select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);

package/es/style/core/motion/slide.less

@@ -31,12 +31,15 @@
 .slide-motion(topLeft, kdSlideDown, kd-cascader-menus);
 .slide-motion(bottomLeft, kdSlideUp, kd-cascader-menus);
 
-.slide-motion(topLeft, kdSlideDown, kd-select);
-.slide-motion(bottomLeft, kdSlideUp, kd-select);
+.slide-motion(topLeft, kdSlideDown, kd-select-dropdown-panel);
+.slide-motion(bottomLeft, kdSlideUp, kd-select-dropdown-panel);
 
 .slide-motion(topLeft, kdSlideDown, kd-date-picker-panel);
 .slide-motion(bottomLeft, kdSlideUp, kd-date-picker-panel);
 
+.slide-motion(topLeft, kdSlideDown, kd-city-picker-dropdown);
+.slide-motion(bottomLeft, kdSlideUp, kd-city-picker-dropdown);
+
 @keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/es/style/index.css

@@ -1361,7 +1361,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.topLeft-active {
+.kd-select-dropdown-panel.topLeft-active {
   -webkit-animation-name: kdSlideDownIn;
           animation-name: kdSlideDownIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1369,7 +1369,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.topLeft.hidden {
+.kd-select-dropdown-panel.topLeft.hidden {
   -webkit-animation-name: kdSlideDownOut;
           animation-name: kdSlideDownOut;
   -webkit-animation-duration: 0.1s;
@@ -1377,7 +1377,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.bottomLeft-active {
+.kd-select-dropdown-panel.bottomLeft-active {
   -webkit-animation-name: kdSlideUpIn;
           animation-name: kdSlideUpIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1385,7 +1385,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.bottomLeft.hidden {
+.kd-select-dropdown-panel.bottomLeft.hidden {
   -webkit-animation-name: kdSlideUpOut;
           animation-name: kdSlideUpOut;
   -webkit-animation-duration: 0.1s;
@@ -1425,6 +1425,38 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
+.kd-city-picker-dropdown.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-city-picker-dropdown.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
 @-webkit-keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/es/table/api.js

@@ -77,7 +77,7 @@ export default function getApi(pipelineRef) {
    * @returns
    */
   function ensureColumnVisible(code) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var pipeline = pipelineRef.current;
     var tableBodyContainer = (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.domHelper.tableBody;
     var tableScroll = (_b = pipeline.ref) === null || _b === void 0 ? void 0 : _b.current.domHelper.stickyScroll;
@@ -93,14 +93,30 @@ export default function getApi(pipelineRef) {
     var colLeft = _sliceInstanceProperty(columnNodes).call(columnNodes, 0, index).reduce(function (acc, col) {
       return acc + col.width;
     }, 0);
+    var lockColumnLeft = 0;
+    var lockColumnRight = 0;
+    for (var i = 0; i < columnNodes.length; i++) {
+      if ((_c = columnNodes[i]) === null || _c === void 0 ? void 0 : _c.lock) {
+        lockColumnLeft += columnNodes[i].width;
+      } else {
+        break;
+      }
+    }
+    for (var _i = columnNodes.length - 1; _i >= 0; _i--) {
+      if ((_d = columnNodes[_i]) === null || _d === void 0 ? void 0 : _d.lock) {
+        lockColumnRight += columnNodes[_i].width;
+      } else {
+        break;
+      }
+    }
     var colLeftPixel = colLeft; // 目标列前面列宽总和
     var colRightPixel = colLeftPixel + column.width;
     var viewportWidth = tableBodyContainer.clientWidth; // 表体容器的宽度
     var scrollPosition = tableScroll.scrollLeft; // 滚动条滚动的距离
     var vScrollLeft = scrollPosition;
     var vScrollRight = scrollPosition + viewportWidth;
-    var pxLeft = colLeftPixel;
-    var pxRight = colRightPixel - viewportWidth;
+    var pxLeft = colLeftPixel - lockColumnLeft;
+    var pxRight = colRightPixel - viewportWidth + lockColumnRight;
     var colBeforeViewport = vScrollLeft > colLeftPixel; // 滚动距离大于目标列前面列宽总和，说明目标列在视口之前
     var colPastViewport = vScrollRight < colRightPixel; // 目标列是视口之后
     var colToSmallForViewport = viewportWidth < column.width;

package/lib/_utils/usePopper.d.ts

@@ -25,6 +25,7 @@ export interface PopperProps {
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
     getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
+    onTransitionEnd?: (e: React.TransitionEvent) => void;
 }
 declare function usePopper(locatorElement: React.ReactElement, popperElement: React.ReactElement, props: PopperProps): JSX.Element;
 export default usePopper;

package/lib/_utils/usePopper.js

@@ -114,6 +114,19 @@ var getScrollDist = function getScrollDist(el, container) {
   }
   return elScroll;
 };
+var getRealDom = function getRealDom(locatorRef, locatorElement) {
+  var _a;
+  if (!locatorRef.current) return locatorRef.current;
+  var REF_NAME_OBJ = {
+    Input: 'input',
+    InputNumber: 'input',
+    Select: 'select',
+    Upload: 'input'
+  };
+  if (locatorRef.current.tagName) return locatorRef.current;
+  var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
+  return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
+};
 function usePopper(locatorElement, popperElement, props) {
   var _context3, _context4, _arrowStyle;
   var prefixCls = props.prefixCls,
@@ -154,7 +167,8 @@ function usePopper(locatorElement, popperElement, props) {
     _props$getPopupContai = props.getPopupContainer,
     getPopupContainer = _props$getPopupContai === void 0 ? function () {
       return document.body;
-    } : _props$getPopupContai;
+    } : _props$getPopupContai,
+    onTransitionEnd = props.onTransitionEnd;
   var arrowWidth = Math.sqrt(2 * Math.pow(arrowSize, 2));
   var componentName = (prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.split('-')[1]) || '';
   (0, _devwarning.default)(Placements.indexOf(placement) === -1, componentName, (0, _concat.default)(_context3 = "cannot found ".concat(componentName, " placement '")).call(_context3, placement, "'"));
@@ -166,10 +180,11 @@ function usePopper(locatorElement, popperElement, props) {
   var popperEl = (0, _react.useRef)();
   var locatorRef = locatorElement.ref || locatorEl;
   var popperRef = popperElement.ref || popperEl;
-  var container = getPopupContainer(locatorRef.current || document.body);
+  var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
   _promise.default.resolve().then(function () {
-    var triggerNode = getTriggerElement(locatorRef.current);
-    var container = getPopupContainer(locatorRef.current);
+    var realDom = getRealDom(locatorRef, locatorElement);
+    var triggerNode = getTriggerElement(realDom);
+    var container = getPopupContainer(realDom);
     (0, _devwarning.default)(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
     (0, _devwarning.default)(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
   });
@@ -232,30 +247,31 @@ function usePopper(locatorElement, popperElement, props) {
     nextPlacement = _useState18[0],
     setNextPlacement = _useState18[1];
   var alignPopper = (0, _react.useCallback)(function () {
-    if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
+    var realDom = getRealDom(locatorRef, locatorElement);
+    if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
       var _popperRef$current$ge = popperRef.current.getBoundingClientRect(),
         popperWidth = _popperRef$current$ge.width,
         popperHeight = _popperRef$current$ge.height;
-      var _locatorRef$current$g = locatorRef.current.getBoundingClientRect(),
-        top = _locatorRef$current$g.top,
-        bottom = _locatorRef$current$g.bottom,
-        left = _locatorRef$current$g.left,
-        right = _locatorRef$current$g.right,
-        height = _locatorRef$current$g.height,
-        width = _locatorRef$current$g.width;
+      var _realDom$getBoundingC = realDom.getBoundingClientRect(),
+        top = _realDom$getBoundingC.top,
+        bottom = _realDom$getBoundingC.bottom,
+        left = _realDom$getBoundingC.left,
+        right = _realDom$getBoundingC.right,
+        height = _realDom$getBoundingC.height,
+        width = _realDom$getBoundingC.width;
       var _getOffsetPos = getOffsetPos(container),
         containerTop = _getOffsetPos.top,
         containerLeft = _getOffsetPos.left;
-      var _getOffsetPos2 = getOffsetPos(locatorRef.current),
+      var _getOffsetPos2 = getOffsetPos(realDom),
         locatorTop = _getOffsetPos2.top,
         locatorLeft = _getOffsetPos2.left;
-      var _getTranslatePos = getTranslatePos(locatorRef.current),
+      var _getTranslatePos = getTranslatePos(realDom),
         translateTop = _getTranslatePos.top,
         translateLeft = _getTranslatePos.left;
-      var _getBorderWidth = getBorderWidth(locatorRef.current),
+      var _getBorderWidth = getBorderWidth(realDom),
         borderTop = _getBorderWidth.top,
         borderLeft = _getBorderWidth.left;
-      var _getScrollDist = getScrollDist(locatorRef.current.parentElement, container),
+      var _getScrollDist = getScrollDist(realDom.parentElement, container),
         scrollTop = _getScrollDist.top,
         scrollLeft = _getScrollDist.left;
       var locatorPos = {
@@ -438,10 +454,11 @@ function usePopper(locatorElement, popperElement, props) {
     className: (0, _classnames.default)(prefixCls, popperClassName, nextPlacement, (0, _defineProperty2.default)({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(nextPlacement, "-active"), active))
+    }, "".concat(nextPlacement, "-active"), active)),
+    onTransitionEnd: typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined
   };
   var popperNode = popperRef.current;
-  var locatorNode = locatorRef.current;
+  var locatorNode = getRealDom(locatorRef, locatorElement);
   (0, _hooks.useResizeObserver)(popperNode || document.body, alignPopper);
   (0, _hooks.useResizeObserver)(locatorNode || document.body, alignPopper);
   var showPopper = (0, _react.useCallback)(function (evType) {
@@ -472,7 +489,8 @@ function usePopper(locatorElement, popperElement, props) {
   (0, _react.useEffect)(function () {
     if (exist && visible) {
       var mouseleaveTimer;
-      var triggerNode = getTriggerElement(locatorRef.current);
+      var realDom = getRealDom(locatorRef, locatorElement);
+      var triggerNode = getTriggerElement(realDom);
       var handleHidePopper = function handleHidePopper(e) {
         var triggerRect = triggerNode.getBoundingClientRect();
         var popperRect = popperRef.current.getBoundingClientRect();
@@ -546,8 +564,9 @@ function usePopper(locatorElement, popperElement, props) {
       };
     }
   }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
-  _react.default.useEffect(function () {
-    var triggerNode = getTriggerElement(locatorRef.current);
+  (0, _react.useEffect)(function () {
+    var realDom = getRealDom(locatorRef, locatorElement);
+    var triggerNode = getTriggerElement(realDom);
     if (triggerNode) {
       var mouseenterTimer;
       var clearMouseLeave = function clearMouseLeave() {

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

@@ -26,20 +26,17 @@ var _option = _interopRequireDefault(require("./option"));
 var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
 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 tabsData = [{
-  id: 'domestic',
-  name: '国内'
-}, {
-  id: 'foreign',
-  name: '国际/中国港澳台'
-}];
 var InternalSelect = function InternalSelect(props, ref) {
   var _context, _classNames3, _classNames5;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    locale = _useContext.locale;
   var selectProps = (0, _utils.getCompProps)('CityPicker', userDefaultProps, props);
+  var cityPickerLangMsg = locale.getCompLangMsg({
+    componentName: 'CityPicker'
+  });
   var type = selectProps.type,
     size = selectProps.size,
     value = selectProps.value,
@@ -75,7 +72,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
     _selectProps$foreignL = selectProps.foreignList,
     foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
-    itemRender = selectProps.itemRender;
+    itemRender = selectProps.itemRender,
+    onTabPaneChange = selectProps.onTabPaneChange;
   var _useMergedState = (0, _hooks.useMergedState)(undefined, {
       value: value,
       defaultValue: defaultValue
@@ -83,6 +81,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     initValue = _useMergedState2[0],
     setInitValue = _useMergedState2[1];
+  var tabsData = [{
+    id: 'domestic',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsDomestic
+  }, {
+    id: 'foreign',
+    name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsInternation
+  }];
   var innerRef = (0, _react.useRef)();
   var selectRef = ref || innerRef;
   var searchRef = (0, _react.useRef)(null); // 搜索框ref
@@ -132,11 +137,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       setOptionShow(props.visible);
     }
   }, [props.visible]);
-  (0, _react.useEffect)(function () {
-    if (optionShow === false) {
-      handleClear();
-    }
-  }, [optionShow]);
   var handleFocus = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setFocusd(true);
@@ -233,6 +233,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var renderNodeList = function renderNodeList(data, notContent) {
+    var isCommon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!data.length) {
       return renderNotContent(notContent);
     }
@@ -243,7 +244,9 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
-        renderCityInfo: renderCityInfo,
+        renderCityInfo: function renderCityInfo(data, flag) {
+          return _renderCityInfo(data, isCommon, flag);
+        },
         onChangeSelect: handleOption,
         itemRender: itemRender
       }, searchValue ? getHighlightText(item === null || item === void 0 ? void 0 : item.name, (item === null || item === void 0 ? void 0 : item[optionHighlightProps]) || searchValue) : item === null || item === void 0 ? void 0 : item.name);
@@ -258,6 +261,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var toggleTabPane = function toggleTabPane(type) {
     setTabsValue(type);
+    onTabPaneChange === null || onTabPaneChange === void 0 ? void 0 : onTabPaneChange(type);
   };
   // 渲染下拉列表框
   var renderContent = function renderContent() {
@@ -270,22 +274,24 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         tab: item.name
       }, item);
-    })), tabsValue === 'domestic' ? renderNodeList(domesticList, '暂无数据') : renderNodeList(foreignList, '暂无数据')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!commonList.length && /*#__PURE__*/_react.default.createElement("div", {
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText) : renderNodeList(foreignList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!commonList.length && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(selectPrefixCls, "-dropdown-common")
-    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+    }, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.common), renderNodeList(commonList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.commonEmptyText, true)));
   };
-  var renderCityInfo = (0, _react.useCallback)(function (data) {
-    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ', ';
+  var _renderCityInfo = (0, _react.useCallback)(function (data) {
+    var isCommon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
       var _context3;
-      return (0, _concat.default)(_context3 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context3, data === null || data === void 0 ? void 0 : data.province);
+      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      return (0, _concat.default)(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } else {
       var _context4, _context5, _context6;
-      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
+      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
-  }, [type]);
+  }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'
@@ -310,7 +316,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       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", {
+    }, _renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
     }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
@@ -382,7 +388,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,
-    clickToClose: !searchValue
+    clickToClose: !searchValue,
+    onTransitionEnd: function onTransitionEnd() {
+      if (optionShow === false) {
+        handleClear();
+      }
+    }
   });
   return (0, _usePopper.default)(renderCityPicker(), renderContent(), popperProps);
 };

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

@@ -43,6 +43,7 @@ export interface CityPickerProps {
     onSearch?: (value: string) => void;
     onClear?: () => void;
     itemRender?: (city: City) => React.ReactNode;
+    onTabPaneChange?: (id: Type) => void;
 }
 export interface ICityPickerOptionProps {
     disabled?: boolean;

package/lib/city-picker/option.js

@@ -43,9 +43,9 @@ var InternalOption = function InternalOption(props, ref) {
     className: optionCls,
     title: name,
     onClick: handleClick
-  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")
   }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
 };

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

@@ -264,6 +264,12 @@
   padding: 0 12px;
   font-size: 12px;
 }
+.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+}
 .kd-city-picker-dropdown .kd-tabs-noContainer {
   height: unset;
 }
@@ -307,8 +313,13 @@
   padding: 8px 0;
   max-height: 320px;
   overflow-y: auto;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
 }
 .kd-city-picker-list-item {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   position: relative;
   display: block;
   font-weight: normal;
@@ -317,16 +328,8 @@
   padding: 5px 12px;
   color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
   line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   cursor: pointer;
 }
-.kd-city-picker-list-item-content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
 .kd-city-picker-list-item-info {
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
   white-space: nowrap;
@@ -335,7 +338,8 @@
   background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
 }
 .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
-  background-color: var(--kd-c-city-picker-color-background-selected, #f2f6ff);
+  background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
+  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-list-item-disabled {
   color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
@@ -343,7 +347,7 @@
   background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
 }
 .kd-city-picker-highlight {
-  color: #5582f3;
+  color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-size-small {
   min-height: var(--kd-c-city-picker-sizing-height-small, 24px);