@douyinfe/semi-foundation 2.55.4 → 2.56.0-beta.0

package/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/cjs/form/form.css

@@ -109,6 +109,12 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-vertical-card {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
   display: flex;
   align-items: center;
@@ -131,7 +137,9 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-vertical-card {
   padding-top: 0;
   padding-bottom: 0;
 }

package/lib/cjs/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/cjs/radio/radio.css

@@ -242,6 +242,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin-top: 0;
   z-index: -1;
   opacity: 0;
 }

package/lib/cjs/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/lib/cjs/select/select.css

@@ -383,7 +383,13 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
+  height: 24px;
 }
 .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
   height: 100%;
@@ -399,6 +405,22 @@
   padding-right: 0;
 }
 
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
+  height: 24px;
+}
+
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
+  height: 20px;
+}
+
 .semi-select-option-list-wrapper {
   padding-top: 4px;
   padding-bottom: 4px;

package/lib/cjs/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/lib/cjs/select/variables.scss

@@ -65,7 +65,12 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中

package/lib/cjs/slider/foundation.js

@@ -458,7 +458,8 @@ class SliderFoundation extends _foundation.default {
     this.onHandleLeave = () => {
       // this._adapter.setEventDefault(e);
       const disabled = this._adapter.getState('disabled');
-      if (!disabled && this.getStates()['focusPos'] === "") {
+      const isDrag = this._adapter.getState('isDrag');
+      if (!disabled && !isDrag) {
         this._adapter.onHandleLeave();
       }
     };

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

@@ -251,6 +251,11 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     _showFilteredOnly(): any;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     notifyJsonChange(key: string[] | string, e: any): void;
+    constructDataForValue(value: string): {
+        [x: number]: string;
+    };
+    findDataForValue(findValue: string): any;
+    getDataForKeyNotInKeyEntities(value: string): any;
     notifyMultipleChange(key: string[], e: any): void;
     notifyChange(key: string[] | string, e: any): void;
     handleInputChange(sugInput: string): void;

package/lib/cjs/tree/foundation.js

@@ -115,6 +115,45 @@ class TreeFoundation extends _foundation.default {
     const value = (0, _pick2.default)(data, selectedPath);
     this._adapter.notifyChange(value);
   }
+  constructDataForValue(value) {
+    const {
+      keyMaps
+    } = this.getProps();
+    const keyName = (0, _get2.default)(keyMaps, 'key', 'key');
+    const labelName = (0, _get2.default)(keyMaps, 'label', 'label');
+    return {
+      [keyName]: value,
+      [labelName]: value
+    };
+  }
+  findDataForValue(findValue) {
+    const {
+      value,
+      defaultValue,
+      keyMaps
+    } = this.getProps();
+    const realValueName = (0, _get2.default)(keyMaps, 'value', 'value');
+    const realKeyName = (0, _get2.default)(keyMaps, 'key', 'key');
+    let valueArr = [];
+    if (value) {
+      valueArr = Array.isArray(value) ? value : [value];
+    } else if (defaultValue) {
+      valueArr = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return valueArr.find(item => {
+      return item[realValueName] === findValue || item[realKeyName] === findValue;
+    });
+  }
+  getDataForKeyNotInKeyEntities(value) {
+    const {
+      onChangeWithObject
+    } = this.getProps();
+    if (onChangeWithObject) {
+      return this.findDataForValue(value);
+    } else {
+      return this.constructDataForValue(value);
+    }
+  }
   notifyMultipleChange(key, e) {
     const {
       keyEntities
@@ -127,14 +166,15 @@ class TreeFoundation extends _foundation.default {
     let value;
     let keyList = [];
     if (checkRelation === 'related') {
-      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly, true);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
+    const nodes = keyList.map(key => keyEntities[key] ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
     if (this.getProp('onChangeWithObject')) {
-      value = keyList.map(itemKey => keyEntities[itemKey].data);
+      value = nodes;
     } else {
-      value = (0, _treeUtil.getValueOrKey)(keyList.map(itemKey => keyEntities[itemKey].data), keyMaps);
+      value = (0, _treeUtil.getValueOrKey)(nodes, keyMaps);
     }
     this._adapter.notifyChange(value);
   }
@@ -293,7 +333,7 @@ class TreeFoundation extends _foundation.default {
       return this.calcCheckedKeys(eventKey, targetStatus);
     }
     const nonDisabled = descendantKeys.filter(key => !disabledKeys.has(key));
-    const newCheckedKeys = targetStatus ? [...nonDisabled, ...checkedKeys] : (0, _difference2.default)((0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, true), nonDisabled);
+    const newCheckedKeys = targetStatus ? [...nonDisabled, ...checkedKeys] : (0, _difference2.default)((0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, true, true), nonDisabled);
     return (0, _treeUtil.calcCheckedKeys)(newCheckedKeys, keyEntities);
   }
   /*

package/lib/es/form/form.css

@@ -109,6 +109,12 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-vertical-card {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
   display: flex;
   align-items: center;
@@ -131,7 +137,9 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-vertical-card {
   padding-top: 0;
   padding-bottom: 0;
 }

package/lib/es/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/es/radio/radio.css

@@ -242,6 +242,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin-top: 0;
   z-index: -1;
   opacity: 0;
 }

package/lib/es/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/lib/es/select/select.css

@@ -383,7 +383,13 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
+  height: 24px;
 }
 .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
   height: 100%;
@@ -399,6 +405,22 @@
   padding-right: 0;
 }
 
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
+  height: 24px;
+}
+
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
+  height: 20px;
+}
+
 .semi-select-option-list-wrapper {
   padding-top: 4px;
   padding-bottom: 4px;

package/lib/es/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/lib/es/select/variables.scss

@@ -65,7 +65,12 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中

package/lib/es/slider/foundation.js

@@ -451,7 +451,8 @@ export default class SliderFoundation extends BaseFoundation {
     this.onHandleLeave = () => {
       // this._adapter.setEventDefault(e);
       const disabled = this._adapter.getState('disabled');
-      if (!disabled && this.getStates()['focusPos'] === "") {
+      const isDrag = this._adapter.getState('isDrag');
+      if (!disabled && !isDrag) {
         this._adapter.onHandleLeave();
       }
     };

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

@@ -251,6 +251,11 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     _showFilteredOnly(): any;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     notifyJsonChange(key: string[] | string, e: any): void;
+    constructDataForValue(value: string): {
+        [x: number]: string;
+    };
+    findDataForValue(findValue: string): any;
+    getDataForKeyNotInKeyEntities(value: string): any;
     notifyMultipleChange(key: string[], e: any): void;
     notifyChange(key: string[] | string, e: any): void;
     handleInputChange(sugInput: string): void;

package/lib/es/tree/foundation.js

@@ -107,6 +107,45 @@ export default class TreeFoundation extends BaseFoundation {
     const value = _pick(data, selectedPath);
     this._adapter.notifyChange(value);
   }
+  constructDataForValue(value) {
+    const {
+      keyMaps
+    } = this.getProps();
+    const keyName = _get(keyMaps, 'key', 'key');
+    const labelName = _get(keyMaps, 'label', 'label');
+    return {
+      [keyName]: value,
+      [labelName]: value
+    };
+  }
+  findDataForValue(findValue) {
+    const {
+      value,
+      defaultValue,
+      keyMaps
+    } = this.getProps();
+    const realValueName = _get(keyMaps, 'value', 'value');
+    const realKeyName = _get(keyMaps, 'key', 'key');
+    let valueArr = [];
+    if (value) {
+      valueArr = Array.isArray(value) ? value : [value];
+    } else if (defaultValue) {
+      valueArr = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return valueArr.find(item => {
+      return item[realValueName] === findValue || item[realKeyName] === findValue;
+    });
+  }
+  getDataForKeyNotInKeyEntities(value) {
+    const {
+      onChangeWithObject
+    } = this.getProps();
+    if (onChangeWithObject) {
+      return this.findDataForValue(value);
+    } else {
+      return this.constructDataForValue(value);
+    }
+  }
   notifyMultipleChange(key, e) {
     const {
       keyEntities
@@ -119,14 +158,15 @@ export default class TreeFoundation extends BaseFoundation {
     let value;
     let keyList = [];
     if (checkRelation === 'related') {
-      keyList = normalizeKeyList(key, keyEntities, leafOnly);
+      keyList = normalizeKeyList(key, keyEntities, leafOnly, true);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
+    const nodes = keyList.map(key => keyEntities[key] ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
     if (this.getProp('onChangeWithObject')) {
-      value = keyList.map(itemKey => keyEntities[itemKey].data);
+      value = nodes;
     } else {
-      value = getValueOrKey(keyList.map(itemKey => keyEntities[itemKey].data), keyMaps);
+      value = getValueOrKey(nodes, keyMaps);
     }
     this._adapter.notifyChange(value);
   }
@@ -285,7 +325,7 @@ export default class TreeFoundation extends BaseFoundation {
       return this.calcCheckedKeys(eventKey, targetStatus);
     }
     const nonDisabled = descendantKeys.filter(key => !disabledKeys.has(key));
-    const newCheckedKeys = targetStatus ? [...nonDisabled, ...checkedKeys] : _difference(normalizeKeyList([...checkedKeys], keyEntities, true), nonDisabled);
+    const newCheckedKeys = targetStatus ? [...nonDisabled, ...checkedKeys] : _difference(normalizeKeyList([...checkedKeys], keyEntities, true, true), nonDisabled);
     return calcCheckedKeys(newCheckedKeys, keyEntities);
   }
   /*

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.55.4",
+    "version": "2.56.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.55.4",
+        "@douyinfe/semi-animation": "2.56.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "b164af409e92b8165e4355e9d53e011224986f62",
+    "gitHead": "ae4502e3075a19370e9f4ed32fbfb1292acd06c2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/select/variables.scss

@@ -65,7 +65,12 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中

package/slider/foundation.ts

@@ -550,7 +550,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     onHandleLeave = () => {
         // this._adapter.setEventDefault(e);
         const disabled = this._adapter.getState('disabled');
-        if (!disabled && this.getStates()['focusPos'] === "") {
+        const isDrag = this._adapter.getState('isDrag');
+        if (!disabled && !isDrag) {
             this._adapter.onHandleLeave();
         }
     };

package/tree/foundation.ts

@@ -420,20 +420,55 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         this._adapter.notifyChange(value as BasicValue);
     }
 
+    constructDataForValue(value: string) {
+        const { keyMaps } = this.getProps();
+        const keyName = get(keyMaps, 'key', 'key');
+        const labelName = get(keyMaps, 'label', 'label');
+        return {
+            [keyName]: value,
+            [labelName]: value
+        };    
+    }
+
+    findDataForValue(findValue: string) {
+        const { value, defaultValue, keyMaps } = this.getProps();
+        const realValueName = get(keyMaps, 'value', 'value');
+        const realKeyName = get(keyMaps, 'key', 'key');
+        let valueArr = [];
+        if (value) {
+            valueArr = Array.isArray(value) ? value : [value];
+        } else if (defaultValue) {
+            valueArr = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+        }
+        return valueArr.find(item => {
+            return item[realValueName] === findValue || item[realKeyName] === findValue;
+        });
+    }
+
+    getDataForKeyNotInKeyEntities(value: string) {
+        const { onChangeWithObject } = this.getProps();
+        if (onChangeWithObject) {
+            return this.findDataForValue(value);
+        } else {
+            return this.constructDataForValue(value);
+        }
+    }
+
     notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
         const { leafOnly, checkRelation, keyMaps } = this.getProps();
         let value;
         let keyList = [];
         if (checkRelation === 'related') {
-            keyList = normalizeKeyList(key, keyEntities, leafOnly);
+            keyList = normalizeKeyList(key, keyEntities, leafOnly, true);
         } else if (checkRelation === 'unRelated') {
             keyList = key;
         }
+        const nodes = keyList.map(key => keyEntities[key] ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
         if (this.getProp('onChangeWithObject')) {
-            value = keyList.map((itemKey: string) => keyEntities[itemKey].data);
+            value = nodes;
         } else {
-            value = getValueOrKey(keyList.map((itemKey: string) => keyEntities[itemKey].data), keyMaps);
+            value = getValueOrKey(nodes, keyMaps);
         }
         this._adapter.notifyChange(value);
     }
@@ -585,7 +620,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         const nonDisabled = descendantKeys.filter((key: string) => !disabledKeys.has(key));
         const newCheckedKeys = targetStatus ?
             [...nonDisabled, ...checkedKeys] :
-            difference(normalizeKeyList([...checkedKeys], keyEntities, true), nonDisabled);
+            difference(normalizeKeyList([...checkedKeys], keyEntities, true, true), nonDisabled);
         return calcCheckedKeys(newCheckedKeys, keyEntities);
     }