@kdcloudjs/kdesign 1.7.25 → 1.7.27

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.7.24
+ *   @kdcloudjs/kdesign v1.7.26
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -6209,7 +6209,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var _excluded = ["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"];
+var _excluded = ["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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -6271,14 +6271,14 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
     customAllowClear = allProps.allowClear,
     popupPlacement = allProps.popupPlacement,
     maxTagCount = allProps.maxTagCount,
+    autoFocus = allProps.autoFocus,
     otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_4___default()(allProps, _excluded);
 
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
-  var pickerRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])();
-  var triggerRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])();
+  var mergeRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])();
+  var inputRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])();
   var wrapperRef = Object(react__WEBPACK_IMPORTED_MODULE_17__["useRef"])();
-  var mergeRef = ref || pickerRef;
   var _useState = Object(react__WEBPACK_IMPORTED_MODULE_17__["useState"])(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3___default()(_useState, 2),
     visible = _useState2[0],
@@ -6365,21 +6365,55 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
       setCurrentOptions(newMultipleOptions);
     }
   }, [options, value, fieldNames, isMultiple]);
-  react__WEBPACK_IMPORTED_MODULE_17___default.a.useEffect(function () {
-    if (allProps.autoFocus) {
-      var _mergeRef$current;
-      (_mergeRef$current = mergeRef.current) === null || _mergeRef$current === void 0 ? void 0 : _mergeRef$current.focus();
+  var handleFocus = function handleFocus() {
+    if (!disabled) {
+      if (isMultiple) {
+        var _mergeRef$current;
+        (_mergeRef$current = mergeRef.current) === null || _mergeRef$current === void 0 ? void 0 : _mergeRef$current.focus();
+      } else {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }
+    }
+  };
+  var handleBlur = function handleBlur() {
+    if (!disabled) {
+      if (isMultiple) {
+        var _mergeRef$current2;
+        (_mergeRef$current2 = mergeRef.current) === null || _mergeRef$current2 === void 0 ? void 0 : _mergeRef$current2.blur();
+      } else {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      }
     }
-  }, [allProps.autoFocus, mergeRef]);
+  };
+  Object(react__WEBPACK_IMPORTED_MODULE_17__["useImperativeHandle"])(ref, function () {
+    return {
+      focus: handleFocus,
+      blur: handleBlur,
+      dom: mergeRef.current
+    };
+  });
+  Object(react__WEBPACK_IMPORTED_MODULE_17__["useEffect"])(function () {
+    if (autoFocus) {
+      handleFocus();
+    }
+  }, [autoFocus, inputRef]);
+  var handleMouseUp = function handleMouseUp(e) {
+    var _e$target;
+    var cln = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.className;
+    var isCloseBtn = cln.indexOf('kd-tag-close-icon') > -1 || cln.indexOf('kdicon') > -1;
+    if (isCloseBtn) {
+      e.stopPropagation();
+    }
+  };
   react__WEBPACK_IMPORTED_MODULE_17___default.a.useEffect(function () {
     var _wrapperRef$current;
-    (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener('mouseup', function (e) {
-      var _e$target;
-      var isCloseBtn = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.className.indexOf('kd-tag-close-icon')) > -1;
-      if (isCloseBtn) {
-        e.stopPropagation();
-      }
-    });
+    (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener('mouseup', handleMouseUp);
+    return function () {
+      var _wrapperRef$current2;
+      (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.removeEventListener('mouseup', handleMouseUp);
+    };
   }, []);
   var labels = Object(react__WEBPACK_IMPORTED_MODULE_17__["useMemo"])(function () {
     return !isMultiple ? currentOptions.map(function (_ref) {
@@ -6403,8 +6437,10 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
       });
     });
   }, [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() {
@@ -6444,9 +6480,7 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
   };
   var renderMultiple = function renderMultiple() {
     var _classNames3, _classNames4;
-    var multipleCls = classnames__WEBPACK_IMPORTED_MODULE_18___default()((_classNames3 = {
-      disabled: disabled
-    }, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-multiple"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
+    var multipleCls = classnames__WEBPACK_IMPORTED_MODULE_18___default()((_classNames3 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-expand"), visible), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-multiple"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
     var itemCls = classnames__WEBPACK_IMPORTED_MODULE_18___default()((_classNames4 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames4, "".concat(prefixCls, "-selection-item"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
     var TagStyle = {
       margin: '2px 8px 2px 0',
@@ -6454,9 +6488,11 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
     };
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
       className: multipleCls,
-      ref: triggerRef,
+      ref: mergeRef,
       style: style
-    }, otherProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
+    }, otherProps, {
+      tabIndex: -1
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
       className: "".concat(prefixCls, "-multiple-wrapper"),
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_17___default.a.Fragment, null, currentOptions.map(function (option, index) {
@@ -6465,6 +6501,7 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
         className: classnames__WEBPACK_IMPORTED_MODULE_18___default()("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_tag__WEBPACK_IMPORTED_MODULE_27__["default"], {
         type: "edit",
+        disabled: disabled,
         style: TagStyle,
         closable: true,
         onClose: function onClose(e) {
@@ -6482,8 +6519,10 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
     }, renderSuffix())));
   };
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var inputProps = {
       value: value,
+      ref: inputRef,
       placeholder: placeholder,
       readOnly: true,
       borderType: bordered ? 'bordered' : 'underline',
@@ -6501,18 +6540,13 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
     var singleProps = {
       style: style,
       tabIndex: 0,
-      className: classnames__WEBPACK_IMPORTED_MODULE_18___default()("".concat(prefixCls, "-picker"), className, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()({
-        expand: visible,
-        allowClear: allowClear,
-        disabled: disabled
-      }, "".concat(prefixCls, "-bordered"), bordered))
+      className: classnames__WEBPACK_IMPORTED_MODULE_18___default()("".concat(prefixCls, "-picker"), className, (_classNames5 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames5, "".concat(prefixCls, "-single"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames5, "".concat(prefixCls, "-expand"), visible), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames5, "allowClear", allowClear), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames5, "".concat(prefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames5, "".concat(prefixCls, "-bordered"), bordered), _classNames5))
     };
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, singleProps, {
       ref: mergeRef
-    }, otherProps), react__WEBPACK_IMPORTED_MODULE_17___default.a.Children.count(children) === 1 && children.type ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.cloneElement(children, {
-      ref: triggerRef
-    }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_17___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
-      ref: triggerRef
+    }, otherProps), react__WEBPACK_IMPORTED_MODULE_17___default.a.Children.count(children) === 1 && children.type ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.cloneElement(children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_17___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("div", {
+      className: "".concat(prefixCls, "-single-wrapper"),
+      ref: wrapperRef
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_input__WEBPACK_IMPORTED_MODULE_23__["default"], inputProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement("span", {
       className: "".concat(prefixCls, "-picker-label")
     }, labels !== null && labels !== void 0 && labels.length ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_24__["default"], {
@@ -6630,13 +6664,13 @@ var Cascader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_17___default.a.forwar
     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 Object(_utils_usePopper__WEBPACK_IMPORTED_MODULE_22__["default"])(cascaderLocator, cascaderPopper, popperProps);
@@ -7482,6 +7516,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./option */ "./components/city-picker/option.tsx");
 /* harmony import */ var lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! lodash/escapeRegExp */ "./node_modules/lodash/escapeRegExp.js");
 /* harmony import */ var lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28___default = /*#__PURE__*/__webpack_require__.n(lodash_escapeRegExp__WEBPACK_IMPORTED_MODULE_28__);
+/* harmony import */ var _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../_utils/KeyCode */ "./components/_utils/KeyCode.ts");
 
 
 
@@ -7511,6 +7546,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
+
 
 
 var InternalSelect = function InternalSelect(props, ref) {
@@ -7580,6 +7616,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var searchRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null); // 搜索框ref
   var selectionRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
   var clearRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
+  var optionsListRef = Object(react__WEBPACK_IMPORTED_MODULE_20__["useRef"])(null);
   var _useState = Object(react__WEBPACK_IMPORTED_MODULE_20__["useState"])(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState, 2),
     optionShow = _useState2[0],
@@ -7615,9 +7652,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var city = cityList.find(function (city) {
       return city.id === value;
     });
-    if (city) {
-      setSeletedCity(city);
-    }
+    setSeletedCity(city);
   }, [commonList, domesticList, foreignList, value]);
   Object(react__WEBPACK_IMPORTED_MODULE_20__["useEffect"])(function () {
     if (typeof props.visible !== 'undefined') {
@@ -7730,17 +7765,24 @@ var InternalSelect = function InternalSelect(props, ref) {
       return renderNotContent(notContent);
     }
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement("div", {
-      className: "".concat(selectPrefixCls, "-list")
-    }, data.map(function (item) {
+      className: "".concat(selectPrefixCls, "-list"),
+      ref: optionsListRef
+    }, data.map(function (item, index) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement(_option__WEBPACK_IMPORTED_MODULE_27__["default"], {
         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);
         },
         onChangeSelect: handleOption,
-        itemRender: itemRender
+        itemRender: itemRender,
+        activeIndex: activeIndex,
+        index: index,
+        onChangeActiveIndex: function onChangeActiveIndex(i) {
+          setActiveIndex(i);
+        }
       }, 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);
     }));
   };
@@ -7777,10 +7819,14 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      if (isCommon) {
+        var _curVal = data !== null && data !== void 0 && data.province ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+        return "".concat(flag && _curVal ? symbol : '').concat(_curVal);
+      }
+      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
       return "".concat(flag && curVal ? symbol : '').concat(curVal);
     } else {
-      return "".concat(flag && data !== null && data !== void 0 && data.province ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.province).concat(data !== null && data !== void 0 && data.country && data !== null && data !== void 0 && data.province ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.country);
+      return "".concat(flag && (data !== null && data !== void 0 && data.province || data !== null && data !== void 0 && data.country) ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.province).concat(data !== null && data !== void 0 && data.country && data !== null && data !== void 0 && data.province ? symbol : '').concat(data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -7832,6 +7878,83 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_clearRef$current2 = clearRef.current) === null || _clearRef$current2 === void 0 ? void 0 : _clearRef$current2.removeEventListener('mouseup', fn);
     };
   }, [initValue]);
+
+  // keyboard
+  var curkeyboardList = Object(react__WEBPACK_IMPORTED_MODULE_20__["useMemo"])(function () {
+    if (!searchValue) {
+      return commonList;
+    } else if (tabsValue === 'domestic') {
+      return domesticList;
+    } else {
+      return foreignList;
+    }
+  }, [commonList, domesticList, foreignList, searchValue, tabsValue]);
+  var getActiveIndex = function getActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = curkeyboardList.length;
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      return current;
+    }
+    return -1;
+  };
+  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_20__["useState"])(getActiveIndex(0)),
+    _useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState11, 2),
+    activeIndex = _useState12[0],
+    setActiveIndex = _useState12[1];
+  var initActiveIndex = function initActiveIndex() {
+    setActiveIndex(getActiveIndex(0));
+  };
+  Object(react__WEBPACK_IMPORTED_MODULE_20__["useEffect"])(function () {
+    initActiveIndex();
+  }, [searchValue, tabsValue]);
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    var which = e.which;
+    // open
+    if (which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ENTER || which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].UP || which === _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].DOWN) {
+      e.preventDefault();
+      setOptionShow(true);
+    }
+    // up、down、enter、esc
+    if (optionShow) {
+      var offset = 0;
+      switch (which) {
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].UP:
+          offset = -1;
+          break;
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].DOWN:
+          offset = 1;
+          break;
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ENTER:
+          {
+            var item = curkeyboardList[activeIndex];
+            if (!item) return;
+            handleOption(item);
+            setOptionShow(false);
+            break;
+          }
+        case _utils_KeyCode__WEBPACK_IMPORTED_MODULE_29__["default"].ESC:
+          setOptionShow(false);
+          break;
+        default:
+          break;
+      }
+      if (offset !== 0) {
+        var _optionsListRef$curre, _optionsListRef$curre2;
+        var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
+        var curDom = (_optionsListRef$curre = optionsListRef.current) === null || _optionsListRef$curre === void 0 ? void 0 : (_optionsListRef$curre2 = _optionsListRef$curre.children) === null || _optionsListRef$curre2 === void 0 ? void 0 : _optionsListRef$curre2[nextActiveIndex];
+        if (curDom) {
+          var _optionsListRef$curre3;
+          (_optionsListRef$curre3 = optionsListRef.current) === null || _optionsListRef$curre3 === void 0 ? void 0 : _optionsListRef$curre3.children[nextActiveIndex].scrollIntoView({
+            behavior: 'auto',
+            block: 'nearest'
+          });
+        }
+        setActiveIndex(nextActiveIndex);
+        e.preventDefault();
+      }
+    }
+  };
   var renderCityPicker = function renderCityPicker() {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement("div", {
       className: cityPickerCls,
@@ -7849,7 +7972,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: function onBlur() {
         var _searchRef$current2;
         return (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.blur();
-      }
+      },
+      onKeyDown: onInternalKeyDown
     }, renderSingle()));
   };
   var catchStyle = function catchStyle() {
@@ -7867,6 +7991,9 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      initActiveIndex();
+    }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);
       onVisibleChange && onVisibleChange(visible);
@@ -7939,11 +8066,15 @@ var InternalOption = function InternalOption(props, ref) {
   var children = props.children,
     value = props.value,
     disabled = props.disabled,
+    className = props.className,
+    activeIndex = props.activeIndex,
+    index = props.index,
     onChangeSelect = props.onChangeSelect,
     _props$city = props.city,
     city = _props$city === void 0 ? {} : _props$city,
     renderCityInfo = props.renderCityInfo,
-    itemRender = props.itemRender;
+    itemRender = props.itemRender,
+    onChangeActiveIndex = props.onChangeActiveIndex;
   var _ref = city,
     id = _ref.id,
     name = _ref.name;
@@ -7952,17 +8083,25 @@ 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__WEBPACK_IMPORTED_MODULE_3___default()(selectOptionPrefixCls, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var optionCls = classnames__WEBPACK_IMPORTED_MODULE_3___default()(selectOptionPrefixCls, className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
   var handleClick = function handleClick(e) {
     e.preventDefault();
     if (disabled || id === undefined) return;
     onChangeSelect === null || onChangeSelect === void 0 ? void 0 : onChangeSelect(city);
   };
+  var handleOnMouseEnter = function handleOnMouseEnter() {
+    onChangeActiveIndex && onChangeActiveIndex(index);
+  };
+  var handleOnMouseLeave = function handleOnMouseLeave() {
+    onChangeActiveIndex && onChangeActiveIndex(-1);
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", {
     ref: optionRef,
     className: optionCls,
     title: name,
-    onClick: handleClick
+    onClick: handleClick,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
   }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("span", {
@@ -8203,23 +8342,30 @@ Collapse.Panel = _panel__WEBPACK_IMPORTED_MODULE_1__["default"];
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.includes.js */ "./node_modules/core-js/modules/es.array.includes.js");
-/* harmony import */ var core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.string.includes.js */ "./node_modules/core-js/modules/es.string.includes.js");
-/* harmony import */ var core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../icon */ "./components/icon/index.tsx");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.array.includes.js */ "./node_modules/core-js/modules/es.array.includes.js");
+/* harmony import */ var core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_includes_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.string.includes.js */ "./node_modules/core-js/modules/es.string.includes.js");
+/* harmony import */ var core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_includes_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../icon */ "./components/icon/index.tsx");
+
+
 
 
+var _excluded = ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"];
 
 
 
@@ -8227,13 +8373,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef(function (props, ref) {
+var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.forwardRef(function (props, ref) {
   var _classNames6, _classNames7, _classNames8;
-  var _React$useContext = react__WEBPACK_IMPORTED_MODULE_4___default.a.useContext(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_6__["default"]),
+  var _React$useContext = react__WEBPACK_IMPORTED_MODULE_6___default.a.useContext(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_8__["default"]),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
-  var _getCompProps = Object(_utils__WEBPACK_IMPORTED_MODULE_7__["getCompProps"])('CollapsePanel', userDefaultProps, props),
+  var _getCompProps = Object(_utils__WEBPACK_IMPORTED_MODULE_9__["getCompProps"])('CollapsePanel', userDefaultProps, props),
     disabled = _getCompProps.disabled,
     extra = _getCompProps.extra,
     assist = _getCompProps.assist,
@@ -8245,23 +8391,25 @@ var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef
     expandIcon = _getCompProps.expandIcon,
     expandIconPosition = _getCompProps.expandIconPosition,
     style = _getCompProps.style,
+    title = _getCompProps.title,
     className = _getCompProps.className,
     children = _getCompProps.children,
-    customPrefixcls = _getCompProps.prefixCls;
+    customPrefixcls = _getCompProps.prefixCls,
+    others = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default()(_getCompProps, _excluded);
   var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
 
-  var childrenRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])();
-  var setHeightTimerRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])(null);
-  var setAutoHeightTimerRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])(null);
-  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(null),
-    _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
+  var childrenRef = Object(react__WEBPACK_IMPORTED_MODULE_6__["useRef"])();
+  var setHeightTimerRef = Object(react__WEBPACK_IMPORTED_MODULE_6__["useRef"])(null);
+  var setAutoHeightTimerRef = Object(react__WEBPACK_IMPORTED_MODULE_6__["useRef"])(null);
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_6__["useState"])(null),
+    _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState, 2),
     expandAnimation = _useState2[0],
     setExpandAnimation = _useState2[1];
-  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false),
-    _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
+  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_6__["useState"])(false),
+    _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState3, 2),
     expand = _useState4[0],
     setExpand = _useState4[1];
-  Object(react__WEBPACK_IMPORTED_MODULE_4__["useEffect"])(function () {
+  Object(react__WEBPACK_IMPORTED_MODULE_6__["useEffect"])(function () {
     var newValue = innerKey.includes(panelKey);
     if (newValue !== expand) {
       setExpand(newValue);
@@ -8274,40 +8422,41 @@ var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef
   };
   var renderIcon = function renderIcon() {
     var _classNames;
-    var iconClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(panelPrefixCls, "-icon"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    var iconClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(panelPrefixCls, "-icon"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: iconClassName,
       onClick: handleClick
-    }, expandIcon ? renderReactNode(expandIcon) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    }, expandIcon ? renderReactNode(expandIcon) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_10__["default"], {
       type: "arrow-right-solid"
     }));
   };
   var renderLeft = function renderLeft() {
     var _classNames2, _classNames3;
-    var className = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(panelPrefixCls, "-left"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames2));
-    var headerClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames3 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames3, "".concat(panelPrefixCls, "-header"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames3, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames3));
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    var className = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames2, "".concat(panelPrefixCls, "-left"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames2, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames2));
+    var headerClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames3 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames3, "".concat(panelPrefixCls, "-header"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames3, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames3));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: className,
       onClick: handleClick
-    }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
-      className: headerClassName
+    }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
+      className: headerClassName,
+      title: title
     }, renderReactNode(header)));
   };
   var renderRight = function renderRight() {
     var _classNames4;
-    var className = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames4 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames4, "".concat(panelPrefixCls, "-right"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames4, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames4));
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    var className = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames4 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames4, "".concat(panelPrefixCls, "-right"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames4, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames4));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: className
-    }, extra && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    }, extra && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: "".concat(panelPrefixCls, "-extra")
     }, renderReactNode(extra)), expandIconPosition === 'right' ? renderIcon() : null);
   };
   var renderMiddle = function renderMiddle() {
     var _classNames5;
-    var className = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames5 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames5, "".concat(panelPrefixCls, "-middle"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames5, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames5));
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    var className = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames5 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames5, "".concat(panelPrefixCls, "-middle"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames5, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames5));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: className
-    }, assist && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+    }, assist && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
       className: "".concat(panelPrefixCls, "-assist")
     }, renderReactNode(assist)));
   };
@@ -8317,10 +8466,10 @@ var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef
     }
     return reactNode;
   };
-  var rootClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()(className, (_classNames6 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames6, "".concat(panelPrefixCls), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames6, "".concat(panelPrefixCls, "-border"), bordered), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames6, "".concat(panelPrefixCls, "-opened"), expand), _classNames6));
-  var topClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames7 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames7, "".concat(panelPrefixCls, "-top"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames7, "".concat(panelPrefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames7, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames7));
-  var childrenClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames8 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames8, "".concat(panelPrefixCls, "-children"), expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames8, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames8));
-  var childrenBorderedClassName = classnames__WEBPACK_IMPORTED_MODULE_5___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
+  var rootClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()(className, (_classNames6 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames6, "".concat(panelPrefixCls), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames6, "".concat(panelPrefixCls, "-border"), bordered), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames6, "".concat(panelPrefixCls, "-opened"), expand), _classNames6));
+  var topClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames7 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames7, "".concat(panelPrefixCls, "-top"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames7, "".concat(panelPrefixCls, "-disabled"), disabled), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames7, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames7));
+  var childrenClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()((_classNames8 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames8, "".concat(panelPrefixCls, "-children"), expand), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames8, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames8));
+  var childrenBorderedClassName = classnames__WEBPACK_IMPORTED_MODULE_7___default()(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
   var runExpandAnimation = function runExpandAnimation(element) {
     element.style.height = '0px';
     element.style.opacity = '0';
@@ -8347,8 +8496,8 @@ var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef
     element.style.height = 'auto';
     element.style.opacity = '1';
   };
-  var panelPrefixClsRef = ref || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createRef();
-  react__WEBPACK_IMPORTED_MODULE_4___default.a.useLayoutEffect(function () {
+  var panelPrefixClsRef = ref || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createRef();
+  react__WEBPACK_IMPORTED_MODULE_6___default.a.useLayoutEffect(function () {
     if (!childrenRef.current) return;
     if (expandAnimation) {
       expand ? runExpandAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
@@ -8357,16 +8506,16 @@ var Panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.forwardRef
       expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
     }
   }, [childrenRef.current, expandAnimation, expand]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
     className: rootClassName,
     style: style,
     ref: panelPrefixClsRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+  }, others), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("span", {
     className: topClassName
-  }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("div", {
     className: childrenClassName,
     ref: childrenRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_6___default.a.createElement("div", {
     className: childrenBorderedClassName
   }, children)));
 });
@@ -17433,7 +17582,8 @@ var Field = function Field(props) {
     wrapperWidth = props.wrapperWidth,
     validateTrigger = props.validateTrigger,
     defaultValue = props.defaultValue,
-    valuePropName = props.valuePropName;
+    valuePropName = props.valuePropName,
+    extra = props.extra;
   var htmlFor = customizeHtmlFor || (name ? "form_".concat(name, "_").concat((Math.random() * 100).toFixed(0)) : undefined);
   var childrenNode = null;
   var innerValuePropName = 'value';
@@ -17518,7 +17668,7 @@ var Field = function Field(props) {
     };
   }, []);
   var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
-  var formItemClassName = classnames__WEBPACK_IMPORTED_MODULE_20___default()((_classnames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
+  var formItemClassName = classnames__WEBPACK_IMPORTED_MODULE_20___default()((_classnames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
   var value = getFieldValue(name);
   var validateMessage = getFieldError(name);
   var getInputValueFormProp = function getInputValueFormProp(evt) {
@@ -17613,7 +17763,8 @@ var Field = function Field(props) {
     requiredMark: mergedRequired
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_FieldWrapper__WEBPACK_IMPORTED_MODULE_23__["default"], {
     width: wrapperWidth,
-    validateMessage: validateMessage
+    validateMessage: validateMessage,
+    extra: extra
   }, childrenArray.map(function (child, index) {
     var keys = mergeProps(_objectSpread(_objectSpread({}, generateEventHandler(handleValueValidate, validateTrigger)), {}, {
       key: index,
@@ -17760,19 +17911,27 @@ var FieldWrapper = function FieldWrapper(props) {
   var children = wrapperProps.children,
     customizePrefixCls = wrapperProps.prefixCls,
     width = wrapperProps.width,
-    validateMessage = wrapperProps.validateMessage;
+    validateMessage = wrapperProps.validateMessage,
+    extra = wrapperProps.extra;
   var wrapperPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-wrapper', customizePrefixCls);
   var wrapperClassName = classnames__WEBPACK_IMPORTED_MODULE_1___default()(["".concat(wrapperPrefixCls)]);
   var messageClassName = classnames__WEBPACK_IMPORTED_MODULE_1___default()(["".concat(wrapperPrefixCls, "-message")]);
+  var validate = validateMessage ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: messageClassName,
+    title: validateMessage
+  }, validateMessage) : null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
     className: wrapperClassName,
     style: {
       width: width
     }
-  }, children, validateMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
-    className: messageClassName,
-    title: validateMessage
-  }, validateMessage));
+  }, children, extra ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra")
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-message")
+  }, validateMessage), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-text")
+  }, extra)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, validate));
 };
 /* harmony default export */ __webpack_exports__["default"] = (FieldWrapper);
 
@@ -35466,7 +35625,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
         onClose: function onClose(e) {
           return handleRemove(e, key);
         },
-        "data-tag": key
+        "data-tag": key,
+        title: label
       }, label));
     }), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_20___default.a.createElement("span", {
       className: itemCls