@kdcloudjs/kdesign 1.7.23 → 1.7.24

package/es/_utils/usePopper.js

@@ -100,6 +100,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,
@@ -152,10 +165,11 @@ function usePopper(locatorElement, popperElement, props) {
   var popperEl = 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.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);
     devWarning(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
     devWarning(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
   });
@@ -218,30 +232,31 @@ function usePopper(locatorElement, popperElement, props) {
     nextPlacement = _useState18[0],
     setNextPlacement = _useState18[1];
   var alignPopper = 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 = {
@@ -427,7 +442,7 @@ function usePopper(locatorElement, popperElement, props) {
     }, "".concat(nextPlacement, "-active"), active))
   };
   var popperNode = popperRef.current;
-  var locatorNode = locatorRef.current;
+  var locatorNode = getRealDom(locatorRef, locatorElement);
   useResizeObserver(popperNode || document.body, alignPopper);
   useResizeObserver(locatorNode || document.body, alignPopper);
   var showPopper = useCallback(function (evType) {
@@ -458,7 +473,8 @@ function usePopper(locatorElement, popperElement, props) {
   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();
@@ -532,8 +548,9 @@ function usePopper(locatorElement, popperElement, props) {
       };
     }
   }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
-  React.useEffect(function () {
-    var triggerNode = getTriggerElement(locatorRef.current);
+  useEffect(function () {
+    var realDom = getRealDom(locatorRef, locatorElement);
+    var triggerNode = getTriggerElement(realDom);
     if (triggerNode) {
       var mouseenterTimer;
       var clearMouseLeave = function clearMouseLeave() {

package/es/city-picker/city-picker.js

@@ -63,7 +63,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 = useMergedState(undefined, {
       value: value,
       defaultValue: defaultValue
@@ -246,6 +247,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() {
@@ -268,12 +270,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (!data) return null;
     if (isDomestic(type)) {
       var _context3;
-      return _concatInstanceProperty(_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' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      return _concatInstanceProperty(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } else {
       var _context4, _context5, _context6;
       return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_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);
     }
-  }, [type]);
+  }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'

package/es/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/es/city-picker/style/index.css

@@ -307,6 +307,8 @@
   padding: 8px 0;
   max-height: 320px;
   overflow-y: auto;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
 }
 .kd-city-picker-list-item {
   position: relative;

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

@@ -200,6 +200,7 @@
     padding: 8px 0;
     max-height: 320px;
     overflow-y: auto;
+    box-sizing: content-box;
 
     // 下拉列表选项
     &-item {

package/es/input-number/inputNumber.js

@@ -49,7 +49,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     suffix = inputNumberProps.suffix,
     formatter = inputNumberProps.formatter,
     className = inputNumberProps.className,
-    others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className"]);
+    onKeyDown = inputNumberProps.onKeyDown,
+    others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className", "onKeyDown"]);
   var initVal = value === undefined ? defaultValue : value;
   var _useState = useState(serialization(initVal !== undefined ? initVal + '' : '')),
     _useState2 = _slicedToArray(_useState, 2),
@@ -173,12 +174,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     return resultNumerical;
   };
   var handleStepChang = function handleStepChang(type) {
+    var _a, _b;
     var step = stepOption.step === undefined ? 1 : parseFloat(stepOption.step);
     if (typeof step !== 'number') {
       devWarning(true, 'inputNumber', "stepOption.step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
       return false;
     }
-    var startingNumber = parseFloat(inputNumberRef.current.value) || 0;
+    var startingNumber = parseFloat((_b = (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value) || 0;
     var calculationResults = new Big(startingNumber)[type](step).valueOf();
     var legalNumber = verifiValue(calculationResults);
     if (legalNumber === false) {
@@ -193,6 +195,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   };
   var handleKeyDown = function handleKeyDown(event) {
     var _context11;
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     if (!stepOption || props.disabled || props.readOnly) {
       return;
     }

package/es/radio/style/index.css

@@ -127,6 +127,7 @@
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
   max-width: var(--kd-c-radio-default-label-max-width);
   overflow: hidden;
+  min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
 }
 .kd-radio::before {
   position: absolute;

package/es/radio/style/index.less

@@ -24,6 +24,7 @@
   font-size: @radio-font-size;
   max-width: @radio-default-label-max-width;
   overflow: hidden;
+  min-height: @radio-circle-size;
 
   &::before {
     position: absolute;

package/es/search/search.js

@@ -59,7 +59,8 @@ var InternalSearch = function InternalSearch(props, ref) {
     onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
   }, [onSearch]);
   var handlePressEnter = useCallback(function (_, event) {
-    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
+    var _a, _b;
+    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, event));
   }, [onPressEnter, searchRef]);
   var handleFocus = useCallback(function (event) {
     setFocused(true);

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,
@@ -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);
@@ -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.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,
@@ -166,10 +179,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 +246,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 = {
@@ -441,7 +456,7 @@ function usePopper(locatorElement, popperElement, props) {
     }, "".concat(nextPlacement, "-active"), active))
   };
   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 +487,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 +562,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

@@ -75,7 +75,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
@@ -258,6 +259,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() {
@@ -280,12 +282,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     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' ? 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);
     }
-  }, [type]);
+  }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'

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/style/index.css

@@ -307,6 +307,8 @@
   padding: 8px 0;
   max-height: 320px;
   overflow-y: auto;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
 }
 .kd-city-picker-list-item {
   position: relative;

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

@@ -200,6 +200,7 @@
     padding: 8px 0;
     max-height: 320px;
     overflow-y: auto;
+    box-sizing: content-box;
 
     // 下拉列表选项
     &-item {