@douyinfe/semi-foundation 2.2.2 → 2.4.0-beta.0

package/breadcrumb/foundation.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-const */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
+import isEnterPress from '../utils/isEnterPress';
 import { BreadcrumbItemInfo, Route } from './itemFoundation';
 export interface BreadcrumbAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (itemInfo: BreadcrumbItemInfo, event: any) => void;
@@ -21,6 +21,15 @@ export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<st
         this._adapter.expandCollapsed(clickEvent);
     }
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleExpandEnterPress(keyboardEvent: any) {
+        if (isEnterPress(keyboardEvent)) {
+            this.handleExpand(keyboardEvent);
+        }
+    }
+
     genRoutes(routes: Array<Route>) {
         return routes.map(route => {
             if (typeof route !== 'object') {

package/checkbox/checkboxFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface BasicTargetObject {
     [x: string]: any;
@@ -98,6 +99,12 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         this._adapter.notifyGroupChange(event);
     }
 
+    handleEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleChange(e);
+        }
+    }
+
     setChecked(checked: boolean) {
         this._adapter.setNativeControlChecked(checked);
     }
@@ -121,6 +128,8 @@ export interface BaseCheckboxProps {
     onMouseEnter?: (e: any) => void;
     onMouseLeave?: (e: any) => void;
     extra?: any;
+    addonId?: string;
+    extraId?: string;
 }
 
 export default CheckboxFoundation;

package/form/foundation.ts

@@ -258,10 +258,19 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             });
     }
 
-    // All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
-    // input => output:
-    //      a  => a[0]、a[1]
-    //      b  => b.type、b.name[3]、b.name[2]
+    /**
+     * Case A：
+     *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+     *      input => output:
+     *           a  => a[0]、a[1]
+     *           b  => b.type、b.name[0]、b.name[2]
+     *
+     * Case B：
+     *      All fields: activity.a[0]、activity.a[1]、activity.c、activity.d、other
+     *      input => output:
+     *           activity.a => activity.a[0]、activity.a[1]
+     *
+     */
     _getNestedField(path: string): Map<string, FieldStaff> {
         const allRegisterField = this.fields;
         const allFieldPath = [...allRegisterField].map(item => item[0]);
@@ -269,7 +278,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         allFieldPath.forEach(item => {
             let itemPath = toPath(item);
             let targetPath = toPath(path);
-            if (itemPath[0] === targetPath[0]) {
+            if (targetPath.every((path, i) => (targetPath[i] === itemPath[i]))) {
                 const realField = allRegisterField.get(item);
                 nestedFieldPath.set(item, realField);
             }
@@ -503,7 +512,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
-                        fieldStaff.fieldApi.setValue(newFieldVal, opts);
+                        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
@@ -524,7 +534,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-                        fieldStaff.fieldApi.setError(newFieldError, opts);
+                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                        fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
                     });
                 }
                 if (this.getArrayField(field)) {
@@ -544,7 +555,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-                        fieldStaff.fieldApi.setTouched(newFieldTouch, opts);
+                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                        fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
                     });
                 }
                 if (this.getArrayField(field)) {

package/form/utils.ts

@@ -133,6 +133,7 @@ export function mergeProps(props: any) {
         extraText,
         extraTextPosition,
         pure,
+        id,
         ...rest
     }: any = { ...defaultProps, ...props };
     // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
@@ -183,6 +184,7 @@ export function mergeProps(props: any) {
         extraTextPosition,
         pure,
         rest,
+        id
     };
 }
 

package/input/foundation.ts

@@ -2,7 +2,8 @@ import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation
 import { strings } from './constants';
 import { noop, set, isNumber, isString, isFunction } from 'lodash';
 
-const ENTER_KEY_CODE = 'Enter';
+import isEnterPress from '../utils/isEnterPress';
+import { ENTER_KEY } from './../utils/keyCode';
 
 export interface InputDefaultAdapter {
     notifyChange: noopFunction;
@@ -261,7 +262,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     handleKeyPress(e: any) {
         this._adapter.notifyKeyPress(e);
-        if (e.key === ENTER_KEY_CODE) {
+        if (e.key === ENTER_KEY) {
             this._adapter.notifyEnterPress(e);
         }
     }
@@ -294,5 +295,23 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
             e.preventDefault();
         }
     }
+
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClear(e);
+        }
+    }
+
+    /**
+     * A11y: simulate password button click
+     */
+    handleModeEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClickEye(e);
+        }
+    }
 }
 export default InputFoundation;

package/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -151,7 +151,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +165,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/input/textareaFoundation.ts

@@ -7,6 +7,7 @@ import {
 } from 'lodash';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface TextAreaDefaultAdpter {
     notifyChange: noopFunction;
@@ -171,7 +172,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdpter> {
         }
     }
 
-    resizeTextarea = (cb: any) => {
+    resizeTextarea = (cb?: any) => {
         const { height } = this.getStates();
         const { rows } = this.getProps();
         const node = this._adapter.getRef().current;
@@ -232,4 +233,13 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdpter> {
         this._adapter.notifyClear(e);
         this.stopPropagation(e);
     }
+
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClear(e);
+        }
+    }
 }

package/inputNumber/constants.ts

@@ -10,6 +10,7 @@ const numbers = {
     DEFAULT_SHIFT_STEP: 1,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
+    MOUSE_BUTTON_LEFT: 0, // left mouse button
 };
 
 const strings = {

package/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString, get } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {
@@ -286,6 +286,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -303,6 +306,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -317,6 +323,14 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         });
     }
 
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any) {
+        return get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+    }
+
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
         if (keepFocus) {

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

@@ -8,6 +8,10 @@ export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<st
     constructor(adapter: BreadcrumbAdapter<P, S>);
     handleClick(info: BreadcrumbItemInfo, event: any): void;
     handleExpand(clickEvent: any): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleExpandEnterPress(keyboardEvent: any): void;
     genRoutes(routes: Array<Route>): ({
         name: never;
         _origin: {

package/lib/cjs/breadcrumb/foundation.js

@@ -16,6 +16,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 /* eslint-disable prefer-const */
 class BreadcrumbFoundation extends _foundation.default {
   constructor(adapter) {
@@ -29,6 +31,16 @@ class BreadcrumbFoundation extends _foundation.default {
   handleExpand(clickEvent) {
     this._adapter.expandCollapsed(clickEvent);
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleExpandEnterPress(keyboardEvent) {
+    if ((0, _isEnterPress.default)(keyboardEvent)) {
+      this.handleExpand(keyboardEvent);
+    }
+  }
 
   genRoutes(routes) {
     return (0, _map.default)(routes).call(routes, route => {

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -34,6 +34,7 @@ declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any
     notifyChange(checked: boolean, e: any): void;
     handleChange(e: any): void;
     handleChangeInGroup(e: any): void;
+    handleEnterPress(e: any): void;
     setChecked(checked: boolean): void;
     destroy(): void;
 }
@@ -52,5 +53,7 @@ export interface BaseCheckboxProps {
     onMouseEnter?: (e: any) => void;
     onMouseLeave?: (e: any) => void;
     extra?: any;
+    addonId?: string;
+    extraId?: string;
 }
 export default CheckboxFoundation;

package/lib/cjs/checkbox/checkboxFoundation.js

@@ -16,6 +16,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 class CheckboxFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -99,6 +101,12 @@ class CheckboxFoundation extends _foundation.default {
     this._adapter.notifyGroupChange(event);
   }
 
+  handleEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleChange(e);
+    }
+  }
+
   setChecked(checked) {
     this._adapter.setNativeControlChecked(checked);
   } // eslint-disable-next-line @typescript-eslint/no-empty-function

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

@@ -19,6 +19,19 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     _formValidate(): Promise<unknown>;
     _fieldsValidate(fieldPaths: Array<string>): Promise<unknown>;
     submit(): void;
+    /**
+     * Case A：
+     *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+     *      input => output:
+     *           a  => a[0]、a[1]
+     *           b  => b.type、b.name[0]、b.name[2]
+     *
+     * Case B：
+     *      All fields: activity.a[0]、activity.a[1]、activity.c、activity.d、other
+     *      input => output:
+     *           activity.a => activity.a[0]、activity.a[1]
+     *
+     */
     _getNestedField(path: string): Map<string, FieldStaff>;
     _getOperateFieldMap(fieldPaths?: Array<string>): Map<string, FieldStaff>;
     reset(fieldPaths?: Array<string>): void;

package/lib/cjs/form/foundation.js

@@ -28,6 +28,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
+
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
 
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
@@ -320,10 +322,20 @@ class FormFoundation extends _foundation.default {
 
       this._adapter.notifySubmitFail(_errors, _values);
     });
-  } // All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
-  // input => output:
-  //      a  => a[0]、a[1]
-  //      b  => b.type、b.name[3]、b.name[2]
+  }
+  /**
+   * Case A：
+   *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+   *      input => output:
+   *           a  => a[0]、a[1]
+   *           b  => b.type、b.name[0]、b.name[2]
+   *
+   * Case B：
+   *      All fields: activity.a[0]、activity.a[1]、activity.c、activity.d、other
+   *      input => output:
+   *           activity.a => activity.a[0]、activity.a[1]
+   *
+   */
 
 
   _getNestedField(path) {
@@ -336,7 +348,7 @@ class FormFoundation extends _foundation.default {
       let itemPath = (0, _toPath2.default)(item);
       let targetPath = (0, _toPath2.default)(path);
 
-      if (itemPath[0] === targetPath[0]) {
+      if ((0, _every.default)(targetPath).call(targetPath, (path, i) => targetPath[i] === itemPath[i])) {
         const realField = allRegisterField.get(item);
         nestedFieldPath.set(item, realField);
       }
@@ -610,7 +622,11 @@ class FormFoundation extends _foundation.default {
           (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
             let fieldPath = fieldStaff.field;
             let newFieldVal = ObjectUtil.get((0, _values2.default)(this.data), fieldPath);
-            fieldStaff.fieldApi.setValue(newFieldVal, opts);
+            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
 
@@ -639,7 +655,11 @@ class FormFoundation extends _foundation.default {
           (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
             let fieldPath = fieldStaff.field;
             let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-            fieldStaff.fieldApi.setError(newFieldError, opts);
+            let nestedBatchUpdateOpts = {
+              notNotify: true,
+              notUpdate: true
+            };
+            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
           });
         }
 
@@ -665,7 +685,11 @@ class FormFoundation extends _foundation.default {
           (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
             let fieldPath = fieldStaff.field;
             let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-            fieldStaff.fieldApi.setTouched(newFieldTouch, opts);
+            let nestedBatchUpdateOpts = {
+              notNotify: true,
+              notUpdate: true
+            };
+            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
           });
         }
 

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

@@ -49,4 +49,5 @@ export declare function mergeProps(props: any): {
     extraTextPosition: any;
     pure: any;
     rest: any;
+    id: any;
 };

package/lib/cjs/form/utils.js

@@ -183,9 +183,10 @@ function mergeProps(props) {
     helpText,
     extraText,
     extraTextPosition,
-    pure
+    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"]); // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
+      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"]); // 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.
 
@@ -233,7 +234,8 @@ function mergeProps(props) {
     extraText,
     extraTextPosition,
     pure,
-    rest
+    rest,
+    id
   };
 }
 

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

@@ -75,5 +75,13 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
      * @param {Event} e
      */
     handlePreventMouseDown(e: any): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any): void;
+    /**
+     * A11y: simulate password button click
+     */
+    handleModeEnterPress(e: any): void;
 }
 export default InputFoundation;

package/lib/cjs/input/foundation.js

@@ -28,7 +28,9 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _constants = require("./constants");
 
-const ENTER_KEY_CODE = 'Enter';
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
+var _keyCode = require("./../utils/keyCode");
 
 class InputFoundation extends _foundation.default {
   constructor(adapter) {
@@ -323,7 +325,7 @@ class InputFoundation extends _foundation.default {
   handleKeyPress(e) {
     this._adapter.notifyKeyPress(e);
 
-    if (e.key === ENTER_KEY_CODE) {
+    if (e.key === _keyCode.ENTER_KEY) {
       this._adapter.notifyEnterPress(e);
     }
   }
@@ -372,6 +374,26 @@ class InputFoundation extends _foundation.default {
       e.preventDefault();
     }
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClear(e);
+    }
+  }
+  /**
+   * A11y: simulate password button click
+   */
+
+
+  handleModeEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClickEye(e);
+    }
+  }
 
 }
 

package/lib/cjs/input/textarea.css

@@ -44,20 +44,20 @@
 .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
   visibility: hidden;
 }
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
+.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled:hover {
+.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled::placeholder {
+.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-wrapper-readonly {
+  cursor: text;
+}
 .semi-input-textarea-wrapper-error {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger-light-default);
@@ -114,17 +114,20 @@
 .semi-input-textarea-showClear {
   padding-right: 36px;
 }
-.semi-input-textarea-disabled {
+.semi-input-textarea-disabled, .semi-input-textarea-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: transparent;
 }
-.semi-input-textarea-disabled:hover {
+.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
   background-color: transparent;
 }
-.semi-input-textarea-disabled::placeholder {
+.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-readonly {
+  cursor: text;
+}
 .semi-input-textarea-autosize {
   overflow: hidden;
 }