@douyinfe/semi-foundation 2.5.0 → 2.5.1

package/button/constants.ts

@@ -4,7 +4,7 @@ const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-button`,
 };
 
-const strings: Record<string, any> = {
+const strings = {
     sizes: ['default', 'small', 'large'],
     iconPositions: ['left', 'right'],
     htmlTypes: ['button', 'reset', 'submit'],
@@ -12,7 +12,7 @@ const strings: Record<string, any> = {
     themes: ['solid', 'borderless', 'light'],
     DEFAULT_ICON_SIZE: 'default',
     DEFAULT_ICON_POSITION: 'left',
-};
+} as const;
 
 const numbers = {};
 

package/cascader/cascader.scss

@@ -111,7 +111,7 @@ $module: #{$prefix}-cascader;
         }
 
         &-tag {
-            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginRight $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginLeft;
 
             &:first-child {
                 margin-left: 0;
@@ -120,7 +120,7 @@ $module: #{$prefix}-cascader;
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
-                
+
                 .#{$prefix}-tag-close {
                     color: $color-cascader_input_disabled-text-default;
                     cursor: not-allowed;

package/cascader/variables.scss

@@ -44,7 +44,8 @@ $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
 $spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
-$spacing-cascader_selection_tag-marginX: $spacing-super-tight; // 级联选择触发器多选时标签的水平外边距
+$spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
+$spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距

package/form/form.scss

@@ -8,6 +8,8 @@ $col: #{$form}-col;
 
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
+$buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
 
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -173,6 +174,11 @@ $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} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;

package/form/foundation.ts

@@ -410,7 +410,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState value
-    updateStateValue(field: string, value: any, opts: CallOpts): void {
+    updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -442,7 +442,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
 
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -455,7 +455,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState touched
-    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void {
+    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         ObjectUtil.set(this.data.touched, field, isTouched);
@@ -464,7 +464,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             this._adapter.notifyChange(this.data);
         }
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -477,7 +477,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // update formState error
-    updateStateError(field: string, error: any, opts: CallOpts): void {
+    updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         ObjectUtil.set(this.data.errors, field, error);
@@ -488,7 +488,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
 
         if (!notUpdate) {
-            this._adapter.forceUpdate();
+            this._adapter.forceUpdate(callback);
         }
     }
 
@@ -506,16 +506,18 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                 // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
                 // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
                 // When the user directly calls formA pi.set Value ('peoples', [2,3])
-                this.updateStateValue(field, newValue, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateValue(field, newValue, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
+
                 // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
@@ -528,16 +530,17 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             if (fieldApi) {
                 fieldApi.setError(newError, opts);
             } else {
-                this.updateStateError(field, newError, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateError(field, newError, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
                 }
@@ -549,16 +552,17 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             if (fieldApi) {
                 fieldApi.setTouched(isTouched, opts);
             } else {
-                this.updateStateTouched(field, isTouched, opts);
-                let nestedFields = this._getNestedField(field);
-                if (nestedFields.size) {
-                    nestedFields.forEach(fieldStaff => {
-                        let fieldPath = fieldStaff.field;
-                        let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
-                        fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-                    });
-                }
+                this.updateStateTouched(field, isTouched, opts, () => {
+                    let nestedFields = this._getNestedField(field);
+                    if (nestedFields.size) {
+                        nestedFields.forEach(fieldStaff => {
+                            let fieldPath = fieldStaff.field;
+                            let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
+                            let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+                        });
+                    }
+                });
                 if (this.getArrayField(field)) {
                     this.updateArrayField(field, { updateKey: new Date().valueOf() });
                 }

package/form/interface.ts

@@ -12,7 +12,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
     notifySubmitFail: (errors: Record<string, any>, values: any) => void;
-    forceUpdate: () => void;
+    forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;

package/input/input.scss

@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
         background-color: $color-input_disabled-bg-default;
-
+        // fix issue 670 in safari
+        -webkit-text-fill-color: $color-input_disabled-text-default;
         &:hover {
             background-color: $color-input_disabled-bg-default;
         }

package/lib/cjs/button/constants.d.ts

@@ -1,6 +1,14 @@
 declare const cssClasses: {
     PREFIX: string;
 };
-declare const strings: Record<string, any>;
+declare const strings: {
+    readonly sizes: readonly ["default", "small", "large"];
+    readonly iconPositions: readonly ["left", "right"];
+    readonly htmlTypes: readonly ["button", "reset", "submit"];
+    readonly btnTypes: readonly ["primary", "secondary", "tertiary", "warning", "danger"];
+    readonly themes: readonly ["solid", "borderless", "light"];
+    readonly DEFAULT_ICON_SIZE: "default";
+    readonly DEFAULT_ICON_POSITION: "left";
+};
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/cascader/cascader.css

@@ -95,7 +95,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-cascader-selection-tag {
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
 }
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;

package/lib/cjs/cascader/cascader.scss

@@ -111,7 +111,7 @@ $module: #{$prefix}-cascader;
         }
 
         &-tag {
-            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginRight $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginLeft;
 
             &:first-child {
                 margin-left: 0;
@@ -120,7 +120,7 @@ $module: #{$prefix}-cascader;
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
-                
+
                 .#{$prefix}-tag-close {
                     color: $color-cascader_input_disabled-text-default;
                     cursor: not-allowed;

package/lib/cjs/cascader/variables.scss

@@ -44,7 +44,8 @@ $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
 $spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
-$spacing-cascader_selection_tag-marginX: $spacing-super-tight; // 级联选择触发器多选时标签的水平外边距
+$spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
+$spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距

package/lib/cjs/form/form.css

@@ -111,6 +111,10 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=left] .semi-switch,
 .semi-form-field[x-label-pos=left] .semi-rating {
   vertical-align: middle;

package/lib/cjs/form/form.scss

@@ -8,6 +8,8 @@ $col: #{$form}-col;
 
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
+$buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
 
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -173,6 +174,11 @@ $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} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;

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

@@ -41,11 +41,11 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     setValues(values: any, { isOverride }: {
         isOverride?: boolean;
     }): void;
-    updateStateValue(field: string, value: any, opts: CallOpts): void;
+    updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void;
     getTouched(field?: string): boolean | Record<string, any> | undefined;
-    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void;
+    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void;
     getError(field?: string): any;
-    updateStateError(field: string, error: any, opts: CallOpts): void;
+    updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void;
     getFieldSetterApi(): {
         setValue: (field: string, value: any, opts: CallOpts) => void;
         setError: (field: string, error: any, opts: CallOpts) => void;
@@ -54,9 +54,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     getModifyFormStateApi(): {
         register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
         unRegister: (field: string) => void;
-        updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-        updateStateError: (field: string, error: any, opts: CallOpts) => void;
-        updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
+        updateStateValue: (field: string, value: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateError: (field: string, error: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void) => void;
         getValue: (field: string, opts?: CallOpts) => any;
         getError: (field?: string) => any;
         getTouched: (field?: string) => boolean | Record<string, any>;

package/lib/cjs/form/foundation.js

@@ -514,7 +514,7 @@ class FormFoundation extends _foundation.default {
   } // update formState value
 
 
-  updateStateValue(field, value, opts) {
+  updateStateValue(field, value, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -546,7 +546,7 @@ class FormFoundation extends _foundation.default {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get touched from formState
 
@@ -560,7 +560,7 @@ class FormFoundation extends _foundation.default {
   } // update formState touched
 
 
-  updateStateTouched(field, isTouched, opts) {
+  updateStateTouched(field, isTouched, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.touched, field, isTouched);
@@ -570,7 +570,7 @@ class FormFoundation extends _foundation.default {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get error from formState
 
@@ -584,7 +584,7 @@ class FormFoundation extends _foundation.default {
   } // update formState error
 
 
-  updateStateError(field, error, opts) {
+  updateStateError(field, error, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
@@ -595,7 +595,7 @@ class FormFoundation extends _foundation.default {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // For internal use in the FormApi Operating Field
 
@@ -614,22 +614,21 @@ class FormFoundation extends _foundation.default {
         // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
         // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
         // When the user directly calls formA pi.set Value ('peoples', [2,3])
-        this.updateStateValue(field, newValue, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldVal = ObjectUtil.get((0, _values2.default)(this.data), fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-          });
-        } // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
-
+        this.updateStateValue(field, newValue, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldVal = ObjectUtil.get((0, _values2.default)(this.data), fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+            });
+          }
+        }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -647,21 +646,21 @@ class FormFoundation extends _foundation.default {
       if (fieldApi) {
         fieldApi.setError(newError, opts);
       } else {
-        this.updateStateError(field, newError, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateError(field, newError, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -677,21 +676,21 @@ class FormFoundation extends _foundation.default {
       if (fieldApi) {
         fieldApi.setTouched(isTouched, opts);
       } else {
-        this.updateStateTouched(field, isTouched, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateTouched(field, isTouched, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {

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

@@ -7,7 +7,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
     notifySubmitFail: (errors: Record<string, any>, values: any) => void;
-    forceUpdate: () => void;
+    forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;

package/lib/cjs/input/input.css

@@ -278,6 +278,7 @@
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
+  -webkit-text-fill-color: var(--semi-color-disabled-text);
 }
 .semi-input-wrapper-disabled:hover {
   background-color: var(--semi-color-disabled-fill);

package/lib/cjs/input/input.scss

@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
         background-color: $color-input_disabled-bg-default;
-
+        // fix issue 670 in safari
+        -webkit-text-fill-color: $color-input_disabled-text-default;
         &:hover {
             background-color: $color-input_disabled-bg-default;
         }

package/lib/cjs/table/table.css

@@ -109,7 +109,6 @@
   word-break: break-all;
   word-wrap: break-word;
   position: relative;
-  user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;

package/lib/cjs/table/table.scss

@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
                 word-break: break-all;
                 word-wrap: break-word;
                 position: relative;
-                user-select: none;
 
                 &.#{$module}-cell-fixed {
 
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-    
+
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
-    
+
                             &::before {
                                 background-color: $color-table_body-bg-hover;
                                 content: "";
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
-            vertical-align: bottom; 
+            vertical-align: bottom;
         }
 
         &-disabled {

package/lib/es/button/constants.d.ts

@@ -1,6 +1,14 @@
 declare const cssClasses: {
     PREFIX: string;
 };
-declare const strings: Record<string, any>;
+declare const strings: {
+    readonly sizes: readonly ["default", "small", "large"];
+    readonly iconPositions: readonly ["left", "right"];
+    readonly htmlTypes: readonly ["button", "reset", "submit"];
+    readonly btnTypes: readonly ["primary", "secondary", "tertiary", "warning", "danger"];
+    readonly themes: readonly ["solid", "borderless", "light"];
+    readonly DEFAULT_ICON_SIZE: "default";
+    readonly DEFAULT_ICON_POSITION: "left";
+};
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/es/cascader/cascader.css

@@ -95,7 +95,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-cascader-selection-tag {
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
 }
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;

package/lib/es/cascader/cascader.scss

@@ -111,7 +111,7 @@ $module: #{$prefix}-cascader;
         }
 
         &-tag {
-            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginRight $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginLeft;
 
             &:first-child {
                 margin-left: 0;
@@ -120,7 +120,7 @@ $module: #{$prefix}-cascader;
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
-                
+
                 .#{$prefix}-tag-close {
                     color: $color-cascader_input_disabled-text-default;
                     cursor: not-allowed;

package/lib/es/cascader/variables.scss

@@ -44,7 +44,8 @@ $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内
 $spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
 $spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
 $spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
-$spacing-cascader_selection_tag-marginX: $spacing-super-tight; // 级联选择触发器多选时标签的水平外边距
+$spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
+$spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距

package/lib/es/form/form.css

@@ -111,6 +111,10 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=left] .semi-switch,
 .semi-form-field[x-label-pos=left] .semi-rating {
   vertical-align: middle;

package/lib/es/form/form.scss

@@ -8,6 +8,8 @@ $col: #{$form}-col;
 
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
+$buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
 
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -173,6 +174,11 @@ $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} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;

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

@@ -41,11 +41,11 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     setValues(values: any, { isOverride }: {
         isOverride?: boolean;
     }): void;
-    updateStateValue(field: string, value: any, opts: CallOpts): void;
+    updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void;
     getTouched(field?: string): boolean | Record<string, any> | undefined;
-    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void;
+    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void;
     getError(field?: string): any;
-    updateStateError(field: string, error: any, opts: CallOpts): void;
+    updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void;
     getFieldSetterApi(): {
         setValue: (field: string, value: any, opts: CallOpts) => void;
         setError: (field: string, error: any, opts: CallOpts) => void;
@@ -54,9 +54,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     getModifyFormStateApi(): {
         register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
         unRegister: (field: string) => void;
-        updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-        updateStateError: (field: string, error: any, opts: CallOpts) => void;
-        updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
+        updateStateValue: (field: string, value: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateError: (field: string, error: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void) => void;
         getValue: (field: string, opts?: CallOpts) => any;
         getError: (field?: string) => any;
         getTouched: (field?: string) => boolean | Record<string, any>;

package/lib/es/form/foundation.js

@@ -486,7 +486,7 @@ export default class FormFoundation extends BaseFoundation {
   } // update formState value
 
 
-  updateStateValue(field, value, opts) {
+  updateStateValue(field, value, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -518,7 +518,7 @@ export default class FormFoundation extends BaseFoundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get touched from formState
 
@@ -532,7 +532,7 @@ export default class FormFoundation extends BaseFoundation {
   } // update formState touched
 
 
-  updateStateTouched(field, isTouched, opts) {
+  updateStateTouched(field, isTouched, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.touched, field, isTouched);
@@ -542,7 +542,7 @@ export default class FormFoundation extends BaseFoundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get error from formState
 
@@ -556,7 +556,7 @@ export default class FormFoundation extends BaseFoundation {
   } // update formState error
 
 
-  updateStateError(field, error, opts) {
+  updateStateError(field, error, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
@@ -567,7 +567,7 @@ export default class FormFoundation extends BaseFoundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // For internal use in the FormApi Operating Field
 
@@ -586,22 +586,21 @@ export default class FormFoundation extends BaseFoundation {
         // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
         // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
         // When the user directly calls formA pi.set Value ('peoples', [2,3])
-        this.updateStateValue(field, newValue, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldVal = ObjectUtil.get(_valuesInstanceProperty(this.data), fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-          });
-        } // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
-
+        this.updateStateValue(field, newValue, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldVal = ObjectUtil.get(_valuesInstanceProperty(this.data), fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+            });
+          }
+        }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -619,21 +618,21 @@ export default class FormFoundation extends BaseFoundation {
       if (fieldApi) {
         fieldApi.setError(newError, opts);
       } else {
-        this.updateStateError(field, newError, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateError(field, newError, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -649,21 +648,21 @@ export default class FormFoundation extends BaseFoundation {
       if (fieldApi) {
         fieldApi.setTouched(isTouched, opts);
       } else {
-        this.updateStateTouched(field, isTouched, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateTouched(field, isTouched, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {

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

@@ -7,7 +7,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
     notifySubmitFail: (errors: Record<string, any>, values: any) => void;
-    forceUpdate: () => void;
+    forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;

package/lib/es/input/input.css

@@ -278,6 +278,7 @@
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
+  -webkit-text-fill-color: var(--semi-color-disabled-text);
 }
 .semi-input-wrapper-disabled:hover {
   background-color: var(--semi-color-disabled-fill);

package/lib/es/input/input.scss

@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
         background-color: $color-input_disabled-bg-default;
-
+        // fix issue 670 in safari
+        -webkit-text-fill-color: $color-input_disabled-text-default;
         &:hover {
             background-color: $color-input_disabled-bg-default;
         }

package/lib/es/table/table.css

@@ -109,7 +109,6 @@
   word-break: break-all;
   word-wrap: break-word;
   position: relative;
-  user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;

package/lib/es/table/table.scss

@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
                 word-break: break-all;
                 word-wrap: break-word;
                 position: relative;
-                user-select: none;
 
                 &.#{$module}-cell-fixed {
 
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-    
+
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
-    
+
                             &::before {
                                 background-color: $color-table_body-bg-hover;
                                 content: "";
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
-            vertical-align: bottom; 
+            vertical-align: bottom;
         }
 
         &-disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.5.0",
+    "version": "2.5.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.5.0",
+        "@douyinfe/semi-animation": "2.5.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "856255d8b5ad895a5fee47c5920aa1835836aff0",
+    "gitHead": "3f83639f8a4fff7f912a237bf2842cb0944d993c",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/table/table.scss

@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
                 word-break: break-all;
                 word-wrap: break-word;
                 position: relative;
-                user-select: none;
 
                 &.#{$module}-cell-fixed {
 
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-    
+
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
-    
+
                             &::before {
                                 background-color: $color-table_body-bg-hover;
                                 content: "";
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
-            vertical-align: bottom; 
+            vertical-align: bottom;
         }
 
         &-disabled {