@douyinfe/semi-foundation 2.4.1 → 2.5.1

package/lib/cjs/upload/upload.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-upload;
 
@@ -47,7 +47,7 @@ $module: #{$prefix}-upload;
         align-items: center;
     }
 
-    &[x-prompt-pos="right"] {
+    &[x-prompt-pos='right'] {
         .#{$module}-add {
             display: inline-flex;
         }
@@ -57,7 +57,7 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="bottom"] {
+    &[x-prompt-pos='bottom'] {
         .#{$module}-add {
             display: flex;
         }
@@ -72,15 +72,14 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="left"] {
+    &[x-prompt-pos='left'] {
         .#{$module}-add {
             display: inline-flex;
-            order: 2;
         }
 
         .#{$module}-prompt {
             display: inline-flex;
-            order: 1;
+            order: -1;
         }
 
         .#{$module}-file-list {
@@ -247,7 +246,6 @@ $module: #{$prefix}-upload;
         }
 
         &-icon {
-
             &-loading,
             &-error {
                 font-size: $width-upload_file_card-icon;
@@ -275,7 +273,6 @@ $module: #{$prefix}-upload;
             }
 
             .#{$module}-file-card {
-
                 &-info-validate-message {
                     color: $color-upload_file_card_fail_info-text;
                 }
@@ -288,26 +285,18 @@ $module: #{$prefix}-upload;
     &-picture {
         display: flex;
 
-        &[x-prompt-pos="bottom"] {
+        &[x-prompt-pos='bottom'] {
             flex-direction: column;
 
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
-        &[x-prompt-pos="right"] {
+        &[x-prompt-pos='right'] {
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
         &-add {
@@ -321,7 +310,6 @@ $module: #{$prefix}-upload;
             border: $width-upload_picture_add-border dashed $color-upload-border;
             color: $color-upload-icon;
             border-radius: $radius-upload_picture_add;
-            order: 2;
             cursor: pointer;
 
             &:hover {
@@ -370,38 +358,32 @@ $module: #{$prefix}-upload;
             }
 
             &-close {
-                width: $width-upload_picture_file_card_close;
-                height: $width-upload_picture_file_card_close;
-                background-color: $color-upload_pic_remove-bg;
+                visibility: hidden;
+                display: inline-flex;
                 position: absolute;
                 top: $spacing-upload_picture_file_card_close-top;
                 right: $spacing-upload_picture_file_card_close-right;
-                @include all-center;
-                display: none;
                 border-radius: $radius-upload_picture_file_card_close;
-                color: white;
                 cursor: pointer;
                 transition: all 0s;
             }
-
-            &:hover {
-                .#{$module}-picture-file-card-close {
-                    display: flex;
-                }
-
-                .#{$module}-picture-file-card-replace {
-                    visibility: visible;
-                }
+            &-icon-close {
+                font-size: $width-upload_picture_file_card_close;
+                color: $color-upload_picture_file_card_close-icon;
             }
 
-            .#{$prefix}-progress-circle {
+            &::before {
+                visibility: hidden;
+                background-color: $color-upload_picture_file_card_hover-bg;
+                content: '';
                 position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
             }
-
             &-retry {
+                visibility: hidden;
                 background-color: $color-upload_file_card_retry-bg;
                 width: $width-upload_file_card_retry;
                 height: $width-upload_file_card_retry;
@@ -416,7 +398,6 @@ $module: #{$prefix}-upload;
                 justify-content: center;
                 cursor: pointer;
             }
-
             &-icon-retry {
                 transform: scale(-1, 1);
                 font-size: $width-upload_file_card_retry-icon;
@@ -432,6 +413,17 @@ $module: #{$prefix}-upload;
                 color: $color-upload_replace-text;
                 transform: translate3D(-50%, -50%, 0);
             }
+
+            &-preview {
+                visibility: hidden;
+                display: inline-flex;
+                position: absolute;
+                cursor: pointer;
+                top: 50%;
+                left: 50%;
+                transform: translate3D(-50%, -50%, 0);
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;
@@ -468,6 +460,39 @@ $module: #{$prefix}-upload;
             &-error {
                 outline: 1px solid $color-upload_picture_file_card_error-border;
             }
+
+            &:hover {
+                &::before {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-close {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-replace {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-retry {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-preview {
+                    visibility: visible;
+                }
+            }
+
+            &-uploading {
+                &::before {
+                    visibility: visible;
+                }
+            }
+
+            .#{$prefix}-progress-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
         }
     }
 
@@ -542,4 +567,4 @@ $module: #{$prefix}-upload;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/upload/variables.scss

@@ -16,7 +16,7 @@ $color-upload_drag_area_tips-text: var(--semi-color-primary); // 上传可拖拽
 $color-upload_file_card_fail_info-text: var(--semi-color-danger); // 上传文件卡片失败提示信息文本颜色
 $color-upload_file_card_preview_placeholder-bg: rgba(var(--semi-grey-3), 1); // 文件卡片默认预览背景颜色
 $color-upload_file_card_preview_placeholder-text: rgba(var(--semi-white), 1); // 文件卡片默认预览图颜色
-$color-upload_file_card_retry-bg: #fff; // 重新上传按钮背景颜色
+$color-upload_file_card_retry-bg: var(--semi-color-white); // 重新上传按钮背景颜色
 $color-upload_file_card_retry-text: var(--semi-color-primary); // 重新上传按钮文本颜色
 $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号颜色
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
@@ -26,6 +26,8 @@ $color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移
 $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息（序号）文字颜色
+$color-upload_picture_file_card_close-icon: var(--semi-color-white); // 图片墙关闭图标颜色
+$color-upload_picture_file_card_hover-bg: var(--semi-color-overlay-bg); // 图片墙预览悬浮背景色
 $color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
 $color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
 $color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色

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

@@ -3,7 +3,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly SIZE: readonly ["small", "large", "default"];
-    readonly POSITION: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly POSITION: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
     readonly OPTIONS: readonly ["children", "value"];
     readonly STATUS: readonly ["default", "error", "warning", "success"];
 };

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

@@ -19,6 +19,7 @@
 }
 .semi-cascader:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px transparent solid;
 }
 .semi-cascader-small {
   min-height: 24px;
@@ -94,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

@@ -20,6 +20,7 @@ $module: #{$prefix}-cascader;
 
     &:hover {
         background-color: $color-cascader_default-bg-hover;
+        border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
     &-small {
@@ -110,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;
@@ -119,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

@@ -1,9 +1,10 @@
 $radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
 
-$color-cascader_default-border-default: transparent; // 级联选择描边颜色
+$color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
+$color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮
+$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
 $color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
-$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
@@ -43,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; // 级联选择触发器多选搜索时输入框的左外边距
@@ -83,6 +85,7 @@ $width-cascader:  80px; // 级联选择触发器最小宽度
 $height-cascader_default:  $height-control-default; // 级联选择触发器高度 - 默认
 $height-cascader_small: $height-control-small; // 级联选择触发器高度 - 小尺寸
 $height-cascader_large: $height-control-large; // 级联选择触发器高度 - 大尺寸
+$width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸

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

@@ -221,6 +221,11 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      */
     closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+    clearRangeInputFocus: () => void;
     /**
      * Callback when the content of the input box changes
      * Update the date panel if the changed value is a legal date, otherwise only update the input box

package/lib/es/datePicker/foundation.js

@@ -38,6 +38,24 @@ import { strings as inputStrings } from '../input/constants';
 export default class DatePickerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter));
+    /**
+     * clear range input focus when open is controlled
+     * fixed github 1375
+     */
+
+    this.clearRangeInputFocus = () => {
+      const {
+        type
+      } = this._adapter.getProps();
+
+      const {
+        rangeInputFocus
+      } = this._adapter.getStates();
+
+      if (type === 'dateTimeRange' && rangeInputFocus) {
+        this._adapter.setRangeInputFocus(false);
+      }
+    };
 
     this.getMergedMotion = motion => {
       const mergedMotion = typeof motion === 'undefined' || motion ? _Object$assign(_Object$assign({}, motion), {

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

@@ -4,7 +4,7 @@ declare const cssClasses: {
     DISABLED: string;
 };
 declare const strings: {
-    POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
     TRIGGER_SET: string[];
     DEFAULT_LEAVE_DELAY: number;
     ITEM_TYPE: string[];

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/select/constants.d.ts

@@ -5,7 +5,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly SIZE_SET: readonly ["small", "large", "default"];
-    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
     readonly MODE_SELECT: "select";
     readonly MODE_AUTOCOMPLETE: "autoComplete";
     readonly STATUS: readonly ["default", "error", "warning", "success"];