@kdcloudjs/kdesign 1.7.25 → 1.7.26

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/tag/tag.d.ts

@@ -19,6 +19,7 @@ export interface ITagProps {
     onClick?: React.MouseEventHandler<HTMLElement>;
     onClose?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
+    title?: string;
 }
 declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
 export default Tag;

package/es/tree-select/tree-select.js

@@ -444,7 +444,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.createElement("span", {
       className: itemCls

package/lib/cascader/cascader.js

@@ -75,15 +75,15 @@ var Cascader = /*#__PURE__*/_react.default.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 = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
+  var mergeRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)();
   var wrapperRef = (0, _react.useRef)();
-  var mergeRef = ref || pickerRef;
   var _useState = (0, _react.useState)(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     visible = _useState2[0],
@@ -170,21 +170,53 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setCurrentOptions(newMultipleOptions);
     }
   }, [options, value, fieldNames, isMultiple]);
-  _react.default.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();
+      }
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      focus: handleFocus,
+      blur: handleBlur,
+      dom: mergeRef.current
+    };
+  });
+  (0, _react.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.default.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 = (0, _react.useMemo)(function () {
     return !isMultiple ? (0, _map.default)(currentOptions).call(currentOptions, function (_ref) {
@@ -208,8 +240,10 @@ var Cascader = /*#__PURE__*/_react.default.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() {
@@ -249,9 +283,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var renderMultiple = function renderMultiple() {
     var _classNames3, _classNames4;
-    var multipleCls = (0, _classnames.default)((_classNames3 = {
-      disabled: disabled
-    }, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-multiple"), true), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
+    var multipleCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-expand"), visible), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-multiple"), true), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
     var itemCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
     var TagStyle = {
       margin: '2px 8px 2px 0',
@@ -259,9 +291,11 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       className: multipleCls,
-      ref: triggerRef,
+      ref: mergeRef,
       style: style
-    }, otherProps), /*#__PURE__*/_react.default.createElement("div", {
+    }, otherProps, {
+      tabIndex: -1
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-multiple-wrapper"),
       ref: wrapperRef
     }, Array.isArray(currentOptions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(currentOptions).call(currentOptions, function (option, index) {
@@ -270,6 +304,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: (0, _classnames.default)("".concat(prefixCls, "-selection-tag"))
       }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement(_tag.default, {
         type: "edit",
+        disabled: disabled,
         style: TagStyle,
         closable: true,
         onClose: function onClose(e) {
@@ -287,8 +322,10 @@ var Cascader = /*#__PURE__*/_react.default.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',
@@ -306,18 +343,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var singleProps = {
       style: style,
       tabIndex: 0,
-      className: (0, _classnames.default)("".concat(prefixCls, "-picker"), className, (0, _defineProperty2.default)({
-        expand: visible,
-        allowClear: allowClear,
-        disabled: disabled
-      }, "".concat(prefixCls, "-bordered"), bordered))
+      className: (0, _classnames.default)("".concat(prefixCls, "-picker"), className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-expand"), visible), (0, _defineProperty2.default)(_classNames5, "allowClear", allowClear), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-bordered"), bordered), _classNames5))
     };
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, singleProps, {
       ref: mergeRef
-    }, otherProps), _react.default.Children.count(children) === 1 && children.type ? /*#__PURE__*/_react.default.cloneElement(children, {
-      ref: triggerRef
-    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      ref: triggerRef
+    }, otherProps), _react.default.Children.count(children) === 1 && children.type ? /*#__PURE__*/_react.default.cloneElement(children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-single-wrapper"),
+      ref: wrapperRef
     }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, inputProps)), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-picker-label")
     }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : ''), allowClear && /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -435,13 +467,13 @@ var Cascader = /*#__PURE__*/_react.default.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 (0, _usePopper.default)(cascaderLocator, cascaderPopper, popperProps);

package/lib/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));
+}