@douyinfe/semi-foundation 2.59.0 → 2.60.0-beta.0

package/avatar/avatar.scss

@@ -283,6 +283,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-radius: var(--semi-border-radius-circle);
             line-height:normal;
         }
+        &-shape_circle-extra-small{
+            width:$width-avatar-bottom_slot_circle_extra_small;
+            height:$width-avatar-bottom_slot_circle_extra_small;
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+        }
         &-shape_circle-small{
             width:$width-avatar-bottom_slot_circle_small;
             height:$width-avatar-bottom_slot_circle_small;
@@ -324,6 +329,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-color: $color-avatar-bottom_slot_square-border;
         }
 
+        &-shape_square-extra_small{
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_extra_small-border;
+        }
+
         &-shape_square-small{
             font-size: $font-avatar_bottom_slot-small-fontSize;
             border-width: $width-avatar-bottom_slot_square_small-border;

package/avatar/variables.scss

@@ -50,6 +50,7 @@ $width-avatar_additional-border: 1.5px; // 额外描边尺寸
 $color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
 $spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
 
+$width-avatar-bottom_slot_circle_extra_small: 12px; // extra small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
@@ -58,6 +59,7 @@ $width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部
 $color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
 
 $radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-extra_small-fontSize: 5px; // extra small 底部 slot 文字大小
 $font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
 $font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
 $font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
@@ -79,6 +81,7 @@ $spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 mar
 $spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
 
 $color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_extra_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 

package/form/interface.ts

@@ -36,22 +36,38 @@ export interface setValuesConfig {
     isOverride: boolean
 }
 
-type ExcludeStringNumberKeys<T> = {
-    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K]
-}
-
-type CustomKeys<T> = { [K in keyof T]: string extends K ? never : number extends K ? never : K; } extends { [K in keyof T]: infer U } ? U : never;
-
-type FieldPath<T, K extends CustomKeys<T> = CustomKeys<T>> = K extends string ? T[K] extends Record<string, any> ? `${K}.${FieldPath<T[K], CustomKeys<T[K]>>}` | K : K : never;
+// FieldPath 类型定义，用于生成对象字段的路径字符串
+export type FieldPath<T> = T extends object ? {
+    // 遍历对象的每个键 K
+    [K in keyof T]: T[K] extends object
+        // 如果键 K 对应的值是对象，则生成嵌套路径（递归调用 FieldPath）
+        ? `${string & K}.${FieldPath<T[K]>}` | `${string & K}`
+        // 否则，仅生成当前键的路径
+        : `${string & K}`;
+}[keyof T]
+    : never;
+
+// FieldPathValue 类型定义，用于从路径字符串中推导出实际的类型
+export type FieldPathValue<T, P extends FieldPath<T>> =
+  // 如果路径字符串 P 包含嵌套路径（使用模板字符串类型进行匹配）
+  P extends `${infer K}.${infer Rest}`
+      ? K extends keyof T
+          // 递归解析嵌套路径，逐层深入对象结构
+          ? Rest extends FieldPath<T[K]>
+              ? FieldPathValue<T[K], Rest>
+              : never
+          : never
+      // 如果路径字符串 P 是顶层键
+      : P extends keyof T
+          ? T[P]
+          : never;
 
 // use object replace Record<string, any>, fix issue 933
 export interface BaseFormApi<T extends object = any> {
-// export interface BaseFormApi<T extends object = any> {
     /** get value of field */
-    getValue: <K extends keyof T>(field?: K) => T[K];
+    getValue: <P extends FieldPath<T>>(field?: P) => FieldPathValue<T, P>;
     /** set value of field */
-    setValue: <K extends CustomKeys<T>>(field: FieldPath<T, K> | FieldPath<K>, newFieldValue: any) => void;
-    // setValue: <K extends keyof T>(field: K, newFieldValue: T[K]) => void;
+    setValue: <K extends FieldPath<T>>(field: K, newFieldValue: any) => void;
     /** get error of field */
     getError: <K extends keyof T>(field: K) => any;
     /** set error of field */

package/input/input.scss

@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
 
     &-small {
         height: $height-input_wrapper_small;
-        @include font-size-header-6;
+        @include font-size-regular;
         line-height: $height-input_small;
     }
 

package/lib/cjs/avatar/avatar.css

@@ -236,6 +236,11 @@
   border-radius: var(--semi-border-radius-circle);
   line-height: normal;
 }
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-small {
+  width: 12px;
+  height: 12px;
+  font-size: 5px;
+}
 .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
   width: 12px;
   height: 12px;
@@ -272,6 +277,10 @@
   border-style: solid;
   border-color: var(--semi-color-bg-0);
 }
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra_small {
+  font-size: 5px;
+  border-width: 2px;
+}
 .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
   font-size: 5px;
   border-width: 2px;

package/lib/cjs/avatar/avatar.scss

@@ -283,6 +283,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-radius: var(--semi-border-radius-circle);
             line-height:normal;
         }
+        &-shape_circle-extra-small{
+            width:$width-avatar-bottom_slot_circle_extra_small;
+            height:$width-avatar-bottom_slot_circle_extra_small;
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+        }
         &-shape_circle-small{
             width:$width-avatar-bottom_slot_circle_small;
             height:$width-avatar-bottom_slot_circle_small;
@@ -324,6 +329,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-color: $color-avatar-bottom_slot_square-border;
         }
 
+        &-shape_square-extra_small{
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_extra_small-border;
+        }
+
         &-shape_square-small{
             font-size: $font-avatar_bottom_slot-small-fontSize;
             border-width: $width-avatar-bottom_slot_square_small-border;

package/lib/cjs/avatar/variables.scss

@@ -50,6 +50,7 @@ $width-avatar_additional-border: 1.5px; // 额外描边尺寸
 $color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
 $spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
 
+$width-avatar-bottom_slot_circle_extra_small: 12px; // extra small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
@@ -58,6 +59,7 @@ $width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部
 $color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
 
 $radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-extra_small-fontSize: 5px; // extra small 底部 slot 文字大小
 $font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
 $font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
 $font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
@@ -79,6 +81,7 @@ $spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 mar
 $spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
 
 $color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_extra_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 

package/lib/cjs/form/interface.d.ts

@@ -31,17 +31,15 @@ export interface FormState<T extends Record<string, any> = any> {
 export interface setValuesConfig {
     isOverride: boolean;
 }
-type CustomKeys<T> = {
-    [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends {
-    [K in keyof T]: infer U;
-} ? U : never;
-type FieldPath<T, K extends CustomKeys<T> = CustomKeys<T>> = K extends string ? T[K] extends Record<string, any> ? `${K}.${FieldPath<T[K], CustomKeys<T[K]>>}` | K : K : never;
+export type FieldPath<T> = T extends object ? {
+    [K in keyof T]: T[K] extends object ? `${string & K}.${FieldPath<T[K]>}` | `${string & K}` : `${string & K}`;
+}[keyof T] : never;
+export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends FieldPath<T[K]> ? FieldPathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */
-    getValue: <K extends keyof T>(field?: K) => T[K];
+    getValue: <P extends FieldPath<T>>(field?: P) => FieldPathValue<T, P>;
     /** set value of field */
-    setValue: <K extends CustomKeys<T>>(field: FieldPath<T, K> | FieldPath<K>, newFieldValue: any) => void;
+    setValue: <K extends FieldPath<T>>(field: K, newFieldValue: any) => void;
     /** get error of field */
     getError: <K extends keyof T>(field: K) => any;
     /** set error of field */
@@ -128,4 +126,3 @@ export interface FormUpdaterContextType {
     getArrayField: (arrayField: string) => ArrayFieldStaff;
     updateArrayField: (arrayField: string, updateValue: any) => void;
 }
-export {};

package/lib/cjs/input/input.css

@@ -50,8 +50,8 @@
 }
 .semi-input-wrapper-small {
   height: 24px;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 14px;
+  line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
 }

package/lib/cjs/input/input.scss

@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
 
     &-small {
         height: $height-input_wrapper_small;
-        @include font-size-header-6;
+        @include font-size-regular;
         line-height: $height-input_small;
     }
 

package/lib/cjs/spin/spin.css

@@ -24,6 +24,7 @@
   color: var(--semi-color-primary);
 }
 .semi-spin-wrapper > svg {
+  display: inline;
   animation: 600ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
   vertical-align: top;

package/lib/cjs/spin/spin.scss

@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;

package/lib/cjs/tabs/tabs.css

@@ -201,18 +201,18 @@
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
   color: var(--semi-color-primary);
   padding: 8px;
   border: 0px solid transparent;
   background-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
   background-color: var(--semi-color-fill-0);
   color: var(--semi-color-primary);
   border-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
   background-color: var(--semi-color-fill-1);
   color: var(--semi-color-primary);
   border-color: transparent;
@@ -220,18 +220,18 @@
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
   margin-left: 4px;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
   color: var(--semi-color-primary);
   padding: 8px;
   border: 0px solid transparent;
   background-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
   background-color: var(--semi-color-fill-0);
   color: var(--semi-color-primary);
   border-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
   background-color: var(--semi-color-fill-1);
   color: var(--semi-color-primary);
   border-color: transparent;

package/lib/cjs/tabs/tabs.scss

@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;

package/lib/cjs/toast/toast.css

@@ -16,6 +16,7 @@
 .semi-toast-wrapper .semi-toast-innerWrapper {
   width: fit-content;
   height: fit-content;
+  text-align: center;
 }
 .semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
   perspective: unset;

package/lib/cjs/toast/toast.scss

@@ -18,6 +18,7 @@ $icon: #{$prefix}-toast-icon;
         .#{$module}-innerWrapper{
             width: fit-content;
             height: fit-content;
+            text-align: center;
             &-hover{
                 .#{$module}-zero-height-wrapper{
                     perspective: unset;

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

@@ -136,7 +136,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
-    _registerClickOutsideHandler: (e: any) => void;
+    _registerClickOutsideHandler: () => void;
     clearInputValue: () => void;
     _notifyFocus(e: any): void;
     handleTriggerFocus(e: any): void;

package/lib/cjs/treeSelect/foundation.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class TreeSelectFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-    this._registerClickOutsideHandler = e => {
+    this._registerClickOutsideHandler = () => {
       this._adapter.registerClickOutsideHandler(e => {
         this.handlerTriggerBlur(e);
         this.close(e);
@@ -41,11 +41,13 @@ class TreeSelectFoundation extends _foundation.default {
     const triggerSearch = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
     const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
     this._setDropdownWidth();
-    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+    const able = !this._isDisabled();
+    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
     if (isOpen) {
       this.open();
+      this._registerClickOutsideHandler();
     }
-    if (triggerSearchAutoFocus) {
+    if (triggerSearchAutoFocus && able) {
       this.handleTriggerFocus(null);
     }
   }
@@ -277,7 +279,7 @@ class TreeSelectFoundation extends _foundation.default {
   handleTriggerFocus(e) {
     this._adapter.updateIsFocus(true);
     this._notifyFocus(e);
-    this._registerClickOutsideHandler(e);
+    this._registerClickOutsideHandler();
   }
   // Scenes that may trigger blur
   //  1、clickOutSide
@@ -287,6 +289,10 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.notifyBlur(e);
   }
   handlerTriggerBlur(e) {
+    const isFocus = this.getState('isFocus');
+    if (!isFocus) {
+      return;
+    }
     this._adapter.updateIsFocus(false);
     this._notifyBlur(e);
     this._adapter.unregisterClickOutsideHandler();

package/lib/es/avatar/avatar.css

@@ -236,6 +236,11 @@
   border-radius: var(--semi-border-radius-circle);
   line-height: normal;
 }
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-small {
+  width: 12px;
+  height: 12px;
+  font-size: 5px;
+}
 .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
   width: 12px;
   height: 12px;
@@ -272,6 +277,10 @@
   border-style: solid;
   border-color: var(--semi-color-bg-0);
 }
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra_small {
+  font-size: 5px;
+  border-width: 2px;
+}
 .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
   font-size: 5px;
   border-width: 2px;

package/lib/es/avatar/avatar.scss

@@ -283,6 +283,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-radius: var(--semi-border-radius-circle);
             line-height:normal;
         }
+        &-shape_circle-extra-small{
+            width:$width-avatar-bottom_slot_circle_extra_small;
+            height:$width-avatar-bottom_slot_circle_extra_small;
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+        }
         &-shape_circle-small{
             width:$width-avatar-bottom_slot_circle_small;
             height:$width-avatar-bottom_slot_circle_small;
@@ -324,6 +329,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-color: $color-avatar-bottom_slot_square-border;
         }
 
+        &-shape_square-extra_small{
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_extra_small-border;
+        }
+
         &-shape_square-small{
             font-size: $font-avatar_bottom_slot-small-fontSize;
             border-width: $width-avatar-bottom_slot_square_small-border;

package/lib/es/avatar/variables.scss

@@ -50,6 +50,7 @@ $width-avatar_additional-border: 1.5px; // 额外描边尺寸
 $color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
 $spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
 
+$width-avatar-bottom_slot_circle_extra_small: 12px; // extra small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
@@ -58,6 +59,7 @@ $width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部
 $color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
 
 $radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-extra_small-fontSize: 5px; // extra small 底部 slot 文字大小
 $font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
 $font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
 $font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
@@ -79,6 +81,7 @@ $spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 mar
 $spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
 
 $color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_extra_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 

package/lib/es/form/interface.d.ts

@@ -31,17 +31,15 @@ export interface FormState<T extends Record<string, any> = any> {
 export interface setValuesConfig {
     isOverride: boolean;
 }
-type CustomKeys<T> = {
-    [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends {
-    [K in keyof T]: infer U;
-} ? U : never;
-type FieldPath<T, K extends CustomKeys<T> = CustomKeys<T>> = K extends string ? T[K] extends Record<string, any> ? `${K}.${FieldPath<T[K], CustomKeys<T[K]>>}` | K : K : never;
+export type FieldPath<T> = T extends object ? {
+    [K in keyof T]: T[K] extends object ? `${string & K}.${FieldPath<T[K]>}` | `${string & K}` : `${string & K}`;
+}[keyof T] : never;
+export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends FieldPath<T[K]> ? FieldPathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */
-    getValue: <K extends keyof T>(field?: K) => T[K];
+    getValue: <P extends FieldPath<T>>(field?: P) => FieldPathValue<T, P>;
     /** set value of field */
-    setValue: <K extends CustomKeys<T>>(field: FieldPath<T, K> | FieldPath<K>, newFieldValue: any) => void;
+    setValue: <K extends FieldPath<T>>(field: K, newFieldValue: any) => void;
     /** get error of field */
     getError: <K extends keyof T>(field: K) => any;
     /** set error of field */
@@ -128,4 +126,3 @@ export interface FormUpdaterContextType {
     getArrayField: (arrayField: string) => ArrayFieldStaff;
     updateArrayField: (arrayField: string, updateValue: any) => void;
 }
-export {};

package/lib/es/input/input.css

@@ -50,8 +50,8 @@
 }
 .semi-input-wrapper-small {
   height: 24px;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 14px;
+  line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
 }

package/lib/es/input/input.scss

@@ -61,7 +61,7 @@ $module: #{$prefix}-input;
 
     &-small {
         height: $height-input_wrapper_small;
-        @include font-size-header-6;
+        @include font-size-regular;
         line-height: $height-input_small;
     }
 

package/lib/es/spin/spin.css

@@ -24,6 +24,7 @@
   color: var(--semi-color-primary);
 }
 .semi-spin-wrapper > svg {
+  display: inline;
   animation: 600ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
   vertical-align: top;

package/lib/es/spin/spin.scss

@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;

package/lib/es/tabs/tabs.css

@@ -201,18 +201,18 @@
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
   margin-right: 4px;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
   color: var(--semi-color-primary);
   padding: 8px;
   border: 0px solid transparent;
   background-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
   background-color: var(--semi-color-fill-0);
   color: var(--semi-color-primary);
   border-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
   background-color: var(--semi-color-fill-1);
   color: var(--semi-color-primary);
   border-color: transparent;
@@ -220,18 +220,18 @@
 .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
   margin-left: 4px;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
   color: var(--semi-color-primary);
   padding: 8px;
   border: 0px solid transparent;
   background-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
   background-color: var(--semi-color-fill-0);
   color: var(--semi-color-primary);
   border-color: transparent;
 }
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active {
+.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
   background-color: var(--semi-color-fill-1);
   color: var(--semi-color-primary);
   border-color: transparent;

package/lib/es/tabs/tabs.scss

@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;

package/lib/es/toast/toast.css

@@ -16,6 +16,7 @@
 .semi-toast-wrapper .semi-toast-innerWrapper {
   width: fit-content;
   height: fit-content;
+  text-align: center;
 }
 .semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
   perspective: unset;

package/lib/es/toast/toast.scss

@@ -18,6 +18,7 @@ $icon: #{$prefix}-toast-icon;
         .#{$module}-innerWrapper{
             width: fit-content;
             height: fit-content;
+            text-align: center;
             &-hover{
                 .#{$module}-zero-height-wrapper{
                     perspective: unset;

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

@@ -136,7 +136,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
-    _registerClickOutsideHandler: (e: any) => void;
+    _registerClickOutsideHandler: () => void;
     clearInputValue: () => void;
     _notifyFocus(e: any): void;
     handleTriggerFocus(e: any): void;

package/lib/es/treeSelect/foundation.js

@@ -12,7 +12,7 @@ import isEnterPress from '../utils/isEnterPress';
 export default class TreeSelectFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-    this._registerClickOutsideHandler = e => {
+    this._registerClickOutsideHandler = () => {
       this._adapter.registerClickOutsideHandler(e => {
         this.handlerTriggerBlur(e);
         this.close(e);
@@ -34,11 +34,13 @@ export default class TreeSelectFoundation extends BaseFoundation {
     const triggerSearch = searchPosition === strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
     const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
     this._setDropdownWidth();
-    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+    const able = !this._isDisabled();
+    const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
     if (isOpen) {
       this.open();
+      this._registerClickOutsideHandler();
     }
-    if (triggerSearchAutoFocus) {
+    if (triggerSearchAutoFocus && able) {
       this.handleTriggerFocus(null);
     }
   }
@@ -270,7 +272,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
   handleTriggerFocus(e) {
     this._adapter.updateIsFocus(true);
     this._notifyFocus(e);
-    this._registerClickOutsideHandler(e);
+    this._registerClickOutsideHandler();
   }
   // Scenes that may trigger blur
   //  1、clickOutSide
@@ -280,6 +282,10 @@ export default class TreeSelectFoundation extends BaseFoundation {
     this._adapter.notifyBlur(e);
   }
   handlerTriggerBlur(e) {
+    const isFocus = this.getState('isFocus');
+    if (!isFocus) {
+      return;
+    }
     this._adapter.updateIsFocus(false);
     this._notifyBlur(e);
     this._adapter.unregisterClickOutsideHandler();

package/package.json

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

package/spin/spin.scss

@@ -27,6 +27,7 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;

package/tabs/tabs.scss

@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
@@ -285,7 +285,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[aria-disabled=false] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;

package/toast/toast.scss

@@ -18,6 +18,7 @@ $icon: #{$prefix}-toast-icon;
         .#{$module}-innerWrapper{
             width: fit-content;
             height: fit-content;
+            text-align: center;
             &-hover{
                 .#{$module}-zero-height-wrapper{
                     perspective: unset;

package/treeSelect/foundation.ts

@@ -215,11 +215,13 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const triggerSearch = searchPosition === strings.SEARCH_POSITION_TRIGGER && filterTreeNode;
         const triggerSearchAutoFocus = searchAutoFocus && triggerSearch;
         this._setDropdownWidth();
-        const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && !this._isDisabled();
+        const able = !this._isDisabled();
+        const isOpen = (this.getProp('defaultOpen') || triggerSearchAutoFocus) && able;
         if (isOpen) {
             this.open();
+            this._registerClickOutsideHandler();
         }
-        if (triggerSearchAutoFocus) {
+        if (triggerSearchAutoFocus && able) {
             this.handleTriggerFocus(null);
         }
     }
@@ -429,7 +431,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
-    _registerClickOutsideHandler = (e) => {
+    _registerClickOutsideHandler = () => {
         this._adapter.registerClickOutsideHandler(e => {
             this.handlerTriggerBlur(e);
             this.close(e);
@@ -450,7 +452,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     handleTriggerFocus(e: any) {
         this._adapter.updateIsFocus(true);
         this._notifyFocus(e);
-        this._registerClickOutsideHandler(e);
+        this._registerClickOutsideHandler();
     }
 
     // Scenes that may trigger blur
@@ -462,6 +464,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     handlerTriggerBlur(e) {
+        const isFocus = this.getState('isFocus');
+        if (!isFocus) {
+            return;
+        }
         this._adapter.updateIsFocus(false);
         this._notifyBlur(e);
         this._adapter.unregisterClickOutsideHandler();