Merge branch 'release'

CONTRIBUTING.md

@@ -15,7 +15,7 @@ Semi 团队会维护两个常驻分支：`main` 和 `release`，根据我们的[
 Semi Design 团队会认真对待每一个 Pull Request。我们会 review 并合并你的代码。也有可能对你的代码提出一些修改意见。
 
 要提交一个 Pull Request，请遵循以下步骤：
- - Node.js > v16
+ - Node.js > v20
  - Fork 项目并克隆下来
 ```bash
 git clone https://github.com/<your-username>/semi-design.git

content/basic/typography/index-en-US.md

@@ -292,10 +292,11 @@ Copying of text can be supported by configuring the `copyable` property.
 When copyable is configured as true, the default copied content is children itself. Note that at this time, children only support string type.    
 When copyable is configured as object, you can specify the content copied to the clipboard through `copyable.content`, which is no longer strongly associated with children.   
 At this time, children will no longer limit the type, but `copyable.content` still needs to be a string.  
+You can use the `copyable.render` attribute to customize the copyable button render.
 
 ```jsx live=true
 import React from 'react';
-import { Typography, TextArea } from '@douyinfe/semi-ui';
+import { Typography, TextArea, Button } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
 function Demo() {
@@ -308,6 +309,18 @@ function Demo() {
             <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.' }) }}>Click the right icon to copy.</Paragraph>
             Timestamp: <Numeral truncate="ceil" copyable underline>{new Date().getTime()/1000}s</Numeral>
             <Paragraph copyable={{ icon: <IconSetting style={{ color: 'var(--semi-color-link)' }}/> }}>Custom Copy Node</Paragraph>
+            <Paragraph copyable={{
+                content: 'Custom render!',
+                render: (copied, doCopy, config) => {
+                    return (
+                        <Button size="small" onClick={doCopy}>
+                            <span>{copied ? 'Copy success' : `Click to copy: ${config.content}`}</span>
+                        </Button>
+                    );
+                }
+            }}>
+                Custom Copy Render
+            </Paragraph>
             <br/>
             <br/>
             <Text type="secondary">Paste here: </Text>

content/basic/typography/index.md

@@ -280,10 +280,11 @@ function Demo() {
 可通过配置 copyable 属性支持文本的复制。  
 当 copyable 配置为 true时，默认复制内容为 children 本身，注意，此时 children 只支持 string类型传入    
 当 copyable 配置为 object 时，可通过 `copyable.content` 指定复制至粘贴板的内容，与 children 不再强关联， 此时 children 将不再限定类型，但 `copyable.content` 仍需要为 string    
+可以通过 `copyable.render` 属性，自定义复制按钮的渲染逻辑
 
 ```jsx live=true
 import React from 'react';
-import { Typography, TextArea } from '@douyinfe/semi-ui';
+import { Typography, TextArea, Button } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
 function Demo() {
@@ -296,6 +297,18 @@ function Demo() {
             <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功' }) }}>点击右边的图标复制文本。</Paragraph>
             时间戳: <Numeral truncate="ceil" copyable underline>{new Date().getTime()/1000}s</Numeral>
             <Paragraph copyable={{ icon: <IconSetting style={{ color: 'var(--semi-color-link)' }}/> }}>自定义复制节点</Paragraph>
+            <Paragraph copyable={{
+                content: 'Custom render!',
+                render: (copied, doCopy, config) => {
+                    return (
+                        <Button size="small" onClick={doCopy}>
+                            <span>{copied ? '复制成功' : `点击复制:${config.content}`}</span>
+                        </Button>
+                    );
+                }
+            }}>
+                自定义复制渲染
+            </Paragraph>
             <br/>
             <br/>
             <Text type="secondary">粘贴区域：</Text>

content/input/colorpicker/index-en-US.md

@@ -7,47 +7,67 @@ icon: doc-colorPlatteNew
 brief: Quickly and easily select colors, and provide a dropper tool to pick colors
 ---
 
-
-
 ## Demos
 
 ### How to import
 
+ColorPicker component supported from v2.64.0
 
 ```jsx import
 import { ColorPicker } from '@douyinfe/semi-ui';
 ```
 
-
 ### Basic Use
 
 #### In portal
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker, Button } from '@douyinfe/semi-ui';
-function Demo(){
-    return <div>
-        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}/>
-        
-        <br/>
-        <div>自定义 trigger</div>
-
-        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}>
-            <Button> Trigger </Button>
-        </ColorPicker>
-        
-    </div>
+function Demo() {
+    return (
+        <div>
+            <ColorPicker
+                alpha={true}
+                onChange={value => {
+                    console.log(value);
+                }}
+                usePopover={true}
+            />
+
+            <br />
+            <div>自定义 trigger</div>
+
+            <ColorPicker
+                alpha={true}
+                onChange={value => {
+                    console.log(value);
+                }}
+                usePopover={true}
+            >
+                <Button> Trigger </Button>
+            </ColorPicker>
+        </div>
+    );
 }
-
 ```
 
 #### Normal display
+
 ```jsx live=true
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
+import React from 'react';
+
+function Demo() {
+    return (
+        <ColorPicker
+            alpha={true}
+            onChange={value => {
+                console.log(value);
+            }}
+        />
+    );
 }
-
 ```
 
 ### Eyedropper Color Picker
@@ -58,13 +78,20 @@ Use `eyeDropper={true}` to enable the eyedropper function, which supports pickin
 To enable this function, the current web page must be deployed in a secure context such as HTTPS or localhost domain name, otherwise it will have no effect. The user's browser version must be Chromium > 95
 </Notice>
 
-
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value)}}/>
+function Demo() {
+    return (
+        <ColorPicker
+            alpha={true}
+            eyeDropper={true}
+            onChange={value => {
+                console.log(value);
+            }}
+        />
+    );
 }
-
 ```
 
 ### Default Value
@@ -76,18 +103,21 @@ The defaultValue (uncontrolled) and value (controlled) you pass in should also b
 We provide a static tool function `colorStringToValue` on the component class to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb and hsv(176,71,77).
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <div>
-        <ColorPicker 
-            defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
-            onChange={(value)=>{
-            console.log(value)
-        }} className={""} alpha={true}/>
-    </div>
-
+function Demo() {
+    return (
+        <div>
+            <ColorPicker
+                defaultValue={ColorPicker.colorStringToValue('rgb(57,197,187)')}
+                onChange={value => {
+                    console.log(value);
+                }}
+                alpha={true}
+            />
+        </div>
+    );
 }
-
 ```
 
 ### Controlled
@@ -95,49 +125,60 @@ function Demo(){
 Controlled use by passing in value
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
+function Demo() {
+    const [value, setValue] = useState(ColorPicker.colorStringToValue('#39c5bb'));
     console.log(value);
-    return <div>
-        <ColorPicker value={value} onChange={(value)=>{
-            setValue(value)
-        }} className={""} alpha={true}/>
-    </div>
-
+    return (
+        <div>
+            <ColorPicker
+                value={value}
+                onChange={value => {
+                    setValue(value);
+                }}
+                alpha={true}
+            />
+        </div>
+    );
 }
-
 ```
 
-
 ### Rendering additional elements at the top and bottom
 
 Use `topSlot` and `bottomSlot` to render additional elements at the top and bottom
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker topSlot={<div>
-        TopSlot
-    </div>} bottomSlot={<div>Bottom Slot</div>} alpha={true} onChange={value=>{console.log(value)}}/>
+function Demo() {
+    return (
+        <ColorPicker
+            topSlot={<div>TopSlot</div>}
+            bottomSlot={<div>Bottom Slot</div>}
+            alpha={true}
+            onChange={value => {
+                console.log(value);
+            }}
+        />
+    );
 }
-
 ```
 
 ### API Table
 
-| Parameter | Description | Type | Default value |
-|---------------|------------|---------------|------|
-| onChange | User selected color callback | (value)=>void | - |
-| alpha | Whether to enable transparency selection | boolean | true |
-| bottomSlot | Bottom rendering additional elements | ReactNode | - |
-| className | Class name | string | - |
-| defaultFormat | Default format for manual input | rgba hex hsva | hex |
-| defaultValue | Default value | Object | - |
-| eyeDropper | Whether to enable the eyedropper color picker | boolean | true |
-| height | Height | number | 280 |
-| style | Style | CSSProperties | - |
-| topSlot | Top rendering additional elements | ReactNode | - |
-| width | Width | number | 280 |
-| usePopover | Whether to put in Popover rendering | boolean | false |
-| popoverProps | When placing a Popover, the props passed to the Popover | Popover Props | - |
+| Parameter     | Description                                             | Type          | Default value |
+| ------------- | ------------------------------------------------------- | ------------- | ------------- |
+| onChange      | User selected color callback                            | (value)=>void | -             |
+| alpha         | Whether to enable transparency selection                | boolean       | true          |
+| bottomSlot    | Bottom rendering additional elements                    | ReactNode     | -             |
+| className     | Class name                                              | string        | -             |
+| defaultFormat | Default format for manual input                         | rgba hex hsva | hex           |
+| defaultValue  | Default value                                           | Object        | -             |
+| eyeDropper    | Whether to enable the eyedropper color picker           | boolean       | true          |
+| height        | Height                                                  | number        | 280           |
+| style         | Style                                                   | CSSProperties | -             |
+| topSlot       | Top rendering additional elements                       | ReactNode     | -             |
+| width         | Width                                                   | number        | 280           |
+| usePopover    | Whether to put in Popover rendering                     | boolean       | false         |
+| popoverProps  | When placing a Popover, the props passed to the Popover | Popover Props | -             |

content/input/colorpicker/index.md

@@ -13,6 +13,7 @@ brief: 快速便捷地选择颜色，并提供滴管工具取色
 
 ### 如何引入
 
+ColorPicker 从 v2.64.0 开始支持
 
 ```jsx import
 import { ColorPicker } from '@douyinfe/semi-ui';
@@ -24,28 +25,27 @@ import { ColorPicker } from '@douyinfe/semi-ui';
 #### 放在弹层
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker, Button } from '@douyinfe/semi-ui';
-function Demo(){
+function Demo() {
     return <div>
-        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}/>
-        
+        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}/>
         <br/>
         <div>自定义 trigger</div>
-
-        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}>
+        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}>
             <Button> Trigger </Button>
         </ColorPicker>
-        
-    </div>
+    </div>;
 }
 
 ```
 
 #### 正常展示
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
+function Demo() {
+    return <ColorPicker alpha={true} onChange={value=>{console.log(value);}}/>;
 }
 
 ```
@@ -60,9 +60,10 @@ function Demo(){
 
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value)}}/>
+function Demo() {
+    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value);}}/>;
 }
 
 ```
@@ -76,14 +77,16 @@ function Demo(){
 
 ```jsx live=true
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
+import React from 'react';
+
+function Demo() {
     return <div>
         <ColorPicker 
             defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
             onChange={(value)=>{
-            console.log(value)
-        }} className={""} alpha={true}/>
-    </div>
+                console.log(value);
+            }} className={""} alpha={true}/>
+    </div>;
 
 }
 
@@ -95,14 +98,18 @@ function Demo(){
 
 ```jsx live=true
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
-    console.log(value);
+import React from 'react';
+function Demo() {
+    const [value, setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
     return <div>
-        <ColorPicker value={value} onChange={(value)=>{
-            setValue(value)
-        }} className={""} alpha={true}/>
-    </div>
+        <ColorPicker
+            value={value}
+            onChange={(value)=>{
+                setValue(value);
+            }}
+            alpha={true}
+        />
+    </div>;
 
 }
 
@@ -114,11 +121,15 @@ function Demo(){
 使用 `topSlot` 和 `bottomSlot` 在顶部和底部渲染额外元素
 
 ```jsx live=true
+import React from 'react';
 import { ColorPicker } from '@douyinfe/semi-ui';
-function Demo(){
-    return <ColorPicker topSlot={<div>
-        TopSlot
-    </div>} bottomSlot={<div>Bottom Slot</div>} alpha={true} onChange={value=>{console.log(value)}}/>
+function Demo() {
+    return <ColorPicker
+        topSlot={<div> TopSlot</div>}
+        bottomSlot={<div>Bottom Slot</div>}
+        alpha={true}
+        onChange={value=>{console.log(value);}}
+    />;
 }
 
 ```

content/input/datepicker/index.md

@@ -27,7 +27,7 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 小尺寸
 
-使用 density 可以控制日期面板的尺寸，`compact` 为小尺寸，`default` 为默认尺寸。v1.17.0 后支持。
+使用 density 可以控制日期面板的尺寸，`compact` 为小尺寸，`default` 为默认尺寸。
 
 ```jsx live=true
 import React from 'react';
@@ -186,8 +186,6 @@ function Demo() {
 
 ### 同步切换双面板月份
 
-version: >= 1.28.0
-
 在范围选择的场景中, 开启 `syncSwitchMonth` 则允许双面板同步切换。默认为 false。
 
 > Note：点击年份按钮也会同步切换两个面板，从滚轮里面切换年月不会同步切换面板，这保证了用户选择非固定间隔月份的能力。
@@ -208,8 +206,6 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 切换面板日期的回调
 
-版本：>=1.28.0
-
 `onPanelChange` 回调函数会在面板的月份或年份切换改变时被调用。
 
 ```jsx live=true
@@ -228,7 +224,7 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 周选择
 
-dateRange 搭配 startDateOffset 和 endDateOffset 可以进行单击范围选择，如周选择、双周选择。v1.10.0 后支持。
+dateRange 搭配 startDateOffset 和 endDateOffset 可以进行单击范围选择，如周选择、双周选择。
 
 ```jsx live=true
 import React from 'react';
@@ -280,8 +276,6 @@ function Demo() {
 
 ### 年月选择
 
-**版本：** >= 0.21.0
-
 将 `type` 设定为 `month`，可以进行年月选择。
 
 ```jsx live=true
@@ -306,8 +300,6 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 确认日期时间选择
 
-**版本：** >= 0.18.0
-
 对于“日期时间”（type="dateTime"）或“日期时间范围”（type="dateTimeRange"）的选择，可以进行确认后才将值写入输入框内，你可以通过传递 needConfirm=true 来开启这种行为。
 
 同时支持 “确认”（onConfirm） 和 “取消”（onCancel） 两个按钮的点击回调。
@@ -364,7 +356,8 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 渲染顶部/底部额外区域
 
-通过 `topSlot` 和 `bottomSlot` 可以自定义渲染顶部和底部额外区域。
+通过 `topSlot` 和 `bottomSlot` 可以自定义渲染顶部和底部额外区域     
+通过 `leftSlot` 和 `rightSlot` 可以自定义渲染左侧和右侧额外区域（v2.65.0后支持）
 
 ```jsx live=true
 import React, { useState, useMemo } from 'react';
@@ -641,8 +634,6 @@ import { DatePicker } from '@douyinfe/semi-ui';
 
 ### 自定义触发器
 
-**版本：**>=0.34.0
-
 默认情况下我们使用 `Input` 组件作为 `DatePicker` 组件的触发器，通过传递 `triggerRender` 方法你可以自定义这个触发器。
 
 自定义触发器是对触发器的完全自定义，默认的清除按钮将不生效，如果你需要清除功能，请自定义一个清除按钮。
@@ -735,8 +726,6 @@ function Demo() {
 
 ### 自定义日期显示内容
 
-**版本：**>=1.4.0
-
 `renderDate: (dayNumber: number, fullDate: string) => ReactNode`，自定义日期内容。
 
 -   `dayNumber`：当前日。如 `13`。
@@ -771,8 +760,6 @@ function Demo() {
 
 ### 自定义日期格子渲染
 
-**版本：**>=1.4.0
-
 `renderFullDate: (dayNumber: number, fullDate: string, dayStatus: object) => ReactNode`， 自定义日期格子的渲染内容。
 
 `dayStatus` 表示当前格子的状态，包括的 `key` 有：
@@ -872,6 +859,7 @@ function Demo() {
 | inputReadOnly | 文本框是否 readonly                                                                                       | boolean | false |  |
 | inputStyle | 输入框样式                                                                                                | object |  |  |
 | insetLabel | 前缀标签，优先级低于 `prefix`                                                                                  | string\|ReactNode |  |  |
+| leftSlot   | 渲染左侧额外区域                                                                                             | ReactNode |         |  **2.65.0** |
 | max | multiple 为 true 时，多选的数目,不传或者值为 null\|undefined 的话无限制                                                 | number | - |  |
 | motion | 是否开启面板展开的动画                                                                                          | boolean | true |  |
 | multiple | 是否可以选择多个，仅支持 type="date"                                                                             | boolean | false |  |
@@ -883,9 +871,13 @@ function Demo() {
 | presets | 日期时间快捷方式, start 和 end 在 v2.52 版本支持函数类型                                                                                            |  <ApiType detail='type PresetType = { start?: BaseValueType \| (() => BaseValueType); end?: BaseValueType \| (() => BaseValueType); text?: string }; type PresetsType = Array<PresetType \| (() => PresetType)>;'>Array</ApiType> | [] |  |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法                                                               | boolean |  |  |
 | presetPosition | 日期时间快捷方式面板位置, 可选值'left', 'right', 'top', 'bottom'                                                    | string |  'bottom' | **2.18.0** |
+| rangeSeparator | 自定义范围类型输入框的日期分隔符                                                                                     | string | '~' |  |
+| renderDate | 自定义日期显示内容                                                                                            | (dayNumber, fullDate) => ReactNode | - |  |
+| renderFullDate | 自定义显示日期格子内容                                                                                          | (dayNumber, fullDate, dayStatus) => ReactNode | - |  |
 | rangeSeparator | 自定义范围类型输入框的日期分隔符                                                                                     | string | '~' | |
 | renderDate | 自定义日期显示内容                                                                                            | (dayNumber, fullDate) => ReactNode | - |  |
 | renderFullDate | 自定义显示日期格子内容                                                                                          | (dayNumber, fullDate, dayStatus) => ReactNode | - |  |
+| rightSlot         | 渲染右侧额外区域                                                                                             | ReactNode |         | **2.65.0** |
 | showClear | 是否显示清除按钮                                                                                             | boolean | true |  |
 | size | 尺寸，可选值："small", "default", "large"                                                                   | string | 'default' |  |
 | spacing | 浮层与 trigger 的距离                                                                                      | number | 4 |  |

content/input/treeselect/index-en-US.md

@@ -76,7 +76,7 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 ### Multi-choice
 
 You could use `multiple` to set mode to multi-choice. When all child items are selected, the parent item will be selected.  
-Use `leafOnly` (>= v0.32.0) if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.  
+Use `leafOnly` if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.  
 
 ```jsx live=true
 import React from 'react';
@@ -676,8 +676,6 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 ### Disable Strictly
 
-version: >= 1.30.0
-
 You can use `disableStrictly` to enable strict disabling. After enabling strict disabling, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent.
 
 Take the following demo as an example, the node "China" is strictly disabled. Therefore, when we change the selected state of its parent node "Asia", it will not affect the selected state of the node "China".
@@ -743,8 +741,6 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 Both `defaultExpandAll` and `expandAll` can set the default expanded/collapsed state of `TreeSelect`. The difference between the two is that `defaultExpandAll` only takes effect during initialization, while `expandAll` will take effect not only during initialization, but also when the data (`treeData`) is dynamically updated.
 
-Among them, `expandAll` is supported starting from 1.30.0.
-
 In the demo below, after `TreeData` is updated, `defaultExpandAll` becomes invalid, and `expandAll` still takes effect.
 
 ```jsx live=true
@@ -1409,86 +1405,85 @@ function Demo() {
 
 | Properties               | Instructions                                                                        | type                                                              | Default     | Version |
 | ------------------------ | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ----------- | ------- |
-| arrowIcon|Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon| ReactNode | | 1.15.0|
-|autoAdjustOverflow|Whether the pop-up layer automatically adjusts the direction when it is obscured (only vertical direction is supported for the time being, and the inserted parent is body)|boolean | true| 0.34.0|
-| autoExpandParent | Toggle whether to expand parent nodes automatically | boolean | false | 0.34.0 |
+| arrowIcon|Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon| ReactNode | | - |
+|autoAdjustOverflow|Whether the pop-up layer automatically adjusts the direction when it is obscured (only vertical direction is supported for the time being, and the inserted parent is body)|boolean | true| - |
+| autoExpandParent | Toggle whether to expand parent nodes automatically | boolean | false | - |
 | autoMergeValue | Sets the automerge value. Specifically, when enabled, when a parent node is selected, value will include that node and its children. (Works if leafOnly is false)| boolean | true | 2.61.0 | 
 | borderless        | borderless mode  >=2.33.0                                                                                                                                                                     | boolean                         |           |
 | checkRelation | In multiple, the relationship between the checked states of the nodes, optional: 'related'、'unRelated' | string | 'related' | 2.5.0 |
 | className                | Class name                                                                          | string                                                            | -           | -       |
 | clearIcon    | Can be used to customize the clear button, valid when showClear is true                       | ReactNode                |       | 2.25.0    |
-| clickToHide  | Whether to close the drop-down layer automatically when selecting, only works in single-selection mode  | boolean    | true | 1.5.0      |
+| clickToHide  | Whether to close the drop-down layer automatically when selecting, only works in single-selection mode  | boolean    | true | - |
 | clickTriggerToHide  | When the panel is open, whether to close the panel after clicking the Trigger  | boolean    | true | 2.32.0      |
-| defaultExpandAll    | Set whether to expand all nodes during initialization. And if the data (`treeData`) changes, this api cannot affect the expansion of the node. If you need this, you can use `expandAll`    | boolean                     | false   | 0.32.0 |
-| defaultExpandedKeys | Keys of default expanded nodes. Direct child nodes will be displayed. | string\[] | - | 0.32.0 |
-| defaultOpen | Toggle whether to open dropdown menu by default | boolean | false | 0.32.0 |
+| defaultExpandAll    | Set whether to expand all nodes during initialization. And if the data (`treeData`) changes, this api cannot affect the expansion of the node. If you need this, you can use `expandAll`    | boolean                     | false   | - |
+| defaultExpandedKeys | Keys of default expanded nodes. Direct child nodes will be displayed. | string\[] | - | - |
+| defaultOpen | Toggle whether to open dropdown menu by default | boolean | false | - |
 | defaultValue             | Default value         | <ApiType detail='string \| number \| TreeNodeData \| (string \| number \| TreeNodeData)[]'>ValueType</ApiType>   | -   | -     |
 | disabled                 | Disabled                                                                            | boolean                                                           | false       | -       |
-| disableStrictly | Disable Strictly | boolean | false | 1.30.0 |
+| disableStrictly | Disable Strictly | boolean | false | - |
 | dropdownClassName        | `className` property for dropDown                                                   | string                                                            | -           | -       |
 | dropdownMatchSelectWidth | Toggle if min-width of dropDown menu should be same as width of select box          | boolean                                                           | true        | -       |
 | dropdownMargin | Popup layer calculates the size of the safe area when the current direction overflows, used in scenes covered by fixed elements, more detail refer to [issue#549](https://github.com/DouyinFE/semi-design/issues/549), same as Tooltip margin | object\|number |  | 2.25.0 |
 | dropdownStyle            | Style for dropDown                                                                  | CSSProperties                                                            | -           | -       |
 | emptyContent             | Empty content when no data                                                          | ReactNode                                                         | `no result` | -       |
-| expandAction             | Expand logic, one of false, 'click', 'doubleClick'. Default is set to false, which means item will not be expanded on clicking except on expand icon    | boolean \| string   | false | 1.4.0        |
-| expandAll | Set whether to expand all nodes by default. If the data (`treeData`) changes, the default expansion will still be affected by this api | boolean | false | 1.30.0 |
-| expandedKeys        | （Controlled）Keys of expanded nodes. Direct child nodes will be displayed.  | string[]                    | -       | 0.32.0 |
+| expandAction             | Expand logic, one of false, 'click', 'doubleClick'. Default is set to false, which means item will not be expanded on clicking except on expand icon    | boolean \| string   | false | - |
+| expandAll | Set whether to expand all nodes by default. If the data (`treeData`) changes, the default expansion will still be affected by this api | boolean | false |- |
+| expandedKeys        | （Controlled）Keys of expanded nodes. Direct child nodes will be displayed.  | string[]                    | -       | - |
 | keyMaps | Customize the key, label, and value fields in the node | object |  - | 2.47.0 |
 | filterTreeNode           | Toggle whether searchable or pass in a function to customize search behavior, data parameter provided since v2.28.0 | boolean\| <ApiType detail='(inputValue: string, treeNodeString: string, data?: TreeNodeData) => boolean'>Function</ApiType> | false       | -       |
 | getPopupContainer        | Container to render pop-up, you need to set 'position: relative`  This will change the DOM tree position, but not the view's rendering position.                                                    | function():HTMLElement                                            | -           | -       |
-| insetLabel               | Prefix alias，used mainly in Form                                                   | ReactNode                                                         | -           | 0.28.0  |
-| labelEllipsis | Toggle whether to ellipsis label when overflow | boolean | false\|true(virtualized) | 1.8.0 |  
-| leafOnly | Toggle whether to display tags for leaf nodes only and for onChange callback params in multiple mode | boolean | false |0.32.0 |
-| loadData | Load data asynchronously and the return value should be a promise | (treeNode: TreeNodeData) => Promise |-| 1.32.0|
-| loadedKeys | （Controlled）Mark node as loaded, working with `loadData` | Set< string > | - | 1.32.0|
+| insetLabel               | Prefix alias，used mainly in Form                                                   | ReactNode                                                         | -           | - |
+| labelEllipsis | Toggle whether to ellipsis label when overflow | boolean | false\|true(virtualized) | - |  
+| leafOnly | Toggle whether to display tags for leaf nodes only and for onChange callback params in multiple mode | boolean | false | - |
+| loadData | Load data asynchronously and the return value should be a promise | (treeNode: TreeNodeData) => Promise |-| - |
+| loadedKeys | （Controlled）Mark node as loaded, working with `loadData` | Set< string > | - | -|
 | maxTagCount              | Maximum number of tags displayed                                                    | number                                                            | -           | -       |
 | motionExpand             | Toggle whether to turn on animation for expansion                                   | boolean                                                           | true        | -       |
 | multiple                 | Toggle whether in multi-choice mode                                                 | boolean                                                           | false       | -       |
-| optionListStyle          | Style for optionList                                                                | CSSProperties                                                     | -           | 1.8.0  |
-| outerBottomSlot          | Rendered at the bottom of the pop-up layer, custom slot level with optionList    | ReactNode  |  - | 1.1.0 |
-| outerTopSlot| Rendered at the top of the pop-up layer, custom slot level with optionList. If turn on filterTreeNode, it will replace search box as well. You could use static search method to customize instead. |  ReactNode  |  - | 1.9.0|
+| optionListStyle          | Style for optionList                                                                | CSSProperties                                                     | -           |- |
+| outerBottomSlot          | Rendered at the bottom of the pop-up layer, custom slot level with optionList    | ReactNode  |  - |- |
+| outerTopSlot| Rendered at the top of the pop-up layer, custom slot level with optionList. If turn on filterTreeNode, it will replace search box as well. You could use static search method to customize instead. |  ReactNode  |  - |- |
 | placeholder              | Placeholder for input box                                                           | string                                                            | -           | -       |
 | position                 | Pop-up position, optional values refer to Tooltip position     | string          | bottomLeft           | 2.25.0       |
-| prefix                   | Prefix                                                                              | ReactNode                                                         | -           | 0.28.0  |
+| prefix                   | Prefix                                                                              | ReactNode                                                         | -           | -  |
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
-| renderFullLabel | Custom option render function, [Detailed Params and Usage](/en-US/navigation/tree#Advanced%20FullRender) | (obj) => ReactNode | 1.7.0 |
-| renderLabel | Custom label render function | <ApiType detail='(label: ReactNode, data: TreeNodeData) => ReactNode'>(label, data) => ReactNode</ApiType> | 1.6.0 | 
-| renderSelectedItem | render selected item | Function | - | 1.26.0 | 
+| renderFullLabel | Custom option render function, [Detailed Params and Usage](/en-US/navigation/tree#Advanced%20FullRender) | (obj) => ReactNode |- |
+| renderLabel | Custom label render function. The searchWord parameter is supported since 2.65.0 | <ApiType detail='(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode'>(label, data, searchWord) => ReactNode</ApiType> | -| 
+| renderSelectedItem | render selected item | Function | - |- | 
 | restTagsPopoverProps | The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     | PopoverProps     | {}        | 2.22.0 |
-| searchAutoFocus        | Whether autofocus for search box           | boolean      | false           | 1.27.0       |
+| searchAutoFocus        | Whether autofocus for search box           | boolean      | false           |-|
 | searchPlaceholder        | Placeholder for search box                                                          | string                                                            | -           | -       |
-| searchPosition | Set the position of the search box, one of: `dropdown`、`trigger` | string | `dropdown` | 1.29.0 |
+| searchPosition | Set the position of the search box, one of: `dropdown`、`trigger` | string | `dropdown` | - |
 | showClear | When the value is not empty, whether the trigger displays the clear button | boolean | false |  |
-| showFilteredOnly | Toggle whether to displayed filtered result only in search mode | boolean | false | 0.32.0 |
+| showFilteredOnly | Toggle whether to displayed filtered result only in search mode | boolean | false | - |
 | showLine | The option in the options panel shows connecting lines | boolean | false | 2.50.0 |
 | showRestTagsPopover | When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover | boolean | false | 2.22.0 |
-| showSearchClear | Toggle whether to support clear search box | boolean | true | 0.35.0 |
+| showSearchClear | Toggle whether to support clear search box | boolean | true | - |
 | size                     | Size for input box，one of `large`，`small`，`default`                              | string                                                            | `default`   | -       |
 | style                    | Inline style                                                            | CSSProperties             | -           | -       |
-| suffix                   | Suffix                                                                              | ReactNode                                                         | -           | 0.28.0  |
+| suffix                   | Suffix                                                                              | ReactNode                                                         | -           |  - |
 | treeData                 | Data for treeNodes                                                                  | TreeNodeData[]                                                  | \[]         | -       |
 | treeNodeFilterProp       | Property in a `TreeNodeData` used to search                                             | string                                                            | `label`     | -       |
 | treeNodeLabelProp        | Property in a `TreeNodeData` used to display                                            | string                                                            | `label`     | -       |
-| triggerRender | Method to create a custom trigger  | (props: TriggerRenderProps) => ReactNode | - | 0.34.0 |
-| validateStatus | Validate status，one of `warning`、`error`、 `default`, only affects the background color of the component | string | - | 0.32.0 |
+| triggerRender | Method to create a custom trigger  | (props: TriggerRenderProps) => ReactNode | - | - |
+| validateStatus | Validate status，one of `warning`、`error`、 `default`, only affects the background color of the component | string | - | - |
 | value                    | Value data of current item, used when TreeSelect is a controlled component     | <ApiType detail='string \| number \| TreeNodeData \| (string \| number \| TreeNodeData)[]'>ValueType</ApiType>    | -           | -       |
-| virtualize | Efficiently rendering large lists, refer to Tree - VirtualizeObj. Motion is disabled when tree is rendered as virtualized list. | object | - | 0.32.0 |
-| zIndex | zIndex for treeSelect dropDown menu | number | 1030 | 0.30.0 |
+| virtualize | Efficiently rendering large lists, refer to Tree - VirtualizeObj. Motion is disabled when tree is rendered as virtualized list. | object | - | - |
+| zIndex | zIndex for treeSelect dropDown menu | number | 1030 | - |
 | onBlur                 | Callback function when treeSelect blur | function(event)                            | -           | -       |
 | onFocus                 | Callback function when treeSelect focus  | function(event)                            | -           | -       |
 | onChange                 | Callback function when the tree node is selected, return the value property of data | Function                           | -           | -       |
-| onChangeWithObject        | Toggle whether to return all properties in an option as a return value. When set to true, onChange turn to Function(node, e)   | boolean                     | false   | 1.0.0 |
+| onChangeWithObject        | Toggle whether to return all properties in an option as a return value. When set to true, onChange turn to Function(node, e)   | boolean                     | false   | - |
 | onClear     | Callback triggered when clear button is clicked   | (e: Event) => void |  -  |   2.52.0  |
 | onExpand                 | Callback function when expand or collapse a node                                    | <ApiType detail='(expandedKeys:array, {expanded: bool, node}) => void'>(expandedKeys, object) => void</ApiType>             | -           | -       |
-| onLoad | Callback function when a node is loaded | <ApiType detail='(loadedKeys: Set<string\>, treeNode: TreeNodeData) => void'>(loadedKeys, treeNode) => void</ApiType> | - | 1.32.0|
+| onLoad | Callback function when a node is loaded | <ApiType detail='(loadedKeys: Set<string\>, treeNode: TreeNodeData) => void'>(loadedKeys, treeNode) => void</ApiType> | - |-|
 | onSearch                 | Callback function when search value changes. <br/>`filteredExpandedKeys` represents the key of the node expanded due to search or value/defaultValue, which can be used when expandedKeys is controlled<br/> **filteredExpandedKeys is supported in 2.6.0**. <br/>`filteredNodes` represents the nodes hit by the search. **filteredNodes is supported in 2.57.0**       | function(input: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[])                                        | -           |     |
 | onSelect                 | Callback function when selected, return the key property of data                    | <ApiType detail='(selectedKey:string, selected: bool, selectedNode: TreeNodeData) => void'>(selectedKey, selected, selectedNode)=>void</ApiType>                      | -           | -       |
-| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden   | function(isVisible:boolean) |     |   1.4.0  |
+| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden   | function(isVisible:boolean) |     |  - |
 
 ### TreeNodeData
 
-> **Key for `TreeNodeData` is required and must be unique**, `label` can be duplicated. Before **v>=1.7.0** value is also required and must be unique.
-> After **v>=1.7.0**, value is not required. In this case, the value property in `onChange`, `value`, `defaultValue` and `onChangeWithObject` will point to key property.
+> **Key for `TreeNodeData` is required and must be unique**, `label` can be duplicated. Value is not required. In this case, the value property in `onChange`, `value`, `defaultValue` and `onChangeWithObject` will point to key property.
 > To ensure everything behave as expected, keep a consistency of whether to have value or not to have value.
 
 | Properties | Instructions| type              | Default |

content/input/treeselect/index.md

@@ -67,7 +67,7 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 ### 多选
 
 设置 `multiple`，可以进行多选。多选情况下所有子项都被选择时，自动勾选显示其父项。  
-通过 `leafOnly` (>= v0.32.0) 属性，可以设置只展示叶子节点，同时 onChange 的回调入参也会只有叶子节点的值。  
+通过 `leafOnly` 属性，可以设置只展示叶子节点，同时 onChange 的回调入参也会只有叶子节点的值。  
 
 ```jsx live=true
 import React from 'react';
@@ -571,8 +571,6 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 `defaultExpandAll` 和 `expandAll` 均可以设置 `TreeSelect` 的默认展开/收起状态。二者的区别是，`defaultExpandAll` 只在初始化时生效，而 `expandAll` 不仅会在初始化时生效，当数据(`treeData`)发生动态更新时，`expandAll` 也仍然生效。
 
-其中，`expandAll` 是从 1.30.0 开始支持的。
-
 在下面的 demo 中，`TreeData` 更新后，`defaultExpandAll` 失效，`expandAll` 仍然生效。
 
 ```jsx live=true
@@ -709,8 +707,6 @@ import { TreeSelect } from '@douyinfe/semi-ui';
 
 ### 严格禁用
 
-version: >= 1.30.0
-
 可以使用 `disableStrictly` 来开启严格禁用。开启严格禁用后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态。
 
 以下面的 demo 为例，节点"中国"开启了严格禁用，因此，当我们改变其父节点"亚洲"的选中状态时，也不会影响到节点"中国"的选中状态。
@@ -1435,7 +1431,7 @@ function Demo() {
 | prefix | 前缀标签                                                                                                                                            | ReactNode | - |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法                                                                                 | boolean | - |
 | renderFullLabel | 完全自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#高级定制)                                                                     | (obj) => ReactNode | - |
-| renderLabel | 自定义label的渲染函数，[入参及用法详见](/zh-CN/navigation/tree#自定义节点内容)                                                                        | <ApiType detail='(label:ReactNode, data:TreeNodeData) => ReactNode'>(label, data) => ReactNode</ApiType> | - |
+| renderLabel | 自定义label的渲染函数，searchWord 参数自 2.65.0 开始支持。[入参及用法详见](/zh-CN/navigation/tree#自定义节点内容)                                                                        | <ApiType detail='(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode'>(label, data, searchWord) => ReactNode</ApiType> | - |
 | renderSelectedItem | 自定义渲染已选项                                                                                                                         | Function | - |
 | restTagsPopoverProps | Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83) 。v2.22.0后提供  | PopoverProps | {} |
 | searchAutoFocus | 搜索框自动聚焦                                                                                                                              | boolean | false |
@@ -1470,8 +1466,7 @@ function Demo() {
 
 ### TreeNodeData
 
-> __不同 `TreeNodeData` 的 key 值要求必填且唯一。__`label` 允许重复。**v>=1.7.0** 之前 value 值要求必须必填且唯一。
-> **v>=1.7.0** 之后 value 值非必填。此时 onChange, value, defaultValue 及 onChangeWithObject 中所取的 value 属性值将改为 key 值。
+> __不同 `TreeNodeData` 的 key 值要求必填且唯一。__`label` 允许重复。value 值非必填。此时 onChange, value, defaultValue 及 onChangeWithObject 中所取的 value 属性值将改为 key 值。
 > 为了保证行为的符合预期，treeData 中的 value 值或者全部不填写，或者全部填写且唯一，不建议混写。
 
 | 属性            | 说明         | 类型           | 默认值          |

content/input/upload/index.md

@@ -1303,45 +1303,45 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |accept | `html` 原生属性，接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)。<br/>`accept` 的值为你允许选择文件的[MIME types 字符串](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)或文件后缀（.jpg等） | string | |  |
 |action | 文件上传地址，必填 | string |  |  |
 |addOnPasting | 按下 ctrl/command + v时，是否自动将剪贴板中的文件添加至 fileList，当前仅支持图片类型; 需用户授权同意 | boolean | false | 2.43.0 |
-|afterUpload | 文件上传后的钩子，根据 return 的 object 更新文件状态 | function(auProps) => afterUploadResult |  | 1.0.0 |
-|beforeClear|清空文件前回调，按照返回值来判断是否继续移除，返回false、Promise.resolve(false)、Promise.reject()会阻止移除|(fileList: Array<FileItem \>) => boolean\|Promise||1.31.0|
-|beforeRemove|移除文件前的回调，按照返回值来判断是否继续移除，返回false、Promise.resolve(false)、Promise.reject()会阻止移除|(file: <FileItem\>, fileList: Array<FileItem \>) => boolean\|Promise||1.31.0|
-|beforeUpload | 上传文件前的钩子，根据 return 的 object 更新文件状态，控制是否上传 | function(buProps) => beforeUploadResult \| Promise \| boolean |  | 1.0.0 |
+|afterUpload | 文件上传后的钩子，根据 return 的 object 更新文件状态 | function(auProps) => afterUploadResult |  |  |
+|beforeClear|清空文件前回调，按照返回值来判断是否继续移除，返回false、Promise.resolve(false)、Promise.reject()会阻止移除|(fileList: Array<FileItem \>) => boolean\|Promise|| |
+|beforeRemove|移除文件前的回调，按照返回值来判断是否继续移除，返回false、Promise.resolve(false)、Promise.reject()会阻止移除|(file: <FileItem\>, fileList: Array<FileItem \>) => boolean\|Promise|| |
+|beforeUpload | 上传文件前的钩子，根据 return 的 object 更新文件状态，控制是否上传 | function(buProps) => beforeUploadResult \| Promise \| boolean |  |  |
 |capture | 文件上传控件中媒体拍摄的方式 | boolean\|string\|undefined | | |
 |className | 类名 | string |  |  |
-|customRequest | 自定义上传使用的异步请求方法 | (object: customRequestArgs) => void |  | 1.5.0 |
+|customRequest | 自定义上传使用的异步请求方法 | (object: customRequestArgs) => void |  |  |
 |data | 上传时附带的额外参数或返回上传额外参数的方法 | object\|(file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => object | {} |  |
 |defaultFileList | 已上传的文件列表 | Array<FileItem\> | [] |  |
-|directory | 文件夹类型上传 | boolean | false | 1.20.0 |
+|directory | 文件夹类型上传 | boolean | false |  |
 |disabled | 是否禁用 | boolean | false |  |
 |dragIcon | 拖拽区左侧 Icon | ReactNode | `<IconUpload />` |  |
 |dragMainText | 拖拽区主文本 | ReactNode | '点击上传文件或拖拽文件到这里' | |
 |dragSubText | 拖拽区帮助文本 | ReactNode | '' |  |
 |draggable | 是否支持拖拽上传 | boolean | false |  |
-|fileList | 已上传的文件列表，传入该值时，upload 即为受控组件 | Array<FileItem\> |  | 1.0.0 |
-|fileName | 作用与 name 相同，主要在 Form.Upload 中使用，为了避免与 Field 的 props.name 冲突，此处另外提供一个重命名的 props | string |  | 1.0.0 |
+|fileList | 已上传的文件列表，传入该值时，upload 即为受控组件 | Array<FileItem\> |  |  |
+|fileName | 作用与 name 相同，主要在 Form.Upload 中使用，为了避免与 Field 的 props.name 冲突，此处另外提供一个重命名的 props | string |  | |
 |headers | 上传时附带的 headers 或返回上传额外 headers 的方法 | object\|(file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => object | {} |  |
 |hotSpotLocation | 照片墙点击热区的放置位置，可选值 `start`, `end` | string | 'end' | 2.5.0 |
-|itemStyle | fileCard 的内联样式 | CSSProperties |  | 1.0.0 |
+|itemStyle | fileCard 的内联样式 | CSSProperties |  |  |
 |limit | 最大允许上传文件个数 | number |  |  |
 |listType | 文件列表展示类型，可选`picture`、`list` | string | 'list' |  |
 |maxSize | 文件体积最大限制，单位 KB | number |  |  |
 |minSize | 文件体积最小限制，单位 KB | number |  |  |
 |multiple | 是否允许单次选中多个文件 | boolean | false |  |
 |name | 上传时使用的文件名 | string | '' |  |
-|onAcceptInvalid | 当接收到的文件不符合accept规范时触发（一般是因为文件夹选择了全部类型文件/拖拽不符合格式的文件时触发） | (files: File[]) => void | | 1.24.0 |
-|onChange | 文件状态发生变化时调用，包括上传成功，失败，上传中，回调入参为 Object，包含 fileList、currentFile 等值 | ({fileList: Array<FileItem\>, currentFile?: FileItem}) => void |  | 1.0.0 |
-|onClear | 点击清空时的回调 | () => void |  | 1.1.0 |
-|onDrop | 当拖拽的元素在拖拽区上被释放时触发 | (e, files: Array<File\>, fileList: Array<FileItem\>) => void |  | 1.9.0 |
+|onAcceptInvalid | 当接收到的文件不符合accept规范时触发（一般是因为文件夹选择了全部类型文件/拖拽不符合格式的文件时触发） | (files: File[]) => void | |  |
+|onChange | 文件状态发生变化时调用，包括上传成功，失败，上传中，回调入参为 Object，包含 fileList、currentFile 等值 | ({fileList: Array<FileItem\>, currentFile?: FileItem}) => void |  |  |
+|onClear | 点击清空时的回调 | () => void |  |  |
+|onDrop | 当拖拽的元素在拖拽区上被释放时触发 | (e, files: Array<File\>, fileList: Array<FileItem\>) => void |  |  |
 |onError | 上传错误时的回调 | (error: Error, file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList: Array<FileItem\>, xhr: XMLHttpRequest) => void |  |  |
 |onExceed | 上传文件总数超出 `limit` 时的回调 | (fileList:Array<FileItem\>) => void |  |  |
 |onFileChange | 选中文件后的回调 | (Array<File\>) => void |  |  |
-|onOpenFileDialog | 打开系统文系统文件选择弹窗时触发 | () => void |  | 1.18.0 |
-|onPreviewClick | 点击文件卡片时的回调 | (fileItem: FileItem) => void |  | 1.8.0 |
+|onOpenFileDialog | 打开系统文系统文件选择弹窗时触发 | () => void |  |  |
+|onPreviewClick | 点击文件卡片时的回调 | (fileItem: FileItem) => void |  |  |
 |onProgress | 上传文件时的回调 | (percent: number, file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList: Array<FileItem\>) => void |  |  |
 |onPastingError | addOnPasting为true时，粘贴读取失败时的回调 | (Error\|PermissionState) |  | 2.43.0 |
 |onRemove | 移除文件的回调 | (currentFile: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList:Array<FileItem\>, currentFileItem: FileItem) => void |  |  |
-|onRetry | 上传重试的回调 | (file: <FileItem\>) => void |  | 1.18.0 |
+|onRetry | 上传重试的回调 | (file: <FileItem\>) => void |  |  |
 |onSizeError | 文件尺寸非法的回调 | (file:[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList:Array<FileItem\>) => void |  |  |
 |onSuccess | 上传成功后的回调 | (responseBody: object, file: [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File), fileList:Array<FileItem\>) => void |  |
 |picHeight | 图片墙模式下，可通过该 API 定制图片展示高度 | string\|number |  | 2.42.0 |
@@ -1349,20 +1349,20 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |previewFile | 自定义预览逻辑，该函数返回内容将会替换原缩略图 | (fileItem: FileItem) => ReactNode |  |  |
 |prompt | 自定义插槽，可用于插入提示文本。与直接在 `children` 中写的区别时，`prompt` 的内容在点击时不会触发上传<br/>（图片墙模式下，v1.3.0 后才支持传入 prompt） | ReactNode |  |  |
 |promptPosition | 提示文本的位置，当 listType 为 list 时，参照物为 children 元素；当 listType 为 picture 时，参照物为图片列表。可选值 `left`、`right`、`bottom`<br/>（图片墙模式下，v1.3.0 后才支持使用 promptPosition） | string | 'right' |  |
-|renderFileItem | fileCard 的自定义渲染 | (renderProps: RenderFileItemProps) => ReactNode |  | 1.0.0 |
+|renderFileItem | fileCard 的自定义渲染 | (renderProps: RenderFileItemProps) => ReactNode |  |  |
 |renderFileOperation | 自定义列表项操作区 | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
 |renderPicInfo| 自定义照片墙信息，只在照片墙模式下有效| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |
 |renderPicPreviewIcon| 自定义照片墙hover时展示的预览图标，只在照片墙模式下有效 | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
 |renderThumbnail| 自定义图片墙缩略图，只在照片墙模式下有效| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |
-|showClear | 在 limit 不为 1 且当前已上传文件数大于 1 时，是否展示清空按钮 | boolean | true | 1.0.0 |
+|showClear | 在 limit 不为 1 且当前已上传文件数大于 1 时，是否展示清空按钮 | boolean | true |  |
 |showPicInfo| 是否显示图片信息，只在照片墙模式下有效| boolean| false | 2.2.0 |
-|showReplace | 上传成功时，是否展示在 fileCard 内部展示替换按钮 | boolean | false | 1.21.0 |
-|showRetry | 上传失败时，是否展示在 fileCard 内部展示重试按钮 | boolean | true | 1.0.0 |
+|showReplace | 上传成功时，是否展示在 fileCard 内部展示替换按钮 | boolean | false |  |
+|showRetry | 上传失败时，是否展示在 fileCard 内部展示重试按钮 | boolean | true |  |
 |showUploadList | 是否显示文件列表 | boolean | true |  |
 |style | 样式 | CSSProperties |  |  |
-|transformFile | 选中文件后，上传文件前的回调函数，可用于对文件进行自定义转换处理 | (file:[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => FileItem |  | 1.0.0 |
+|transformFile | 选中文件后，上传文件前的回调函数，可用于对文件进行自定义转换处理 | (file:[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => FileItem |  |  |
 |uploadTrigger | 触发上传时机，可选值 `auto`、`custom` | string | 'auto' |  |
-|validateMessage | Upload 整体的错误信息 | ReactNode |  | 1.0.0 |
+|validateMessage | Upload 整体的错误信息 | ReactNode |  |  |
 |withCredentials | 是否带上 Cookie 信息 | boolean | false |  |
 
 

content/navigation/navigation/index.md

@@ -36,7 +36,7 @@ import { Nav } from '@douyinfe/semi-ui';
 
 参数详见 [Nav.Header](#Nav.Header) 和 [Nav.Footer](#Nav.Footer)。
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconSemiLogo } from '@douyinfe/semi-icons';
@@ -79,7 +79,7 @@ Navigation 目前提供了个两个参数用于定义导航样式：`style` 和
 
 例如你需要一个中间列表可以滚动，导航头部和底部固定的导航组件，可以这么使用：
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconSemiLogo } from '@douyinfe/semi-icons';
@@ -126,7 +126,7 @@ class NavApp extends React.Component {
 
 可以使用 JSX 写法定义导航头部、导航项以及导航底部。使用 JSX写法时，在 Nav 的 children 层级，你除了可以使用 Nav.Header、Nav.Item、Nav.Sub、Nav.Footer外，你也可以置入其他自定义的 ReactNode 元素
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconStar, IconUser, IconUserGroup, IconSemiLogo } from '@douyinfe/semi-icons';
@@ -136,7 +136,7 @@ class NavApp extends React.Component {
     render() {
         return (
             <Nav
-                bodyStyle={{ height: 320 }}
+                bodyStyle={{ height: 300 }}
                 defaultOpenKeys={['user', 'union']}
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
@@ -201,17 +201,17 @@ import { Nav } from '@douyinfe/semi-ui';
             ]}
         ></Nav>
     );
-}
+};
 ```
 
 
 
-### 导航方向
+### 垂直与水平布局
 
 Navigation 目前提供两种方向的导航：
 
--   垂直方向（默认）,  `mode = "vertical"`
--   水平方向, `mode = "horizontal"`
+-   垂直布局（默认） `mode = "vertical"`
+-   水平布局 `mode = "horizontal"`
 
 
 特别注意的是，有一些功能（参数）仅在 `mode = "vertical"` 时有效：
@@ -220,9 +220,9 @@ Navigation 目前提供两种方向的导航：
 -   `defaultOpenKeys` | `openKeys` （指定默认的以及受控的展开子导航项 key 数组，这个参数仅在 `mode = "vertical"` 且 `isCollapsed = false` 有效）
 -   `Footer` 组件的 `collapseButton` 收起侧边栏功能按钮
 
-#### 竖直方向
+#### 垂直布局
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconSemiLogo } from '@douyinfe/semi-icons';
@@ -234,7 +234,7 @@ class NavApp extends React.Component {
         return (
             <div style={{ width: '100%' }}>
                 <Nav
-                    bodyStyle={{ height: 320 }}
+                    bodyStyle={{ height: 300 }}
                     items={[
                         { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
                         { itemKey: 'union', text: '活动管理', icon: <IconTreeSelect/> },
@@ -266,7 +266,7 @@ class NavApp extends React.Component {
 }
 ```
 
-#### 水平方向
+#### 水平布局
 
 ```jsx live=true dir="column"
 import React from 'react';
@@ -339,113 +339,172 @@ class NavApp extends React.Component {
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Nav, Avatar, Dropdown, Select, Button } from '@douyinfe/semi-ui';
-import { IconStar, IconUser, IconUserGroup, IconSetting, IconEdit, IconLanguage, IconSemiLogo } from '@douyinfe/semi-icons';
-
-class NavApp extends React.Component {
-    constructor() {
-        this.items = [
-            { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
-            { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
-            {
-                itemKey: 'union-management',
-                text: '任务管理',
-                icon: <IconUserGroup />,
-                items: ['公告设置', '任务查询', '信息录入']
-            },
-            {
-                itemKey: 'approve-management',
-                text: '审批管理',
-                icon: <IconEdit />,
-                items: [
-                    '入驻审核',
-                    {
-                        itemKey: 'operation-management',
-                        text: '运营管理',
-                        items: [
-                            '人员管理',
-                            '人员变更'
-                        ]
-                    }
-                ]
-            },
-            {
-                text: '任务平台',
-                icon: <IconSetting />,
-                itemKey: 'job',
-                items: ['任务管理', '用户任务查询'],
-            },
-        ];
-
-        this.renderHorizontal = this.renderHorizontal.bind(this);
-        this.renderVertical = this.renderVertical.bind(this);
-    }
+import { Nav, Avatar, Dropdown, Select, Button, Layout, Breadcrumb, Skeleton } from '@douyinfe/semi-ui';
+import { IconStar, IconLanguage, IconSemiLogo, IconBytedanceLogo, IconBell, IconHelpCircle } from '@douyinfe/semi-icons';
+import { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNotification, IconSteps, IconTree, IconTabs, IconNavigation } from '@douyinfe/semi-icons-lab';
 
-    renderHorizontal() {
-        return (
-            <Nav
-                mode={'horizontal'}
-                onSelect={key => console.log(key)}
-                header={{
-                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
-                    text: 'Semi 运营后台'
-                }}
-                footer={
-                    <>
-                        <Select defaultValue='Chinese' style={{ width: 120, marginRight: 10 }} insetLabel={<IconLanguage />}>
-                            <Select.Option value='Chinese'>中文</Select.Option>
-                            <Select.Option value='English'>English</Select.Option>
-                            <Select.Option value='Korean'>한국어</Select.Option>
-                            <Select.Option value='Japanese'>日本語</Select.Option>
-                        </Select>
-                        <Button style={{ marginRight: 10 }}>切换至全球版</Button>
-                        <Dropdown
-                            position="bottomRight"
-                            render={
-                                <Dropdown.Menu>
-                                    <Dropdown.Item>详情</Dropdown.Item>
-                                    <Dropdown.Item>退出</Dropdown.Item>
-                                </Dropdown.Menu>
-                            }
+() => {
+    const { Header, Footer, Sider, Content } = Layout;
+
+    const TopHeader = () => (
+        <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+            <div>
+                <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
+                    <Nav.Header>
+                        <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />
+                    </Nav.Header>
+                    <span
+                        style={{
+                            color: 'var(--semi-color-text-2)',
+                        }}
+                    >
+                        <span
+                            style={{
+                                marginRight: '24px',
+                                color: 'var(--semi-color-text-0)',
+                                fontWeight: '600',
+                            }}
                         >
-                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
-                            <span>Bytedancer</span>
-                        </Dropdown>
-                    </>
-                }
-            />
-        );
-    }
+                            模版推荐
+                        </span>
+                        <span style={{ marginRight: '24px' }}>所有模版</span>
+                        <span>我的模版</span>
+                    </span>
+                    <Nav.Footer>
+                        <Button
+                            theme="borderless"
+                            icon={<IconBell size="large" />}
+                            style={{
+                                color: 'var(--semi-color-text-2)',
+                                marginRight: '12px',
+                            }}
+                        />
+                        <Button
+                            theme="borderless"
+                            icon={<IconHelpCircle size="large" />}
+                            style={{
+                                color: 'var(--semi-color-text-2)',
+                                marginRight: '12px',
+                            }}
+                        />
+                        <Avatar color="orange" size="small">
+                            YJ
+                        </Avatar>
+                    </Nav.Footer>
+                </Nav>
+            </div>
+        </Header>
+    );
 
-    renderVertical() {
-        return (
-            <Nav
-                bodyStyle={{ height: 320 }}
-                items={this.items}
-                onSelect={key => console.log(key)}
-                footer={{
-                    collapseButton: true,
+    const LeftNav = () => (
+        <Nav
+            style={{ maxWidth: 220, height: '100%' }}
+            defaultSelectedKeys={['Home']}
+            items={[
+                {
+                    itemKey: 'approve-management',
+                    text: '审批管理',
+                    icon: <IconBreadcrumb />,
+                    items: [
+                        '入驻审核',
+                        {
+                            itemKey: 'operation-management',
+                            text: '运营管理',
+                            items: [
+                                '人员管理',
+                                '人员变更'
+                            ]
+                        }
+                    ]
+                },
+                {
+                    text: '任务平台',
+                    icon: <IconSteps />,
+                    itemKey: 'job',
+                    items: ['任务管理', '用户任务查询'],
+                },
+                { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
+                { itemKey: 'union', text: '活动管理', icon: <IconTreeSelect /> },
+            ]}
+            footer={{
+                collapseButton: true,
+            }}
+        />
+    );
+
+    const FooterContent = () => (
+        <>
+            <span
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
                 }}
-            />
-        );
-    }
+            >
+                <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
+                <span>Copyright © {new Date().getFullYear()} ByteDance. All Rights Reserved. </span>
+            </span>
+            <span>
+                <span style={{ marginRight: '24px' }}>平台客服</span>
+                <span>反馈建议</span>
+            </span>
+        </>
+    );
+    return (
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <TopHeader />
+            <Layout>
+                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+                    <LeftNav />
+                </Sider>
+                <Content
+                    style={{
+                        padding: '24px',
+                        backgroundColor: 'var(--semi-color-bg-0)',
+                    }}
+                >
+                    <Breadcrumb
+                        style={{
+                            marginBottom: '24px',
+                        }}
+                        routes={['首页', '当这个页面标题很长时需要省略', '上一页', '详情页']}
+                    />
+                    <div
+                        style={{
+                            borderRadius: '10px',
+                            border: '1px solid var(--semi-color-border)',
+                            height: '376px',
+                            padding: '32px',
+                        }}
+                    >
+                        <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>
+                            <p>Hi, Bytedance dance dance.</p>
+                            <p>Hi, Bytedance dance dance.</p>
+                        </Skeleton>
+                    </div>
+                </Content>
+            </Layout>
+            <Footer
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    padding: '20px',
+                    color: 'var(--semi-color-text-2)',
+                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
+                }}
+            >
+                <FooterContent />
+            </Footer>
+        </Layout>
+    );
+};
 
-    render() {
-        return (
-            <>
-                {this.renderHorizontal()}
-                {this.renderVertical()}
-            </>
-        );
-    }
-}
 ```
 
 ### 展开收起箭头位置
 
 可通过 `toggleIconPosition` 改变 NavSub 展开收起箭头的位置，默认为 'right' 右侧展示，可改为 'left'
 
-```jsx live=true dir=column
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconUser, IconStar, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';
@@ -457,7 +516,7 @@ class NavApp extends React.Component {
             <Nav
                 toggleIconPosition={'left'}
                 defaultOpenKeys={['job']}
-                bodyStyle={{ height: 320 }}
+                bodyStyle={{ height: 300 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
                     { itemKey: 'union', text: '活动管理', icon: <IconBanner /> },
@@ -488,7 +547,7 @@ class NavApp extends React.Component {
 - 当以 Jsx 方式用 Nav.Item 传入导航项时，请手动给 Nav.Item 传入 `level` props。
 - 以 items 方式传入导航项时，无需关心 level
 
-```jsx live=true dir=column
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconUser, IconStar, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';
@@ -500,7 +559,7 @@ class NavApp extends React.Component {
             <Nav
                 limitIndent={false}
                 defaultOpenKeys={['job', 'mission1']}
-                bodyStyle={{ height: 320 }}
+                bodyStyle={{ height: 300 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
                     {
@@ -546,7 +605,7 @@ class NavApp extends React.Component {
 -   `defaultOpenKeys`（默认展开的导航项 `key` 数组，仅 `mode = "vertical"` 且 `isCollapsed` | `defaultIsCollapsed = false` 的情况下有效）
 -   `defaultIsCollapsed`（侧边栏默认是否收起，仅 `mode = "vertical"` 时有效）
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconSemiLogo } from '@douyinfe/semi-icons';
@@ -559,7 +618,7 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 defaultSelectedKeys={['信息录入']}
                 defaultIsCollapsed={true}
-                bodyStyle={{ height: 320 }}
+                bodyStyle={{ height: 300 }}
                 items={[
                     { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
                     { itemKey: 'union', text: '活动管理', icon: <IconBanner /> },
@@ -606,7 +665,7 @@ Navigation 组件提供了几个受控属性，配合各种回调，可以很轻
 -   `onSelect({ itemKey: string, selectedKeys: string[], domEvent: MouseEvent, isOpen: boolean }): void`
 -   `onOpenChange({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }): void`
 
-```jsx live=true dir="column"
+```jsx live=true width=78%
 import React, { useMemo, useState } from 'react';
 import { Nav } from '@douyinfe/semi-ui';
 import { IconSemiLogo } from '@douyinfe/semi-icons';
@@ -652,7 +711,7 @@ function NavApp (props = {}) {
             isCollapsed={isCollapsed}
             openKeys={openKeys}
             selectedKeys={selectedKeys}
-            bodyStyle={{ height: 360 }}
+            bodyStyle={{ height: 300 }}
             items={items}
             header={{
                 logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
@@ -673,52 +732,52 @@ function NavApp (props = {}) {
 
 ### Nav
 
-| 属性                | 描述                                                                                                                                          | 类型                                                                                                                                                                  | 默认值     |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| bodyStyle           | 导航项列表的自定义样式                                                                                                                        | CSSProperties                                                                                                                                                         |            |
-| className           | 最外层元素的样式名                                                                                                                            | string                                                                                                                                                                |            |
-| defaultIsCollapsed  | 默认是否处于收起状态，仅 `mode = "vertical"` 时有效                                                                                           | boolean                                                                                                                                                               | false      |
-| defaultOpenKeys     | 初始打开的子导航 `itemKey` 数组，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效                                                            | string[]                                                                                                                                                              | []         |
-| defaultSelectedKeys | 初始选中的导航项 `itemKey` 数组                                                                                                               | string[]                                                                                                                                                              | []         |
-| expandIcon          | 默认下拉箭头Icon, v>=2.36                                                                                                                     | ReactNode                                                                                                                                                             |            |
-| footer              | 底部区域配置对象或元素，详见 [Nav.Footer](#Nav.Footer)                                                                                        | object\|ReactNode  |         |
+| 属性                | 描述                                                                                                                                        | 类型                                                                                                                                                                  | 默认值     |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| bodyStyle           | 导航项列表的自定义样式                                                                                                                      | CSSProperties                                                                                                                                                         |            |
+| className           | 最外层元素的样式名                                                                                                                          | string                                                                                                                                                                |            |
+| defaultIsCollapsed  | 默认是否处于收起状态，仅 `mode = "vertical"` 时有效                                                                                         | boolean                                                                                                                                                               | false      |
+| defaultOpenKeys     | 初始打开的子导航 `itemKey` 数组，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效                                                          | string[]                                                                                                                                                              | []         |
+| defaultSelectedKeys | 初始选中的导航项 `itemKey` 数组                                                                                                             | string[]                                                                                                                                                              | []         |
+| expandIcon          | 默认下拉箭头Icon, v>=2.36                                                                                                                   | ReactNode                                                                                                                                                             |            |
+| footer              | 底部区域配置对象或元素，详见 [Nav.Footer](#Nav.Footer)                                                                                      | object\|ReactNode                                                                                                                                                     |            |
 | getPopupContainer   | 垂直 Nav 折叠或 水平 Nav中 Dropdown 的 getPopupContainer 配置，可指定弹出层容器 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 v>=2.24.0 | Function                                                                                                                                                              |            |
-| header              | 头部区域配置对象或元素，详见 [Nav.Header](#Nav.Header)                                                                                        | object\|ReactNode  |         |
-| isCollapsed         | 是否处于收起状态的受控属性，仅 `mode = "vertical"` 时有效                                                                                     | boolean                                                                                                                                                               |            |
-| items               | 导航项目列表，每一项可以继续带有 items 属性。如果为 string 数组，则会取每一项作为 text 和 itemKey                                             | object\| string[]\| [Item](#Nav.Item)[] \| [Sub](#Nav.Sub)[]                                                                                                          |            |
-| limitIndent         | 解除缩进限制，可使用 level 自定义导航项缩进，水平模式只能为true                                                                  | boolean                                                                                                                                                               | true       |
-| mode                | 导航类型，目前支持横向与竖直，可选值：`vertical`或`horizontal`                                                                                | string                                                                                                                                                                | `vertical` |
-| openKeys            | 受控的打开的子导航 `itemKey` 数组，配合 `onOpenChange` 回调控制子导航项展开，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效                | string[]                                                                                                                                                              |            |
-| prefixCls           | 类名前缀                                                                                                                                      | string                                                                                                                                                                | `semi`     |
-| renderWrapper       | 自定义导航项外层组件，v>=2.24.0                                                                                                               | <ApiType detail='(data:{ itemElement:ReactElement, isSubNav:boolean, isInSubNav:boolean, props:SubNavProps\| ItemProps }) => ReactNode'>(data) => ReactNode</ApiType> |            |
-| selectedKeys        | 受控的导航项 `itemKey` 数组，配合 `onSelect` 回调控制导航项选择                                                                               | string[]                                                                                                                                                              |            |
-| style               | 最外层元素的自定义样式                                                                                                                        | CSSProperties                                                                                                                                                         |            |
-| subNavCloseDelay    | 子导航浮层关闭的延迟。collapse 为 true 或 mode 为 "horizontal" 时有效，单位为 ms                                                              | number                                                                                                                                                                | 100        |
-| subNavMotion        | 子导航折叠动画                                                                                                                                | boolean                                                                                                                                                               | true       |
-| subNavOpenDelay     | 子导航浮层显示的延迟。collapse 为 true 或 mode 为 "horizontal" 时有效，单位为 ms                                                              | number                                                                                                                                                                | 0          |
-| toggleIconPosition  | 带有子导航项的的父级导航项箭头位置，可选 `left`或 `right`                                                                                  | string    | 'right' |
-| tooltipHideDelay    | tooltip 隐藏的延迟，collapse 为 true 时有效，单位为 ms                                                                                        | number                                                                                                                                                                | 100        |
-| tooltipShowDelay    | tooltip 显示的延迟，collapse 为 true 时有效，单位为 ms                                                                                        | number                                                                                                                                                                | 0          |
-| onClick             | 点击任意导航项时触发                                                                                                                          | <ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>(itemKey, event, isOpen) => void</ApiType>                                     | () => {}   |
-| onCollapseChange    | 收起状态变化时的回调                                                                                                                          | <ApiType detail='(isCollapsed: boolean) => void'>(isCollapsed)=> void </ApiType>                                                                                      | () => {}   |
-| onOpenChange        | 切换某个子导航项目显隐状态时触发                                                                                                              | <ApiType detail='({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void'> ({itemKey, openKeys, event, isOpen})=>{}</ApiType>        | () => {}   |
-| onSelect            | 第一次选中某个可选中导航项目时触发                                                                                                            | <ApiType detail='({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void'>(onSelectProps)=>{}</ApiType>   | () => {}   |
+| header              | 头部区域配置对象或元素，详见 [Nav.Header](#Nav.Header)                                                                                      | object\|ReactNode                                                                                                                                                     |            |
+| isCollapsed         | 是否处于收起状态的受控属性，仅 `mode = "vertical"` 时有效                                                                                   | boolean                                                                                                                                                               |            |
+| items               | 导航项目列表，每一项可以继续带有 items 属性。如果为 string 数组，则会取每一项作为 text 和 itemKey                                           | object\| string[]\| [Item](#Nav.Item)[] \| [Sub](#Nav.Sub)[]                                                                                                          |            |
+| limitIndent         | 解除缩进限制，可使用 level 自定义导航项缩进，水平模式只能为true                                                                             | boolean                                                                                                                                                               | true       |
+| mode                | 导航类型，目前支持横向与竖直，可选值：`vertical`或`horizontal`                                                                              | string                                                                                                                                                                | `vertical` |
+| openKeys            | 受控的打开的子导航 `itemKey` 数组，配合 `onOpenChange` 回调控制子导航项展开，仅 `mode = "vertical"` 且侧边栏处于展开状态时有效              | string[]                                                                                                                                                              |            |
+| prefixCls           | 类名前缀                                                                                                                                    | string                                                                                                                                                                | `semi`     |
+| renderWrapper       | 自定义导航项外层组件，v>=2.24.0                                                                                                             | <ApiType detail='(data:{ itemElement:ReactElement, isSubNav:boolean, isInSubNav:boolean, props:SubNavProps\| ItemProps }) => ReactNode'>(data) => ReactNode</ApiType> |            |
+| selectedKeys        | 受控的导航项 `itemKey` 数组，配合 `onSelect` 回调控制导航项选择                                                                             | string[]                                                                                                                                                              |            |
+| style               | 最外层元素的自定义样式                                                                                                                      | CSSProperties                                                                                                                                                         |            |
+| subNavCloseDelay    | 子导航浮层关闭的延迟。collapse 为 true 或 mode 为 "horizontal" 时有效，单位为 ms                                                            | number                                                                                                                                                                | 100        |
+| subNavMotion        | 子导航折叠动画                                                                                                                              | boolean                                                                                                                                                               | true       |
+| subNavOpenDelay     | 子导航浮层显示的延迟。collapse 为 true 或 mode 为 "horizontal" 时有效，单位为 ms                                                            | number                                                                                                                                                                | 0          |
+| toggleIconPosition  | 带有子导航项的的父级导航项箭头位置，可选 `left`或 `right`                                                                                   | string                                                                                                                                                                | 'right'    |
+| tooltipHideDelay    | tooltip 隐藏的延迟，collapse 为 true 时有效，单位为 ms                                                                                      | number                                                                                                                                                                | 100        |
+| tooltipShowDelay    | tooltip 显示的延迟，collapse 为 true 时有效，单位为 ms                                                                                      | number                                                                                                                                                                | 0          |
+| onClick             | 点击任意导航项时触发                                                                                                                        | <ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>(itemKey, event, isOpen) => void</ApiType>                                     | () => {}   |
+| onCollapseChange    | 收起状态变化时的回调                                                                                                                        | <ApiType detail='(isCollapsed: boolean) => void'>(isCollapsed)=> void </ApiType>                                                                                      | () => {}   |
+| onOpenChange        | 切换某个子导航项目显隐状态时触发                                                                                                            | <ApiType detail='({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void'> ({itemKey, openKeys, event, isOpen})=>{}</ApiType>        | () => {}   |
+| onSelect            | 第一次选中某个可选中导航项目时触发                                                                                                          | <ApiType detail='({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void'>(onSelectProps)=>{}</ApiType>   | () => {}   |
 
 ### Nav.Item
 
-| 属性         | 描述                                                          | 类型                                                                 | 默认值   |
-| ------------ | ------------------------------------------------------------- | -------------------------------------------------------------------- | -------- |
-| disabled     | 是否禁用                                                      | boolean                                                              | false    |
-| icon         | 导航项目图标                                                  | ReactNode                                                            |          |
-| indent       | 如果 icon 为空，是否保留其占位，仅对一级导航生效              | boolean                                                              | false    |
-| itemKey      | 导航项目唯一 key                                              | string                                                               | ""       |
-| level        | 当前项所在嵌套层级，limitIndent 为 true时，用于自定义缩进位置 | number                                                               |          |
-| link         | 导航项 href 链接，传入时导航项整体会包裹一个 a 标签           | string                                                               | -        |
-| linkOptions  | 透传给 a 标签的参数                                           | object                                                               | -        |
-| text         | 导航项目文案或元素                                            | string\|ReactNode                                                    | ""       |
+| 属性         | 描述                                                          | 类型                                                                                                                                   | 默认值   |
+| ------------ | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| disabled     | 是否禁用                                                      | boolean                                                                                                                                | false    |
+| icon         | 导航项目图标                                                  | ReactNode                                                                                                                              |          |
+| indent       | 如果 icon 为空，是否保留其占位，仅对一级导航生效              | boolean                                                                                                                                | false    |
+| itemKey      | 导航项目唯一 key                                              | string                                                                                                                                 | ""       |
+| level        | 当前项所在嵌套层级，limitIndent 为 true时，用于自定义缩进位置 | number                                                                                                                                 |          |
+| link         | 导航项 href 链接，传入时导航项整体会包裹一个 a 标签           | string                                                                                                                                 | -        |
+| linkOptions  | 透传给 a 标签的参数                                           | object                                                                                                                                 | -        |
+| text         | 导航项目文案或元素                                            | string\|ReactNode                                                                                                                      | ""       |
 | onClick      | 点击任意导航项时触发                                          | <ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>({itemKey, domEvent, isOpen}) => void</ApiType> | () => {} |
-| onMouseEnter | mouse enter 时触发                                            | function(e) => {}                                                    | () => {} |
-| onMouseLeave | mouse leave 时触发                                            | function(e) => {}                                                    | () => {} |
+| onMouseEnter | mouse enter 时触发                                            | function(e) => {}                                                                                                                      | () => {} |
+| onMouseLeave | mouse leave 时触发                                            | function(e) => {}                                                                                                                      | () => {} |
 
 ### Nav.Sub
 

content/navigation/tree/index-en-US.md

@@ -2299,7 +2299,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | renderDraggingNode | Custom render function to render html element of dragImg for dragging node | (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement | - | 1.8.0 | 
 | renderFullLabel | Custom option render function | (data: object) => ReactNode | - | 1.7.0 | 
-| renderLabel | Custom label render function | (label: ReactNode, data: TreeNodeData) => ReactNode | - | 1.6.0 | 
+| renderLabel | Custom label render function. The searchWord parameter is supported since 2.65.0 | <ApiType detail='(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode'>(label, data, searchWord) => ReactNode</ApiType> | - | 1.6.0 | 
 | searchClassName     | Classname property for search box  | string                      | -       | - |
 | searchPlaceholder   | Placeholder for search box         | string                      | -       | - |
 | searchRender | Custom method to render search input; hide search box if set to false(**V>=1.0.0**) | ((searchRenderProps: object) => ReactNode) \| false | - | 0.35.0 |

content/navigation/tree/index.md

@@ -2314,7 +2314,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | renderDraggingNode | 自定义正在拖拽节点的 dragImg 的 Html 元素 | (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement | - | 1.8.0 | 
 | renderFullLabel | 完全自定义label的渲染函数 | (data: object) => ReactNode | - | 1.7.0 | 
-| renderLabel | 自定义label的渲染函数 | (label: ReactNode, data: TreeNodeData) => ReactNode |- |  1.6.0 | 
+| renderLabel | 自定义label的渲染函数, searchWord 参数自 2.65.0 开始支持 | <ApiType detail='(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode'>(label, data, searchWord) => ReactNode</ApiType> |- |  1.6.0 | 
 | searchClassName | 搜索框的 `className` 属性 | string | - | - |
 | searchPlaceholder | 搜索框默认文字 | string | - | - |
 | searchRender | 自定义搜索框的渲染方法，为 false 时可以隐藏组件的搜索框(**V>=1.0.0**) | ((searchRenderProps: object) => ReactNode) \| false | - | 0.35.0 |

content/plus/markdownrender/index-en-US.md

@@ -158,6 +158,10 @@ Just write JSX directly in Markdown
 
 ```
 
+# Add plugins
+
+Support all RemarkPlugin and RehypePlugins plugins of MDXJS through `remarkPlugins` `rehypePlugins`, please refer to [MDXJS](https://mdxjs.com/docs/extending-mdx/) for details
+
 
 ### API
 
@@ -167,6 +171,8 @@ Just write JSX directly in Markdown
 | components | Used to override Markdown elements and add custom components | Record<string, JSXElementConstructor> | - |
 | format | The incoming raw type, whether it is pure Markdown | 'md'\|'mdx' | 'mdx' |
 | raw | plain text in Markdown or MDX | string | - |
+| remarkPlugins | custom Remark Plugin          | Remark Plugin Array                | - |
+| rehypePlugins | custom Rehype Plugin          | Rehype Plugin Array               | - |
 | style | style | CSSProperties | - |
 
 ## Design Token

content/plus/markdownrender/index.md

@@ -175,16 +175,23 @@ function Demo() {
 
 ```
 
+# 添加插件
+
+通过 `remarkPlugins` `rehypePlugins` 支持 MDXJS 的所有 RemarkPlugin 和 RehypePlugins 插件，详情请参考 [MDXJS](https://mdxjs.com/docs/extending-mdx/)
+
+
 
 ### API
 
-| 属性         | 说明                         | 类型                                    | 默认值   |
-|------------|----------------------------|---------------------------------------|-------|
-| className | 类名    | string | -   |
+| 属性         | 说明                         | 类型                                   | 默认值   |
+|------------|----------------------------|--------------------------------------|-------|
+| className | 类名                         | string                               | -   |
 | components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | -     |
-| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                           | 'mdx' |
-| raw        | Markdown 或 MDX 的纯文本        | string                                | -     |
-| style | 样式 | CSSProperties | - |
+| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                          | 'mdx' |
+| raw        | Markdown 或 MDX 的纯文本        | string                               | -     |
+| remarkPlugins | 自定义 Remark Plugin          | Remark Plugin Array                | - |
+| rehypePlugins | 自定义 Rehype Plugin          | Rehype Plugin Array               | - |
+| style | 样式                         | CSSProperties                        | - |
 
 ## 设计变量
 

content/show/table/index-en-US.md

@@ -1198,6 +1198,10 @@ render(App);
 
 When sorter is a function type, the sortOrder status can be obtained through the third parameter of the function. The function type is `(a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number`. Supported by version v2.47.
 
+You can control whether to display the sorting tip through the `showSortTip` attribute. It is supported since v2.65 and defaults to `false`. When the tip is turned on, when there is only sorting function, the sorting prompt will be displayed when the mouse is moved to the table header; in other cases, the sorting prompt will be displayed only when the mouse is moved to the sorting icon.
+
+**Note**: When using the `sortOrder` attribute for controlled sorting, since the next sort order cannot be predicted, `showSortTip` does not take effect and the prompt will not be displayed.
+
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
@@ -5418,6 +5422,7 @@ import { Table } from '@douyinfe/semi-ui';
 | renderFilterDropdown | Custom filter dropdown panel, for usage details, see [Custom Filter Rendering](#Custom-Filter-Rendering) | (props?: RenderFilterDropdownProps) => React.ReactNode; | - | **2.52.0** |
 | renderFilterDropdownItem | Customize the rendering method of each filter item. For usage details, see [Custom Filter Item Rendering](#Custom-Filter-Item-Rendering) | ({ value: any, text: any, onChange: Function, level: number, ...otherProps }) => ReactNode | - | **1.1.0** |
 | resize | Whether to enable resize mode, this property will take effect only after Table resizable is enabled | boolean |  | **2.42.0** |
+| showSortTip | Whether to display sorting tips, If sortOrder is set and sorting is controlled, this parameter will not take effect | boolean | false | **2.65.0** |
 | sortChildrenRecord | Whether to sort child data locally | boolean |  | **0.29.0** |
 | sortOrder | The controlled property of the sorting, the sorting of this control column can be set to 'ascend'\|'descended '\|false | boolean | false |
 | sorter | Sorting function, local sorting uses a function (refer to the compareFunction of Array.sort), requiring a server-side sorting can be set to true. **An independent dataIndex must be set for the sort column, and an independent key must be set for each data item in the dataSource** | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |

content/show/table/index.md

@@ -1302,6 +1302,10 @@ render(App);
 
 sorter 为函数类型时，可以通过函数的第三个参数获取 sortOrder 状态。函数类型为 `(a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number`。v2.47 版本支持。
 
+可通过 `showSortTip` 属性控制是否展示排序提示，自 v2.65 版本支持，默认为 `false`。当开启提示后，当仅有排序功能时候，鼠标移动至表头时，会展示排序提示；其他情况下，仅鼠标移动至排序图标时，会展示排序提示。
+
+**注**：在使用 `sortOrder` 属性受控排序时，由于无法预测下一个排序顺序，因此 `showSortTip` 不生效，不会展示提示。
+
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
@@ -1338,6 +1342,7 @@ function App() {
                     return 0; // 保持原来的顺序
                 }
             },
+            showSortTip: true,
             render: text => text ? `${text} KB` : '未知',
         },
         {
@@ -5545,6 +5550,7 @@ import { Table } from '@douyinfe/semi-ui';
 | renderFilterDropdown | 自定义筛选器 dropdown 面板，用法详见[自定义筛选器](#自定义筛选器) | (props?: RenderFilterDropdownProps) => React.ReactNode; | - | **2.52.0** |
 | renderFilterDropdownItem | 自定义每个筛选项渲染方式，用法详见[自定义筛选项渲染](#自定义筛选项渲染) | ({ value: any, text: any, onChange: Function, level: number, ...otherProps }) => ReactNode | - | **1.1.0** |
 | resize | 是否开启 resize 模式，只有 Table resizable 开启后此属性才会生效 | boolean |  | **2.42.0** |
+| showSortTip | 是否展示排序提示, 如果设置了 sortOrder，排序受控，则该参数不会生效 | boolean | false | **2.65.0** |
 | sortChildrenRecord | 是否对子级数据进行本地排序 | boolean |  | **0.29.0** |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 'ascend'\|'descend'\|false | boolean\| string | false |
 | sorter | 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true。**必须给排序列设置一个独立的 dataIndex，必须为 dataSource 里面的每条数据项设置独立的 key** | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |

content/start/changelog/index-en-US.md

@@ -17,12 +17,29 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 ---
 
 
-#### 🎉 2.64.0 (2024-08-12)
+#### 🎉 2.65.0-beta.0 (2024-08-20)
 - 【Feat】
-  - Added the ColorPicker component, which allows users to quickly select colors and supports eyedropper screen color selection. [#2218](https://github.com/DouyinFE/semi-design/pull/2218)
+  - MarkdownRender now supports RemarkPlugin and RehypePlugins plugins. [#2433](https://github.com/DouyinFE/semi-design/pull/2433)
+  - The renderLabel API of Tree and TreeSelect has added a searchWord parameter to expose the currently input value in the search box. [#2412](https://github.com/DouyinFE/semi-design/pull/2412)
+  - Optimize the sorting interaction of Table. When there is only sorting function, click on the entire table header column to trigger sorting. Column supports the showSortTooltip API to set whether to display the tooltip, and the default is true [#2413](https://github.com/DouyinFE/semi-design/pull/2413)
+  - Datepicker supports leftSlot and rightSlot. [@LuyangFE](https://github.com/LuyangFE) [#2409](https://github.com/DouyinFE/semi-design/pull/2409)
+  - Typograph support custom render copy trigger [@sylingd](https://github.com/sylingd) [#2408](https://github.com/DouyinFE/semi-design/pull/2408)
+- 【Perf】
+  - Optimized the judgment times of getValueLength for Input and TextArea. [#2432](https://github.com/DouyinFE/semi-design/pull/2432)
+- 【Chore】
+  - The Image component interface supports native img element attributes. [#2427](https://github.com/DouyinFE/semi-design/pull/2427)
 - 【Fix】
-  - Fix Tooltip triggerDOM not defined in some case  [commit](https://github.com/DouyinFE/semi-design/commit/05878dd7b7c20f2e924f8e0b3cf71ad0eaa3aaf3)
+  - Fixed the type error after sending a message when the messages in Chat are an empty array. [#2411](https://github.com/DouyinFE/semi-design/pull/2411)
+  - Fixed the incorrect problem of Table aria-level when tree data is empty. [#2359](https://github.com/DouyinFE/semi-design/issues/2359)
+  - Fixed the incorrect disabling of arrows in Collapse Tabs when quickly clicking left and right arrows. [#2415](https://github.com/DouyinFE/semi-design/issues/2415)
+  - Fixed the problem that when showStopGenerate of Chat component is true and the status of a message is error, the stop button is displayed. [#2422](https://github.com/DouyinFE/semi-design/pull/2422)
+  - Fixed the problem that in Cascader, after searching and in multiple selection scenarios, the position of the pop-up layer is not recalculated, resulting in a long panel being blocked. [#2417](https://github.com/DouyinFE/semi-design/pull/2417)
+  - Fixed the problem that in Cascader's multiple selection scenario, when unselecting by clicking the close icon of an existing option in the trigger, the position of the pop-up layer is not recalculated. [#2417](https://github.com/DouyinFE/semi-design/pull/2417)
+  - Fixed the loss of the selected state color after clicking the selected date twice in DatePicker. [#2389](https://github.com/DouyinFE/semi-design/pull/2389)
 
+#### 🎉 2.64.0 (2024-08-12)
+- 【Fix】
+  - Fix Tooltip triggerDOM not defined in some case  [commit](https://github.com/DouyinFE/semi-design/commit/05878dd7b7c20f2e924f8e0b3cf71ad0eaa3aaf3)
 
 #### 🎉 2.64.0-beta.0 (2024-08-05)
 - 【Feat】

content/start/changelog/index.md

@@ -14,16 +14,36 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
 
-#### 🎉 2.64.0 (2024-08-12)
+#### 🎉 2.65.0-beta.0 (2024-08-20)
 - 【Feat】
-  - 新增 颜色选择器 ColorPicker 组件，用户快速选择颜色，支持滴管屏幕取色 [#2218](https://github.com/DouyinFE/semi-design/pull/2218)
+  - 优化 Table 的排序交互，仅有排序功能时，支持点击整个表头column触发排序。Column 支持 showSortTooltip API支持设置是否显示 tooltip，默认为 true [#2413](https://github.com/DouyinFE/semi-design/pull/2413)
+  - MarkdownRender 支持 RemarkPlugin 和 RehypePlugins 插件 [#2433](https://github.com/DouyinFE/semi-design/pull/2433)
+  - Tree、TreeSelect 的 renderLabel API 增加 searchWord 参数，用于透出当前搜索框输入值 [#2412](https://github.com/DouyinFE/semi-design/pull/2412)
+  - Datepicker 支持 leftSlot、rightSlot [@LuyangFE](https://github.com/LuyangFE) [#2409](https://github.com/DouyinFE/semi-design/pull/2409) 
+  - Typograph 组件支持自定义复制区域渲染 [@sylingd](https://github.com/sylingd) [#2408](https://github.com/DouyinFE/semi-design/pull/2408)
+- 【Perf】
+  - 优化 Input、TextArea getValueLength 判断次数 [#2432](https://github.com/DouyinFE/semi-design/pull/2432)
+- 【Chore】
+  - Image 组件 interface 支持原生 img 元素属性 [#2427](https://github.com/DouyinFE/semi-design/pull/2427)
 - 【Fix】
-  - 修复 Tooltip triggerDOM 特殊场景下未定义的问题  [commit](https://github.com/DouyinFE/semi-design/commit/05878dd7b7c20f2e924f8e0b3cf71ad0eaa3aaf3)
+  - 修复 Chat 中消息为空数组时，发送消息后的类型错误 [#2411](https://github.com/DouyinFE/semi-design/pull/2411)
+  - 修复 Table aria-level 在树形数据为空时错误的问题  [#2359](https://github.com/DouyinFE/semi-design/issues/2359)
+  - 修复 Table 树形数据为空且 expandIcon 为 false时缩进错误的问题  [#2425](https://github.com/DouyinFE/semi-design/issues/2425)
+  - 修复 Collapse Tabs 在快速点击左右箭头情况下造成的箭头禁用情况不正确问题 [#2415](https://github.com/DouyinFE/semi-design/issues/2415)
+  - 修复 Chat 组件在 showStopGenerate 为 true 时，消息的 status 为 error 会展示停止按钮问题 [#2422](https://github.com/DouyinFE/semi-design/pull/2422)
+  - 修复 Cascader 搜索后以及多选，弹出层的位置未重新计算，导致内容较长的面板被遮挡问题 [#2417](https://github.com/DouyinFE/semi-design/pull/2417)
+  - 修复 Cascader 多选场景，通过点击 trigger 中已选项的关闭 icon 取消选中，弹出层位置未重新计算问题 [#2417](https://github.com/DouyinFE/semi-design/pull/2417)
+  - 修复 DatePicker 点击选择的日期两次后，选中态颜色丢失 [#2389](https://github.com/DouyinFE/semi-design/pull/2389)
+
+#### 🎉 2.64.0 (2024-08-12)
+- 【Fix】
+  - 修复 Tooltip triggerDOM 特殊场景下未定义的问题 [commit](https://github.com/DouyinFE/semi-design/commit/05878dd7b7c20f2e924f8e0b3cf71ad0eaa3aaf3)
 
 #### 🎉 2.64.0-beta.0 (2024-08-05)
+- 【New Component】
+  - 新增 颜色选择器 ColorPicker 组件，用户快速选择颜色，支持滴管屏幕取色 [#2218](https://github.com/DouyinFE/semi-design/pull/2218)
 - 【Feat】
     - Calendar 日视图中起止时间完全相同的事件支持并排显示，不互相遮盖 [#2393](https://github.com/DouyinFE/semi-design/pull/2393)
-    - 新增颜色选择器 ColorPicker 组件，用户快速选择颜色，支持滴管屏幕取色
 - 【Fix】
     - 修复鼠标滚轮缩放图片后，拖动了图片，再次缩放后会重置回中心位置的问题 [@l123wx](https://github.com/l123wx) [#2293](https://github.com/DouyinFE/semi-design/pull/2293)
     - 修复 Modal 在 SSR 时 document 不存在的问题 （影响范围 2.62.0~2.63.0） [#2395](https://github.com/DouyinFE/semi-design/pull/2395)

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.64.0"
+    "version": "2.65.0-beta.0"
 }

package.json

@@ -43,12 +43,12 @@
         "coverage:merge": "npx istanbul-combine -d test/merged -p detail -r lcov -r json cypress/coverage/coverage-final.json test/coverage/coverage-final.json"
     },
     "engines": {
-        "node": ">= 16.0.0"
+        "node": ">= 20.0.0"
     },
     "dependencies": {
         "@dnd-kit/modifiers": "^7.0.0",
         "@douyinfe/semi-site-banner": "^0.1.5",
-        "@douyinfe/semi-site-doc-style": "0.0.4",
+        "@douyinfe/semi-site-doc-style": "0.0.5",
         "@douyinfe/semi-site-header": "^0.0.29",
         "@douyinfe/semi-site-markdown-blocks": "^0.0.18",
         "@mdx-js/mdx": "1.6.22",

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",
@@ -25,8 +25,8 @@
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.64.0",
-        "@douyinfe/semi-animation-styled": "2.64.0",
+        "@douyinfe/semi-animation": "2.65.0-beta.0",
+        "@douyinfe/semi-animation-styled": "2.65.0-beta.0",
         "classnames": "^2.2.6"
     },
     "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/datePicker/datePicker.scss

@@ -6,7 +6,11 @@ $module-list: #{$prefix}-scrolllist;
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-block;
+    display: inline-flex;
+
+    &-container {
+        display: flex;
+    }
 
     .#{$module-list}-body {
         .#{$module-list}-item {
@@ -820,6 +824,14 @@ $module-list: #{$prefix}-scrolllist;
     &-topSlot {
         border-bottom: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
     }
+    
+    &-leftSlot {
+        border-right: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
+    }
+
+    &-rightSlot {
+        border-left: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;
+    }
 
     &-bottomSlot {
         border-top: $width-datepicker_slot-border solid $color-datepicker_border-bg-default;

packages/semi-foundation/markdownRender/foundation.ts

@@ -2,6 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
 import { MDXProps } from 'mdx/types';
 import remarkGfm from 'remark-gfm';
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any
 
@@ -13,7 +14,9 @@ export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<stri
 export interface MarkdownRenderBaseProps{
     raw: string;
     components: MDXProps['components'];
-    format: "md"|"mdx"
+    format: "md"|"mdx";
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList
 }
 
 
@@ -26,11 +29,14 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
     private getOptions = ()=>{
         return {
             evaluateOptions: {
-                remarkPlugins: [remarkGfm],
+                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                rehypePlugins: this.getProp("rehypePlugins") ?? [],
                 format: this.getProp("format")
             },
             compileOptions: {
-                format: this.getProp("format")
+                format: this.getProp("format"),
+                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                rehypePlugins: this.getProp("rehypePlugins") ?? [],
             },
             runOptions: {
             }

packages/semi-foundation/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.64.0",
+        "@douyinfe/semi-animation": "2.65.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",

packages/semi-foundation/table/animation.scss

@@ -1,3 +1,5 @@
 $transition_duration-table_body-bg: var(--semi-transition_duration-none); // 表格-背景颜色-动画持续时间
 $transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
 $transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间
+$transition_duration-table_row-head-bg: 0.1s; // 表格-行头-背景颜色-动画持续时间
+$transition_function-table_row-head-bg: linear; // 表格-行头-背景颜色-过渡曲线

packages/semi-foundation/table/table.scss

@@ -140,6 +140,23 @@ $module: #{$prefix}-table;
                 // word-break: break-all;
                 // word-wrap: break-word;
                 position: relative;
+                transition: background-color $transition_duration-table_row-head-bg $transition_function-table_row-head-bg;
+
+                &.#{$module}-row-head-clickSort {
+                    cursor: pointer;
+                    &:hover {
+                        background: $color-table_th-clickSort-bg-hover;
+                        
+                        &.#{$module}-cell-fixed {
+                            &-left,
+                            &-right {
+                                &::before {
+                                    background-color: transparent;
+                                }
+                            }
+                        }
+                    }
+                }
 
                 &.#{$module}-cell-fixed {
                     &-left,

packages/semi-foundation/table/variables.scss

@@ -57,6 +57,7 @@ $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影
 $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
+$color-table_th-clickSort-bg-hover: var(--semi-color-fill-0); //点击表头触发排序背景色 - 悬浮
 
 $color-table_pl-bg-default: transparent;
 $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认

packages/semi-icons-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons-lab",
-  "version": "2.64.0",
+  "version": "2.65.0-beta.0",
   "description": "semi icons lab",
   "keywords": [
     "semi",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -22,7 +22,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.64.0"
+        "@douyinfe/semi-webpack-plugin": "2.65.0-beta.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-rspack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "",
     "homepage": "",
     "license": "MIT",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/datePicker/_story/DatePickerSlot/index.jsx

@@ -44,6 +44,22 @@ export default function Demo() {
         );
     };
 
+    const LeftSlot = function (props) {
+        const { style } = props;
+        return (
+            <div>LeftSlot</div>
+        );
+    };
+
+    const RightSlot = function (props) {
+        const { style } = props;
+        return (
+            <Space style={{ padding: '12px 20px', ...style }}>
+                <div>RightSlot</div>
+            </Space>
+        );
+    };
+
     const MonthBottomSlot = function (props) {
         const { style } = props;
         return (
@@ -60,7 +76,7 @@ export default function Demo() {
     return (
         <div>
             <span>topSlot</span>
-            <DatePicker topSlot={<TopSlot />} disabledDate={disabledDate} value={date} onChange={handleDateChange} />
+            <DatePicker topSlot={<TopSlot />} leftSlot={<LeftSlot />} rightSlot={<RightSlot/>} disabledDate={disabledDate} value={date} onChange={handleDateChange} />
             <br />
             <br />
             <span>bottomSlot</span>

packages/semi-ui/datePicker/datePicker.tsx

@@ -44,6 +44,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     insetLabelId?: string;
     prefix?: React.ReactNode;
     topSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
     renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode;
     triggerRender?: (props: DatePickerProps) => React.ReactNode;
@@ -63,6 +64,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     onPresetClick?: (item: PresetType, e: React.MouseEvent<HTMLDivElement>) => void;
     onClickOutSide?: () => void;
     locale?: Locale['DatePicker'];
+    leftSlot?: React.ReactNode;
     dateFnsLocale?: Locale['dateFnsLocale'];
     yearAndMonthOpts?: ScrollItemProps<any>;
     dropdownMargin?: PopoverProps['margin']
@@ -747,7 +749,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, presetPosition, type } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, presetPosition, type, leftSlot, rightSlot } = this.props;
         const wrapCls = classnames(
             cssClasses.PREFIX,
             {
@@ -759,20 +761,32 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} x-type={type}>
-                {topSlot && (
-                    <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
-                        {topSlot}
+                {leftSlot && (
+                    <div className={`${cssClasses.PREFIX}-leftSlot`} x-semi-prop="leftSlot">
+                        {leftSlot}
                     </div>
                 )}
-                {/* todo: monthRange does not support presetPosition temporarily */}
-                {presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls()}
-                {this.adapter.typeIsYearOrMonth()
-                    ? this.renderYearMonthPanel(locale, localeCode)
-                    : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
-                {presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls()}
-                {bottomSlot && (
-                    <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
-                        {bottomSlot}
+                <div>
+                    {topSlot && (
+                        <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
+                            {topSlot}
+                        </div>
+                    )}
+                    {/* todo: monthRange does not support presetPosition temporarily */}
+                    {presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls()}
+                    {this.adapter.typeIsYearOrMonth()
+                        ? this.renderYearMonthPanel(locale, localeCode)
+                        : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
+                    {presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls()}
+                    {bottomSlot && (
+                        <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
+                            {bottomSlot}
+                        </div>
+                    )}
+                </div>
+                {rightSlot && (
+                    <div className={`${cssClasses.PREFIX}-rightSlot`} x-semi-prop="rightSlot">
+                        {rightSlot}
                     </div>
                 )}
                 {this.renderFooter(locale, localeCode)}

packages/semi-ui/locale/interface.ts

@@ -99,7 +99,10 @@ export interface Locale {
     };
     Table: {
         emptyText: string;
-        pageText: string
+        pageText: string;
+        descend: string;
+        ascend: string;
+        cancelSort: string
     };
     Select: {
         emptyText: string;

packages/semi-ui/locale/source/ar.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'لا نتيجة',
         pageText: 'عرض ${currentStart} إلى ${currentEnd} من ${total}',
+        descend: 'انقر للهبوط',
+        ascend: 'انقر للصعود',
+        cancelSort: 'إلغاء الترتيب',
     },
     Select: {
         emptyText: 'لا نتيجة',

packages/semi-ui/locale/source/de.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Kein Ergebnis',
         pageText: 'Anzeigen ${currentStart} bis ${currentEnd} von ${total}',
+        descend: 'Klicken, um absteigend zu sortieren',
+        ascend: 'Klicken, um aufsteigend zu sortieren',
+        cancelSort: 'Sortierung abbrechen',
     },
     Select: {
         emptyText: 'Kein Ergebnis',

packages/semi-ui/locale/source/en_GB.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'No Result',
         pageText: 'Showing ${currentStart} to ${currentEnd} of ${total}',
+        descend: 'Click to descend',
+        ascend: 'Click to ascend',
+        cancelSort: 'Cancel sorting',
     },
     Select: {
         emptyText: 'No Result',

packages/semi-ui/locale/source/en_US.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'No Result',
         pageText: 'Showing ${currentStart} to ${currentEnd} of ${total}',
+        descend: 'Click to descend',
+        ascend: 'Click to ascend',
+        cancelSort: 'Cancel sorting',
     },
     Select: {
         emptyText: 'No Result',

packages/semi-ui/locale/source/es.ts

@@ -106,6 +106,9 @@ const locale: Locale = {
     Table: {
         emptyText: 'Sin resultados',
         pageText: 'Mostrando del ${currentStart} al ${currentEnd} de ${total}',
+        descend: 'Hacer clic para descender',
+        ascend: 'Hacer clic para ascender',
+        cancelSort: 'Cancelar ordenación',
     },
     Select: {
         emptyText: 'Sin resultados',

packages/semi-ui/locale/source/fr.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Aucun Résultat',
         pageText: 'Montrant ${currentStart} to ${currentEnd} of ${total}',
+        descend: 'Cliquez pour descendre',
+        ascend: 'Cliquez pour monter',
+        cancelSort: 'Annuler le tri',
     },
     Select: {
         emptyText: 'Aucun Résultat',

packages/semi-ui/locale/source/id_ID.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Tidak ada Hasil',
         pageText: 'Tampilkan halaman ${currentStart} sampai ${currentEnd} dari ${total}',
+        descend: 'Klik untuk menurun',
+        ascend: 'Klik untuk menaik',
+        cancelSort: 'Batalkan penyortiran',
     },
     Select: {
         emptyText: 'Tidak ada Hasil',

packages/semi-ui/locale/source/it.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Nessun risultato',
         pageText: 'Mostra ${currentStart} a ${currentEnd} di ${total}',
+        descend: 'Clicca per discendere',
+        ascend: 'Clicca per ascendere',
+        cancelSort: 'Annulla ordinamento',
     },
     Select: {
         emptyText: 'Nessun risultato',

packages/semi-ui/locale/source/ja_JP.ts

@@ -102,6 +102,9 @@ const local: Locale = {
     Table: {
         emptyText: 'データがありません',
         pageText: '第 ${currentStart} 条から第 ${currentEnd} 条まで表示します。計 ${total} 条',
+        descend: 'クリックして降順',
+        ascend: 'クリックして昇順',
+        cancelSort: 'ソートのキャンセル',
     },
     Select: {
         emptyText: 'データがありません',

packages/semi-ui/locale/source/ko_KR.ts

@@ -102,6 +102,9 @@ const local: Locale = {
     Table: {
         emptyText: '결과 없음',
         pageText: '${total} 중 ${currentStart}-${currentEnd}',
+        descend: '내림차순을 보려면 클릭하세요',
+        ascend: '오름차순을 보려면 클릭하세요',
+        cancelSort: '정렬 취소',
     },
     Select: {
         emptyText: '결과 없음',

packages/semi-ui/locale/source/ms_MY.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Tiada kandungan',
         pageText: 'Papar halaman ${currentStart} hingga ${currentEnd} daripada ${total}',
+        descend: 'Klik untuk menurun',
+        ascend: 'Klik untuk menaik',
+        cancelSort: 'Batal mengurutkan',
     },
     Select: {
         emptyText: 'Tiada kandungan',

packages/semi-ui/locale/source/nl_NL.ts

@@ -108,6 +108,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Geen resultaten gevonden',
         pageText: '${currentStart} tot ${currentEnd} van ${total} wordt weergegeven',
+        descend: 'Klik om af te dalen',
+        ascend: 'Klik om op te stijgen',
+        cancelSort: 'Sorteren annuleren',
     },
     Select: {
         emptyText: 'Geen resultaten gevonden',

packages/semi-ui/locale/source/pl_PL.ts

@@ -109,6 +109,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Nie znaleziono żadnych wyników',
         pageText: 'Wyświetlanie od ${currentStart} do ${currentEnd} z ${total}',
+        descend: 'Kliknij, aby sortować malejąco',
+        ascend: 'Kliknij, aby sortować rosnąco',
+        cancelSort: 'Anuluj sortowanie',
     },
     Select: {
         emptyText: 'Nie znaleziono żadnych wyników',

packages/semi-ui/locale/source/pt_BR.ts

@@ -109,6 +109,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Não há dados',
         pageText: 'Mostrando ${currentStart} - ${currentEnd} ，de ${total}',
+        descend: 'Clique para descrescer',
+        ascend: 'Clique para crescer',
+        cancelSort: 'Cancelar classificação',
     },
     Select: {
         emptyText: 'Não há dados',

packages/semi-ui/locale/source/ro.ts

@@ -101,6 +101,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Nici un rezultat',
         pageText: 'Arată ${currentStart} la ${currentEnd} de ${total}',
+        descend: 'Faceți clic pentru a coborî',
+        ascend: 'Faceți clic pentru a urca',
+        cancelSort: 'Anulați sortarea',
     },
     Select: {
         emptyText: 'Nici un rezultat',

packages/semi-ui/locale/source/ru_RU.ts

@@ -104,6 +104,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Нет результата',
         pageText: 'Отображение ${currentStart} до ${currentEnd} из ${total}',
+        descend: 'Щелкните, чтобы упорядочить по убыванию',
+        ascend: 'Щелкните, чтобы упорядочить по возрастанию',
+        cancelSort: 'Отменить сортировку',
     },
     Select: {
         emptyText: 'Нет результата',

packages/semi-ui/locale/source/sv_SE.ts

@@ -106,6 +106,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Inga resultat hittades',
         pageText: 'Visar ${currentStart} till ${currentEnd} av ${total}',
+        descend: 'Klicka för att sortera fallande',
+        ascend: 'Klicka för att sortera stigande',
+        cancelSort: 'Avbryt sortering',
     },
     Select: {
         emptyText: 'Inga resultat hittades',

packages/semi-ui/locale/source/th_TH.ts

@@ -105,6 +105,9 @@ const local: Locale = {
     Table: {
         emptyText: 'ไม่มีข้อมูล',
         pageText: 'แสดงรายการ ${currentStart} - ${currentEnd} จาก ${total}',
+        descend: 'คลิกเพื่อเรียงจากมากไปหาน้อย',
+        ascend: 'คลิกเพื่อเรียงจากน้อยไปหามาก',
+        cancelSort: 'ยกเลิกการเรียงลำดับ',
     },
     Select: {
         emptyText: 'ไม่มีข้อมูล',

packages/semi-ui/locale/source/tr_TR.ts

@@ -107,7 +107,11 @@ const local: Locale = {
     {
         emptyText: 'Henüz veri yok',
         pageText:
-            '${currentStart} öğesini görüntüle - ${currentEnd} öğe, toplam ${total} öğe '
+            '${currentStart} öğesini görüntüle - ${currentEnd} öğe, toplam ${total} öğe ',
+        descend: 'Azalan sıralama için tıklayın',
+        ascend: 'Artan sıralama için tıklayın',
+        cancelSort: 'Sıralamayı iptal et',
+    
     },
     Select: { emptyText: 'Henüz veri yok', createText: 'Oluştur' },
     Cascader: { emptyText: 'Henüz veri yok' },

packages/semi-ui/locale/source/vi_VN.ts

@@ -104,6 +104,9 @@ const local: Locale = {
     Table: {
         emptyText: 'Không kết quả',
         pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}',
+        descend: 'Nhấp để sắp xếp giảm dần',
+        ascend: 'Nhấp để sắp xếp tăng dần',
+        cancelSort: 'Hủy sắp xếp',
     },
     Select: {
         emptyText: 'Không kết quả',

packages/semi-ui/locale/source/zh_CN.ts

@@ -102,6 +102,9 @@ const local: Locale = {
     Table: {
         emptyText: '暂无数据',
         pageText: '显示第 ${currentStart} 条-第 ${currentEnd} 条，共 ${total} 条',
+        descend: '点击降序',
+        ascend: '点击升序',
+        cancelSort: '取消排序',
     },
     Select: {
         emptyText: '暂无数据',

packages/semi-ui/locale/source/zh_TW.ts

@@ -102,6 +102,9 @@ const local: Locale = {
     Table: {
         emptyText: '暫無數據',
         pageText: '顯示第 ${currentStart} 條-第 ${currentEnd} 條，共 ${total} 條',
+        descend: '點擊降序',
+        ascend: '點擊升序',
+        cancelSort: '取消排序',
     },
     Select: {
         emptyText: '暫無數據',

packages/semi-ui/markdownRender/__test__/markdown.test.js

@@ -0,0 +1,45 @@
+import MarkdownRender from '../index'
+import React from 'react';
+import { mount } from 'enzyme';
+import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
+
+
+describe(`MarkdownRender`, () => {
+    it(`test table render`, async () => {
+        const content = `
+        | Name | Brand | Count | Price |
+        | - | :- | -: | :-: |
+        | Book | Semi | 10 | ￥100 |
+        | Pen | Semi Design | 20 | ￥200 |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} />
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+        // check has row is two
+        expect(render.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).length).toBe(2);
+    });
+
+    it(`test table only header`, async () => {
+        const content = `
+        | Title | Name | Count | Price |
+        | - | :- | -: | :-: |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} />
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+    });
+});

packages/semi-ui/markdownRender/components/table.tsx

@@ -19,7 +19,7 @@ const table = (props: PropsWithChildren<TableProps>)=>{
         let item: Record<string, string> = {
             key: String(i)
         };
-        dataFiber[i].props.children.forEach((child, index)=>{
+        dataFiber[i]?.props.children.forEach((child, index)=>{
             item[titles[index]] = child?.props?.children ?? "";
         });
         tableDataSource.push(item);

packages/semi-ui/markdownRender/index.tsx

@@ -38,7 +38,9 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
         style: PropTypes.object,
         format: PropTypes.string,
         components: PropTypes.any,
-        raw: PropTypes.string
+        raw: PropTypes.string,
+        remarkPlugins: PropTypes.arrayOf(PropTypes.object),
+        rehypePlugins: PropTypes.arrayOf(PropTypes.object),
     }
 
     static __SemiComponentName__ = "MarkdownRender";

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,11 +20,11 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.64.0",
-        "@douyinfe/semi-animation-react": "2.64.0",
-        "@douyinfe/semi-foundation": "2.64.0",
-        "@douyinfe/semi-icons": "2.64.0",
-        "@douyinfe/semi-illustrations": "2.64.0",
+        "@douyinfe/semi-animation": "2.65.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.65.0-beta.0",
+        "@douyinfe/semi-foundation": "2.65.0-beta.0",
+        "@douyinfe/semi-icons": "2.65.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.65.0-beta.0",
         "@douyinfe/semi-theme-default": "2.61.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",

packages/semi-ui/table/ColumnShape.ts

@@ -30,4 +30,5 @@ export default {
     title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     useFullRender: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    showSortTip: PropTypes.bool,
 };

packages/semi-ui/table/ColumnSorter.tsx

@@ -6,8 +6,11 @@ import { IconCaretup, IconCaretdown } from '@douyinfe/semi-icons';
 
 import { cssClasses, strings } from '@douyinfe/semi-foundation/table/constants';
 
-import { SortIcon, SortOrder } from './interface';
+import { SortIcon, SortOrder, TableLocale } from './interface';
+import Tooltip from '../tooltip';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
+import { getNextSortOrder } from './utils';
+import LocaleConsumer from '../locale/localeConsumer';
 
 export interface ColumnSorterProps {
     className?: string;
@@ -16,7 +19,8 @@ export interface ColumnSorterProps {
     prefixCls?: string;
     sortOrder?: SortOrder;
     title?: React.ReactNode;
-    sortIcon?: SortIcon
+    sortIcon?: SortIcon;
+    showTooltip?: boolean
 }
 
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
@@ -27,16 +31,18 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
         prefixCls: PropTypes.string,
         sortOrder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         sortIcon: PropTypes.func,
+        showTooltip: PropTypes.bool,
     };
 
     static defaultProps = {
         prefixCls: cssClasses.PREFIX,
         onClick: noop,
         sortOrder: false,
+        showTooltip: false
     };
 
     render() {
-        const { prefixCls, onClick, sortOrder, style, title, sortIcon } = this.props;
+        const { prefixCls, onClick, sortOrder, style, title, sortIcon, showTooltip } = this.props;
 
         const iconBtnSize = 'default';
 
@@ -60,16 +66,27 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
             if (typeof sortIcon === 'function') {
                 return sortIcon({ sortOrder });
             } else {
-                return (
-                    <div style={style} className={`${prefixCls}-column-sorter`}>
-                        <span className={`${upCls}`}>
-                            <IconCaretup size={iconBtnSize} />
-                        </span>
-                        <span className={`${downCls}`}>
-                            <IconCaretdown size={iconBtnSize} />
-                        </span>
-                    </div>
-                );
+                const node = (<div style={style} className={`${prefixCls}-column-sorter`}>
+                    <span className={`${upCls}`}>
+                        <IconCaretup size={iconBtnSize} />
+                    </span>
+                    <span className={`${downCls}`}>
+                        <IconCaretdown size={iconBtnSize} />
+                    </span>
+                </div>);
+                if (showTooltip) {
+                    let content = getNextSortOrder(sortOrder);
+                    return (<LocaleConsumer 
+                        componentName="Table" 
+                    >
+                        {(locale: TableLocale, localeCode: string) => (
+                            <Tooltip content={locale[content]}>
+                                {node}
+                            </Tooltip>
+                        )}
+                    </LocaleConsumer>);
+                }
+                return node;
             }
         };
 

packages/semi-ui/table/Table.tsx

@@ -1008,8 +1008,15 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
     addFnsInColumn = (column: ColumnProps = {}) => {
         const { prefixCls } = this.props;
         if (column && (column.sorter || column.filters || column.onFilter || column.useFullRender)) {
+            let hasSorter = typeof column.sorter === 'function' || column.sorter === true;
+            let hasFilter = (Array.isArray(column.filters) && column.filters.length) ||
+                isValidElement(column.filterDropdown) ||
+                typeof column.renderFilterDropdown === 'function';
             let hasSorterOrFilter = false;
+            const sortOrderNotControlled = !('sortOrder' in column);
+            const showSortTip = sortOrderNotControlled && column.showSortTip === true;
             const { dataIndex, title: rawTitle, useFullRender } = column;
+            const clickColumnToSorter = hasSorter && !hasFilter && !Boolean(useFullRender);
             const curQuery = this.foundation.getQuery(dataIndex);
             const titleMap: ColumnTitleProps = {};
             const titleArr = [];
@@ -1032,7 +1039,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     {rawTitle as React.ReactNode}
                 </span>
             );
-            if (typeof column.sorter === 'function' || column.sorter === true) {
+            if (hasSorter) {
                 // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
                 // both the title and sorting areas are used as the click hot area for sorting。
                 const sorter = (
@@ -1040,8 +1047,9 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                         key={strings.DEFAULT_KEY_COLUMN_SORTER}
                         sortOrder={sortOrder}
                         sortIcon={column.sortIcon}
-                        onClick={e => this.foundation.handleSort(column, e)}
+                        onClick={useFullRender || hasFilter ? e => this.foundation.handleSort(column, e) : null}
                         title={TitleNode}
+                        showTooltip={!clickColumnToSorter && showSortTip}
                     />
                 );
                 useFullRender && (titleMap.sorter = sorter);
@@ -1054,11 +1062,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const stateFilteredValue = get(curQuery, 'filteredValue');
             const defaultFilteredValue = get(curQuery, 'defaultFilteredValue');
             const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-            if (
-                (Array.isArray(column.filters) && column.filters.length) ||
-                isValidElement(column.filterDropdown) ||
-                typeof column.renderFilterDropdown === 'function'
-            ) {
+            if (hasFilter) {
 
                 const filter = (
                     <ColumnFilter
@@ -1086,6 +1090,13 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 );
 
             column = { ...column, title: newTitle };
+            if (clickColumnToSorter) {
+                column.clickToSort = e => {
+                    this.foundation.handleSort(column, e);
+                };
+                column.sortOrder = sortOrder;
+                column.showSortTip = showSortTip;
+            }
         }
 
         return column;

packages/semi-ui/table/TableHeaderRow.tsx

@@ -15,8 +15,11 @@ import {
 } from '@douyinfe/semi-foundation/table/utils';
 import BaseComponent from '../_base/baseComponent';
 import TableContext, { TableContextProps } from './table-context';
-import { TableComponents, OnHeaderRow, Fixed } from './interface';
+import { TableComponents, OnHeaderRow, Fixed, TableLocale } from './interface';
 import type { TableHeaderCell } from './TableHeader';
+import Tooltip from '../tooltip';
+import LocaleConsumer from '../locale/localeConsumer';
+import { getNextSortOrder } from './utils';
 
 export interface TableHeaderRowProps {
     components?: TableComponents;
@@ -149,6 +152,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
                     [`${prefixCls}-cell-fixed-right`]: fixedRight,
                     [`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst,
                     [`${prefixCls}-row-head-ellipsis`]: column.ellipsis,
+                    [`${prefixCls}-row-head-clickSort`]: column.clickToSort
                 }
             );
 
@@ -190,17 +194,40 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
             if (rowSpan === 0 || colSpan === 0) {
                 return null;
             }
+            
+            if (typeof column.clickToSort === 'function') {
+                if (props.onClick) {
+                    props.onClick = (e: any) => {
+                        props.onClick(e);
+                        column.clickToSort(e);
+                    };
+                } else {
+                    props.onClick = column.clickToSort;
+                }
+            }
 
-            return (
-                // @ts-ignore  no need to do complex ts type checking and qualification
-                <HeaderCell
-                    role="columnheader"
-                    aria-colindex={cellIndex + 1}
-                    {...props}
-                    style={cellStyle}
+            const headerCellNode = (<HeaderCell
+                role="columnheader"
+                aria-colindex={cellIndex + 1}
+                {...props}
+                style={cellStyle}
+                key={column.key || column.dataIndex || cellIndex}
+            />);
+            if (typeof column.clickToSort === 'function' && column.showSortTip === true) {
+                let content = getNextSortOrder(column.sortOrder);
+                return (<LocaleConsumer 
+                    componentName="Table" 
                     key={column.key || column.dataIndex || cellIndex}
-                />
-            );
+                >
+                    {(locale: TableLocale, localeCode: string) => (
+                        <Tooltip content={locale[content]}>
+                            {headerCellNode}
+                        </Tooltip>
+                    )}
+                </LocaleConsumer>);
+            }
+
+            return headerCellNode;
         });
 
         return (

packages/semi-ui/table/interface.ts

@@ -116,7 +116,8 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
-    resize?: boolean
+    resize?: boolean;
+    showSortTip?: boolean
 }
 
 export type Align = BaseAlign;

packages/semi-ui/table/utils.ts

@@ -1,6 +1,6 @@
 import { merge, clone as lodashClone, find, map } from 'lodash';
 import Logger from '@douyinfe/semi-foundation/utils/Logger';
-import { numbers } from '@douyinfe/semi-foundation/table/constants';
+import { numbers, strings } from '@douyinfe/semi-foundation/table/constants';
 import { cloneDeep } from '../_utils';
 import { TableComponents, Virtualized } from './interface';
 import { getColumnKey } from '@douyinfe/semi-foundation/table/utils';
@@ -147,4 +147,15 @@ export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], key
     return finalColumns;
 }
 
+export function getNextSortOrder(sortOrder: string | boolean) {
+    switch (sortOrder) {
+        case strings.SORT_DIRECTIONS[0]:
+            return strings.SORT_DIRECTIONS[1];
+        case strings.SORT_DIRECTIONS[1]:
+            return 'cancelSort';
+        default: 
+            return strings.SORT_DIRECTIONS[0];
+    }
+}
+
 export { cloneDeep };

packages/semi-ui/tree/interface.ts

@@ -84,7 +84,7 @@ export interface TreeProps extends BasicTreeProps {
     onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => ReactNode;
-    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
+    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData, searchWord?: string) => ReactNode;
     autoMergeValue?: boolean
 }
 export interface OptionProps {

packages/semi-ui/tree/treeContext.tsx

@@ -36,7 +36,7 @@ export interface TreeContextValue {
     isSearching?: boolean;
     loadData?: (treeNode?: TreeNodeData) => Promise<void>;
     onNodeLoad?: (data: TreeNodeData) => Promise<unknown>;
-    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
+    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData, searchWord?: string) => ReactNode;
     draggable?: boolean;
     renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => React.ReactNode;
     dragOverNodeKey?: string | string[];

packages/semi-ui/tree/treeNode.tsx

@@ -299,7 +299,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         const { renderLabel } = this.context;
         const { label, keyword, data, filtered, treeNodeFilterProp } = this.props;
         if (isFunction(renderLabel)) {
-            return renderLabel(label, data);
+            return renderLabel(label, data, keyword);
         } else if (isString(label) && filtered && keyword) {
             return getHighLightTextHTML({
                 sourceString: label,

packages/semi-ui/typography/__test__/typography.test.js

@@ -124,4 +124,39 @@ describe(`Typography`, () => {
         expect(typographyParagraph.find('.semi-typography').children().at(0).text()).toEqual('Key: code');
     });
 
+    it('custom copy render', () => {
+        const { Text } = Typography;
+        const code = 'code';
+
+        const typographyParagraph = mount(
+            <Text
+                style={{ marginTop: 6, color: 'var(--semi-color-text-2)' }}
+                ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-word' } } } }}
+                copyable={{
+                    content: code,
+                    render: (copied, doCopy, config) => {
+                        return (
+                            <span className="test-copy-button" onClick={doCopy}>
+                                <span className="test-copied">{String(copied)}</span>
+                                <span className="test-copy-content">{config.content}</span>
+                            </span>
+                        );
+                    }
+                }}
+            >
+                Key: {code}
+            </Text>
+        );
+
+        // test basic render
+        expect(typographyParagraph.find('.test-copied').text()).toEqual('false');
+        expect(typographyParagraph.find('.test-copy-content').text()).toEqual(code);
+
+        // test copy
+        const trigger = typographyParagraph.find('.test-copy-button');
+        expect(trigger.length).toEqual(1);
+        trigger.at(0).simulate('click');
+        expect(typographyParagraph.find('.test-copied').text()).toEqual('true');
+    });
+
 });

packages/semi-ui/typography/copyable.tsx

@@ -10,6 +10,7 @@ import { IconCopy, IconTick } from '@douyinfe/semi-icons';
 import { BaseProps } from '../_base/baseComponent';
 import { Locale } from '../locale/interface';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
+import { CopyableConfig } from './title';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -20,7 +21,8 @@ export interface CopyableProps extends BaseProps {
     forwardRef?: React.RefObject<any>;
     successTip?: React.ReactNode;
     icon?: React.ReactNode;
-    onCopy?: (e: React.MouseEvent, content: string, res: boolean) => void
+    onCopy?: (e: React.MouseEvent, content: string, res: boolean) => void;
+    render?: (copied: boolean, doCopy: (e: React.MouseEvent) => void, configs: CopyableConfig) => React.ReactNode
 }
 interface CopyableState {
     copied: boolean;
@@ -133,13 +135,17 @@ export class Copyable extends React.PureComponent<CopyableProps, CopyableState>
     }
 
     render() {
-        const { style, className, forwardRef, copyTip } = this.props;
+        const { style, className, forwardRef, copyTip, render } = this.props;
         const { copied } = this.state;
         const finalCls = cls(className, {
             [`${prefixCls}-action-copy`]: !copied,
             [`${prefixCls}-action-copied`]: copied,
         });
 
+        if (render) {
+            return render(copied, this.copy, this.props);
+        }
+
         return (
             <LocaleConsumer componentName="Typography">
                 {(locale: Locale['Typography']) => (

packages/semi-ui/typography/title.tsx

@@ -13,7 +13,9 @@ export interface CopyableConfig {
     successTip?: React.ReactNode;
     icon?: React.ReactNode;
 
-    onCopy?(e: React.MouseEvent, content: string, res: boolean): void
+    onCopy?: (e: React.MouseEvent, content: string, res: boolean) => void;
+
+    render?: (copied: boolean, doCopy: (e: React.MouseEvent) => void, configs: CopyableConfig) => React.ReactNode
 }
 
 export type LinkType = React.AnchorHTMLAttributes<HTMLAnchorElement> | boolean;

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.64.0",
+    "version": "2.65.0-beta.0",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

sitemap.xml

@@ -2,22 +2,22 @@
 <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
         <loc>https://juejin.cn/post/7267418854124699702</loc>
-        <lastmod>2024-08-13T04:22:25.533Z</lastmod>
+        <lastmod>2024-08-20T12:59:21.730Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://medium.com/front-end-weekly/how-we-test-semi-design-component-libraries-64b854f63b65</loc>
-        <lastmod>2024-08-13T04:22:24.743Z</lastmod>
+        <lastmod>2024-08-20T12:59:21.570Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://mp.weixin.qq.com/s/noHoWRuA25PgqFNcurhIUA</loc>
-        <lastmod>2024-08-13T04:22:27.116Z</lastmod>
+        <lastmod>2024-08-20T12:59:24.938Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://mp.weixin.qq.com/s/O3js-SZDNPEOjGxh-aAkbw</loc>
-        <lastmod>2024-08-13T04:22:27.189Z</lastmod>
+        <lastmod>2024-08-20T12:59:23.029Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -784,83 +784,83 @@
     </url>
     <url>
         <loc>https://semi.design/dsm/landing</loc>
-        <lastmod>2024-08-13T04:22:40.275Z</lastmod>
+        <lastmod>2024-08-20T12:59:34.595Z</lastmod>
         <changefreq>weekly</changefreq>
-        <scm>1.0.0.175</scm>
+        <scm>1.0.0.177</scm>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/divider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/grid</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/icon</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/layout</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/space</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/tokens</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/basic/typography</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/banner</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/notification</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/popconfirm</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/progress</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/skeleton</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/spin</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/feedback/toast</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/autocomplete</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -870,362 +870,362 @@
     </url>
     <url>
         <loc>https://semi.design/en-US/input/cascader</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/checkbox</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/datepicker</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/form</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/input</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/inputnumber</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/radio</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/rating</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/select</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/slider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/switch</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/taginput</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/timepicker</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/transfer</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/treeselect</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/input/upload</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/anchor</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/backtop</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/breadcrumb</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/navigation</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/pagination</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/steps</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/tabs</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/navigation/tree</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/other/configprovider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/other/locale</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/avatar</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/badge</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/calendar</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/card</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/carousel</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/collapse</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/collapsible</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/descriptions</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/dropdown</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/empty</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/highlight</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/image</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/list</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/modal</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/overflowlist</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/popover</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/scrolllist</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/sidesheet</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/table</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/tag</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/timeline</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/show/tooltip</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/accessibility</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/changelog</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/customize-theme</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/dark-mode</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/faq</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/getting-started</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/introduction</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/overview</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/en-US/start/update-to-v2</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/divider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/grid</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/icon</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/layout</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/space</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/tokens</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/basic/typography</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/banner</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/notification</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/popconfirm</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/progress</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/skeleton</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/spin</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/feedback/toast</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/autocomplete</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
@@ -1235,287 +1235,287 @@
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/cascader</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/checkbox</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/datepicker</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/form</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/input</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/inputnumber</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/radio</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/rating</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/select</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/slider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/switch</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/taginput</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/timepicker</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/transfer</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/treeselect</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/input/upload</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/anchor</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/backtop</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/breadcrumb</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/navigation</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/pagination</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/steps</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/tabs</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/navigation/tree</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/other/configprovider</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/other/locale</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/avatar</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/badge</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/calendar</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/card</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/carousel</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/collapse</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/collapsible</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/descriptions</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/dropdown</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/empty</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/highlight</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/image</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/list</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/modal</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/overflowlist</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/popover</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/scrolllist</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/sidesheet</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/table</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/tag</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/timeline</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/show/tooltip</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/accessibility</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/changelog</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/customize-theme</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/dark-mode</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/faq</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/getting-started</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/introduction</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/overview</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
     <url>
         <loc>https://semi.design/zh-CN/start/update-to-v2</loc>
-        <lastmod>2024-08-13T04:19:43.000Z</lastmod>
+        <lastmod>2024-08-20T12:56:11.000Z</lastmod>
         <changefreq>weekly</changefreq>
     </url>
 </urlset>

src/locale/zh-CN.js

@@ -113,7 +113,7 @@ const appLocale = {
         "feature_D2C_description": "Semi 提供高效的 design to code 能力，3-5s，一键点击，从 Figma 设计稿生成真实代码",
         // page four: theme
         "home.theme": "百变主题",
-        "home.theme.desc": "提供高达2700+ Design Token，快速克隆或深度定制，灵活调配符合品牌调性的设计风格",
+        "home.theme.desc": "提供高达3000+ Design Token，快速克隆或深度定制，灵活调配符合品牌调性的设计风格",
         // page five: DSM
         "semi_dsm": "Semi 设计系统管理",
         "powerful_theme_editor__real_time_effect__one_click_synchronization_of_design_too_d77f5776bf126331e801d6d6aa0146f2": "强大的主题编辑器，实时生效，设计工具一键同步",

yarn.lock

@@ -1650,10 +1650,10 @@
     prop-types "^15.7.2"
     tslib "^2.3.1"
 
-"@douyinfe/[email protected].4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-doc-style/-/semi-site-doc-style-0.0.4.tgz#465badb80f387c222f91488dbb868addc2d62470"
-  integrity sha512-t1GQqW1GsZHiHECCXQQAXkhErzUrlTfV7PjAmdMGB7wyh9yLYiwiwHW6Np1oh+yiSvJAd1lx5EPA2jHDo1SeNA==
+"@douyinfe/[email protected].5":
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/@douyinfe/semi-site-doc-style/-/semi-site-doc-style-0.0.5.tgz#791a12bad18cfeaeb91402efce49b8879042be76"
+  integrity sha512-NXqz4UXSC7DGq0rjvCIPGxfVEgyoABtsIv+8ApfDoVOwoF7x2VpUCNFkBVBFM84nXHJBL0Lx2Vb934eadnLO1w==
 
 "@douyinfe/semi-site-header@^0.0.29":
   version "0.0.29"
@@ -24964,7 +24964,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -24982,15 +24982,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -25134,7 +25125,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -25162,13 +25153,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -27754,7 +27738,7 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -27789,15 +27773,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"