@kdcloudjs/kdesign 1.7.25 → 1.7.27

package/es/select/style/token.less

@@ -40,6 +40,7 @@
 @select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
 @select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 30px); // 中号高度lh:22px
 @select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+@select-item-max-width: var(~'@{select-custom-prefix}-item-sizing-max-width');
 
 // spacing
 @select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);

package/es/tabs/style/index.css

@@ -380,6 +380,9 @@
   display: inline-block;
   -webkit-transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: var(--kd-c-tabs-pane-text-sizing-max-width);
 }
 .kd-tab-pane-text-active,
 .kd-tab-pane-text:hover {

package/es/tabs/style/index.less

@@ -216,6 +216,9 @@
   &-text {
     display: inline-block;
     transition: color @tab-g-motion-duration;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: @tab-pane-text-max-width;
     &-active,
     &:hover {
       color: @tabPane-font-color-active;

package/es/tabs/style/token.less

@@ -29,6 +29,7 @@
 @tab-pane-type-line-height-small: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-small', 32px);
 @tab-pane-type-line-height-middle: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-middle', 32px);
 @tab-pane-type-dynamic-height: var(~'@{tabs-custom-prefix}-pane-type-dynamic-sizing-height', 32px);
+@tab-pane-text-max-width: var(~'@{tabs-custom-prefix}-pane-text-sizing-max-width');
 
 
 // spacing

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/anchor/style/index.css

@@ -180,7 +180,7 @@
 }
 .kd-anchor-menu .kd-anchor-link-title {
   display: inline-block;
-  max-width: 96px;
+  max-width: var(--kd-c-anchor-horizontal-link-sizing-max-width, 96px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/lib/anchor/style/index.less

@@ -70,7 +70,7 @@
       display: inline-block;
       &-title {
         display: inline-block;
-        max-width: 96px;
+        max-width: @anchor-horizontal-link-max-width;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/lib/anchor/style/token.less

@@ -14,6 +14,7 @@
 // sizing
 @anchor-width: var(~'@{anchor-prefix}-sizing-width', 120px);
 @anchor-advanced-width: var(~'@{anchor-prefix}-advanced-sizing-width', 160px);
+@anchor-horizontal-link-max-width: var(~'@{anchor-prefix}-horizontal-link-sizing-max-width', 96px);
 
 // spacing
 @anchor-link-top: var(~'@{anchor-prefix}-spacing-vertical', 7px);

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;
@@ -264,13 +249,13 @@
   background-color: var(--kd-c-cascader-color-background-selected, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
 .kd-cascader-menus .kd-cascader-menu-item-label {
-  width: 72px;
+  width: var(--kd-c-cascader-menu-item-label-sizing-width, 72px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
-  width: 92px;
+  width: calc(var(--kd-c-cascader-menu-item-label-sizing-width, 72px) + 20px);
 }
 .kd-cascader-menus .kd-cascader-menu-item .kd-cascader-checkbox {
   margin-right: 5px;
@@ -312,6 +297,10 @@
   border-bottom: 1px solid #d9d9d9;
   background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
 }
+.kd-cascader-multiple:not(.kd-cascader-disabled):focus {
+  border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
+  outline: none;
+}
 .kd-cascader-multiple-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -325,7 +314,8 @@
 }
 .kd-cascader-placeholder {
   position: absolute;
-  color: #999;
+  font-size: 14px;
+  color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -380,9 +370,6 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-cascader-icon-arrow-focus {
-  color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
-}
 .kd-cascader-icon-clear {
   opacity: 0;
   z-index: 1;
@@ -390,7 +377,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
-  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
 }
 .kd-cascader-icon-clear:hover {
   color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
@@ -412,7 +399,6 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  vertical-align: middle;
   padding: 0 7px;
   overflow: hidden;
   white-space: nowrap;
@@ -420,3 +406,33 @@
   border: 1px solid #ccc;
   color: #212121;
 }
+.kd-cascader-disabled {
+  cursor: not-allowed;
+}
+.kd-cascader-disabled .kd-cascader-picker-label {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-picker-input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-picker-input > input {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled.kd-cascader-multiple {
+  background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+}
+.kd-cascader-disabled .kd-cascader-suffix {
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-cascader-disabled .kd-cascader-tag-describe-content {
+  color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+  border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
+}
+.kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
+.kd-cascader-expand .kd-input-wrapper {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-cascader-multiple:not(.kd-cascader-disabled):hover,
+.kd-cascader-expand {
+  border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}

package/lib/cascader/style/index.less

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

package/lib/cascader/style/token.less

@@ -6,23 +6,25 @@
 @cascader-height: var(~'@{cascader-prefix}-sizing-height', 192px);
 @cascader-menu-min-width: var(~'@{cascader-prefix}-menu-sizing-min-width', 116px);
 @cascader-menu-item-height: var(~'@{cascader-prefix}-menu-item-sizing-height', 32px);
+@cascader-menu-item-label-width: var(~'@{cascader-prefix}-menu-item-label-sizing-width', 72px);
 
 // spacing
 @cascader-menu-padding-vertical: var(~'@{cascader-prefix}-menu-spacing-padding-vertical', 8px);
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-disabled-color-background: var(~'@{cascader-prefix}-color-background-disabled', @color-background-contain-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
-@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
-@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
 @cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
+@cascader-g-color-border-focus: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-tag-disabled-color: var(~'@{cascader-prefix}-tag-disabled-color', #d9d9d9);
+@cascader-placeholder-color: var(~'@{cascader-prefix}-placeholder-color', @color-text-placeholder);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);