@douyinfe/semi-foundation 2.80.0 → 2.81.0

package/button/button.scss

@@ -251,7 +251,7 @@ $module: #{$prefix}-button;
         color: $color-button_disabled_solid-text-default;
         cursor: not-allowed;
 
-        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
             color: $color-button_disabled-text-hover;
         }
 
@@ -259,6 +259,10 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;
         }
+
+        &.#{$module}-outline {
+            color: $color-button_disabled_outline_text-default;
+        }
     }
 
     &-borderless {

package/button/variables.scss

@@ -80,10 +80,11 @@ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled
-$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
-$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 深色主题
+$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 浅色主题或无背景
+$color-button_disabled_outline_text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 边框模式
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
-$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 深色主题 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
 $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
 $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色

package/datePicker/datePicker.scss

@@ -934,7 +934,16 @@ $module-list: #{$prefix}-scrolllist;
 
                 .#{$prefix}-input-wrapper {
                     background-color: transparent;
+                    height: fit-content;
                     border: none;
+
+                    &:active  {
+                        background-color: transparent;
+                    }
+
+                    &:hover {
+                        background-color: transparent;
+                    }
                 }
 
                 &-focus {

package/input/foundation.ts

@@ -36,6 +36,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
     }
 
     _timer: number | null;
+    compositionEnter: boolean = false;
 
     constructor(adapter: InputAdapter) {
         super({ ...InputFoundation.inputDefaultAdapter, ...adapter });
@@ -55,28 +56,62 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
     }
 
     handleChange(value: any, e: any) {
-        const { maxLength, minLength, getValueLength } = this._adapter.getProps();
         let nextValue = value;
-        if (maxLength && isFunction(getValueLength)) {
-            nextValue = this.handleVisibleMaxLength(value);
+        if (!this.compositionEnter) {
+            nextValue = this.getNextValue(nextValue);
+        }
+        this.changeInput(nextValue, e);
+    }
+
+    getNextValue = (value: any) => {
+        const { maxLength, minLength, getValueLength } = this._adapter.getProps();
+        if (!isFunction(getValueLength)) {
+            return value;
+        }
+        if (maxLength) {
+            return this.handleVisibleMaxLength(value);
         }
-        if (minLength && isFunction(getValueLength)) {
-            this.handleVisibleMinLength(nextValue);
+        if (minLength) {
+            this.handleVisibleMinLength(value);
         }
+        return value;
+    }
+
+    changeInput = (value: any, e: any) => {
         if (this._isControlledComponent()) {
             /**
              * If it is a controlled component, directly notify the caller of the modified value.
              * Truncate the input value from the input box if the input value exceeds the maximum length limit.
              *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
              */
-            this._adapter.notifyChange(nextValue, e);
+            this._adapter.notifyChange(value, e);
         } else {
-            this._adapter.setValue(nextValue);
-            this._adapter.notifyChange(nextValue, e);
+            this._adapter.setValue(value);
+            this._adapter.notifyChange(value, e);
             // this.checkAllowClear(value);
         }
     }
 
+    handleCompositionStart = () => {
+        this.compositionEnter = true;
+    }
+
+    handleCompositionEnd = (e: any) => {
+        const value = e.target.value;
+        this.compositionEnter = false;
+        const { getValueLength, maxLength, minLength } = this.getProps();
+        if (!isFunction(getValueLength)) {
+            return;
+        }
+        if (maxLength) {
+            const nextValue = this.handleVisibleMaxLength(value);
+            nextValue !== value && this.changeInput(nextValue, e);
+        }
+        if (minLength) {
+            this.handleVisibleMinLength(value);
+        } 
+    }
+
     /**
      * Modify minLength to trigger browser check for minimum length
      * Controlled mode is not checked

package/input/textareaFoundation.ts

@@ -42,6 +42,8 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         };
     }
 
+    compositionEnter: boolean = false;
+
     constructor(adapter: TextAreaAdapter) {
         super({
             ...TextAreaFoundation.textAreaDefaultAdapter,
@@ -58,18 +60,53 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     handleChange(value: string, e: any) {
         const { maxLength, minLength, getValueLength } = this._adapter.getProps();
         let nextValue = value;
-        if (maxLength && isFunction(getValueLength)) {
-            nextValue = this.handleVisibleMaxLength(value);
-        }
-        if (minLength && isFunction(getValueLength)) {
-            this.handleVisibleMinLength(nextValue);
+        if (!this.compositionEnter) {
+            nextValue = this.getNextValue(nextValue);
         }
+        this._changeValue(nextValue, e);
+    }
+
+    _changeValue = (value: any, e: any) => {
         if (this._isControlledComponent()) {
-            this._adapter.notifyChange(nextValue, e);
+            this._adapter.notifyChange(value, e);
         } else {
-            this._adapter.setValue(nextValue);
-            this._adapter.notifyChange(nextValue, e);
+            this._adapter.setValue(value);
+            this._adapter.notifyChange(value, e);
+        }
+    }
+
+    getNextValue = (value: any) => {
+        const { maxLength, minLength, getValueLength } = this._adapter.getProps();
+        if (!isFunction(getValueLength)) {
+            return value;
+        }
+        if (maxLength) {
+            return this.handleVisibleMaxLength(value);
+        }
+        if (minLength) {
+            this.handleVisibleMinLength(value);
+        }
+        return value;
+    }
+
+    handleCompositionStart = () => {
+        this.compositionEnter = true;
+    }
+
+    handleCompositionEnd = (e: any) => {
+        this.compositionEnter = false;
+        const { getValueLength, maxLength, minLength } = this.getProps();
+        if (!isFunction(getValueLength)) {
+            return;
+        }
+        const value = e.target.value;
+        if (maxLength) {
+            const nextValue = this.handleVisibleMaxLength(value);
+            nextValue !== value && this._changeValue(nextValue, e);
         }
+        if (minLength) {
+            this.handleVisibleMinLength(value);
+        } 
     }
 
     /**

package/lib/cjs/button/button.css

@@ -205,12 +205,15 @@
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
+.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
   color: var(--semi-color-disabled-text);
 }
 .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
   color: var(--semi-color-disabled-text);
 }
+.semi-button-disabled.semi-button-outline {
+  color: var(--semi-color-disabled-text);
+}
 .semi-button-borderless {
   background-color: transparent;
   border: 0 transparent solid;

package/lib/cjs/button/button.scss

@@ -251,7 +251,7 @@ $module: #{$prefix}-button;
         color: $color-button_disabled_solid-text-default;
         cursor: not-allowed;
 
-        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
             color: $color-button_disabled-text-hover;
         }
 
@@ -259,6 +259,10 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;
         }
+
+        &.#{$module}-outline {
+            color: $color-button_disabled_outline_text-default;
+        }
     }
 
     &-borderless {

package/lib/cjs/button/variables.scss

@@ -80,10 +80,11 @@ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled
-$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
-$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 深色主题
+$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 浅色主题或无背景
+$color-button_disabled_outline_text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 边框模式
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
-$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 深色主题 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
 $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
 $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色

package/lib/cjs/datePicker/datePicker.css

@@ -621,8 +621,15 @@
 }
 .semi-datepicker-range-input-wrapper .semi-input-wrapper {
   background-color: transparent;
+  height: fit-content;
   border: none;
 }
+.semi-datepicker-range-input-wrapper .semi-input-wrapper:active {
+  background-color: transparent;
+}
+.semi-datepicker-range-input-wrapper .semi-input-wrapper:hover {
+  background-color: transparent;
+}
 .semi-datepicker-range-input-wrapper-focus {
   border-color: transparent;
   background-color: var(--semi-color-fill-1);

package/lib/cjs/datePicker/datePicker.scss

@@ -934,7 +934,16 @@ $module-list: #{$prefix}-scrolllist;
 
                 .#{$prefix}-input-wrapper {
                     background-color: transparent;
+                    height: fit-content;
                     border: none;
+
+                    &:active  {
+                        background-color: transparent;
+                    }
+
+                    &:hover {
+                        background-color: transparent;
+                    }
                 }
 
                 &-focus {

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

@@ -24,11 +24,16 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
         setValue: (...args: any[]) => void;
     };
     _timer: number | null;
+    compositionEnter: boolean;
     constructor(adapter: InputAdapter);
     destroy(): void;
     setDisable(): void;
     setValue(value: any): void;
     handleChange(value: any, e: any): void;
+    getNextValue: (value: any) => any;
+    changeInput: (value: any, e: any) => void;
+    handleCompositionStart: () => void;
+    handleCompositionEnd: (e: any) => void;
     /**
      * Modify minLength to trigger browser check for minimum length
      * Controlled mode is not checked

package/lib/cjs/input/foundation.js

@@ -24,6 +24,60 @@ class InputFoundation extends _foundation.default {
   }
   constructor(adapter) {
     super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
+    this.compositionEnter = false;
+    this.getNextValue = value => {
+      const {
+        maxLength,
+        minLength,
+        getValueLength
+      } = this._adapter.getProps();
+      if (!(0, _isFunction2.default)(getValueLength)) {
+        return value;
+      }
+      if (maxLength) {
+        return this.handleVisibleMaxLength(value);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+      return value;
+    };
+    this.changeInput = (value, e) => {
+      if (this._isControlledComponent()) {
+        /**
+         * If it is a controlled component, directly notify the caller of the modified value.
+         * Truncate the input value from the input box if the input value exceeds the maximum length limit.
+         *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
+         */
+        this._adapter.notifyChange(value, e);
+      } else {
+        this._adapter.setValue(value);
+        this._adapter.notifyChange(value, e);
+        // this.checkAllowClear(value);
+      }
+    };
+    this.handleCompositionStart = () => {
+      this.compositionEnter = true;
+    };
+    this.handleCompositionEnd = e => {
+      const value = e.target.value;
+      this.compositionEnter = false;
+      const {
+        getValueLength,
+        maxLength,
+        minLength
+      } = this.getProps();
+      if (!(0, _isFunction2.default)(getValueLength)) {
+        return;
+      }
+      if (maxLength) {
+        const nextValue = this.handleVisibleMaxLength(value);
+        nextValue !== value && this.changeInput(nextValue, e);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+    };
   }
   destroy() {
     if (this._timer) {
@@ -36,30 +90,11 @@ class InputFoundation extends _foundation.default {
     this._adapter.setValue(value);
   }
   handleChange(value, e) {
-    const {
-      maxLength,
-      minLength,
-      getValueLength
-    } = this._adapter.getProps();
     let nextValue = value;
-    if (maxLength && (0, _isFunction2.default)(getValueLength)) {
-      nextValue = this.handleVisibleMaxLength(value);
-    }
-    if (minLength && (0, _isFunction2.default)(getValueLength)) {
-      this.handleVisibleMinLength(nextValue);
-    }
-    if (this._isControlledComponent()) {
-      /**
-       * If it is a controlled component, directly notify the caller of the modified value.
-       * Truncate the input value from the input box if the input value exceeds the maximum length limit.
-       *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
-       */
-      this._adapter.notifyChange(nextValue, e);
-    } else {
-      this._adapter.setValue(nextValue);
-      this._adapter.notifyChange(nextValue, e);
-      // this.checkAllowClear(value);
+    if (!this.compositionEnter) {
+      nextValue = this.getNextValue(nextValue);
     }
+    this.changeInput(nextValue, e);
   }
   /**
    * Modify minLength to trigger browser check for minimum length

package/lib/cjs/input/textareaFoundation.d.ts

@@ -27,10 +27,15 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         notifyKeyDown: (...args: any[]) => void;
         notifyEnterPress: (...args: any[]) => void;
     };
+    compositionEnter: boolean;
     constructor(adapter: TextAreaAdapter);
     destroy(): void;
     handleValueChange(v: string): void;
     handleChange(value: string, e: any): void;
+    _changeValue: (value: any, e: any) => void;
+    getNextValue: (value: any) => any;
+    handleCompositionStart: () => void;
+    handleCompositionEnd: (e: any) => void;
     /**
      * Modify minLength to trigger browser check for minimum length
      * Controlled mode is not checked

package/lib/cjs/input/textareaFoundation.js

@@ -28,6 +28,54 @@ class TextAreaFoundation extends _foundation.default {
   }
   constructor(adapter) {
     super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
+    this.compositionEnter = false;
+    this._changeValue = (value, e) => {
+      if (this._isControlledComponent()) {
+        this._adapter.notifyChange(value, e);
+      } else {
+        this._adapter.setValue(value);
+        this._adapter.notifyChange(value, e);
+      }
+    };
+    this.getNextValue = value => {
+      const {
+        maxLength,
+        minLength,
+        getValueLength
+      } = this._adapter.getProps();
+      if (!(0, _isFunction2.default)(getValueLength)) {
+        return value;
+      }
+      if (maxLength) {
+        return this.handleVisibleMaxLength(value);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+      return value;
+    };
+    this.handleCompositionStart = () => {
+      this.compositionEnter = true;
+    };
+    this.handleCompositionEnd = e => {
+      this.compositionEnter = false;
+      const {
+        getValueLength,
+        maxLength,
+        minLength
+      } = this.getProps();
+      if (!(0, _isFunction2.default)(getValueLength)) {
+        return;
+      }
+      const value = e.target.value;
+      if (maxLength) {
+        const nextValue = this.handleVisibleMaxLength(value);
+        nextValue !== value && this._changeValue(nextValue, e);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+    };
     this.resizeTextarea = () => {
       var _a;
       const {
@@ -62,18 +110,10 @@ class TextAreaFoundation extends _foundation.default {
       getValueLength
     } = this._adapter.getProps();
     let nextValue = value;
-    if (maxLength && (0, _isFunction2.default)(getValueLength)) {
-      nextValue = this.handleVisibleMaxLength(value);
-    }
-    if (minLength && (0, _isFunction2.default)(getValueLength)) {
-      this.handleVisibleMinLength(nextValue);
-    }
-    if (this._isControlledComponent()) {
-      this._adapter.notifyChange(nextValue, e);
-    } else {
-      this._adapter.setValue(nextValue);
-      this._adapter.notifyChange(nextValue, e);
+    if (!this.compositionEnter) {
+      nextValue = this.getNextValue(nextValue);
     }
+    this._changeValue(nextValue, e);
   }
   /**
    * Modify minLength to trigger browser check for minimum length

package/lib/cjs/tooltip/foundation.js

@@ -64,6 +64,7 @@ class Tooltip extends _foundation.default {
       }
     };
     this.show = () => {
+      this._initContainerPosition();
       if (this._adapter.getAnimatingState()) {
         return;
       }
@@ -233,7 +234,6 @@ class Tooltip extends _foundation.default {
     this._mounted = true;
     this._bindEvent();
     this._shouldShow();
-    this._initContainerPosition();
     if (!wrapperId) {
       this._adapter.setId();
     }
@@ -1041,6 +1041,9 @@ class Tooltip extends _foundation.default {
     this._adapter.unregisterScrollHandler();
   }
   _initContainerPosition() {
+    if (this._adapter.getContainerPosition() || !this._adapter.containerIsBody()) {
+      return;
+    }
     this._adapter.updateContainerPosition();
   }
   _handleTriggerKeydown(event) {

package/lib/es/button/button.css

@@ -205,12 +205,15 @@
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
+.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
   color: var(--semi-color-disabled-text);
 }
 .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
   color: var(--semi-color-disabled-text);
 }
+.semi-button-disabled.semi-button-outline {
+  color: var(--semi-color-disabled-text);
+}
 .semi-button-borderless {
   background-color: transparent;
   border: 0 transparent solid;

package/lib/es/button/button.scss

@@ -251,7 +251,7 @@ $module: #{$prefix}-button;
         color: $color-button_disabled_solid-text-default;
         cursor: not-allowed;
 
-        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
             color: $color-button_disabled-text-hover;
         }
 
@@ -259,6 +259,10 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;
         }
+
+        &.#{$module}-outline {
+            color: $color-button_disabled_outline_text-default;
+        }
     }
 
     &-borderless {

package/lib/es/button/variables.scss

@@ -80,10 +80,11 @@ $color-button_tertiary_outline-border-default: var(--semi-color-border); // 边
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled
-$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
-$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 深色主题
+$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 浅色主题或无背景
+$color-button_disabled_outline_text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 边框模式
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
-$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 深色主题 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
 $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
 $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色

package/lib/es/datePicker/datePicker.css

@@ -621,8 +621,15 @@
 }
 .semi-datepicker-range-input-wrapper .semi-input-wrapper {
   background-color: transparent;
+  height: fit-content;
   border: none;
 }
+.semi-datepicker-range-input-wrapper .semi-input-wrapper:active {
+  background-color: transparent;
+}
+.semi-datepicker-range-input-wrapper .semi-input-wrapper:hover {
+  background-color: transparent;
+}
 .semi-datepicker-range-input-wrapper-focus {
   border-color: transparent;
   background-color: var(--semi-color-fill-1);

package/lib/es/datePicker/datePicker.scss

@@ -934,7 +934,16 @@ $module-list: #{$prefix}-scrolllist;
 
                 .#{$prefix}-input-wrapper {
                     background-color: transparent;
+                    height: fit-content;
                     border: none;
+
+                    &:active  {
+                        background-color: transparent;
+                    }
+
+                    &:hover {
+                        background-color: transparent;
+                    }
                 }
 
                 &-focus {

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

@@ -24,11 +24,16 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
         setValue: (...args: any[]) => void;
     };
     _timer: number | null;
+    compositionEnter: boolean;
     constructor(adapter: InputAdapter);
     destroy(): void;
     setDisable(): void;
     setValue(value: any): void;
     handleChange(value: any, e: any): void;
+    getNextValue: (value: any) => any;
+    changeInput: (value: any, e: any) => void;
+    handleCompositionStart: () => void;
+    handleCompositionEnd: (e: any) => void;
     /**
      * Modify minLength to trigger browser check for minimum length
      * Controlled mode is not checked

package/lib/es/input/foundation.js

@@ -17,6 +17,60 @@ class InputFoundation extends BaseFoundation {
   }
   constructor(adapter) {
     super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
+    this.compositionEnter = false;
+    this.getNextValue = value => {
+      const {
+        maxLength,
+        minLength,
+        getValueLength
+      } = this._adapter.getProps();
+      if (!_isFunction(getValueLength)) {
+        return value;
+      }
+      if (maxLength) {
+        return this.handleVisibleMaxLength(value);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+      return value;
+    };
+    this.changeInput = (value, e) => {
+      if (this._isControlledComponent()) {
+        /**
+         * If it is a controlled component, directly notify the caller of the modified value.
+         * Truncate the input value from the input box if the input value exceeds the maximum length limit.
+         *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
+         */
+        this._adapter.notifyChange(value, e);
+      } else {
+        this._adapter.setValue(value);
+        this._adapter.notifyChange(value, e);
+        // this.checkAllowClear(value);
+      }
+    };
+    this.handleCompositionStart = () => {
+      this.compositionEnter = true;
+    };
+    this.handleCompositionEnd = e => {
+      const value = e.target.value;
+      this.compositionEnter = false;
+      const {
+        getValueLength,
+        maxLength,
+        minLength
+      } = this.getProps();
+      if (!_isFunction(getValueLength)) {
+        return;
+      }
+      if (maxLength) {
+        const nextValue = this.handleVisibleMaxLength(value);
+        nextValue !== value && this.changeInput(nextValue, e);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+    };
   }
   destroy() {
     if (this._timer) {
@@ -29,30 +83,11 @@ class InputFoundation extends BaseFoundation {
     this._adapter.setValue(value);
   }
   handleChange(value, e) {
-    const {
-      maxLength,
-      minLength,
-      getValueLength
-    } = this._adapter.getProps();
     let nextValue = value;
-    if (maxLength && _isFunction(getValueLength)) {
-      nextValue = this.handleVisibleMaxLength(value);
-    }
-    if (minLength && _isFunction(getValueLength)) {
-      this.handleVisibleMinLength(nextValue);
-    }
-    if (this._isControlledComponent()) {
-      /**
-       * If it is a controlled component, directly notify the caller of the modified value.
-       * Truncate the input value from the input box if the input value exceeds the maximum length limit.
-       *  Even in controlled components, characters that exceed the length limit cannot be entered through the input box.
-       */
-      this._adapter.notifyChange(nextValue, e);
-    } else {
-      this._adapter.setValue(nextValue);
-      this._adapter.notifyChange(nextValue, e);
-      // this.checkAllowClear(value);
+    if (!this.compositionEnter) {
+      nextValue = this.getNextValue(nextValue);
     }
+    this.changeInput(nextValue, e);
   }
   /**
    * Modify minLength to trigger browser check for minimum length

package/lib/es/input/textareaFoundation.d.ts

@@ -27,10 +27,15 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         notifyKeyDown: (...args: any[]) => void;
         notifyEnterPress: (...args: any[]) => void;
     };
+    compositionEnter: boolean;
     constructor(adapter: TextAreaAdapter);
     destroy(): void;
     handleValueChange(v: string): void;
     handleChange(value: string, e: any): void;
+    _changeValue: (value: any, e: any) => void;
+    getNextValue: (value: any) => any;
+    handleCompositionStart: () => void;
+    handleCompositionEnd: (e: any) => void;
     /**
      * Modify minLength to trigger browser check for minimum length
      * Controlled mode is not checked

package/lib/es/input/textareaFoundation.js

@@ -21,6 +21,54 @@ export default class TextAreaFoundation extends BaseFoundation {
   }
   constructor(adapter) {
     super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
+    this.compositionEnter = false;
+    this._changeValue = (value, e) => {
+      if (this._isControlledComponent()) {
+        this._adapter.notifyChange(value, e);
+      } else {
+        this._adapter.setValue(value);
+        this._adapter.notifyChange(value, e);
+      }
+    };
+    this.getNextValue = value => {
+      const {
+        maxLength,
+        minLength,
+        getValueLength
+      } = this._adapter.getProps();
+      if (!_isFunction(getValueLength)) {
+        return value;
+      }
+      if (maxLength) {
+        return this.handleVisibleMaxLength(value);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+      return value;
+    };
+    this.handleCompositionStart = () => {
+      this.compositionEnter = true;
+    };
+    this.handleCompositionEnd = e => {
+      this.compositionEnter = false;
+      const {
+        getValueLength,
+        maxLength,
+        minLength
+      } = this.getProps();
+      if (!_isFunction(getValueLength)) {
+        return;
+      }
+      const value = e.target.value;
+      if (maxLength) {
+        const nextValue = this.handleVisibleMaxLength(value);
+        nextValue !== value && this._changeValue(nextValue, e);
+      }
+      if (minLength) {
+        this.handleVisibleMinLength(value);
+      }
+    };
     this.resizeTextarea = () => {
       var _a;
       const {
@@ -55,18 +103,10 @@ export default class TextAreaFoundation extends BaseFoundation {
       getValueLength
     } = this._adapter.getProps();
     let nextValue = value;
-    if (maxLength && _isFunction(getValueLength)) {
-      nextValue = this.handleVisibleMaxLength(value);
-    }
-    if (minLength && _isFunction(getValueLength)) {
-      this.handleVisibleMinLength(nextValue);
-    }
-    if (this._isControlledComponent()) {
-      this._adapter.notifyChange(nextValue, e);
-    } else {
-      this._adapter.setValue(nextValue);
-      this._adapter.notifyChange(nextValue, e);
+    if (!this.compositionEnter) {
+      nextValue = this.getNextValue(nextValue);
     }
+    this._changeValue(nextValue, e);
   }
   /**
    * Modify minLength to trigger browser check for minimum length

package/lib/es/tooltip/foundation.js

@@ -57,6 +57,7 @@ export default class Tooltip extends BaseFoundation {
       }
     };
     this.show = () => {
+      this._initContainerPosition();
       if (this._adapter.getAnimatingState()) {
         return;
       }
@@ -226,7 +227,6 @@ export default class Tooltip extends BaseFoundation {
     this._mounted = true;
     this._bindEvent();
     this._shouldShow();
-    this._initContainerPosition();
     if (!wrapperId) {
       this._adapter.setId();
     }
@@ -1034,6 +1034,9 @@ export default class Tooltip extends BaseFoundation {
     this._adapter.unregisterScrollHandler();
   }
   _initContainerPosition() {
+    if (this._adapter.getContainerPosition() || !this._adapter.containerIsBody()) {
+      return;
+    }
     this._adapter.updateContainerPosition();
   }
   _handleTriggerKeydown(event) {

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.80.0",
+    "version": "2.81.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.80.0",
-        "@douyinfe/semi-json-viewer-core": "2.80.0",
+        "@douyinfe/semi-animation": "2.81.0",
+        "@douyinfe/semi-json-viewer-core": "2.81.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "cadd54a8955c5426065988796e4fae19744cc910",
+    "gitHead": "5fa3239b65dcbdca2a72a2f0682645c17a1b2d63",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tooltip/foundation.ts

@@ -92,7 +92,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._mounted = true;
         this._bindEvent();
         this._shouldShow();
-        this._initContainerPosition();
         if (!wrapperId) {
             this._adapter.setId();
         }
@@ -316,6 +315,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     };
 
     show = () => {
+        this._initContainerPosition();
         if (this._adapter.getAnimatingState()) {
             return;
         }
@@ -1134,6 +1134,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     _initContainerPosition() {
+        if (this._adapter.getContainerPosition() || !this._adapter.containerIsBody()) {
+            return;
+        }
         this._adapter.updateContainerPosition();
     }