@kdcloudjs/kdesign 1.7.25 → 1.7.27

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

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import React, { useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { useMergedState } from '../_utils/hooks';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
@@ -14,6 +14,7 @@ import { Icon, Tabs, Spin } from '../index';
 import usePopper from '../_utils/usePopper';
 import Option from './option';
 import escapeRegExp from 'lodash/escapeRegExp';
+import KeyCode from '../_utils/KeyCode';
 var InternalSelect = function InternalSelect(props, ref) {
   var _context, _classNames3, _classNames5;
   var _useContext = useContext(ConfigContext),
@@ -81,6 +82,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var searchRef = useRef(null); // 搜索框ref
   var selectionRef = useRef(null);
   var clearRef = useRef(null);
+  var optionsListRef = useRef(null);
   var _useState = useState(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = _slicedToArray(_useState, 2),
     optionShow = _useState2[0],
@@ -116,9 +118,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') {
@@ -226,17 +226,24 @@ var InternalSelect = function InternalSelect(props, ref) {
       return renderNotContent(notContent);
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(selectPrefixCls, "-list")
-    }, _mapInstanceProperty(data).call(data, function (item) {
+      className: "".concat(selectPrefixCls, "-list"),
+      ref: optionsListRef
+    }, _mapInstanceProperty(data).call(data, function (item, index) {
       return /*#__PURE__*/React.createElement(Option, {
         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);
     }));
   };
@@ -272,12 +279,17 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var _context3;
-      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
-      return _concatInstanceProperty(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
+      var _context4;
+      if (isCommon) {
+        var _context3;
+        var _curVal = (data === null || data === void 0 ? void 0 : data.province) ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+        return _concatInstanceProperty(_context3 = "".concat(flag && _curVal ? symbol : '')).call(_context3, _curVal);
+      }
+      var curVal = tabsValue === 'domestic' ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+      return _concatInstanceProperty(_context4 = "".concat(flag && curVal ? symbol : '')).call(_context4, 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);
+      var _context5, _context6, _context7;
+      return _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context7, data === null || data === void 0 ? void 0 : data.province)).call(_context6, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context5, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -329,6 +341,81 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
     };
   }, [initValue]);
+  // keyboard
+  var curkeyboardList = 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 = useState(getActiveIndex(0)),
+    _useState12 = _slicedToArray(_useState11, 2),
+    activeIndex = _useState12[0],
+    setActiveIndex = _useState12[1];
+  var initActiveIndex = function initActiveIndex() {
+    setActiveIndex(getActiveIndex(0));
+  };
+  useEffect(function () {
+    initActiveIndex();
+  }, [searchValue, tabsValue]);
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    var _a, _b, _c;
+    var which = e.which;
+    // open
+    if (which === KeyCode.ENTER || which === KeyCode.UP || which === KeyCode.DOWN) {
+      e.preventDefault();
+      setOptionShow(true);
+    }
+    // up、down、enter、esc
+    if (optionShow) {
+      var offset = 0;
+      switch (which) {
+        case KeyCode.UP:
+          offset = -1;
+          break;
+        case KeyCode.DOWN:
+          offset = 1;
+          break;
+        case KeyCode.ENTER:
+          {
+            var item = curkeyboardList[activeIndex];
+            if (!item) return;
+            handleOption(item);
+            setOptionShow(false);
+            break;
+          }
+        case KeyCode.ESC:
+          setOptionShow(false);
+          break;
+        default:
+          break;
+      }
+      if (offset !== 0) {
+        var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
+        var curDom = (_b = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[nextActiveIndex];
+        if (curDom) {
+          (_c = optionsListRef.current) === null || _c === void 0 ? void 0 : _c.children[nextActiveIndex].scrollIntoView({
+            behavior: 'auto',
+            block: 'nearest'
+          });
+        }
+        setActiveIndex(nextActiveIndex);
+        e.preventDefault();
+      }
+    }
+  };
   var renderCityPicker = function renderCityPicker() {
     return /*#__PURE__*/React.createElement("div", {
       className: cityPickerCls,
@@ -346,7 +433,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: function onBlur() {
         var _a;
         return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
+      },
+      onKeyDown: onInternalKeyDown
     }, renderSingle()));
   };
   var catchStyle = function catchStyle() {
@@ -364,6 +452,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);

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

@@ -52,7 +52,10 @@ export interface ICityPickerOptionProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    activeIndex?: number;
+    index: number;
     onChangeSelect?: (city: City | null) => void;
     renderCityInfo?: (city: City, flag?: boolean, symbol?: string) => React.ReactNode;
     itemRender?: (city: City) => React.ReactNode;
+    onChangeActiveIndex?: (index: number) => void;
 }

package/es/city-picker/option.js

@@ -8,11 +8,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 id = city.id,
     name = city.name;
   var _useContext = useContext(ConfigContext),
@@ -20,17 +24,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(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), _defineProperty(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: optionRef,
     className: optionCls,
     title: name,
-    onClick: handleClick
+    onClick: handleClick,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
   }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), /*#__PURE__*/React.createElement("span", {

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;
 }
@@ -309,6 +312,15 @@
       -ms-flex-pack: center;
           justify-content: center;
 }
+.kd-city-picker-dropdown.topLeft.hidden,
+.kd-city-picker-dropdown.bottomLeft.hidden,
+.kd-city-picker-dropdown.topRight.hidden,
+.kd-city-picker-dropdown.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
 .kd-city-picker-list {
   padding: 8px 0;
   max-height: 320px;
@@ -334,18 +346,27 @@
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
   white-space: nowrap;
 }
-.kd-city-picker-list-item:hover {
+.kd-city-picker-list-item-active:not(.kd-city-picker-list-item-disabled) {
   background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
 }
 .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
   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));
 }
@@ -446,12 +467,3 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-city-picker.topLeft.hidden,
-.kd-city-picker.bottomLeft.hidden,
-.kd-city-picker.topRight.hidden,
-.kd-city-picker.bottomRight.hidden {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-}

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;
@@ -199,6 +202,15 @@
       align-items: center;
       justify-content: center;
     }
+
+    &.topLeft.hidden,
+    &.bottomLeft.hidden,
+    &.topRight.hidden,
+    &.bottomRight.hidden {
+      opacity: 0;
+      visibility: hidden;
+      transition: all calc(@transition-duration - 0.1s) @ease;
+    }
   }
 
   &-list {
@@ -218,13 +230,17 @@
         white-space: nowrap;
       }
 
-      &:hover {
+      &-active:not(&-disabled) {
         background-color: @city-picker-item-active-bg;
       }
 
       &-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 +249,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 {
@@ -323,13 +346,4 @@
       .over();
     }
   }
-
-  &.topLeft.hidden,
-  &.bottomLeft.hidden,
-  &.topRight.hidden,
-  &.bottomRight.hidden {
-    opacity: 0;
-    visibility: hidden;
-    transition: all calc(@transition-duration - 0.1s) @ease;
-  }
 }

package/es/collapse/panel.js

@@ -1,6 +1,16 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
@@ -12,21 +22,23 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
-  var _getCompProps = getCompProps('CollapsePanel', userDefaultProps, props),
-    disabled = _getCompProps.disabled,
-    extra = _getCompProps.extra,
-    assist = _getCompProps.assist,
-    header = _getCompProps.header,
-    onChange = _getCompProps.onChange,
-    panelKey = _getCompProps.panelKey,
-    innerKey = _getCompProps.innerKey,
-    bordered = _getCompProps.bordered,
-    expandIcon = _getCompProps.expandIcon,
-    expandIconPosition = _getCompProps.expandIconPosition,
-    style = _getCompProps.style,
-    className = _getCompProps.className,
-    children = _getCompProps.children,
-    customPrefixcls = _getCompProps.prefixCls;
+  var _a = getCompProps('CollapsePanel', userDefaultProps, props),
+    disabled = _a.disabled,
+    extra = _a.extra,
+    assist = _a.assist,
+    header = _a.header,
+    onChange = _a.onChange,
+    panelKey = _a.panelKey,
+    innerKey = _a.innerKey,
+    bordered = _a.bordered,
+    expandIcon = _a.expandIcon,
+    expandIconPosition = _a.expandIconPosition,
+    style = _a.style,
+    title = _a.title,
+    className = _a.className,
+    children = _a.children,
+    customPrefixcls = _a.prefixCls,
+    others = __rest(_a, ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"]);
   var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
   var childrenRef = useRef();
   var setHeightTimerRef = useRef(null);
@@ -68,7 +80,8 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: className,
       onClick: handleClick
     }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/React.createElement("span", {
-      className: headerClassName
+      className: headerClassName,
+      title: title
     }, renderReactNode(header)));
   };
   var renderRight = function renderRight() {
@@ -135,11 +148,11 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
     }
   }, [childrenRef.current, expandAnimation, expand]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: rootClassName,
     style: style,
     ref: panelPrefixClsRef
-  }, /*#__PURE__*/React.createElement("span", {
+  }, others), /*#__PURE__*/React.createElement("span", {
     className: topClassName
   }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/React.createElement("div", {
     className: childrenClassName,

package/es/collapse/style/index.css

@@ -116,9 +116,12 @@
 .kd-collapse-panel:last-child {
   border-top: none;
 }
-.kd-collapse-panel:first-child {
+.kd-collapse-panel-border.kd-collapse-panel:first-child {
   border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
+.kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
+  border-top: none;
+}
 .kd-collapse-panel {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/es/collapse/style/index.less

@@ -9,9 +9,12 @@
   &-panel:last-child {
     border-top: none;
   }
-  &-panel:first-child {
+  &-panel-border&-panel:first-child {
     border-top: @collapse-border-width solid @collapse-border-color;
   }
+  &-panel-border&-panel:not(:nth-child(1)) {
+    border-top: none;
+  }
   &-panel {
     display: inline-flex;
     flex-direction: column;

package/es/form/Field.d.ts

@@ -17,6 +17,7 @@ export interface FormItemProps {
     validateTrigger?: string | string[];
     wrapperWidth?: string | number;
     valuePropName?: string;
+    extra?: React.ReactNode;
 }
 export declare const INNER_VALUE_PROPS_LIST: {
     name: string;

package/es/form/Field.js

@@ -101,7 +101,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 ? _concatInstanceProperty(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
   var childrenNode = null;
   var innerValuePropName = 'value';
@@ -187,7 +188,7 @@ var Field = function Field(props) {
     };
   }, []);
   var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
-  var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
+  var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
   var value = getFieldValue(name);
   var validateMessage = getFieldError(name);
   var getInputValueFormProp = function getInputValueFormProp(evt) {
@@ -282,7 +283,8 @@ var Field = function Field(props) {
     requiredMark: mergedRequired
   }), /*#__PURE__*/React.createElement(FieldWrapper, {
     width: wrapperWidth,
-    validateMessage: validateMessage
+    validateMessage: validateMessage,
+    extra: extra
   }, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
     var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,

package/es/form/FieldWrapper.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface FieldWrapperProps {
+    extra?: React.ReactNode;
     children?: React.ReactNode;
     width?: string | number;
     validateMessage?: string;

package/es/form/FieldWrapper.js

@@ -11,18 +11,26 @@ 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(["".concat(wrapperPrefixCls)]);
   var messageClassName = classnames(["".concat(wrapperPrefixCls, "-message")]);
+  var validate = validateMessage ? /*#__PURE__*/React.createElement("p", {
+    className: messageClassName,
+    title: validateMessage
+  }, validateMessage) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClassName,
     style: {
       width: width
     }
-  }, children, validateMessage && /*#__PURE__*/React.createElement("p", {
-    className: messageClassName,
-    title: validateMessage
-  }, validateMessage));
+  }, children, extra ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-message")
+  }, validateMessage), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-text")
+  }, extra)) : /*#__PURE__*/React.createElement(React.Fragment, null, validate));
 };
 export default FieldWrapper;

package/es/form/style/index.css

@@ -152,6 +152,9 @@
 .kd-form-field-hidden {
   display: none !important;
 }
+.kd-form-field-extra {
+  margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
+}
 .kd-form-field-label {
   font-size: var(--kd-c-form-field-label-font-size, 12px);
   line-height: var(--kd-c-form-field-label-line-height, 18px);
@@ -178,7 +181,8 @@
 .kd-form-field-wrapper {
   position: relative;
 }
-.kd-form-field-wrapper-message {
+.kd-form-field-wrapper-message,
+.kd-form-field-wrapper-extra {
   position: absolute;
   left: -7px;
   right: 0;
@@ -191,3 +195,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-form-field-wrapper-extra-message {
+  color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
+}
+.kd-form-field-wrapper-extra-text {
+  color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
+}

package/es/form/style/index.less

@@ -46,6 +46,10 @@
   &-hidden {
     display: none !important;
   }
+
+  &-extra {
+    margin-bottom: calc(@form-field-spacing-margin-bottom * 2);
+  }
 }
 
 .@{field-label-cls} {
@@ -76,7 +80,8 @@
 
 .@{field-wrapper-cls} {
   position: relative;
-  &-message {
+
+  &-message, &-extra {
     position: absolute;
     left: -7px;
     right: 0;
@@ -89,4 +94,14 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
+  &-extra {
+    &-message {
+      color: @form-error-color;
+    }
+
+    &-text {
+      color: @form-extra-color;
+    }
+  }
 }

package/es/form/style/token.less

@@ -5,6 +5,7 @@
 // color
 @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
 @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
+@form-extra-color: var(~'@{form-prefix}-extra-color', @color-text-third);
 
 // font
 @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);

package/es/select/style/index.css

@@ -405,6 +405,7 @@
   min-width: 75px;
 }
 .kd-select-item-option-content {
+  max-width: var(--kd-c-select-item-sizing-max-width);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/es/select/style/index.less

@@ -176,6 +176,7 @@
       min-width: 75px;
 
       &-content {
+        max-width: @select-item-max-width;
         .over();
 
         .@{kd-prefix}-checkbox {