@kdcloudjs/kdesign 1.7.19 → 1.7.20

package/es/input/style/token.less

@@ -9,16 +9,10 @@
 @input-clear-color: var(~'@{input-prefix}-clear-color', #d9d9d9);
 @input-clear-color-hover: var(~'@{input-prefix}-clear-color-hover', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
-@input-background-color-disabled-inner: var(
-  ~'@{input-prefix}-color-background-disabled',
-  @color-background-contain-disabled
-);
+@input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
-@input-underline-border-color-disabled-inner: var(
-  ~'@{input-prefix}-underline-color-border-disabled',
-  @color-border-weak
-);
+@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 @input-error-color: var(~'@{input-prefix}-color-error', @color-error);

package/lib/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/lib/checkbox/checkbox.js

@@ -75,20 +75,20 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var getIndeterminate = function getIndeterminate() {
     return selected ? false : indeterminate;
   };
-  var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), true && !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
-  var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), true && !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
+  var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
+  var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
   var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
   var inputClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(checkboxPrefixCls, "-input"), true));
   var checkedWrapperClassName = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-no-child"), !children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-wrapper-size"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-margin"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-checked"), selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-indeterminate"), getIndeterminate()), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));
   var triangleClassName = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, mergedCheckboxType, "-triangle"), !selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, mergedCheckboxType, "-triangle-checked"), selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-triangle-disabled"), mergedDisabled), _classNames5));
   var innerIconClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, (0, _concat.default)(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, mergedCheckboxType, "-inner"), true));
-  var handleChange = (0, _react.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]);
+  };
   (0, _react.useEffect)(function () {
     (0, _isBoolean.default)(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);

package/lib/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/lib/checkbox/style/index.less

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

package/lib/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/lib/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/lib/city-picker/city-picker.js

@@ -9,157 +9,384 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../_utils/hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
-var _cityPanelItem = _interopRequireDefault(require("./city-panel-item"));
-var _cityPanel = _interopRequireDefault(require("./city-panel"));
-var _citySearchPanel = _interopRequireDefault(require("./city-search-panel"));
+var _utils = require("../_utils");
+var _index = require("../index");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+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 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;
+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;
-  var _useState = (0, _react.useState)(''),
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var selectProps = (0, _utils.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 = (0, _hooks.useMergedState)(undefined, {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    initValue = _useMergedState2[0],
+    setInitValue = _useMergedState2[1];
+  var innerRef = (0, _react.useRef)();
+  var selectRef = ref || innerRef;
+  var searchRef = (0, _react.useRef)(null); // 搜索框ref
+  var selectionRef = (0, _react.useRef)(null);
+  var clearRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    inputVal = _useState2[0],
-    setInputVal = _useState2[1];
+    optionShow = _useState2[0],
+    setOptionShow = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    additionalVal = _useState4[0],
-    setAdditionalVal = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    popperVisible = _useState6[0],
-    setPopperVisible = _useState6[1];
-  var inputRef = (0, _react.useRef)(null);
-  var allCity = (0, _react.useRef)([]);
+    focusd = _useState6[0],
+    setFocusd = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    seletedCity = _useState8[0],
+    setSeletedCity = _useState8[1];
+  var _useState9 = (0, _react.useState)('domestic'),
+    _useState10 = (0, _slicedToArray2.default)(_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 = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true));
+  // 公共样式
+  var commCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames3, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   (0, _react.useEffect)(function () {
-    var _context;
-    if (!cityList) {
-      return;
+    var _context2;
+    if (typeof value === 'undefined') return;
+    var cityList = (0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(commonList), (0, _toConsumableArray2.default)(domesticList), (0, _toConsumableArray2.default)(foreignList));
+    var city = (0, _find.default)(cityList).call(cityList, function (city) {
+      return city.id === value;
+    });
+    if (city) {
+      setSeletedCity(city);
     }
-    var domestic = cityList.domestic,
-      foreign = cityList.foreign;
-    allCity.current = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _values.default)(domestic)), (0, _toConsumableArray2.default)((0, _values.default)(foreign))).reduce(function (arr, current) {
-      return (0, _concat.default)(arr).call(arr, current);
-    }, []);
-  }, [cityList]);
-  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
-  var containerCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-container"), className);
-  var contentCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-content"));
-  var titleCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-title"));
-  var additionalInfoCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-info"));
-  var inputCls = (0, _classnames.default)("".concat(cityPickerPrefixCls, "-input"), inputClassName);
-  var arrowCls = (0, _classnames.default)('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]);
+  (0, _react.useEffect)(function () {
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
+  }, [props.visible]);
+  (0, _react.useEffect)(function () {
+    if (optionShow === false) {
+      handleClear();
     }
-    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [optionShow]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(true);
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setFocusd(false);
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  (0, _react.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 = (0, _react.useCallback)(function (event) {
+    var val = event.currentTarget.value;
+    setOptionShow(true);
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]);
+  // 清除搜索内容
+  var handleClear = (0, _react.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 = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
+    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
+      onClick: handleReset,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      className: "".concat(selectPrefixCls, "-icon-clear"),
+      ref: clearRef
+    }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "close-solid"
+    })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    })));
   };
-  var handleCitySelect = function handleCitySelect(city) {
-    var _context2, _context3;
-    setInputVal(city.name || '');
-    var otherInfoStr = city.country === '中国' ? "".concat(city.province) : (0, _concat.default)(_context2 = (0, _concat.default)(_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.default.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) ? (0, _map.default)(inputValue).call(inputValue, function (item) {
+      return "(".concat((0, _escapeRegExp.default)(item), ")");
+    }).join('|') : "(".concat((0, _escapeRegExp.default)(inputValue), ")"), 'i');
+    var strArr = text === null || text === void 0 ? void 0 : text.split(regex);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, strArr === null || strArr === void 0 ? void 0 : (0, _map.default)(strArr).call(strArr, function (item, index) {
+      return (regex === null || regex === void 0 ? void 0 : regex.test(item)) ? /*#__PURE__*/_react.default.createElement("span", {
+        key: index,
+        className: "".concat(selectPrefixCls, "-highlight")
+      }, item) : /*#__PURE__*/_react.default.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.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-list")
+    }, (0, _map.default)(data).call(data, function (item) {
+      return /*#__PURE__*/_react.default.createElement(_option.default, {
+        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.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-dropdown-loading")
+    }, /*#__PURE__*/_react.default.createElement(_index.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.default.createElement(_react.default.Fragment, null, searchValue ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDomestic(type) && /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+      noContainer: true,
+      onChange: toggleTabPane,
+      activeKey: tabsValue
+    }, (0, _map.default)(tabsData).call(tabsData, function (item) {
+      return /*#__PURE__*/_react.default.createElement(_index.Tabs.TabPane, {
+        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", {
+      className: "".concat(selectPrefixCls, "-dropdown-common")
+    }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
+  };
+  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] : ', ';
+    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);
+    } 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]);
+  var renderSingle = function renderSingle() {
+    var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
+      visibility: 'hidden'
+    } : undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(selectPrefixCls, "-content")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-search")
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-content-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !!disabled
+    }), !searchValue && /*#__PURE__*/_react.default.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.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-content-info")
+    }, renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
   };
-  var inputSelector = /*#__PURE__*/_react.default.createElement("div", {
-    className: containerCls,
-    style: style,
-    onClick: handleContainerClick
-  }, showTitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: titleCls
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: contentCls
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    ref: inputRef,
-    type: "text",
-    readOnly: disabled,
-    onChange: handleChange,
-    placeholder: placeholder,
-    style: inputStyle,
-    className: inputCls,
-    title: inputVal,
-    value: inputVal,
-    onFocus: handleFocus
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: additionalInfoCls
-  }, additionalVal), /*#__PURE__*/_react.default.createElement("i", {
-    className: arrowCls
-  })));
-  var cityPanel = /*#__PURE__*/_react.default.createElement(_cityPanel.default, {
-    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 = (0, _classnames.default)(commCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  (0, _react.useEffect)(function () {
+    if (optionShow && !disabled) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
-    return (0, _filter.default)(_context4 = allCity.current).call(_context4, function (city) {
+  }, [optionShow]);
+  (0, _react.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 : (0, _startsWith.default)(_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.default.createElement("div", {
+      className: cityPickerCls,
+      ref: selectRef,
+      style: style
+    }, showDescription && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-description")
+    }, description), /*#__PURE__*/_react.default.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.default.createElement(_citySearchPanel.default, {
-    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 (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+        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 (0, _usePopper.default)(inputSelector, panel, popperProps);
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible !== optionShow) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
+  };
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
+    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue
+  });
+  return (0, _usePopper.default)(renderCityPicker(), renderContent(), popperProps);
 };
-CityPicker.displayName = 'CityPicker';
-CityPicker.PanelItem = _cityPanelItem.default;
-CityPicker.Panel = _cityPanel.default;
-CityPicker.SearchPanel = _citySearchPanel.default;
-var _default = CityPicker;
+var Select = /*#__PURE__*/_react.default.forwardRef(InternalSelect);
+Select.displayName = 'CityPicker';
+var _default = Select;
 exports.default = _default;