@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/lib/es/dropdown/dropdown.css

@@ -4,7 +4,7 @@
 .semi-dropdown {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-dropdown-wrapper {
   overflow-y: auto;
@@ -35,7 +35,7 @@
   padding-right: 16px;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: default;
 }
 .semi-dropdown-title-withTick {

package/lib/es/form/form.css

@@ -54,7 +54,7 @@
   vertical-align: middle;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
 }
 .semi-form-field-label-disabled {
@@ -89,7 +89,7 @@
 .semi-form-field-error-message, .semi-form-field-help-text {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   align-items: center;
   margin-top: 4px;
@@ -176,7 +176,7 @@
   color: var(--semi-color-tertiary);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .semi-form-vertical .semi-form-field-group {
@@ -210,7 +210,7 @@
   margin-block-end: 0;
   font-size: 18px;
   line-height: 24px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
   width: 100%;
   padding-bottom: 8px;

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

@@ -23,7 +23,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     updateArrayField(arrayField: string, updateValue: any): void;
     validate(fieldPaths?: Array<string> | ValidateOptions): Promise<unknown>;
     _formValidate(silent?: boolean): Promise<unknown>;
-    _fieldsValidate(fieldPaths: Array<string>, silent?: boolean): Promise<unknown>;
+    _fieldsValidate(fieldPaths?: Array<string>, silent?: boolean): Promise<unknown>;
     submit(e?: any): void;
     /**
      * Case A：

package/lib/es/form/foundation.js

@@ -70,14 +70,60 @@ export default class FormFoundation extends BaseFoundation {
     const registered = this.registered[field];
     this.registered[field] = true;
     this.fields.set(field, fieldStuff);
-    if (fieldStuff.keepState) {
-      // TODO support keepState
+    if (fieldStuff.keepState && registered) {
+      // When keepState is true and the field was previously registered (remounting),
+      // restore the saved state from formState instead of using the initial value
+      const hasSavedValue = ObjectUtil.has(this.data.values, field);
+      const savedValue = ObjectUtil.get(this.data.values, field);
+      const hasSavedError = ObjectUtil.has(this.data.errors, field);
+      const savedError = ObjectUtil.get(this.data.errors, field);
+      const hasSavedTouched = ObjectUtil.has(this.data.touched, field);
+      const savedTouched = ObjectUtil.get(this.data.touched, field);
+      const allowEmpty = fieldStuff.allowEmpty || false;
+      const opts = {
+        notNotify: true,
+        notUpdate: false,
+        // updateStateValue reads `fieldAllowEmpty` (field-level override)
+        fieldAllowEmpty: allowEmpty
+      };
+      // Restore value from formState if it exists
+      if (hasSavedValue) {
+        // Keep formState as source of truth; still trigger a forceUpdate so that
+        // consumers of formState can get the latest snapshot when field remounts.
+        this.updateStateValue(field, savedValue, opts);
+        // Sync the restored value back to the field component's local state.
+        // Avoid a second forceUpdate/notify from FieldApi.
+        fieldStuff.fieldApi.setValue(savedValue, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      } else {
+        // No saved value, use initial value
+        let fieldValue = fieldState.value;
+        if (!allowEmpty && fieldValue === '') {
+          fieldValue = undefined;
+        }
+        this.updateStateValue(field, fieldValue, opts);
+      }
+      // Restore error from formState if it exists
+      if (hasSavedError) {
+        this.updateStateError(field, savedError, opts);
+        fieldStuff.fieldApi.setError(savedError, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      }
+      // Restore touched from formState if it exists
+      if (hasSavedTouched) {
+        this.updateStateTouched(field, savedTouched, opts);
+        fieldStuff.fieldApi.setTouched(savedTouched, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      }
     } else {
       const allowEmpty = fieldStuff.allowEmpty || false;
       const opts = {
         notNotify: true,
         notUpdate: false,
-        allowEmpty
+        fieldAllowEmpty: allowEmpty
       };
       let fieldValue = fieldState.value;
       // When allowEmpty is false, 'is equivalent to undefined, and the key of the field does not need to be reflected on values
@@ -126,9 +172,9 @@ export default class FormFoundation extends BaseFoundation {
     this.registeredArrayField.set(arrayField, mergeVal);
   }
   validate(fieldPaths) {
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     // Parse options
     let fields;
     let silent = false;
@@ -153,9 +199,9 @@ export default class FormFoundation extends BaseFoundation {
     const {
       values
     } = this.data;
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     return new Promise((resolve, reject) => {
       let maybePromisedErrors;
       try {

package/lib/es/form/utils.js

@@ -128,6 +128,7 @@ export function mergeProps(props) {
       wrapperCol,
       initValue,
       validate,
+      validator,
       /**
        * error、warning、default、success
        */
@@ -159,7 +160,7 @@ export function mergeProps(props) {
       pure,
       id
     } = _a,
-    rest = __rest(_a, ["field", "label", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "initValue", "validate", "validateStatus", "trigger", "allowEmptyString", "allowEmpty", "emptyValue", "rules", "onChange", "keepState", "transform", "name", "fieldClassName", "fieldStyle", "noLabel", "noErrorMessage", "isInInputGroup", "stopValidateWithError", "convert", "showValidateIcon", "helpText", "extraText", "extraTextPosition", "pure", "id"]);
+    rest = __rest(_a, ["field", "label", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "initValue", "validate", "validator", "validateStatus", "trigger", "allowEmptyString", "allowEmpty", "emptyValue", "rules", "onChange", "keepState", "transform", "name", "fieldClassName", "fieldStyle", "noLabel", "noErrorMessage", "isInInputGroup", "stopValidateWithError", "convert", "showValidateIcon", "helpText", "extraText", "extraTextPosition", "pure", "id"]);
   // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
   // For any type of field component in Form, the initial value is uniformly passed in through the initValue field.
   // At the same time, the props that may cause component behavior errors are extracted to prevent transparent transmission to the component.
@@ -171,6 +172,8 @@ export function mergeProps(props) {
   }
   const required = isRequired(rules);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
+  // `validator` is the recommended name; `validate` is kept as a deprecated alias.
+  const finalValidate = validator || validate;
   return {
     field,
     label,
@@ -183,7 +186,7 @@ export function mergeProps(props) {
     noErrorMessage,
     isInInputGroup,
     initValue,
-    validate,
+    validate: finalValidate,
     validateStatus,
     trigger,
     allowEmptyString,

package/lib/es/hotKeys/hotKeys.css

@@ -15,7 +15,7 @@
 .semi-hotKeys-content {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-radius: 2px;
   height: 20px;
   padding: 2px 8px;
@@ -26,7 +26,7 @@
 .semi-hotKeys-split {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0 3px;
   color: var(--semi-color-text-0);
 }

package/lib/es/image/image.css

@@ -96,7 +96,7 @@
   font-weight: normal;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-white);
   height: 60px;
   display: flex;
@@ -143,7 +143,7 @@
   color: var(--semi-color-white);
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0 12px;
 }
 .semi-image-preview-footer .semi-icon {

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

@@ -41,6 +41,10 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     originImageHeight: any;
     containerWidth: number;
     containerHeight: number;
+    private _initialZoomApplied;
+    private _initialZoomAppliedSrc;
+    private _syncInitialZoomFlagWithSrc;
+    private _clampZoom;
     init(): void;
     _isImageVertical: () => boolean;
     _getContainerBoundingRectSize: () => void;

package/lib/es/image/previewImageFoundation.js

@@ -12,6 +12,28 @@ export default class PreviewImageFoundation extends BaseFoundation {
     this.originImageHeight = null;
     this.containerWidth = 0;
     this.containerHeight = 0;
+    // initialZoom should only be applied once per image src (first initialization)
+    this._initialZoomApplied = false;
+    this._initialZoomAppliedSrc = undefined;
+    this._syncInitialZoomFlagWithSrc = () => {
+      const src = this.getProp("src");
+      if (src !== this._initialZoomAppliedSrc) {
+        this._initialZoomAppliedSrc = src;
+        this._initialZoomApplied = false;
+      }
+    };
+    this._clampZoom = zoom => {
+      const {
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const max = typeof maxZoom === 'number' ? maxZoom : 5;
+      const min = typeof minZoom === 'number' ? minZoom : 0.1;
+      if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+        return min;
+      }
+      return Math.min(max, Math.max(min, zoom));
+    };
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
     this._getContainerBoundingRectSize = () => {
       const containerDOM = this._adapter.getContainer();
@@ -39,13 +61,20 @@ export default class PreviewImageFoundation extends BaseFoundation {
     };
     this._getInitialZoom = () => {
       const {
-        ratio
+        ratio,
+        initialZoom
       } = this.getProps();
       let _zoom = 1;
+      // initialZoom is only used for the first initialization of each src
+      this._syncInitialZoomFlagWithSrc();
+      if (!this._initialZoomApplied && typeof initialZoom === 'number' && Number.isFinite(initialZoom) && initialZoom > 0) {
+        this._initialZoomApplied = true;
+        return this._clampZoom(initialZoom);
+      }
       if (ratio === 'adaptation') {
         _zoom = this._getAdaptationZoom();
       }
-      return _zoom;
+      return this._clampZoom(_zoom);
     };
     this.setLoading = loading => {
       this._adapter.setLoading(loading);
@@ -62,6 +91,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
         } = e.target;
         this.originImageHeight = h;
         this.originImageWidth = w;
+        // New image is loaded; allow initialZoom to be applied once for this src
+        this._syncInitialZoomFlagWithSrc();
         this.setState({
           loading: false
         });

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

@@ -48,4 +48,5 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     preloadSingleImage: () => void;
     setLoadSuccessStatus: (src: string) => void;
     onImageLoad: (src: string) => void;
+    private _clampZoom;
 }

package/lib/es/image/previewInnerFoundation.js

@@ -197,11 +197,12 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         zoom
       } = _this.getStates();
-      if (zoom !== newZoom) {
-        notify && _this._adapter.notifyZoom(newZoom, newZoom > zoom);
-        _this._adapter.changeImageZoom(newZoom, e);
+      const nextZoom = _this._clampZoom(newZoom);
+      if (zoom !== nextZoom) {
+        notify && _this._adapter.notifyZoom(nextZoom, nextZoom > zoom);
+        _this._adapter.changeImageZoom(nextZoom, e);
         _this.setState({
-          zoom: newZoom
+          zoom: nextZoom
         });
       }
     };
@@ -320,6 +321,18 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         this.preloadSingleImage();
       }
     };
+    this._clampZoom = zoom => {
+      const {
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const max = typeof maxZoom === 'number' ? maxZoom : 5;
+      const min = typeof minZoom === 'number' ? minZoom : 0.1;
+      if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+        return min;
+      }
+      return Math.min(max, Math.max(min, zoom));
+    };
   }
   beforeShow() {
     this._adapter.registerKeyDownListener();

package/lib/es/input/input.css

@@ -29,7 +29,7 @@
   box-shadow: none;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: var(--semi-color-fill-0);
   border: 1px transparent solid;
   border-radius: var(--semi-border-radius-small);
@@ -45,21 +45,21 @@
   height: 32px;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 30px;
 }
 .semi-input-wrapper-small {
   height: 24px;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
 }
 .semi-input-wrapper-large {
   height: 40px;
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 38px;
 }
 .semi-input-wrapper:hover {
@@ -357,21 +357,21 @@
   height: 38px;
   font-size: 16px;
   line-height: 22px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 38px;
 }
 .semi-input-small {
   height: 22px;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
 }
 .semi-input-default {
   height: 30px;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 30px;
 }
 .semi-input-disabled {
@@ -429,7 +429,7 @@
   color: var(--semi-color-text-2);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   flex-shrink: 0;
 }
 .semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text {

package/lib/es/input/textarea.css

@@ -12,6 +12,11 @@
   background-color: var(--semi-color-fill-0);
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
+.semi-input-textarea-wrapper-resizeX {
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+}
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);
 }
@@ -32,6 +37,9 @@
   color: var(--semi-color-text-2);
   right: 4px;
   height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .semi-input-textarea-wrapper .semi-input-clearbtn > svg {
   pointer-events: none;
@@ -99,7 +107,7 @@
   box-shadow: none;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: transparent;
   border: 0 solid transparent;
   vertical-align: bottom;
@@ -134,11 +142,12 @@
 }
 .semi-input-textarea-autosize {
   overflow: hidden;
+  resize: none;
 }
 .semi-input-textarea-counter {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -176,6 +185,14 @@
   padding: 0;
   align-items: flex-start;
 }
+.semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+}
+.semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX .semi-input-textarea-content {
+  flex: 0 0 auto;
+}
 .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber {
   flex-shrink: 0;
   padding: 5px 12px;

package/lib/es/input/textarea.scss

@@ -16,6 +16,21 @@ $module: #{$prefix}-input;
     transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
+    // When native resize changes textarea width, wrapper (border/clear/counter) should follow.
+    // Default wrapper is `width: 100%`, so it won't grow with textarea. Enable shrink-to-fit.
+    &-resizeX {
+        // Keep original textarea wrapper formatting (stacking counter, etc.),
+        // only shrink-to-fit width so border follows horizontal resize.
+        // Using inline-flex here may change internal layout and cause clear/counter misalignment.
+        display: inline-block;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    &-resizeY {
+        // Keep default width behavior; vertical resize doesn't require wrapper width change.
+    }
+
     &:hover {
         background-color: $color-input_default-bg-hover;
     }
@@ -40,6 +55,10 @@ $module: #{$prefix}-input;
         color: $color-textarea-icon-default;
         right: $spacing-textarea-icon-right;
         height: $height-textarea-default;
+        // Center the icon within the clearbtn area
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         & > svg {
             pointer-events: none;
@@ -130,6 +149,7 @@ $module: #{$prefix}-input;
 
 .#{$module}-textarea {
     position: relative;
+    // resize is now controlled by resize prop, default to none for backward compatibility
     resize: none;
     // min-height: $height-input_default;
     padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
@@ -177,6 +197,8 @@ $module: #{$prefix}-input;
 
     &-autosize {
         overflow: hidden;
+        // When autosize is enabled, force resize to none to avoid conflicts
+        resize: none;
     }
 
     &-counter {
@@ -235,6 +257,19 @@ $module: #{$prefix}-input;
     padding: 0;
     align-items: flex-start;
 
+    &.#{$module}-textarea-wrapper-resizeX {
+        // Keep line number + textarea layout, but let width shrink-to-fit
+        display: inline-flex;
+        width: fit-content;
+        max-width: 100%;
+
+        .#{$module}-textarea-content {
+            flex: 0 0 auto;
+        }
+
+        // Do not force a minimum width here; allow the control to fit narrow containers.
+    }
+
     .#{$module}-textarea-lineNumber {
         flex-shrink: 0;
         padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;

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

@@ -80,6 +80,21 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     _getPrecLen(num: string | number): number;
     _adjustPrec(num: string | number): string;
     formatCurrency(value: number | string): string;
+    /**
+     * Check if scientific notation is enabled
+     */
+    _isScientificNotation(): boolean;
+    /**
+     * Get scientific notation threshold
+     * @returns {number} threshold for digit count
+     */
+    _getScientificNotationThreshold(): number;
+    /**
+     * Convert number to scientific notation if exceeds threshold
+     * @param {number} num
+     * @returns {string}
+     */
+    _toScientificNotation(num: number): string;
     /**
      * format number to string
      * @param {string|number} value