@douyinfe/semi-ui 2.3.1 → 2.5.0-beta.0

package/cascader/__test__/cascader.test.js

@@ -195,6 +195,30 @@ describe('Cascader', () => {
         // done();
     });
 
+    it('dynamic treeData in multiple and uncontrolled mode', () => {
+        const cascader = render({
+            defaultValue: 'Yazhou',
+            multiple: true,
+        });
+        const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
+        expect(opt.length).toEqual(1);
+        cascader.setProps({ treeData: treeDataWithDisabled });
+        cascader.update();
+        expect(opt.length).toEqual(1);
+    });
+
+    it('dynamic treeData in multiple and controlled mode', () => {
+        const cascader = render({
+            value: 'Yazhou',
+            multiple: true,
+        });
+        const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
+        expect(opt.length).toEqual(1);
+        cascader.setProps({ treeData: treeDataWithDisabled });
+        cascader.update();
+        expect(opt.length).toEqual(1);
+    });
+
     it('getPopupContainer', () => {
         let cascader = render({
             getPopupContainer: getPopupContainer,

package/cascader/_story/cascader.stories.js

@@ -1348,4 +1348,77 @@ export const LeafOnly = () => {
           />
       </div>
   );
+}
+
+export const DynamicTreeData = () => {
+  const [treeDataDemo1,setTreeData1]=useState(treeData2);
+  const [treeDataDemo2,setTreeData2]=useState(treeData2);
+  const [treeDataDemo3,setTreeData3]=useState(treeData2);
+  const [treeDataDemo4,setTreeData4]=useState(treeData2);
+  const [treeDataDemo5,setTreeData5]=useState(treeData2);
+  const [value3,setValue3]=useState();
+  const [value4,setValue4]=useState();
+  return (
+      <div>
+          <div>多选 + 动态更新 tree</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo1}
+            multiple 
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData1(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>单选 + 动态更新 tree</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo2}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData2(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>多选 + 动态更新 tree + 受控</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo3}
+            multiple
+            value={value3}
+            onChange={v=>{
+              console.log(v);
+              setValue3(v);
+            }}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData3(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>单选 + 动态更新 tree + 受控</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo4}
+            value={value4}
+            onChange={v=>{
+              console.log(v);
+              setValue4(v);
+            }}
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData4(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+          <div>多选 + 动态更新 tree + defaultValue 为亚洲</div>
+          <Cascader
+            style={{ width: 300 }}
+            treeData={treeDataDemo5}
+            multiple
+            defaultValue='yazhou'
+            placeholder="请选择所在地区"
+          />
+          <Button onClick={()=>{setTreeData5(treeData3)}}>改变treeData</Button>
+          <br />
+          <br />
+      </div>
+  );
 }

package/cascader/index.tsx

@@ -14,7 +14,7 @@ import CascaderFoundation, {
 } from '@douyinfe/semi-foundation/cascader/foundation';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
-import { isEqual, isString, isEmpty, isFunction, isNumber, noop, flatten } from 'lodash';
+import { isSet, isEqual, isString, isEmpty, isFunction, isNumber, noop, flatten } from 'lodash';
 import '@douyinfe/semi-foundation/cascader/cascader.scss';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
 import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/cascader/util';
@@ -426,7 +426,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     });
                     realKeys = formatKeys;
                 }
-                const calRes = calcCheckedKeys(flatten(realKeys as string[]), keyEntities);
+                if (isSet(realKeys)) {
+                    realKeys = [...realKeys];
+                }
+                const calRes = calcCheckedKeys(flatten(realKeys), keyEntities);
                 const checkedKeys = new Set(calRes.checkedKeys);
                 const halfCheckedKeys = new Set(calRes.halfCheckedKeys);
                 // disableStrictly

package/datePicker/_story/RenderDate/index.js

@@ -2,20 +2,30 @@ import React from 'react';
 import DatePicker from '../../index';
 import { Tooltip } from '@douyinfe/semi-ui';
 
+/**
+ * 使用 Chromatic UI 测试
+ */
 export default function Demo() {
     const dateStyle = { width: '100%', height: '100%', border: '1px solid #0077FA', display: 'flex', justifyContent: 'center', alignItems: 'center' };
+    const defaultValue = new Date('2021-01-10 00:00:00');
     const renderDate = (dayNumber, fullDate) => {
         if (dayNumber === 1) {
             return <Tooltip content={'Always Day 1'} >
                 <div style={dateStyle}>{dayNumber}</div>
-            </Tooltip>
+            </Tooltip>;
         }
         return dayNumber;
     };
     return (
-        <div>
+        <div style={{ height: '100vh' }}>
             <div>通过 renderDate 可以自定义日期的显示内容</div>
-            <DatePicker renderDate={renderDate} />
+            <DatePicker motion={false} defaultValue={defaultValue} defaultOpen renderDate={renderDate} />
         </div>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+    },
+};

package/datePicker/_story/RenderFullDate/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import DatePicker from '../../index';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
 import classNames from 'classnames';
 import '@douyinfe/semi-foundation/datePicker/datePicker.scss'; 
+import './index.scss';
 
+/**
+ * 开启 Chromatic UI 测试
+ */
 export default function Demo() {
     const dayStyle = {
         display: 'flex',
@@ -33,24 +37,42 @@ export default function Demo() {
             </div>
         );
     };
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+        motion: false,
+    };
+    const singleDefaultValue = new Date('2021-01-08');
+    const multipleDefaultValue = [new Date('2021-01-08'), new Date('2021-01-09'), new Date('2021-01-10'), new Date('2021-01-19')];
+    const rangeDefaultValue = [new Date('2021-12-08'), new Date('2021-01-20')];
 
     return (
-        <div>
+        <div style={{ height: '100vh' }}>
             <div>
                 通过 renderFullDate 可以自定义日期单元格子的渲染，API 提供日期的当前状态：是否被选中，是否是当前日等。
             </div>  
-            <div>
-                单选选中
-                <DatePicker style={{ width: '230px' }} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                多选选中
-                <DatePicker style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                范围选中
-                <DatePicker style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} />
-            </div>
+            <Space wrap spacing={[12, 400]}>
+                <div>
+                    单选选中
+                    <DatePicker {...props} style={{ width: '230px' }} renderFullDate={renderFullDate} defaultValue={singleDefaultValue} />
+                </div>
+                <div>
+                    多选选中
+                    <DatePicker {...props} style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} defaultValue={multipleDefaultValue} />
+                </div>
+                <div>
+                    范围选中
+                    <DatePicker {...props} style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} defaultValue={rangeDefaultValue} />
+                </div>
+            </Space>
         </div>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};

package/datePicker/_story/RenderFullDate/index.scss

@@ -20,4 +20,4 @@
 
 .components-datepicker-demo-day-disabled {
     background: rgba(46, 50, 56, 0.04);
-}
+}

package/datePicker/_story/datePicker.stories.js

@@ -36,7 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
-import { YearButton } from './v2';
+export * from './v2';
 
 export default {
   title: 'DatePicker',
@@ -67,7 +67,6 @@ export {
   DatePickerTimeZone,
   BetterRangePicker,
   SyncSwitchMonth,
-  YearButton
 }
 
 const demoDiv = {
@@ -76,7 +75,7 @@ const demoDiv = {
 };
 
 export const DatePickerDefault = () => (
-  <div style={demoDiv}>
+  <div style={{...demoDiv, height: '100vh'}}>
     <span>datePicker施工现场</span>
     <DatePicker
       insetLabel={<span>日期</span>}
@@ -87,14 +86,7 @@ export const DatePickerDefault = () => (
     <br />
 
     <span>datePicker默认显示</span>
-    <DatePicker defaultOpen />
-    <br />
-
-    <span>defaultValue: new Date('2019-07-07')</span>
-    <DatePicker
-      defaultValue={new Date('2019-07-07')}
-      onOpenChange={isOpen => console.log(isOpen)}
-    />
+    <DatePicker />
     <br />
 
     <span>defaultValue: 2019-07-09</span>
@@ -106,8 +98,23 @@ export const DatePickerDefault = () => (
       defaultValue={1569888000000}
       onChange={(input, value) => console.log({ input, value })}
     />
+    <br />
+
+    <span>defaultValue: new Date('2019-07-07')</span>
+    <DatePicker
+      defaultValue={new Date('2019-07-07')}
+      onOpenChange={isOpen => console.log(isOpen)}
+      defaultOpen
+      motion={false}
+    />
   </div>
 );
+DatePickerDefault.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    delay: 300
+  }
+};
 
 export const DatePickerCallbacks = () => {
   const printArgs = (...args) => console.log(...args);
@@ -806,3 +813,4 @@ export const FixTriggerRenderClosePanel = () => {
   );
 };
 FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
+

package/datePicker/_story/v2/PanelOpen.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
+
+/**
+ * Test with Chromatic
+ */
+export default function App() {
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultValue = new Date('2021-01-01 00:00:00');
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+        defaultPickerValue: defaultValue,
+        needConfirm: true,
+        motion: false,
+    };
+    const spacing = [48, 400];
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultRangeValue = [defaultValue, new Date('2021-03-31 00:00:00')];
+    return (
+        <div style={{ height: '100vh' }}>
+            <Space wrap spacing={spacing}>
+                <DatePicker {...props} type="month" defaultValue={defaultValue} />
+                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} density="compact" />
+                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} />
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};
+App.storyName = 'defaultOpen';

package/datePicker/_story/v2/index.js

@@ -1 +1,2 @@
-export { default as YearButton } from './YearButton';
+export { default as YearButton } from './YearButton';
+export { default as PanelOpen  } from './PanelOpen';

package/datePicker/datePicker.tsx

@@ -525,6 +525,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         };
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             <div
                 onClick={this.handleTriggerWrapperClick}
                 className={inputCls}>

package/dist/css/semi.css

@@ -648,6 +648,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -1667,21 +1668,27 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-button-borderless {
   background-color: transparent;
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-2);
+  border: 0 transparent solid;
 }
 .semi-button-size-small {
   height: 24px;
@@ -2605,6 +2612,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-cascader:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px transparent solid;
 }
 .semi-cascader-small {
   min-height: 24px;
@@ -12060,6 +12068,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding: 0 0;
   font-size: 14px;
   font-weight: 600;
+  background-color: transparent;
   color: var(--semi-color-text-0);
   border-bottom: 0 solid transparent;
 }
@@ -12082,6 +12091,7 @@ body[theme-mode=dark], body .semi-always-dark {
   text-align: right;
   border-radius: 0 0 5px 5px;
   border-top: 0 solid transparent;
+  background-color: transparent;
 }
 .semi-modal-footer .semi-button {
   margin-left: 12px;
@@ -14167,6 +14177,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-scrolllist-header-title {
   padding: 16px 0;
   font-weight: 600;
+  color: var(--semi-color-text-0);
   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;
@@ -14336,6 +14347,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -14415,9 +14427,11 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
 }
 .semi-select:active {
   background-color: var(--semi-color-fill-2);
+  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -14697,6 +14711,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
+  padding: 0 0 0 0;
 }
 .semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;
@@ -16135,6 +16150,9 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-0);
   width: 100%;
 }
+.semi-table-wrapper[data-column-fixed=true] {
+  z-index: 1;
+}
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
@@ -17468,6 +17486,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-tagInput-hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px transparent solid;
 }
 .semi-tagInput-focus {
   background-color: var(--semi-color-fill-0);
@@ -18859,6 +18878,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid inherit;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -19419,11 +19439,10 @@ p.semi-typography-extended,
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-add {
   display: inline-flex;
-  order: 2;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-prompt {
   display: inline-flex;
-  order: 1;
+  order: -1;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-file-list {
   order: 2;
@@ -19603,15 +19622,9 @@ p.semi-typography-extended,
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
   height: 96px;
@@ -19623,7 +19636,6 @@ p.semi-typography-extended,
   border: 2px dashed var(--semi-color-border);
   color: var(--semi-color-tertiary);
   border-radius: var(--semi-border-radius-small);
-  order: 2;
   cursor: pointer;
 }
 .semi-upload-picture-add:hover {
@@ -19663,35 +19675,32 @@ p.semi-typography-extended,
   border-radius: var(--semi-border-radius-small);
 }
 .semi-upload-picture-file-card-close {
-  width: 16px;
-  height: 16px;
-  background-color: var(--semi-color-overlay-bg);
+  visibility: hidden;
+  display: inline-flex;
   position: absolute;
   top: 8px;
   right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  display: none;
   border-radius: var(--semi-border-radius-circle);
-  color: white;
   cursor: pointer;
   transition: all 0s;
 }
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
-  display: flex;
-}
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
-  visibility: visible;
+.semi-upload-picture-file-card-icon-close {
+  font-size: 16px;
+  color: var(--semi-color-white);
 }
-.semi-upload-picture-file-card .semi-progress-circle {
+.semi-upload-picture-file-card::before {
+  visibility: hidden;
+  background-color: var(--semi-color-overlay-bg);
+  content: "";
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 .semi-upload-picture-file-card-retry {
-  background-color: #fff;
+  visibility: hidden;
+  background-color: var(--semi-color-white);
   width: 24px;
   height: 24px;
   position: absolute;
@@ -19719,6 +19728,15 @@ p.semi-typography-extended,
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview {
+  visibility: hidden;
+  display: inline-flex;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  left: 50%;
+  transform: translate3D(-50%, -50%, 0);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;
@@ -19750,6 +19768,30 @@ p.semi-typography-extended,
 .semi-upload-picture-file-card-error {
   outline: 1px solid var(--semi-color-danger);
 }
+.semi-upload-picture-file-card:hover::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview {
+  visibility: visible;
+}
+.semi-upload-picture-file-card-uploading::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card .semi-progress-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);
@@ -20113,20 +20155,20 @@ p.semi-typography-extended,
 .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);
@@ -20177,23 +20219,29 @@ p.semi-typography-extended,
   box-sizing: border-box;
   color: var(--semi-color-text-0);
 }
+.semi-input-textarea:hover {
+  border-color: transparent;
+}
 .semi-input-textarea::placeholder {
   color: var(--semi-color-text-2);
 }
 .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;
 }