@kdcloudjs/kdesign 1.7.25 → 1.7.26

package/es/cascader/cascader.js

@@ -16,7 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useMemo, useCallback, useState, useRef } from 'react';
+import React, { useMemo, useCallback, useState, useRef, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { tuple } from '../_utils/type';
 import { getCompProps } from '../_utils';
@@ -62,15 +62,15 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     customAllowClear = allProps.allowClear,
     popupPlacement = allProps.popupPlacement,
     maxTagCount = allProps.maxTagCount,
+    autoFocus = allProps.autoFocus,
     otherProps = __rest(allProps
     // className前缀
-    , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount"]);
+    , ["mode", "style", "options", "bordered", "disabled", "children", "loadData", "clearIcon", "className", "fieldNames", "placeholder", "defaultValue", "maxTagPlaceholder", "displayRender", "expandTrigger", "changeOnSelect", "dropdownRender", "notFoundContent", "getPopupContainer", "defaultPopupVisible", "onPopupVisibleChange", "onPopperVisibleChange", "prefixCls", "allowClear", "popupPlacement", "maxTagCount", "autoFocus"]);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
-  var pickerRef = useRef();
-  var triggerRef = useRef();
+  var mergeRef = useRef();
+  var inputRef = useRef();
   var wrapperRef = useRef();
-  var mergeRef = ref || pickerRef;
   var _useState = useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
@@ -157,21 +157,53 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setCurrentOptions(newMultipleOptions);
     }
   }, [options, value, fieldNames, isMultiple]);
-  React.useEffect(function () {
+  var handleFocus = function handleFocus() {
+    var _a, _b;
+    if (!disabled) {
+      if (isMultiple) {
+        (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      } else {
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    }
+  };
+  var handleBlur = function handleBlur() {
+    var _a, _b;
+    if (!disabled) {
+      if (isMultiple) {
+        (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      } else {
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+    }
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      focus: handleFocus,
+      blur: handleBlur,
+      dom: mergeRef.current
+    };
+  });
+  useEffect(function () {
+    if (autoFocus) {
+      handleFocus();
+    }
+  }, [autoFocus, inputRef]);
+  var handleMouseUp = function handleMouseUp(e) {
     var _a;
-    if (allProps.autoFocus) {
-      (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    var cln = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className;
+    var isCloseBtn = cln.indexOf('kd-tag-close-icon') > -1 || cln.indexOf('kdicon') > -1;
+    if (isCloseBtn) {
+      e.stopPropagation();
     }
-  }, [allProps.autoFocus, mergeRef]);
+  };
   React.useEffect(function () {
     var _a;
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', function (e) {
+    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleMouseUp);
+    return function () {
       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();
-      }
-    });
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleMouseUp);
+    };
   }, []);
   var labels = useMemo(function () {
     return !isMultiple ? _mapInstanceProperty(currentOptions).call(currentOptions, function (_ref) {
@@ -195,8 +227,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     });
   }, [currentOptions, isMultiple]);
-  var allowClear = customAllowClear && value.length > 0;
+  var allowClear = customAllowClear && value.length > 0 && !disabled;
   var handleClear = function handleClear() {
+    handleBlur();
+    setVisible(false);
     onChange([]);
   };
   var renderSuffix = function renderSuffix() {
@@ -236,9 +270,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var renderMultiple = function renderMultiple() {
     var _classNames3, _classNames4;
-    var multipleCls = classNames((_classNames3 = {
-      disabled: disabled
-    }, _defineProperty(_classNames3, "".concat(prefixCls, "-multiple"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
+    var multipleCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-expand"), visible), _defineProperty(_classNames3, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames3, "".concat(prefixCls, "-multiple"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
     var itemCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-selection-item"), true), _defineProperty(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
     var TagStyle = {
       margin: '2px 8px 2px 0',
@@ -246,9 +278,11 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
     return /*#__PURE__*/React.createElement("div", _extends({
       className: multipleCls,
-      ref: triggerRef,
+      ref: mergeRef,
       style: style
-    }, otherProps), /*#__PURE__*/React.createElement("div", {
+    }, otherProps, {
+      tabIndex: -1
+    }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-multiple-wrapper"),
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(currentOptions).call(currentOptions, function (option, index) {
@@ -257,6 +291,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: classNames("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement(Tag, {
         type: "edit",
+        disabled: disabled,
         style: TagStyle,
         closable: true,
         onClose: function onClose(e) {
@@ -274,8 +309,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, renderSuffix())));
   };
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var inputProps = {
       value: value,
+      ref: inputRef,
       placeholder: placeholder,
       readOnly: true,
       borderType: bordered ? 'bordered' : 'underline',
@@ -293,18 +330,13 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var singleProps = {
       style: style,
       tabIndex: 0,
-      className: classNames("".concat(prefixCls, "-picker"), className, _defineProperty({
-        expand: visible,
-        allowClear: allowClear,
-        disabled: disabled
-      }, "".concat(prefixCls, "-bordered"), bordered))
+      className: classNames("".concat(prefixCls, "-picker"), className, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-single"), true), _defineProperty(_classNames5, "".concat(prefixCls, "-expand"), visible), _defineProperty(_classNames5, "allowClear", allowClear), _defineProperty(_classNames5, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames5, "".concat(prefixCls, "-bordered"), bordered), _classNames5))
     };
     return /*#__PURE__*/React.createElement("div", _extends({}, singleProps, {
       ref: mergeRef
-    }, otherProps), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
-      ref: triggerRef
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      ref: triggerRef
+    }, otherProps), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-single-wrapper"),
+      ref: wrapperRef
     }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-picker-label")
     }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/React.createElement(Icon, {
@@ -422,13 +454,13 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     gap: 4,
     visible: visible,
     onVisibleChange: onVisibleChange,
-    trigger: 'click',
+    trigger: expandTrigger,
     getPopupContainer: getPopupContainer,
     prefixCls: "".concat(prefixCls, "-menus"),
     placement: allProps.popperPlacement || popupPlacement,
     popperClassName: allProps.popperClassName || allProps.popupClassName,
     getTriggerElement: function getTriggerElement() {
-      return triggerRef.current;
+      return mergeRef.current;
     }
   });
   return usePopper(cascaderLocator, cascaderPopper, popperProps);

package/es/cascader/style/index.css

@@ -112,17 +112,6 @@
   cursor: pointer;
   background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
-.kd-cascader-picker:focus > .kd-cascader-picker-input {
-  border-color: var(--kd-c-cascader-color-active, #999);
-}
-.kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
-}
-.kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
-}
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
   cursor: not-allowed;
   border-color: var(--kd-g-color-border-strong, #d9d9d9);
@@ -148,7 +137,7 @@
   text-overflow: ellipsis;
 }
 .kd-cascader-picker-input {
-  background-color: transparent !important;
+  background-color: transparent;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
@@ -156,11 +145,7 @@
   color: transparent !important;
   cursor: pointer;
 }
-.kd-cascader-picker-input.expand {
-  border-color: var(--kd-c-cascader-color-active, #999);
-}
 .kd-cascader-picker-input.expand i[class*='kdicon'] {
-  color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -190,7 +175,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -199,7 +184,7 @@
           transform: scale(0.9) translateY(-50%);
 }
 .kd-cascader-picker-close:hover {
-  color: var(--kd-c-cascader-color-active, #999);
+  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
 }
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
@@ -312,6 +297,10 @@
   border-bottom: 1px solid #d9d9d9;
   background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
+.kd-cascader-multiple:not(.kd-cascader-disabled):focus {
+  border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
+  outline: none;
+}
 .kd-cascader-multiple-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -325,7 +314,8 @@
 }
 .kd-cascader-placeholder {
   position: absolute;
-  color: #999;
+  font-size: 14px;
+  color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -380,9 +370,6 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-cascader-icon-arrow-focus {
-  color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
-}
 .kd-cascader-icon-clear {
   opacity: 0;
   z-index: 1;
@@ -390,7 +377,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
-  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
 }
 .kd-cascader-icon-clear:hover {
   color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
@@ -412,7 +399,6 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  vertical-align: middle;
   padding: 0 7px;
   overflow: hidden;
   white-space: nowrap;
@@ -420,3 +406,33 @@
   border: 1px solid #ccc;
   color: #212121;
 }
+.kd-cascader-disabled {
+  cursor: not-allowed;
+}
+.kd-cascader-disabled .kd-cascader-picker-label {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-picker-input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-picker-input > input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled.kd-cascader-multiple {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-suffix {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-tag-describe-content {
+  color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+  border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+}
+.kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
+.kd-cascader-expand .kd-input-wrapper {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-cascader-multiple:not(.kd-cascader-disabled):hover,
+.kd-cascader-expand {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}

package/es/cascader/style/index.less

@@ -12,22 +12,6 @@
   cursor: pointer;
   background: @cascader-bg-color;
 
-  &:focus > &-input {
-    border-color: @cascader-active-color;
-
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
-  &:hover > &-input {
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
   &.disabled {
     .@{cascader-picker-prefix-cls}-input {
       cursor: not-allowed;
@@ -54,7 +38,7 @@
   }
 
   &-input {
-    background-color: transparent !important;
+    background-color: transparent;
     transition: all 0.2s;
 
     > input {
@@ -63,10 +47,7 @@
     }
 
     &.expand {
-      border-color: @cascader-active-color;
-
       i[class*='kdicon'] {
-        color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
@@ -105,7 +86,7 @@
     transform: scale(0.9) translateY(-50%);
 
     &:hover {
-      color: @cascader-active-color;
+      color: @cascader-clear-color-hover;
     }
   }
 }
@@ -217,6 +198,11 @@
     position: relative;
     border-bottom: 1px solid #d9d9d9;
     background: @cascader-bg-color;
+
+    &:not(.@{kd-prefix}-cascader-disabled):focus {
+      border-color: @cascader-selected-color;
+      outline: none;
+    }
   }
 
   &-multiple-wrapper {
@@ -228,7 +214,8 @@
 
   &-placeholder {
     position: absolute;
-    color: @select-placeholder-color;
+    font-size: @middle-font-size;
+    color: @cascader-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -267,10 +254,6 @@
         transform: rotate(0deg);
         transition: transform calc(@transition-duration - 0.1s) @ease;
       }
-
-      &-focus {
-        color: @cascader-g-color-border-foucs;
-      }
     }
 
     &-clear {
@@ -285,6 +268,7 @@
       }
     }
   }
+
   &-tag {
     &-describe {
       font-size: 12px;
@@ -296,7 +280,6 @@
       &-content {
         display: inline-flex;
         align-items: center;
-        vertical-align: middle;
         padding: 0 7px;
         overflow: hidden;
         white-space: nowrap;
@@ -306,4 +289,43 @@
       }
     }
   }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .@{kd-prefix}-cascader-picker-label {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-picker-input {
+      background-color: @cascader-disabled-color-background;
+
+      > input {
+        background-color: @cascader-disabled-color-background;
+      }
+    }
+
+    &.@{kd-prefix}-cascader-multiple {
+      background-color: @cascader-disabled-color-background;
+    }
+
+    .@{kd-prefix}-cascader-suffix {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-tag-describe-content {
+      color: @cascader-tag-disabled-color;
+      border-color: @cascader-tag-disabled-color;
+    }
+  }
+
+  &-picker:not(&-disabled):hover, &-expand {
+    .kd-input-wrapper {
+      border-color: @cascader-g-color-border-focus;
+    }
+  }
+
+  &-multiple:not(&-disabled):hover, &-expand {
+    border-color: @cascader-g-color-border-focus;
+  }
 }

package/es/cascader/style/token.less

@@ -12,17 +12,18 @@
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-disabled-color-background: var(~'@{cascader-prefix}-color-background-disabled', @color-background-contain-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
-@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
-@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
 @cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
+@cascader-g-color-border-focus: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-tag-disabled-color: var(~'@{cascader-prefix}-tag-disabled-color', #d9d9d9);
+@cascader-placeholder-color: var(~'@{cascader-prefix}-placeholder-color', @color-text-placeholder);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

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

@@ -116,9 +116,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var city = _findInstanceProperty(cityList).call(cityList, function (city) {
       return city.id === value;
     });
-    if (city) {
-      setSeletedCity(city);
-    }
+    setSeletedCity(city);
   }, [commonList, domesticList, foreignList, value]);
   useEffect(function () {
     if (typeof props.visible !== 'undefined') {
@@ -232,6 +230,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
+        className: searchValue ? "".concat(selectPrefixCls, "-list-item-match") : undefined,
         renderCityInfo: function renderCityInfo(data, flag) {
           return _renderCityInfo(data, isCommon, flag);
         },
@@ -277,7 +276,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       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) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
+      return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {

package/es/city-picker/option.js

@@ -8,6 +8,7 @@ var InternalOption = function InternalOption(props, ref) {
   var children = props.children,
     value = props.value,
     disabled = props.disabled,
+    className = props.className,
     onChangeSelect = props.onChangeSelect,
     _props$city = props.city,
     city = _props$city === void 0 ? {} : _props$city,
@@ -20,7 +21,7 @@ var InternalOption = function InternalOption(props, ref) {
     prefixCls = _useContext.prefixCls;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
-  var optionCls = classNames(selectOptionPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var optionCls = classNames(selectOptionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
   var handleClick = function handleClick(e) {
     e.preventDefault();
     if (disabled || id === undefined) return;

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

@@ -121,6 +121,9 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.kd-city-picker-selector {
+  width: 100%;
+}
 .kd-city-picker-selector:hover .kd-city-picker-icon-active {
   color: #3761ca;
 }
@@ -341,11 +344,20 @@
   background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
   color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
 }
+.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
+  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
+}
 .kd-city-picker-list-item-disabled {
   color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
   background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
 }
+.kd-city-picker-list > .kd-city-picker-list-item-match {
+  color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
+}
+.kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
+  color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
+}
 .kd-city-picker-highlight {
   color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
 }

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

@@ -14,6 +14,9 @@
   display: flex;
   flex-direction: column;
 
+  &-selector {
+    width: 100%;
+  }
   &-selector:hover {
     .@{city-picker-prefix-cls}-icon-active {
       color: #3761ca;
@@ -225,6 +228,10 @@
       &-selected:not(&-disabled) {
         background-color: @city-picker-item-selected-bg;
         color: @city-picker-list-item-color-selected;
+
+        .@{city-picker-prefix-cls}-list-item-info {
+          color: @city-picker-list-item-color-selected;
+        }
       }
 
       &-disabled {
@@ -233,6 +240,13 @@
         background-color: @city-picker-disabled-option-bg;
       }
     }
+
+    & > .@{city-picker-prefix-cls}-list-item-match {
+      color: @city-picker-font-color;
+      .@{city-picker-prefix-cls}-list-item-info {
+        color: @city-picker-placeholder-color;
+      }
+    }
   }
 
   &-highlight {