@douyinfe/semi-foundation 2.51.0-beta.0 → 2.51.0

package/image/constants.ts

@@ -4,4 +4,8 @@ const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-image`,
 } as const;
 
-export { cssClasses };
+const numbers = {
+    DEFAULT_Z_INDEX: 1070,
+};
+
+export { cssClasses, numbers };

package/input/textareaFoundation.ts

@@ -113,15 +113,21 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
      */
     handleVisibleMaxLength(value: string) {
         const { maxLength, getValueLength } = this._adapter.getProps();
-        if (isNumber(maxLength) && maxLength >= 0 && isFunction(getValueLength) && isString(value)) {
-            const valueLength = getValueLength(value);
-            if (valueLength > maxLength) {
-                console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
-                const truncatedValue = this.handleTruncateValue(value, maxLength);
-                return truncatedValue;
+        if (isNumber(maxLength) && maxLength >= 0 && isString(value)) {
+            if (isFunction(getValueLength)) {
+                const valueLength = getValueLength(value);
+                if (valueLength > maxLength) {
+                    console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+                    const truncatedValue = this.handleTruncateValue(value, maxLength);
+                    return truncatedValue;
+                }
             } else {
-                return value;
+                if (value.length > maxLength) {
+                    console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+                    return value.slice(0, maxLength);
+                }
             }
+            return value;
         }
         return undefined;
     }
@@ -158,8 +164,26 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
 
     handleBlur(e: any) {
         const { value } = this.getStates();
+        const { maxLength } = this.getProps();
+        let realValue = value;
+        if (maxLength) {
+            // 如果设置了 maxLength，在中文输输入过程中，如果点击外部触发 blur，则拼音字符的所有内容会回显，
+            // 该表现不符合 maxLength 规定，因此需要在 blur 的时候二次确认
+            // 详情见 https://github.com/DouyinFE/semi-design/issues/2005
+            // If maxLength is set, during the Chinese input process, if you click outside to trigger blur, 
+            // all the contents of the Pinyin characters will be echoed.
+            // This behavior does not meet the maxLength requirement, so we need to confirm twice when blurring。
+            // For details, see https://github.com/DouyinFE/semi-design/issues/2005
+            realValue = this.handleVisibleMaxLength(value);
+            if (realValue !== value) {
+                if (!this._isControlledComponent()) {
+                    this._adapter.setValue(realValue);
+                }
+                this._adapter.notifyChange(realValue, e);
+            }
+        }
         this._adapter.toggleFocusing(false);
-        this._adapter.notifyBlur(value, e);
+        this._adapter.notifyBlur(realValue, e);
     }
 
     handleKeyDown(e: any) {

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

@@ -1,4 +1,7 @@
 declare const cssClasses: {
     readonly PREFIX: "semi-image";
 };
-export { cssClasses };
+declare const numbers: {
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, numbers };

package/lib/cjs/image/constants.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cssClasses = void 0;
+exports.numbers = exports.cssClasses = void 0;
 var _constants = require("../base/constants");
 const cssClasses = {
   PREFIX: `${_constants.BASE_CLASS_PREFIX}-image`
 };
-exports.cssClasses = cssClasses;
+exports.cssClasses = cssClasses;
+const numbers = {
+  DEFAULT_Z_INDEX: 1070
+};
+exports.numbers = numbers;

package/lib/cjs/input/textareaFoundation.js

@@ -123,15 +123,21 @@ class TextAreaFoundation extends _foundation.default {
       maxLength,
       getValueLength
     } = this._adapter.getProps();
-    if ((0, _isNumber2.default)(maxLength) && maxLength >= 0 && (0, _isFunction2.default)(getValueLength) && (0, _isString2.default)(value)) {
-      const valueLength = getValueLength(value);
-      if (valueLength > maxLength) {
-        console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
-        const truncatedValue = this.handleTruncateValue(value, maxLength);
-        return truncatedValue;
+    if ((0, _isNumber2.default)(maxLength) && maxLength >= 0 && (0, _isString2.default)(value)) {
+      if ((0, _isFunction2.default)(getValueLength)) {
+        const valueLength = getValueLength(value);
+        if (valueLength > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          const truncatedValue = this.handleTruncateValue(value, maxLength);
+          return truncatedValue;
+        }
       } else {
-        return value;
+        if (value.length > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          return value.slice(0, maxLength);
+        }
       }
+      return value;
     }
     return undefined;
   }
@@ -171,8 +177,28 @@ class TextAreaFoundation extends _foundation.default {
     const {
       value
     } = this.getStates();
+    const {
+      maxLength
+    } = this.getProps();
+    let realValue = value;
+    if (maxLength) {
+      // 如果设置了 maxLength，在中文输输入过程中，如果点击外部触发 blur，则拼音字符的所有内容会回显，
+      // 该表现不符合 maxLength 规定，因此需要在 blur 的时候二次确认
+      // 详情见 https://github.com/DouyinFE/semi-design/issues/2005
+      // If maxLength is set, during the Chinese input process, if you click outside to trigger blur, 
+      // all the contents of the Pinyin characters will be echoed.
+      // This behavior does not meet the maxLength requirement, so we need to confirm twice when blurring。
+      // For details, see https://github.com/DouyinFE/semi-design/issues/2005
+      realValue = this.handleVisibleMaxLength(value);
+      if (realValue !== value) {
+        if (!this._isControlledComponent()) {
+          this._adapter.setValue(realValue);
+        }
+        this._adapter.notifyChange(realValue, e);
+      }
+    }
     this._adapter.toggleFocusing(false);
-    this._adapter.notifyBlur(value, e);
+    this._adapter.notifyBlur(realValue, e);
   }
   handleKeyDown(e) {
     this._adapter.notifyKeyDown(e);

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

@@ -1,4 +1,7 @@
 declare const cssClasses: {
     readonly PREFIX: "semi-image";
 };
-export { cssClasses };
+declare const numbers: {
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, numbers };

package/lib/es/image/constants.js

@@ -2,4 +2,7 @@ import { BASE_CLASS_PREFIX } from "../base/constants";
 const cssClasses = {
   PREFIX: `${BASE_CLASS_PREFIX}-image`
 };
-export { cssClasses };
+const numbers = {
+  DEFAULT_Z_INDEX: 1070
+};
+export { cssClasses, numbers };

package/lib/es/input/textareaFoundation.js

@@ -116,15 +116,21 @@ export default class TextAreaFoundation extends BaseFoundation {
       maxLength,
       getValueLength
     } = this._adapter.getProps();
-    if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
-      const valueLength = getValueLength(value);
-      if (valueLength > maxLength) {
-        console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
-        const truncatedValue = this.handleTruncateValue(value, maxLength);
-        return truncatedValue;
+    if (_isNumber(maxLength) && maxLength >= 0 && _isString(value)) {
+      if (_isFunction(getValueLength)) {
+        const valueLength = getValueLength(value);
+        if (valueLength > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          const truncatedValue = this.handleTruncateValue(value, maxLength);
+          return truncatedValue;
+        }
       } else {
-        return value;
+        if (value.length > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          return value.slice(0, maxLength);
+        }
       }
+      return value;
     }
     return undefined;
   }
@@ -164,8 +170,28 @@ export default class TextAreaFoundation extends BaseFoundation {
     const {
       value
     } = this.getStates();
+    const {
+      maxLength
+    } = this.getProps();
+    let realValue = value;
+    if (maxLength) {
+      // 如果设置了 maxLength，在中文输输入过程中，如果点击外部触发 blur，则拼音字符的所有内容会回显，
+      // 该表现不符合 maxLength 规定，因此需要在 blur 的时候二次确认
+      // 详情见 https://github.com/DouyinFE/semi-design/issues/2005
+      // If maxLength is set, during the Chinese input process, if you click outside to trigger blur, 
+      // all the contents of the Pinyin characters will be echoed.
+      // This behavior does not meet the maxLength requirement, so we need to confirm twice when blurring。
+      // For details, see https://github.com/DouyinFE/semi-design/issues/2005
+      realValue = this.handleVisibleMaxLength(value);
+      if (realValue !== value) {
+        if (!this._isControlledComponent()) {
+          this._adapter.setValue(realValue);
+        }
+        this._adapter.notifyChange(realValue, e);
+      }
+    }
     this._adapter.toggleFocusing(false);
-    this._adapter.notifyBlur(value, e);
+    this._adapter.notifyBlur(realValue, e);
   }
   handleKeyDown(e) {
     this._adapter.notifyKeyDown(e);

package/package.json

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