@kdcloudjs/kdesign 1.7.19 → 1.7.21

package/es/button/style/token.less

@@ -91,6 +91,7 @@
 @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
 @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
 @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
+@btn-middle-max-width: var(~'@{button-custom-prefix}-sizing-max-width-middle'); // 中号 最大宽度
 @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
 @btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
 @btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);

package/es/checkbox/checkbox.js

@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
 import { GroupContext, CheckboxTypes, CheckboxSizes } from './group';
 import ConfigContext from '../config-provider/ConfigContext';
@@ -63,20 +63,20 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var getIndeterminate = function getIndeterminate() {
     return selected ? false : indeterminate;
   };
-  var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), true && !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames, "checked", selected), _classNames));
-  var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), true && !!children), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames2, _concatInstanceProperty(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), _defineProperty(_classNames2, "checked", selected), _classNames2));
+  var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames, "checked", selected), _classNames));
+  var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), !!children), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), _defineProperty(_classNames2, _concatInstanceProperty(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), _defineProperty(_classNames2, "checked", selected), _classNames2));
   var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
   var inputClassName = classNames(_defineProperty({}, "".concat(checkboxPrefixCls, "-input"), true));
   var checkedWrapperClassName = classNames((_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-no-child"), !children), _defineProperty(_classNames4, _concatInstanceProperty(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper"), true), _defineProperty(_classNames4, _concatInstanceProperty(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-wrapper-size"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-margin"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-checked"), selected), _defineProperty(_classNames4, _concatInstanceProperty(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-indeterminate"), getIndeterminate()), _defineProperty(_classNames4, _concatInstanceProperty(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), _defineProperty(_classNames4, _concatInstanceProperty(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));
   var triangleClassName = classNames((_classNames5 = {}, _defineProperty(_classNames5, _concatInstanceProperty(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, mergedCheckboxType, "-triangle"), !selected), _defineProperty(_classNames5, _concatInstanceProperty(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, mergedCheckboxType, "-triangle-checked"), selected), _defineProperty(_classNames5, _concatInstanceProperty(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-triangle-disabled"), mergedDisabled), _classNames5));
   var innerIconClassName = classNames(_defineProperty({}, _concatInstanceProperty(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, mergedCheckboxType, "-inner"), true));
-  var handleChange = useCallback(function (e) {
+  var handleChange = function handleChange(e) {
     onChange && onChange(e);
     (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked, e));
     if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
       setSelected(e.target.checked);
     }
-  }, [onChange]);
+  };
   useEffect(function () {
     isBoolean(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);

package/es/checkbox/style/index.css

@@ -141,6 +141,8 @@
   width: 100%;
   cursor: inherit;
   opacity: 0;
+  inset: 0;
+  z-index: 1;
 }
 .kd-checkbox-children {
   display: -webkit-inline-box;

package/es/checkbox/style/index.less

@@ -32,6 +32,8 @@
     width: 100%;
     cursor: inherit;
     opacity: 0;
+    inset: 0;
+    z-index: 1;
   }
   &-children {
     display: inline-flex;

package/es/checkbox/style/token.less

@@ -2,7 +2,7 @@
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// colors
+// color
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
 @checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
 @checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);

package/es/city-picker/city-picker.d.ts

@@ -1,24 +1,4 @@
 import React from 'react';
-import CityPanelItem from './city-panel-item';
-import CityPanel, { Common, Group, List as CityList } from './city-panel';
-import SearchPanel from './city-search-panel';
-export interface CityPickerProps {
-    cityList?: CityList;
-    className?: string;
-    commons?: Common;
-    disabled?: boolean;
-    groups?: Group;
-    inputClassName?: string;
-    inputStyle?: React.CSSProperties;
-    placeholder?: string;
-    showTitle?: boolean;
-    style?: React.CSSProperties;
-    title?: string;
-}
-export interface MenuType extends React.FC<CityPickerProps> {
-    PanelItem: typeof CityPanelItem;
-    Panel: typeof CityPanel;
-    SearchPanel: typeof SearchPanel;
-}
-declare const CityPicker: MenuType;
-export default CityPicker;
+import { CityPickerProps } from './interface';
+declare const Select: React.ForwardRefExoticComponent<CityPickerProps & React.RefAttributes<unknown>>;
+export default Select;

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

@@ -1,152 +1,379 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
-import React, { useContext, useState, useRef, useEffect } from 'react';
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import { useMergedState } from '../_utils/hooks';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
-import CityPanelItem from './city-panel-item';
-import CityPanel from './city-panel';
-import SearchPanel from './city-search-panel';
+import { getCompProps } from '../_utils';
+import { Icon, Tabs, Spin } from '../index';
 import usePopper from '../_utils/usePopper';
-var CityPicker = function CityPicker(_ref) {
-  var cityList = _ref.cityList,
-    className = _ref.className,
-    commons = _ref.commons,
-    disabled = _ref.disabled,
-    groups = _ref.groups,
-    inputClassName = _ref.inputClassName,
-    inputStyle = _ref.inputStyle,
-    placeholder = _ref.placeholder,
-    showTitle = _ref.showTitle,
-    style = _ref.style,
-    title = _ref.title;
+import Option from './option';
+import escapeRegExp from 'lodash/escapeRegExp';
+var tabsData = [{
+  id: 'domestic',
+  name: '国内'
+}, {
+  id: 'foreign',
+  name: '国际/中国港澳台'
+}];
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames3, _classNames5;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
-  var _useState = useState(''),
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var selectProps = getCompProps('CityPicker', userDefaultProps, props);
+  var type = selectProps.type,
+    size = selectProps.size,
+    value = selectProps.value,
+    className = selectProps.className,
+    defaultOpen = selectProps.defaultOpen,
+    disabled = selectProps.disabled,
+    borderType = selectProps.borderType,
+    _selectProps$showArro = selectProps.showArrow,
+    showArrow = _selectProps$showArro === void 0 ? true : _selectProps$showArro,
+    allowClear = selectProps.allowClear,
+    customPrefixcls = selectProps.prefixCls,
+    onFocus = selectProps.onFocus,
+    onBlur = selectProps.onBlur,
+    onClear = selectProps.onClear,
+    onVisibleChange = selectProps.onVisibleChange,
+    onChange = selectProps.onChange,
+    onSearch = selectProps.onSearch,
+    defaultValue = selectProps.defaultValue,
+    placeholder = selectProps.placeholder,
+    _selectProps$dropdown = selectProps.dropdownStyle,
+    dropdownStyle = _selectProps$dropdown === void 0 ? {} : _selectProps$dropdown,
+    style = selectProps.style,
+    clearIcon = selectProps.clearIcon,
+    loading = selectProps.loading,
+    showDescription = selectProps.showDescription,
+    description = selectProps.description,
+    optionHighlightProps = selectProps.optionHighlightProps,
+    _selectProps$popperSt = selectProps.popperStyle,
+    popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt,
+    _selectProps$commonLi = selectProps.commonList,
+    commonList = _selectProps$commonLi === void 0 ? [] : _selectProps$commonLi,
+    _selectProps$domestic = selectProps.domesticList,
+    domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
+    _selectProps$foreignL = selectProps.foreignList,
+    foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
+    itemRender = selectProps.itemRender;
+  var _useMergedState = useMergedState(undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var innerRef = useRef();
+  var selectRef = ref || innerRef;
+  var searchRef = useRef(null); // 搜索框ref
+  var selectionRef = useRef(null);
+  var clearRef = useRef(null);
+  var _useState = useState(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = _slicedToArray(_useState, 2),
-    inputVal = _useState2[0],
-    setInputVal = _useState2[1];
+    optionShow = _useState2[0],
+    setOptionShow = _useState2[1];
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    additionalVal = _useState4[0],
-    setAdditionalVal = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    popperVisible = _useState6[0],
-    setPopperVisible = _useState6[1];
-  var inputRef = useRef(null);
-  var allCity = useRef([]);
+    focusd = _useState6[0],
+    setFocusd = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    seletedCity = _useState8[0],
+    setSeletedCity = _useState8[1];
+  var _useState9 = useState('domestic'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    tabsValue = _useState10[0],
+    setTabsValue = _useState10[1];
+  var isDomestic = function isDomestic(type) {
+    return type === 'domestic';
+  };
+  var selectPrefixCls = getPrefixCls(prefixCls, 'city-picker', customPrefixcls);
+  var cityPickerCls = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 公共样式
+  var commCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames3, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   useEffect(function () {
-    var _context;
-    if (!cityList) {
-      return;
+    var _context2;
+    if (typeof value === 'undefined') return;
+    var cityList = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(commonList), _toConsumableArray(domesticList), _toConsumableArray(foreignList));
+    var city = _findInstanceProperty(cityList).call(cityList, function (city) {
+      return city.id === value;
+    });
+    if (city) {
+      setSeletedCity(city);
     }
-    var domestic = cityList.domestic,
-      foreign = cityList.foreign;
-    allCity.current = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_Object$values(domestic)), _toConsumableArray(_Object$values(foreign))).reduce(function (arr, current) {
-      return _concatInstanceProperty(arr).call(arr, current);
-    }, []);
-  }, [cityList]);
-  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
-  var containerCls = classNames("".concat(cityPickerPrefixCls, "-container"), className);
-  var contentCls = classNames("".concat(cityPickerPrefixCls, "-content"));
-  var titleCls = classNames("".concat(cityPickerPrefixCls, "-title"));
-  var additionalInfoCls = classNames("".concat(cityPickerPrefixCls, "-info"));
-  var inputCls = classNames("".concat(cityPickerPrefixCls, "-input"), inputClassName);
-  var arrowCls = classNames('kdicon kdicon-arrow-down', "".concat(cityPickerPrefixCls, "-arrow"), {
-    'arrow-up': popperVisible
-  });
-  var handleContainerClick = function handleContainerClick() {
-    var _a;
-    if (document.activeElement === inputRef.current) {
-      return;
+  }, [commonList, domesticList, foreignList, value]);
+  useEffect(function () {
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
+  }, [props.visible]);
+  useEffect(function () {
+    if (optionShow === false) {
+      handleClear();
     }
-    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [optionShow]);
+  var handleFocus = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  useEffect(function () {
+    selectionRef.current.addEventListener('mouseup', function (e) {
+      var _a;
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []);
+  // 输入框变化搜索内容
+  var handleSearchChange = useCallback(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = useCallback(function () {
+    if (searchRef.current) {
+      searchRef.current.value = '';
+      setSearchValue('');
+    }
+  }, [searchRef]);
+  // 清空选择器内容
+  var handleReset = function handleReset(e) {
+    e.stopPropagation();
+    onClear && onClear('');
+    setInitValue('');
+    setSeletedCity(null);
+    setSearchValue('');
+    onChange && onChange(undefined, '');
+  };
+  // 渲染后缀图标
+  var renderSuffix = function renderSuffix() {
+    var _classNames4;
+    if (disabled) return null;
+    var suffixIcon = selectProps.suffixIcon;
+    var arrowIconCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
+    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: "".concat(selectPrefixCls, "-icon-clear"),
+      ref: clearRef
+    }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/React.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    })));
   };
-  var handleCitySelect = function handleCitySelect(city) {
-    var _context2, _context3;
-    setInputVal(city.name || '');
-    var otherInfoStr = city.country === '中国' ? "".concat(city.province) : _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(city.province)).call(_context3, city.province ? ',' : '')).call(_context2, city.country);
-    setAdditionalVal(otherInfoStr);
-    setPopperVisible(false);
+  // 下拉列表为空时显示的内容
+  var renderNotContent = function renderNotContent(msg) {
+    var notFoundContent = selectProps.notFoundContent;
+    var emptyContent = notFoundContent || msg;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-empty")
+    }, emptyContent);
+  };
+  var getHighlightText = function getHighlightText(text, inputValue) {
+    if (!inputValue || !text) return text;
+    var regex = new RegExp(Array.isArray(inputValue) ? _mapInstanceProperty(inputValue).call(inputValue, function (item) {
+      return "(".concat(escapeRegExp(item), ")");
+    }).join('|') : "(".concat(escapeRegExp(inputValue), ")"), 'i');
+    var strArr = text === null || text === void 0 ? void 0 : text.split(regex);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, strArr === null || strArr === void 0 ? void 0 : _mapInstanceProperty(strArr).call(strArr, function (item, index) {
+      return (regex === null || regex === void 0 ? void 0 : regex.test(item)) ? /*#__PURE__*/React.createElement("span", {
+        key: index,
+        className: "".concat(selectPrefixCls, "-highlight")
+      }, item) : /*#__PURE__*/React.createElement("span", {
+        key: index
+      }, item);
+    }));
+  };
+  var handleOption = function handleOption(city) {
+    handleVisibleChange(false);
+    (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));
+    if (typeof value === 'undefined') {
+      setSeletedCity(city);
+      setInitValue(city === null || city === void 0 ? void 0 : city.id);
+    }
   };
-  var handleFocus = function handleFocus() {
-    if (popperVisible) {
-      return;
+  var renderNodeList = function renderNodeList(data, notContent) {
+    if (!data.length) {
+      return renderNotContent(notContent);
     }
-    setPopperVisible(true);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-list")
+    }, _mapInstanceProperty(data).call(data, function (item) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: item.id,
+        value: initValue,
+        city: item,
+        renderCityInfo: renderCityInfo,
+        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);
+    }));
   };
-  var handleChange = function handleChange(evt) {
-    var value = evt.target.value;
-    setAdditionalVal('');
-    setInputVal(value);
+  var renderLoading = function renderLoading() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-loading")
+    }, /*#__PURE__*/React.createElement(Spin, {
+      type: "container"
+    }));
   };
-  var handlePopperVisibleChange = function handlePopperVisibleChange(visible) {
-    if (!visible) {
-      setPopperVisible(false);
+  var toggleTabPane = function toggleTabPane(type) {
+    setTabsValue(type);
+  };
+  // 渲染下拉列表框
+  var renderContent = function renderContent() {
+    return loading ? renderLoading() : /*#__PURE__*/React.createElement(React.Fragment, null, searchValue ? /*#__PURE__*/React.createElement(React.Fragment, null, isDomestic(type) && /*#__PURE__*/React.createElement(Tabs, {
+      noContainer: true,
+      onChange: toggleTabPane,
+      activeKey: tabsValue
+    }, _mapInstanceProperty(tabsData).call(tabsData, function (item) {
+      return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+        key: item.id,
+        tab: item.name
+      }, item);
+    })), tabsValue === 'domestic' ? renderNodeList(domesticList, '暂无数据') : renderNodeList(foreignList, '暂无数据')) : /*#__PURE__*/React.createElement(React.Fragment, null, !!commonList.length && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-common")
+    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+  };
+  var renderCityInfo = useCallback(function (data) {
+    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ', ';
+    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);
+    } 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]);
+  var renderSingle = function renderSingle() {
+    var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
+      visibility: 'hidden'
+    } : undefined;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(selectPrefixCls, "-content")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-search")
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-content-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !!disabled
+    }), !searchValue && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-item"),
+      title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
+    }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-info")
+    }, renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
   };
-  var inputSelector = /*#__PURE__*/React.createElement("div", {
-    className: containerCls,
-    style: style,
-    onClick: handleContainerClick
-  }, showTitle && /*#__PURE__*/React.createElement("div", {
-    className: titleCls
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: contentCls
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: "text",
-    readOnly: disabled,
-    onChange: handleChange,
-    placeholder: placeholder,
-    style: inputStyle,
-    className: inputCls,
-    title: inputVal,
-    value: inputVal,
-    onFocus: handleFocus
-  }), /*#__PURE__*/React.createElement("span", {
-    className: additionalInfoCls
-  }, additionalVal), /*#__PURE__*/React.createElement("i", {
-    className: arrowCls
-  })));
-  var cityPanel = /*#__PURE__*/React.createElement(CityPanel, {
-    commons: commons,
-    groups: groups,
-    cityList: cityList,
-    onSelect: handleCitySelect
-  });
-  var getSearchResults = function getSearchResults() {
-    var _context4;
-    if (!allCity.current || allCity.current.length === 0 || !inputVal) {
-      return [];
+  var singleCls = classNames(commCls, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  useEffect(function () {
+    if (optionShow && !disabled) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
-    return _filterInstanceProperty(_context4 = allCity.current).call(_context4, function (city) {
+  }, [optionShow]);
+  useEffect(function () {
+    var _a;
+    var fn = function fn(e) {
+      e.stopPropagation();
+    };
+    (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', fn);
+    return function () {
       var _a;
-      return (_a = city.name) === null || _a === void 0 ? void 0 : _startsWithInstanceProperty(_a).call(_a, inputVal);
-    });
+      (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
+    };
+  }, [initValue]);
+  var renderCityPicker = function renderCityPicker() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cityPickerCls,
+      ref: selectRef,
+      style: style
+    }, showDescription && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-description")
+    }, description), /*#__PURE__*/React.createElement("span", {
+      className: selectionCls,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      onBlur: function onBlur() {
+        var _a;
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, renderSingle()));
   };
-  var searchPanel = /*#__PURE__*/React.createElement(SearchPanel, {
-    keyword: inputVal,
-    data: getSearchResults(),
-    onSelect: handleCitySelect
-  });
-  var popperProps = {
-    visible: popperVisible,
-    placement: 'bottomLeft',
-    trigger: 'focus',
-    prefixCls: "".concat(cityPickerPrefixCls, "-panel"),
-    onVisibleChange: handlePopperVisibleChange
+  var catchStyle = function catchStyle() {
+    var _a;
+    if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
+      var _ref = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+        width = _ref.width;
+      return _extends(_extends(_extends({
+        minWidth: width,
+        maxWidth: 600
+      }, dropdownStyle), {
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || 'auto',
+        zIndex: 1050
+      }), popperStyle);
+    }
   };
-  var panel = inputVal.length > 0 ? searchPanel : cityPanel;
-  return usePopper(inputSelector, panel, popperProps);
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
+  };
+  var popperProps = _extends(_extends({}, selectProps), {
+    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue
+  });
+  return usePopper(renderCityPicker(), renderContent(), popperProps);
 };
-CityPicker.displayName = 'CityPicker';
-CityPicker.PanelItem = CityPanelItem;
-CityPicker.Panel = CityPanel;
-CityPicker.SearchPanel = SearchPanel;
-export default CityPicker;
+var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+Select.displayName = 'CityPicker';
+export default Select;