@douyinfe/semi-foundation 2.46.1 → 2.47.0-beta.0

package/lib/cjs/typography/typography.scss

@@ -53,6 +53,10 @@ $module: #{$prefix}-typography;
 
     &-small {
         @include font-size-small;
+        font-weight: $font-typography_smallText-regular-fontWeight;
+        &.#{$module}-paragraph{
+            font-weight: $font-typography_smallParagraph-regular-fontWeight;
+        }
     }
 
     code {
@@ -351,6 +355,7 @@ h6.#{$module},
 p.#{$module}-extended,
 .#{$module}-paragraph.#{$module}-extended {
     line-height: $font-typography_paragraph_extended-lineHeight;
+    font-weight: $font-typography_normalParagraph-regular-fontWeight;
 }
 
 @import "./rtl.scss";

package/lib/cjs/typography/variables.scss

@@ -26,6 +26,10 @@ $font-typography_title-fontWeight: $font-weight-bold; // 标题文本字重
 $font-typography_link-fontWeight: $font-weight-bold; // 链接文本字重
 $font-typography_strong-fontWeight: $font-weight-bold; // 强调文本字重
 $font-typography_paragraph_extended-lineHeight: 24px; // 宽松行距段落文本行高
+$font-typography_normalText-regular-fontWeight: $font-weight-regular; // normal text 字重 - 正常
+$font-typography_smallText-regular-fontWeight: $font-weight-regular; // small text 字重 - 正常
+$font-typography_normalParagraph-regular-fontWeight: $font-weight-regular; // normal paragraph 字重 - 正常
+$font-typography_smallParagraph-regular-fontWeight: $font-weight-regular; // small paragraph 字重 - 正常
 
 $font-typography_title1-fontWeight: $font-typography_title-fontWeight; // 一级标题文本字重
 $font-typography_title2-fontWeight: $font-typography_title-fontWeight; // 二级标题文本字重

package/lib/cjs/utils/array.d.ts

@@ -11,12 +11,12 @@
  * => ['b', 'b']
  */
 export declare function pullAll(arrayA: any[], arrayB: any[]): any[];
-type CompareFn<T> = (a: T, b: T) => number;
+type CompareFn<T> = (a: T, b: T, sortOrder: 'ascend' | 'descend') => number;
 /**
  * Adapt the descending order
  * @param {Function} fn
  * @param {String} order
  * @returns
  */
-export declare function withOrderSort<T = any>(fn: CompareFn<T>, order?: string): CompareFn<T>;
+export declare function withOrderSort<T = any>(fn: CompareFn<T>, order?: 'ascend' | 'descend'): (a: T, b: T) => number;
 export {};

package/lib/cjs/utils/array.js

@@ -38,11 +38,11 @@ function withOrderSort(fn) {
   switch (order) {
     case 'descend':
       return (a, b) => {
-        const result = Number(fn(a, b));
+        const result = Number(fn(a, b, order));
         return result !== 0 ? -result : result;
       };
     case 'ascend':
     default:
-      return fn;
+      return (a, b) => fn(a, b, order);
   }
 }

package/lib/es/button/button.css

@@ -52,6 +52,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-danger-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-danger-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
 }
@@ -70,6 +76,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-warning-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-warning-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
 }
@@ -88,6 +100,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-tertiary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-tertiary-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
 }
@@ -103,6 +121,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-primary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-primary-disabled.semi-button-light {
+  background: var(--semi-color-fill-0);
+}
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
 }
@@ -119,6 +143,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-secondary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-secondary-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);
 }
@@ -130,12 +160,10 @@
 }
 .semi-button-disabled {
   color: var(--semi-color-disabled-text);
-  background-color: var(--semi-color-disabled-bg);
   cursor: not-allowed;
 }
 .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
   color: var(--semi-color-disabled-text);
-  background-color: var(--semi-color-disabled-bg);
 }
 .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
   color: var(--semi-color-disabled-text);

package/lib/es/button/button.scss

@@ -39,74 +39,117 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
-      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
-      transform: scale($transform-scale-button_danger);
+        transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+        border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+        transform: scale($transform-scale-button_danger);
 
+        &-disabled {
+            background-color: $color-button_disabled_danger-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_danger-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
+
         &:active {
             background-color: $color-button_danger-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_danger_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
+
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
-      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
-      transform:scale($transform_scale-button_warning);
+        transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+        border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+        transform: scale($transform_scale-button_warning);
+
+        &-disabled {
+            background-color: $color-button_disabled_warning-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_warning-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
+
         &:active {
             background-color: $color-button_warning-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_warning_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
+
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
-      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
-      transform:scale($transform_scale_button_tertiary);
+        transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+        border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+        transform: scale($transform_scale_button_tertiary);
+
+        &-disabled {
+            background-color: $color-button_disabled_tertiary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_tertiary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_tertiary-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_tertiary_solid-text-default;
         }
     }
+
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
         transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
         border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
-      transform:scale($transform_scale-button_primary);
+        transform: scale($transform_scale-button_primary);
+
+        &-disabled {
+            background-color: $color-button_disabled_primary-bg-default;
+
+            &.#{$module}-light {
+                background: $color-button_disabled_light_primary-bg-default;
+            }
+        }
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):active {
             background-color: $color-button_primary-bg-active;
         }
@@ -116,17 +159,27 @@ $module: #{$prefix}-button;
             color: $color-button_primary_borderless-text-default;
         }
     }
+
     &-secondary {
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
-      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
-      transform:scale($transform_scale-button_secondary);
+        transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+        border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+        transform: scale($transform_scale-button_secondary);
+
+        &-disabled {
+            background-color: $color-button_disabled_secondary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_secondary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_secondary-bg-active;
         }
@@ -136,13 +189,14 @@ $module: #{$prefix}-button;
             color: $color-button_secondary_borderless-text-default;
         }
     }
+
     &-disabled {
         color: $color-button_disabled_solid-text-default;
-        background-color: $color-button_disabled-bg-default;
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
-            background-color: $color-button_disabled-bg-hover;
         }
+
         cursor: not-allowed;
 
         &.#{$module}-light,
@@ -150,16 +204,18 @@ $module: #{$prefix}-button;
             color: $color-button_disabled-text-default;
         }
     }
+
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
-      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
-      transform:scale($transform_scale-button_borderless);
+        transition: background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+        transform: scale($transform_scale-button_borderless);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
             border: $width-button_borderless-border $color-button_borderless-border-active solid;
@@ -169,19 +225,21 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
-      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
-      transform:scale($transform_scale-button_light);
+        transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+        border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+        transform: scale($transform_scale-button_light);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
             border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
+
     &-size-small {
         height: $height-button_small;
         padding-top: $spacing-button_small-paddingTop;
@@ -189,6 +247,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_small-paddingLeft;
         padding-right: $spacing-button_small-paddingRight;
     }
+
     &-size-large {
         height: $height-button_large;
         padding-top: $spacing-button_large-paddingTop;
@@ -196,6 +255,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_large-paddingLeft;
         padding-right: $spacing-button_large-paddingRight;
     }
+
     &-block {
         width: 100%;
     }
@@ -259,6 +319,7 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
+
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
@@ -273,24 +334,31 @@ $module: #{$prefix}-button;
             &-primary {
                 background-color: $color-button_primary-bg-default;
             }
+
             &-secondary {
                 background-color: $color-button_secondary-bg-default;
             }
+
             &-tertiary {
                 background-color: $color-button_tertiary-bg-default;
             }
+
             &-warning {
                 background-color: $color-button_warning-bg-default;
             }
+
             &-danger {
                 background-color: $color-button_danger-bg-default;
             }
+
             &-disabled {
                 background-color: $color-button_disabled-bg-default;
             }
+
             &-light {
                 background-color: $color-button_light-bg-default;
             }
+
             &-borderless {
                 background-color: transparent;
             }

package/lib/es/button/variables.scss

@@ -82,6 +82,13 @@ $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
 $color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
+$color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
+$color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
+$color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
+$color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
+$color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
+
+
 
 // light
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
@@ -92,6 +99,12 @@ $color-button_light-border-hover: $color-button_light-border-default; // 浅色
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
 $width-button_light-border: 0; // 浅色按钮描边宽度
 
+$color-button_disabled_light_primary-bg-default: $color-button_light-bg-default; // 禁用 light primary 按钮背景颜色
+$color-button_disabled_light_secondary-bg-default: $color-button_light-bg-default; // 禁用 light secondary 按钮背景颜色
+$color-button_disabled_light_danger-bg-default: $color-button_light-bg-default; // 禁用 light danger 按钮背景颜色
+$color-button_disabled_light_warning-bg-default: $color-button_light-bg-default; // 禁用 light warning 按钮背景颜色
+$color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
+
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮

package/lib/es/cascader/foundation.d.ts

@@ -239,10 +239,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      * @param {boolean} curCheckedStatus checked status of node
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
-        checkedKeys: Set<string>; /**
-         * When changeOnSelect is turned on, or the target option is a leaf option,
-         * the option is considered to be selected, even if the option is disabled
-         */
+        checkedKeys: Set<string>;
         halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;

package/lib/es/datePicker/inputFoundation.js

@@ -106,25 +106,34 @@ export default class InputFoundation extends BaseFoundation {
     } = options;
     const {
       format,
-      type
+      type,
+      rangeSeparator
     } = this._adapter.getProps();
     const insetFormatToken = getInsetInputFormatToken({
       type,
       format
     });
-    let newInsetInputValue = _set(_cloneDeep(insetInputValue), valuePath, value);
-    newInsetInputValue = this._autoFillTimeToInsetInputValue({
-      insetInputValue: newInsetInputValue,
+    const newInsetInputValue = _set(_cloneDeep(insetInputValue), valuePath, value);
+    const insetInputStr = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+    const parsedInsetInputValueFromInputStr = getInsetInputValueFromInsetInputStr({
+      inputValue: insetInputStr,
+      type,
+      rangeSeparator
+    });
+    const filledTimeInsetInputValue = this._autoFillTimeToInsetInputValue({
+      insetInputValue: parsedInsetInputValueFromInputStr,
       valuePath,
       format: insetFormatToken
     });
-    const newInputValue = this.concatInsetInputValue({
-      insetInputValue: newInsetInputValue
+    const finalInsetInputStr = this.concatInsetInputValue({
+      insetInputValue: filledTimeInsetInputValue
     });
     this._adapter.notifyInsetInputChange({
-      insetInputValue: newInsetInputValue,
+      insetInputValue: filledTimeInsetInputValue,
       format: insetFormatToken,
-      insetInputStr: newInputValue
+      insetInputStr: finalInsetInputStr
     });
   }
   _autoFillTimeToInsetInputValue(options) {

package/lib/es/table/foundation.d.ts

@@ -327,7 +327,7 @@ export interface BaseSorterInfo<RecordType> {
     sorter?: BaseSorter<RecordType>;
 }
 export type BaseSortOrder = boolean | ArrayElement<typeof strings.SORT_DIRECTIONS>;
-export type BaseSorter<RecordType> = boolean | ((a?: RecordType, b?: RecordType) => number);
+export type BaseSorter<RecordType> = boolean | ((a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number);
 export interface BaseChangeInfoFilter<RecordType> {
     dataIndex?: string;
     value?: any;

package/lib/es/tree/foundation.d.ts

@@ -3,6 +3,7 @@
  * https://github.com/react-component/tree
  */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export { KeyMapProps } from './treeUtil';
 export interface BasicTreeNodeProps {
     [x: string]: any;
     expanded?: boolean;
@@ -24,7 +25,7 @@ export interface BasicTreeNodeProps {
 }
 export interface BasicTreeNodeData {
     [x: string]: any;
-    key: string;
+    key?: string;
     value?: number | string;
     label?: any;
     icon?: any;

package/lib/es/tree/foundation.js

@@ -121,7 +121,8 @@ export default class TreeFoundation extends BaseFoundation {
     } = this.getStates();
     const {
       leafOnly,
-      checkRelation
+      checkRelation,
+      keyMaps
     } = this.getProps();
     let value;
     let keyList = [];
@@ -133,12 +134,15 @@ export default class TreeFoundation extends BaseFoundation {
     if (this.getProp('onChangeWithObject')) {
       value = keyList.map(itemKey => keyEntities[itemKey].data);
     } else {
-      value = getValueOrKey(keyList.map(itemKey => keyEntities[itemKey].data));
+      value = getValueOrKey(keyList.map(itemKey => keyEntities[itemKey].data), keyMaps);
     }
     this._adapter.notifyChange(value);
   }
   notifyChange(key, e) {
     const isMultiple = this._isMultiple();
+    const {
+      keyMaps
+    } = this.getProps();
     const {
       keyEntities
     } = this.getStates();
@@ -154,7 +158,7 @@ export default class TreeFoundation extends BaseFoundation {
         const {
           data
         } = _get(keyEntities, key);
-        value = getValueOrKey(data);
+        value = getValueOrKey(data, keyMaps);
       }
       this._adapter.notifyChange(value);
     }
@@ -171,8 +175,10 @@ export default class TreeFoundation extends BaseFoundation {
     const {
       showFilteredOnly,
       filterTreeNode,
-      treeNodeFilterProp
+      treeNodeFilterProp,
+      keyMaps
     } = this.getProps();
+    const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : _get(keyMaps, 'label', 'label');
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
     let flattenNodes = [];
@@ -180,13 +186,13 @@ export default class TreeFoundation extends BaseFoundation {
     if (!sugInput) {
       expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
       expandedOptsKeys.forEach(item => expandedKeys.add(item));
-      flattenNodes = flattenTreeData(treeData, expandedKeys);
+      flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps);
     } else {
-      filteredOptsKeys = Object.values(keyEntities).filter(item => filter(sugInput, item.data, filterTreeNode, treeNodeFilterProp)).map(item => item.key);
+      filteredOptsKeys = Object.values(keyEntities).filter(item => filter(sugInput, item.data, filterTreeNode, realFilterProp)).map(item => item.key);
       expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
-      flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+      flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
     }
     const newFilteredExpandedKeys = new Set(expandedOptsKeys);
     this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
@@ -354,6 +360,9 @@ export default class TreeFoundation extends BaseFoundation {
       filteredShownKeys,
       keyEntities
     } = this.getStates();
+    const {
+      keyMaps
+    } = this.getProps();
     const isSearching = Boolean(inputValue);
     const showFilteredOnly = this._showFilteredOnly();
     const expandedStateKey = isSearching ? 'filteredExpandedKeys' : 'expandedKeys';
@@ -372,7 +381,7 @@ export default class TreeFoundation extends BaseFoundation {
     }
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
     if (!this._isExpandControlled()) {
-      const flattenNodes = flattenTreeData(treeData, expandedKeys, isSearching && showFilteredOnly && filteredShownKeys);
+      const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
       const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
       const newState = {
         [expandedStateKey]: expandedKeys,

package/lib/es/tree/treeUtil.d.ts

@@ -14,6 +14,15 @@ export interface NodeData {
     value: any;
     children?: any;
 }
+export interface KeyMapProps {
+    key?: string;
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+    isLeaf?: string;
+    icon?: string;
+}
 /**
  * Flat nest tree data into flatten list. This is used for virtual list render.
  * @param treeNodeList Origin data node list
@@ -21,13 +30,13 @@ export interface NodeData {
  * @param filteredShownKeys
  * need expanded keys, provides `true` means all expanded
  */
-export declare function flattenTreeData(treeNodeList: any[], expandedKeys: Set<string>, filteredShownKeys?: boolean | Set<any>): any[];
+export declare function flattenTreeData(treeNodeList: any[], expandedKeys: Set<string>, keyMaps: KeyMapProps, filteredShownKeys?: boolean | Set<any>): any[];
 export declare function convertJsonToData(treeJson: TreeDataSimpleJson): any[];
 /**
  * Traverse all the data by `treeData`.
  */
-export declare function traverseDataNodes(treeNodes: any[], callback: (data: any) => void): void;
-export declare function convertDataToEntities(dataNodes: any[]): {
+export declare function traverseDataNodes(treeNodes: any[], callback: (data: any) => void, keyMaps: KeyMapProps): void;
+export declare function convertDataToEntities(dataNodes: any[], keyMaps?: KeyMapProps): {
     posEntities: {};
     keyEntities: {};
     valueEntities: {};
@@ -71,10 +80,10 @@ export declare function filterTreeData(info: any): {
     filteredExpandedKeys: Set<any>;
     filteredShownKeys: Set<any>;
 };
-export declare function getValueOrKey(data: any): any;
-export declare function normalizeValue(value: any, withObject: boolean): any;
+export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
+export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
-export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
+export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
 export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;