Merge branch 'main' of https://github.com/DouyinFE/semi-design

README-zh_CN.md

@@ -54,6 +54,7 @@
 - ⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
 - 🥳 支持 SSR
 - 👏 使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献
+- 📦 轻松兼容 web components，提供完整适配方案，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景
 
 # 🔥 安装
 

README.md

@@ -60,6 +60,7 @@ English | [简体中文](./README-zh_CN.md)
 - ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing.
 - 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
 - 🥳 SSR (Server Side Rendering) Compatible. 
+- 📦 Easily compatible with web components, providing a complete adaptation solution, more suitable for building SDKs, browser plugins and other scenarios that require DOM isolation.
 
 # 🔥 Install
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 18
+order: 19
 category: Input
 title:  Button
 subTitle: Button

content/basic/button/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 18
+order: 19
 category: 输入类
 title:  Button 按钮
 icon: doc-button

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 13
+order: 14
 category: Basic
 title:  Divider
 icon: doc-divider

content/basic/divider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 13
+order: 14
 category: 基础 
 title:  Divider 分割线 
 icon: doc-divider 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 14
+order: 15
 category: Basic
 title:  Grid
 icon: doc-grid

content/basic/grid/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 14
+order: 15
 category: 基础
 title:  Grid 栅格
 icon: doc-grid

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 15
+order: 16
 category: Basic
 title: Icon
 subTitle: Icon

content/basic/icon/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 15
+order: 16
 category: 基础
 title:  Icon 图标
 icon: doc-icons

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 16
+order: 17
 category: Basic
 title:  Layout
 subTitle: Layout

content/basic/layout/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 16
+order: 17
 category: 基础
 title: Layout 布局
 icon: doc-layout

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 19
+order: 20
 category: basic
 title:  Space
 icon: doc-space

content/basic/space/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 19
+order: 20
 category: 基础
 title:  Space 间距
 icon: doc-space

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 17
+order: 18
 category: Basic
 title: Tokens 
 icon: doc-token

content/basic/tokens/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 17
+order: 18
 category: 基础
 title:  Tokens 设计变量
 icon: doc-token

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 21
 category: Basic
 title:  Typography
 subTitle: Typography

content/basic/typography/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 21
 category: 基础
 title:  Typography 版式
 icon: doc-typography

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 72
+order: 73
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 72
+order: 73
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 74
+order: 75
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 74
+order: 75
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 75
+order: 76
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 75
+order: 76
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title:  Form
 subTitle: Form
@@ -2123,7 +2123,8 @@ The table below describes the features available in the formApi.
 | setError      | Modify the error information of a field                                                                                                                                                                                                                                                                                            | formApi.setError(field: string, fieldErrorMessage: string)                                                                    |
 | getError      | Get Error Status of Field                                                                                                                                                                                                                                                                                                          | formApi.getError(field: string)                                                                                               |
 | getFieldExist | Get whether the field exists in the Form                                                                                                                                                                                                                                                                                           | formApi.getFieldExist(field: string)                                                                                          |
-| scrollToField | Scroll to field                                                                                                                                                                                                                                                                                                                    | formApi.scrollToField(field: string, scrollOpts: [object](<(https://github.com/stipsan/scroll-into-view-if-needed#options)>)) |
+| scrollToField | Scroll to the specified field, the second input parameter will be passed to scroll-into-view-if-needed | formApi.scrollToField(field: string, scrollOpts: [ScrollIntoViewOptions](https://github.com/stipsan/scroll-into-view-if-needed#options))                                                            |
+| scrollToError | Scroll to the field with validation error. You can pass a specified field or index. If you pass index, scroll to the index-th error DOM. If you do not pass any parameters, scroll to the first validation error position in the DOM tree. Available after v2.61.0  | formApi.scrollToError(<ApiType detail='{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }'>ScrollToErrorOptions</ApiType>) 
 
 ### How to access formApi
 

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title:  Form 表单
 icon: doc-form
@@ -2121,7 +2121,8 @@ FormState 存储了所有 Form 内部的状态值，包括各表单控件的值
 | setError      | 修改 某个 field 的 error 信息                                                                                                                                                                                                    | formApi.setError(field: string, fieldErrorMessage: string)                                                          |
 | getError      | 获取 Field 的 error 状态                                                                                                                                                                                                         | formApi.getError(field: string)                                                                                     |
 | getFieldExist | 获取 Form 中是否存在对应的 field                                                                                                                                                                                                 | formApi.getFieldExist(field: string)                                                                                |
-| scrollToField | 滚动至指定的 field                                                                                                                                                                                                                   | formApi.scrollToField(field: string, scrollOpts: object)                                                            |
+| scrollToField | 滚动至指定的 field, 第二个入参将透传至scroll-into-view-if-needed | formApi.scrollToField(field: string, scrollOpts: [ScrollIntoViewOptions](https://github.com/stipsan/scroll-into-view-if-needed#options))                                                            |
+| scrollToError | 滚动至校验错误的field，可传指定 field 或者 index，传入 index 则滚动到第 index 个错误的 DOM，若不传参则滚动到DOM树中第一个校验出错的位置。 v2.61.0后提供  | formApi.scrollToError(<ApiType detail='{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }'>ScrollToErrorOptions</ApiType>)                                                            |
 ### 如何获取 formApi
 
 -   Form 组件在 ComponentDidMount 阶段，会执行 props 传入的 getFormApi 回调，你可以在回调函数中保存 formApi 的引用，以便后续进行调用(**示例如下代码**)  

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title:  Input 输入框
 icon: doc-input

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title: Select
 subTitle: Select
@@ -616,6 +616,52 @@ import { Select } from '@douyinfe/semi-ui';
 );
 ```
 
+
+### Search position
+The default search input is displayed on the Select Trigger. You can specify different positions through `searchPosition`, and you can choose `dropdown` or `trigger`. Available after `v2.61.0`  
+If you want to customize the placeholder of the Input search box in the dropdown, you can control it through `searchPlaceholder`  
+If the `searchPosition` is `trigger`, when `showClear=true`, clicking the clear button of the input will clear the selected items and the search text in the input at the same time   
+If the `searchPosition` is `dropdown`, when `showClear=true`, clicking the clear button of the trigger will clear the selected items,  clicking the clear button in the dropdown input will clear search text  
+
+
+```jsx live=true
+import React from 'react';
+import { Select } from '@douyinfe/semi-ui';
+
+() => (
+    <>
+        <Select
+            filter
+            searchPosition='dropdown'
+            style={{ width: 200 }}
+            defaultValue={'ulikecam'}
+        >
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="ulikecam">UlikeCam</Select.Option>
+            <Select.Option value="jianying">Capcut</Select.Option>
+            <Select.Option value="xigua">XiguaVideo</Select.Option>
+        </Select>
+        <br />
+        <br />
+        <Select
+            filter
+            searchPosition='dropdown'
+            multiple
+            style={{ width: 300 }}
+            defaultValue={['semi-1']}
+            autoClearSearchValue={false}
+        >
+            <Select.Option value="semi-0">Semi-0</Select.Option>
+            <Select.Option value="semi-1">Semi-1</Select.Option>
+            <Select.Option value="semi-2">Semi-2</Select.Option>
+            <Select.Option value="semi-3">Semi-3</Select.Option>
+            <Select.Option value="semi-4">Semi-4</Select.Option>
+        </Select>
+    </>
+);
+
+```
+
 ### Remote search
 
 A multi-select example with remote search, request debounce, loading status.
@@ -1168,6 +1214,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                 value={valList}
                 triggerRender={triggerRender}
                 optionList={list}
+                filter
+                searchPosition='dropdown'
                 onChange={value => setValList(value)}
                 multiple
                 style={{ width: 240 }}
@@ -1180,6 +1228,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                 onChange={value => setVal(value)}
                 triggerRender={triggerRender2}
                 optionList={list}
+                filter
+                searchPosition='dropdown'
                 style={{ width: 240, marginTop: 20, outline: 0 }}
             ></Select>
         </div>
@@ -1363,10 +1413,11 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | renderCreateItem | When allowCreate is true, you can customize the rendering of the creation label                                                                                                                                                                                                                                                                                    | function(inputValue: string) | InputValue => 'Create' + InputValue |
 | renderSelectedItem | Customize the rendering of selected tabs in the selection box                                                                                                                                                                                                                                                                                                      | function(option) |  |
 | restTagsPopoverProps | The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)                                                                                                                                                                                                                                                                                 | PopoverProps | {} | 2.22.0 |
+| size | Size, optional value `default` / `small` / `large`   
+| searchPosition | When the filter is turned on, the search box is in the trigger by default. You can set it to 'dropdown' to put the search box at the top of the popup list.  | string | 'trigger' | 2.61.0
 | showArrow | Whether to show arrow icon                                                                                                                                                                                                                                                                                                                                         | boolean | true |
 | showClear | Whether to show the clear button                                                                                                                                                                                                                                                                                                                                   | boolean | false |
 | 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 |
-| size | Size, optional value `default` / `small` / `large`                                                                                                                                                                                                                                                                                                                 | string | 'default' |
 | spacing | Spacing between popup layer and trigger                                                                                                                                                                                                                                                                                                                            | number | 4 |
 | stopPropagation | Whether to prevent click events on the popup layer from bubbling                                                                                                                                                                                                                                                                                                   | boolean | true |  |
 | style | Inline Style                                                                                                                                                                                                                                                                                                                                                       | object |  |
@@ -1472,7 +1523,7 @@ Some internal methods provided by Select can be accessed through ref:
 <DesignToken/>
 
 ## Related Material
-<semi-material-list code="3, 4, 58, 62"></semi-material-list>
+<semi-material-list code="3, 4, 58, 62, 696"></semi-material-list>
 
 ## FAQ
 

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: Select 选择器
 icon: doc-select
@@ -699,11 +699,58 @@ import { Select } from '@douyinfe/semi-ui';
 );
 ```
 
+### 搜索框位置
+默认搜索框展示于 Select 的 Trigger 触发器上。通过 `searchPosition` 可以指定不同的位置，可选 `dropdown`、`trigger`。 在 v2.61.0后提供
+若希望定制位于 dropdown 中的 Input 搜索框的 placeholder，可以通过 `searchPlaceholder` 控制  
+若 `searchPosition` 值为 `trigger`，当showClear=true 时，点击Trigger区域的清空按钮，将同时清空已选项以及搜索框中的文本  
+若 `searchPosition` 值为 `dropdown`，当showClear=true 时，点击Trigger区域清空按钮，仅清空已选项。点击搜索框中的清空按钮，仅清空搜索文本  
+
+```jsx live=true
+import React from 'react';
+import { Select } from '@douyinfe/semi-ui';
+
+() => (
+    <>
+        <Select
+            filter
+            searchPosition='dropdown'
+            style={{ width: 200 }}
+            defaultValue={'ulikecam'}
+            placeholder='我的搜索框在下拉菜单中'
+            searchPlaceholder="带搜索功能的单选"
+        >
+            <Select.Option value="douyin">抖音</Select.Option>
+            <Select.Option value="ulikecam">轻颜相机</Select.Option>
+            <Select.Option value="jianying">剪映</Select.Option>
+            <Select.Option value="xigua">西瓜视频</Select.Option>
+        </Select>
+        <br />
+        <br />
+        <Select
+            filter
+            searchPosition='dropdown'
+            multiple
+            style={{ width: 300 }}
+            defaultValue={['semi-1']}
+            placeholder='我的搜索框在下拉菜单中'
+            searchPlaceholder="带搜索功能的多选"
+            autoClearSearchValue={false}
+        >
+            <Select.Option value="semi-0">Semi-0</Select.Option>
+            <Select.Option value="semi-1">Semi-1</Select.Option>
+            <Select.Option value="semi-2">Semi-2</Select.Option>
+            <Select.Option value="semi-3">Semi-3</Select.Option>
+            <Select.Option value="semi-4">Semi-4</Select.Option>
+        </Select>
+    </>
+);
+```
+
 ### 远程搜索
 
 带有远程搜索，防抖请求，加载状态的多选示例  
 通过`filter`开启搜索能力  
-将`remote`设置为 true 关闭对当前数据的筛选过滤(在 v0.24.0 后提供)  
+将`remote`设置为 true 关闭对当前数据的筛选过滤
 通过动态更新`optionList`更新下拉菜单中的备选项  
 使用受控的 value 属性
 
@@ -1121,7 +1168,8 @@ class VirtualizeDemo extends React.Component {
 
 ### 自定义触发器
 
-如果 Select 默认的触发器样式满足不了你的需求，可以用`triggerRender`自定义选择框的展示
+如果 Select 默认的触发器样式满足不了你的需求，可以用`triggerRender`自定义选择框的展示  
+如果想保留搜索筛选能力，又不希望自己渲染 Input 相关的结构，可以同时通过 searchPosition='dropdown'，将默认的搜索框置于下拉列表中
 
 triggerRender 入参如下
 
@@ -1230,6 +1278,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                 optionList={list}
                 onChange={value => setValList(value)}
                 multiple
+                filter
+                searchPosition='dropdown'
                 style={{ width: 240 }}
             ></Select>
             <br />
@@ -1240,6 +1290,8 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                 onChange={value => setVal(value)}
                 triggerRender={triggerRender2}
                 optionList={list}
+                filter
+                searchPosition='dropdown'
                 style={{ width: 240, marginTop: 20, outline: 0 }}
             ></Select>
         </div>
@@ -1394,7 +1446,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
 | autoFocus | 初始渲染时是否自动 focus                                                                                                                       | boolean | false |
 | borderless        | 无边框模式  >=2.33.0                                                                                                                       | boolean                         |           |
 | className | 类名                                                                                                                                    | string |  |
-| clearIcon | 可用于自定义清除按钮, showClear为true时有效                                                                                                         | ReactNode | 2.25.0  |
+| clearIcon | 可用于自定义清除按钮, showClear为true时有效                                                                                                         | ReactNode |   | 2.25.0
 | clickToHide | 已展开时，点击选择框是否自动收起下拉列表                                                                                                                  | boolean | false |
 | defaultValue | 初始选中的值                                                                                                                                | string\|number\|array |  |
 | defaultOpen | 是否默认展开下拉列表                                                                                                                            | boolean | false |
@@ -1430,6 +1482,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
 | renderOptionItem | 通过 renderOptionItem 完全自定义下拉列表中候选项的渲染                                                                                                  | function(props) 入参详见 Demo |  |
 | restTagsPopoverProps | Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)                              | PopoverProps | {} | 2.22.0 |
 | remote | 是否开启远程搜索，当 remote 为 true 时，input 内容改变后不会进行本地筛选匹配                                                                                      | boolean | false |
+| searchPosition | filter开启时，搜索框的位置，默认在 trigger中，可以通过设为 'dropdown' 将搜索框置于下拉列表顶部。搭配 triggerRender 使用可以实现更高自由度的交互   | string | 'trigger' | 2.61.0
 | size | 大小，可选值 `default`/`small`/`large`                                                                                                      | string | 'default' |
 | style | 样式                                                                                                                                    | object |  |
 | stopPropagation | 是否阻止浮层上的点击事件冒泡                                                                                                                        | boolean | true |  |
@@ -1603,4 +1656,4 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
 3,4,44,54,58,62,72
 ``` -->
 ## 相关物料
-<semi-material-list code="3, 4, 58, 62"></semi-material-list>
+<semi-material-list code="3, 4, 58, 62, 696"></semi-material-list>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: Switch 开关
 icon: doc-switch

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect
@@ -1412,6 +1412,7 @@ function Demo() {
 | 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 |
+| 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                                                            | -           | -       |

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect
@@ -1395,6 +1395,7 @@ function Demo() {
 | arrowIcon| 自定义右侧下拉箭头Icon，当showClear开关打开且当前有选中值时，hover会优先显示clear icon                                                                                  | ReactNode | | 1.15.0|
 | autoAdjustOverflow| 浮层被遮挡时是否自动调整方向（暂时仅支持竖直方向，且插入的父级为 body）                                                                                                     |boolean | true| 0.34.0|
 | autoExpandParent | 是否自动展开父节点                                                                                                                                  | boolean | false | 0.34.0 |
+| autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将包括该节点以及该子孙节点。（在leafOnly为false的情况下生效）| boolean | true | 2.61.0 | 
 | borderless        | 无边框模式  >=2.33.0                                                                                                                            | boolean                         |           |
 | checkRelation | 多选时，节点之间选中状态的关系，可选：'related'、'unRelated'                                                                                                   | string | 'related' | 2.5.0 |
 | className | 选择框的 `className` 属性                                                                                                                        | string | - | - |

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 输入类
 title: Upload 上传
 icon: doc-upload

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb
@@ -297,20 +297,21 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 
 ### Breadcrumb
 
-| Properties | Instructions                                                                                      | type                                         | Default   | version |
-| ---------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------- | ------- |
-| autoCollapse      | Toggle whether to auto collapse when exceed maxItemCount                                                                                     | boolean                                     | true     |    1.9.0   |
-| className  | Class name                                                                                        | string                                       | -         |         |
-| compact    | Compact sizing                                                                                    | boolean                                      | true      |         |
-| maxItemCount      | Set the number of item when reached to collapse                                                                                      | number                                     | 4    | 1.9.0       |
-|moreType|...area rendering type，one of 'default'、'popover'|string|'default'|1.27.0|
-| renderItem | Custom function, used with routes                                                                 | (Route: [Route](#Route)) => React Node               | -         | 0.27.0  |
-|renderMore|Custom ... area rendering|(restItem: ReactNode[]) => ReactNode|-|1.27.0|
-| routes     | Routing information, an array of route objects or strings, format reference: [Route](#Route) | Array<[Route](#Route) \| string\>                              | -         |         |
-| separator  | Customized delimiter                                                                              | string                                       | ReactNode | '/'     |  |
-| showTooltip | Toggle whether to show tooltip if text overflowed. If passed in as an object: width, overflowed width; ellipsisPos, ways of truncation;  opts, passed directly to Tooltip component                              | boolean \| showToolTipProps             | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}      | 0.34.0 |
-| style      | Inline style                                                                                      | CSSProperties                                       | -         |         |
-| onClick    | Click event                                                                                       |  (item: [Route](#Route), e: Event) => void| -         | 0.27.0  |
+| Properties | Instructions                                                                                                                                                                        | type                                         | Default   | version |
+| ---------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------- | --------- | ------- |
+| activeIndex| Controlled use, currently selected navigation index                                                                                                                                 | - | 2.61.0 |
+| autoCollapse      | Toggle whether to auto collapse when exceed maxItemCount                                                                                                                            | boolean                                     | true     |    1.9.0   |
+| className  | Class name                                                                                                                                                                          | string                                       | -         |         |
+| compact    | Compact sizing                                                                                                                                                                      | boolean                                      | true      |         |
+| maxItemCount      | Set the number of item when reached to collapse                                                                                                                                     | number                                     | 4    | 1.9.0       |
+|moreType| ...area rendering type，one of 'default'、'popover'                                                                                                                                   |string|'default'|1.27.0|
+| renderItem | Custom function, used with routes                                                                                                                                                   | (Route: [Route](#Route)) => React Node               | -         | 0.27.0  |
+|renderMore| Custom ... area rendering                                                                                                                                                           |(restItem: ReactNode[]) => ReactNode|-|1.27.0|
+| routes     | Routing information, an array of route objects or strings, format reference: [Route](#Route)                                                                                        | Array<[Route](#Route) \| string\>                              | -         |         |
+| separator  | Customized delimiter                                                                                                                                                                | string                                       | ReactNode | '/'     |  |
+| showTooltip | Toggle whether to show tooltip if text overflowed. If passed in as an object: width, overflowed width; ellipsisPos, ways of truncation;  opts, passed directly to Tooltip component | boolean \| showToolTipProps             | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}      | 0.34.0 |
+| style      | Inline style                                                                                                                                                                        | CSSProperties                                       | -         |         |
+| onClick    | Click event                                                                                                                                                                         |  (item: [Route](#Route), e: Event) => void| -         | 0.27.0  |
 
 ### Breadcrumb.Item
 

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb
@@ -300,20 +300,21 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 
 ### Breadcrumb
 
-| 属性       | 说明                                                                                      | 类型                                       | 默认值 | 版本   |
-| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------ | ------ | ------ |
-| autoCollapse      | 是否超出maxItemCount后自动折叠                                                                                     | boolean                                     | true     |    1.9.0   |
-| className  | 类名                                                                                      | string                                     | -      |        |
-| compact    | 显示尺寸，是否紧凑                                                                         | boolean                                    | true   |        |
-| maxItemCount      | 超出多少个进行自动折叠                                                                                      | number                                     | 4    | 1.9.0       |
-|moreType|内置的...区域的渲染类型，可选值为 'default'、'popover'|string|'default'|1.27.0|
-| renderItem | 自定义链接函数，配合 routes 使用                                                          | (Route: [Route](#Route)) => ReactNode             | -      | 0.27.0 |
-| renderMore|自定义...区域的渲染|(restItem: ReactNode[]) => ReactNode|-|1.27.0|
-| routes     | router 的路由信息，由路由对象或字符串组成的数组，路由对象格式参考: [Route](#Route) | Array<[Route](#Route) \| string\>                            | -      |        |
-| separator  | 自定义的分隔符                                                                            | ReactNode                          | '/'    |        |
-| showTooltip | 是否展示 Tooltip 及相关配置: width，溢出宽度；   ellipsisPos，截断方式，从中间/末尾截断；                         opts，透传给Tooltip的属性                              | boolean \| showToolTipProps             | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}      | 0.34.0 |
-| style      | 内联样式                                                                                      | CSSProperties                                     | -      |        |
-| onClick    | 单击事件                                                                                  | (item: [Route](#Route) , e: Event) => void | -      | 0.27.0 |
+| 属性       | 说明                                                                                                      | 类型                                       | 默认值 | 版本   |
+| ---------- |---------------------------------------------------------------------------------------------------------| ------------------------------------------ | ------ | ------ |
+| activeIndex| 受控使用，当前选择的导航序号                                                                                          | - | 2.61.0 |
+| autoCollapse      | 是否超出maxItemCount后自动折叠                                                                                   | boolean                                     | true     |    1.9.0   |
+| className  | 类名                                                                                                      | string                                     | -      |        |
+| compact    | 显示尺寸，是否紧凑                                                                                               | boolean                                    | true   |        |
+| maxItemCount      | 超出多少个进行自动折叠                                                                                             | number                                     | 4    | 1.9.0       |
+|moreType| 内置的...区域的渲染类型，可选值为 'default'、'popover'                                                                  |string|'default'|1.27.0|
+| renderItem | 自定义链接函数，配合 routes 使用                                                                                    | (Route: [Route](#Route)) => ReactNode             | -      | 0.27.0 |
+| renderMore| 自定义...区域的渲染                                                                                             |(restItem: ReactNode[]) => ReactNode|-|1.27.0|
+| routes     | router 的路由信息，由路由对象或字符串组成的数组，路由对象格式参考: [Route](#Route)                                                   | Array<[Route](#Route) \| string\>                            | -      |        |
+| separator  | 自定义的分隔符                                                                                                 | ReactNode                          | '/'    |        |
+| showTooltip | 是否展示 Tooltip 及相关配置: width，溢出宽度；   ellipsisPos，截断方式，从中间/末尾截断；                         opts，透传给Tooltip的属性 | boolean \| showToolTipProps             | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}      | 0.34.0 |
+| style      | 内联样式                                                                                                    | CSSProperties                                     | -      |        |
+| onClick    | 单击事件                                                                                                    | (item: [Route](#Route) , e: Event) => void | -      | 0.27.0 |
 
 ### Breadcrumb.Item
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Navigation
 title: Tabs
 subTitle: Tabs
@@ -21,15 +21,15 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 Tbs supports three types of styles: `line`, `button`, and `card`. By default, the first tab is selected.
 
 Tabs supports two declare ways, and the rendering process of the two is different:
-- Pass the array of objects through `tabList`, when using `tabList`, only render the currently passed node each time
-- Or use `<TabPane>` to explicitly pass in item by item. When using `<TabPane>`, all panels will be rendered by default. You can set `keepDOM={false}` to only render the current panel, and there will be no animation effect at this time .
+
+-   Pass the array of objects through `tabList`, when using `tabList`, only render the currently passed node each time
+-   Or use `<TabPane>` to explicitly pass in item by item. When using `<TabPane>`, all panels will be rendered by default. You can set `keepDOM={false}` to only render the current panel, and there will be no animation effect at this time .
 
 <Notice title='Notice'>
     1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both <br/>
     2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents
 </Notice>
 
-
 ```jsx live=true
 import React from 'react';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
@@ -80,9 +80,7 @@ class App extends React.Component {
                                 backgroundColor: 'var(--semi-color-fill-0)',
                             }}
                         >
-                            <code>
-                                yarn add @douyinfe/semi-ui
-                            </code>
+                            <code>yarn add @douyinfe/semi-ui</code>
                         </pre>
                     </TabPane>
                     <TabPane tab="Help" itemKey="3">
@@ -220,50 +218,57 @@ class App extends React.Component {
 }
 ```
 
-
-### More with Dropdown 
-
+### More with Dropdown
 
 Supports merging redundant tabs into a `more` drop-down menu. Just pass in a number for `more`. The number represents the number of tabs included in the drop-down menu. **（>=v2.59.0）**
 
-
 ```jsx live=true dir=column
 import React from 'react';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
-function Demo(){
-  return (
-          <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
+function Demo() {
+    return (
+        <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
-                      Content of card tab {i}
-                    </TabPane>
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
             ))}
-          </Tabs>
-  );
+        </Tabs>
+    );
 }
 ```
 
 Advanced configuration is also supported, passing the object to `more`, and it can be passed in
 
-- `count`: Represents the number of Tabs in the income drop-down menu
-- `render`: Customize the rendering function of Trigger. The returned ReactNode will be rendered as the Trigger of the drop-down menu.
-- `dropdownProps`: Incoming DropDown Props will be transparently transmitted to the drop-down menu. If you need to customize the drop-down menu, use the render method in dropdownProps
+-   `count`: Represents the number of Tabs in the income drop-down menu
+-   `render`: Customize the rendering function of Trigger. The returned ReactNode will be rendered as the Trigger of the drop-down menu.
+-   `dropdownProps`: Incoming DropDown Props will be transparently transmitted to the drop-down menu. If you need to customize the drop-down menu, use the render method in dropdownProps
 
 ```jsx live=true dir=column
 import React from 'react';
-import { Tabs, TabPane } from '@douyinfe/semi-ui';
+import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 
-function Demo(){
-  return (
-          <Tabs more={{ count: 4, render: ()=>{return <div style={{ display: 'inline-block' }}>Click to show More</div>;}, dropdownProps: { trigger: "click" } }} style={{ width: '60%', margin: '20px' }} type="card">
+function Demo() {
+    return (
+        <Tabs
+            more={{
+                count: 4,
+                render: () => {
+                    return <Button type='tertiary'>Click to show More</Button>;
+                },
+                dropdownProps: { trigger: 'click', position: 'bottomRight' },
+            }}
+            style={{ width: '60%', margin: '20px' }}
+            type="card"
+        >
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
-                      Content of card tab {i}
-                    </TabPane>
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
             ))}
-          </Tabs>
-  );
+        </Tabs>
+    );
 }
 ```
 
@@ -296,7 +301,7 @@ class App extends React.Component {
                 <RadioGroup
                     onChange={e => this.onSelect(e)}
                     value={this.state.type}
-                    type='button'
+                    type="button"
                     style={{
                         display: 'flex',
                         width: 200,
@@ -374,6 +379,112 @@ class App extends React.Component {
 }
 ```
 
+**Modify the scrolling rendering Arrow**
+
+`renderArrow` modifies the Arrow, with the input parameters being the overflowed items and position
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Tabs, TabPane, Dropdown } from '@douyinfe/semi-ui';
+
+() => {
+    const [activeKey, setActiveKey] = useState('Tab-0');
+    const renderArrow = (items, pos, handleArrowClick) => {
+        const style = {
+            width: 32,
+            height: 32,
+            margin: '0 12px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '100%',
+            background: 'rgba(var(--semi-grey-1), 1)',
+            color: 'var(--semi-color-text)',
+            cursor: 'pointer',
+        };
+        return (
+            <Dropdown
+                render={
+                    <Dropdown.Menu>
+                        {items.map(item => {
+                            return (
+                                <Dropdown.Item onClick={() => setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>
+                            );
+                        })}
+                    </Dropdown.Menu>
+                }
+            >
+                {pos === 'start' ? (
+                    <div style={style} onClick={handleArrowClick}>
+                        ←
+                    </div>
+                ) : (
+                    <div style={style} onClick={handleArrowClick}>
+                        →
+                    </div>
+                )}
+            </Dropdown>
+        );
+    };
+
+    return (
+        <Tabs
+            renderArrow={renderArrow}
+            style={{ width: '50%', margin: '20px' }}
+            activeKey={activeKey}
+            type="card"
+            collapsible
+            onChange={k => setActiveKey(k)}
+        >
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
+            ))}
+        </Tabs>
+    );
+};
+```
+
+**Modify Arrow rendering position**
+
+Use `arrowPosition` to modify the overflow indicator position, optional start both end
+
+```jsx live=true dir=column
+import React from 'react';
+import { Tabs, TabPane } from '@douyinfe/semi-ui';
+
+class App extends React.Component {
+    render() {
+        return (
+            <>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'start'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'both'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'end'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+            </>
+        );
+    }
+}
+```
+
 ### Disable
 
 Disable one tab.
@@ -544,10 +655,9 @@ class App extends React.Component {
 
 ### Closeable
 
-Close a tab in the tab bar.
-Only card style tabs support the close option. Use `closable={true}` to turn it on.
+Close a tab in the tab bar. Only card style tabs support the close option. Use `closable={true}` to turn it on.
 
-```jsx live=true 
+```jsx live=true
 import React from 'react';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
@@ -559,21 +669,23 @@ class App extends React.Component {
                 { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },
                 { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },
                 { tab: 'Help', itemKey: '3', text: 'Help' },
-            ]
+            ],
         };
     }
     close(key) {
         const newTabList = [...this.state.tabList];
-        const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
+        const closeIndex = newTabList.findIndex(t => t.itemKey === key);
         newTabList.splice(closeIndex, 1);
         this.setState({ tabList: newTabList });
     }
     render() {
         return (
             <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}>
-                {
-                    this.state.tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
-                }
+                {this.state.tabList.map(t => (
+                    <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>
+                        {t.text}
+                    </TabPane>
+                ))}
             </Tabs>
         );
     }
@@ -584,77 +696,84 @@ class App extends React.Component {
 
 ### Tab
 
-Property | Description | Type | Default Value |
---- | --- | --- | --- |
-activeKey | The itemKey value of the currently active tab page | string | None |
-className | class name | string | None |
-collapsible | collapsed Tabs, **>=1.1.0** | boolean | false |
-contentStyle | The outer style object of the content area | CSSProperties | None |
-defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
-keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
-lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
-more | Render a portion of the Tab into a drop-down menu ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | -       |    
-renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
-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 |  |  |
-size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
-style | style object | CSSProperties | None |
-tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
-tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
-tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
-tabPosition | The position of the tab, support `top` (horizontal), `left` (vertical), **>=1.0.0** | string | `top` |
-type | The style of the label bar, optional `line`, `card`, `button` | string | `line` |
-onChange | Callback function when switching tab pages | function(activeKey: string) | None |
-onTabClick | Click event | function(key: string, e: Event) | None |
-onTabClose | executed when tab closed by user, **>=2.1.0**  |  function(tabKey: string) | None
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| activeKey | The itemKey value of the currently active tab page | string | None |
+| className | class name | string | None |
+| collapsible | collapsed Tabs, **>=1.1.0** | boolean | false |
+| visibleTabsStyle | Overall scrolling area style **>=2.61.0** | style: CSSProperties | None |
+| contentStyle | The outer style object of the content area | CSSProperties | None |
+| defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
+| keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
+| lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
+| more | Render a portion of the Tab into a drop-down menu ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | - |
+| renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
+| renderArrow | Customize how overflow items indicator are rendered externally. By default, the overflow items are expanded when the arrow button is hovered. **>=2.61.0** | (items: OverflowItem[],pos:"start"\|"end", handleArrowClick:()=>void)=> ReactNode | None |
+| 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 |
+| showRestInDropdown | Whether to display the collapsed Tab in the drop-down menu (only effective when collapsible is true) **>= 2.61.0** | boolean | true |
+| size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
+| style | style object | CSSProperties | None |
+| tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
+| tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
+| tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
+| tabPosition | The position of the tab, support `top` (horizontal), `left` (vertical), **>=1.0.0** | string | `top` |
+| type | The style of the label bar, optional `line`, `card`, `button` | string | `line` |
+| onChange | Callback function when switching tab pages | function(activeKey: string) | None |
+| onTabClick | Click event | function(key: string, e: Event) | None |
+| onTabClose | executed when tab closed by user, **>=2.1.0** | function(tabKey: string) | None |
+| arrowPosition | Arrow rendering position **>=2.61.0** | "start" "end" "both" | 无 |
+| onVisibleTabsChange | Overflow item switching change callback **>=2.61.0** | (visibleState:Record\<string,bool\>)=>void | None |
 
 ### TabPane
 
-Property | Description | Type | Default Value |
---------- | ---------------- | ------------------ | ---- - |
-className | class name | string | None |
-disabled | Whether the tab bar is disabled | boolean | None |
-icon | Tab bar icon | ReactNode | None |
-itemKey | corresponding to `activeKey` | string | None |
-style | style object | CSSProperties | None |
-tab | Tab page bar display text | ReactNode | None |
-closable | whether user can close the tab **>=2.1.0** | boolean | false |
-
+| Property  | Description                                | Type          | Default Value |
+| --------- | ------------------------------------------ | ------------- | ------------- |
+| className | class name                                 | string        | None          |
+| disabled  | Whether the tab bar is disabled            | boolean       | None          |
+| icon      | Tab bar icon                               | ReactNode     | None          |
+| itemKey   | corresponding to `activeKey`               | string        | None          |
+| style     | style object                               | CSSProperties | None          |
+| tab       | Tab page bar display text                  | ReactNode     | None          |
+| closable  | whether user can close the tab **>=2.1.0** | boolean       | false         |
 
 ## Accessibility
 
 ### ARIA
-- About role
-  - TabBar has a role of `tablist`
-  - Tab in TabBar has a role of `tab`
-  - TabPane has a role of `tabpanel`
-- aria-orientation: Indicates TabBar's orientation, can be `vertical` or `horizontal`. When tabPosition is `left`,aria-orientation will be `vertical`, when tabPosition is `top`, aria-orientation will be `horizontal`.
-- aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
-- aria-selected: Indicates whether the Tab is selected.
-- aria-controls: Indicates the TabPane controlled by the Tab
-- aria-labelledby: Indicates the element labels the TabPane
+
+-   About role
+    -   TabBar has a role of `tablist`
+    -   Tab in TabBar has a role of `tab`
+    -   TabPane has a role of `tabpanel`
+-   aria-orientation: Indicates TabBar's orientation, can be `vertical` or `horizontal`. When tabPosition is `left`,aria-orientation will be `vertical`, when tabPosition is `top`, aria-orientation will be `horizontal`.
+-   aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
+-   aria-selected: Indicates whether the Tab is selected.
+-   aria-controls: Indicates the TabPane controlled by the Tab
+-   aria-labelledby: Indicates the element labels the TabPane
 
 ### Keyboard and Focus
+
 WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
-- Tabs can be given focus, except for disabled tabs
-- Keyboard users can use the `Tab` key to move the focus to the tab panel of the selected tab element
-- Use `left and right arrows` to toggle options when focus is on a tab element in a horizontal tab list
-- Use `up and down arrows` to toggle options when focus is on a tab element in a vertical tab list
-- When the focus is on an inactive tab element in the tab list, the `Space` or `Enter` keys can be used to activate the tab
-- When keyboard users want to focus directly on the last tab element in the tab list:
-  - Mac users: `fn` + `right arrow`
-  - Windows users: `End`
-- When keyboard users want to focus directly on the first tab element in the tab list:
-  - Mac users: `fn` + `left arrow`
-  - Windows users: `Home`
-- When a tab is allowed to be deleted:
-  - Users can use `Delete` keys to delete tab
-  - After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element
+
+-   Tabs can be given focus, except for disabled tabs
+-   Keyboard users can use the `Tab` key to move the focus to the tab panel of the selected tab element
+-   Use `left and right arrows` to toggle options when focus is on a tab element in a horizontal tab list
+-   Use `up and down arrows` to toggle options when focus is on a tab element in a vertical tab list
+-   When the focus is on an inactive tab element in the tab list, the `Space` or `Enter` keys can be used to activate the tab
+-   When keyboard users want to focus directly on the last tab element in the tab list:
+    -   Mac users: `fn` + `right arrow`
+    -   Windows users: `End`
+-   When keyboard users want to focus directly on the first tab element in the tab list:
+    -   Mac users: `fn` + `left arrow`
+    -   Windows users: `Home`
+-   When a tab is allowed to be deleted:
+    -   Users can use `Delete` keys to delete tab
+    -   After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element
 
 ## Content Guidelines
-- Label copy needs to explain the label content accurately and clearly
-- Use short, easily distinguishable labels
-- try to stay within one word
 
+-   Label copy needs to explain the label content accurately and clearly
+-   Use short, easily distinguishable labels
+-   try to stay within one word
 
 ## Design Token
 

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs
@@ -19,8 +19,9 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
 标签栏支持三种样式的显示：线条式，按钮式，卡片式。默认选中第一项。  
 标签页支持两种传入方式，两者渲染流程上有所区别：
-- 通过 `tabList` 传入标签页对象的数组，当使用 `tabList` 时每次只渲染当前传入的节点
-- 或使用 `<TabPane>` 逐项显式传入，使用 `<TabPane>` 时默认会渲染所有面板，可以通过设置 `keepDOM={false}` 只渲染当前面板，此时不会有动画效果。
+
+-   通过 `tabList` 传入标签页对象的数组，当使用 `tabList` 时每次只渲染当前传入的节点
+-   或使用 `<TabPane>` 逐项显式传入，使用 `<TabPane>` 时默认会渲染所有面板，可以通过设置 `keepDOM={false}` 只渲染当前面板，此时不会有动画效果。
 
 <Notice title='注意事项'>
     1. tabList 与 TabPane Children 同时使用时，会优先渲染通过 tabList 传入的数据。不建议同时配置 <br/>
@@ -42,8 +43,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
                     Web 应用。
                 </p>
                 <p style={{ lineHeight: 1.8 }}>
-                    区别于其他的设计系统而言，Semi Design
-                    以用户中心、内容优先、设计人性化为设计理念，具有以下优势：
+                    区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：
                 </p>
                 <ul>
                     <li>
@@ -73,9 +73,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
                         backgroundColor: 'var(--semi-color-fill-0)',
                     }}
                 >
-                    <code>
-                        yarn add @douyinfe/semi-ui
-                    </code>
+                    <code>yarn add @douyinfe/semi-ui</code>
                 </pre>
             </TabPane>
             <TabPane tab="帮助" itemKey="3">
@@ -84,8 +82,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
                     Q：有新组件需求、或者现有组件feature不能满足业务需求？
                 </p>
                 <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
-                    右上角问题反馈，提交issue，label选择Feature Request / New Component Request
-                    我们会高优处理这些需求。
+                    右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。
                 </p>
                 <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
                     Q：对组件的使用有疑惑？
@@ -97,7 +94,6 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
         </Tabs>
     </div>
 );
-
 ```
 
 ```jsx live=true
@@ -205,8 +201,7 @@ import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
 );
 ```
 
-### 更多选项收入 More 展示 
-
+### 更多选项收入 More 展示
 
 支持将多余 Tab 合并为 ”更多“ 下拉菜单，`more` 传入数字即可，数字表示收入下拉菜单的 Tab 数量。**（>=v2.59.0）**
 
@@ -214,43 +209,52 @@ import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
 import React from 'react';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
-function Demo(){
-  return (
-          <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
+function Demo() {
+    return (
+        <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
-                      Content of card tab {i}
-                    </TabPane>
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
             ))}
-          </Tabs>
-  );
+        </Tabs>
+    );
 }
 ```
 
-也支持高级配置，向 `more` 传入对象，内可传入 
+也支持高级配置，向 `more` 传入对象，内可传入
 
-- `count`: 表示收入下拉菜单的 Tab 数量
-- `render`: 自定义 Trigger 的渲染函数，返回的 ReactNode 会被渲染为下拉菜单的 Trigger
-- `dropdownProps`: 传入 DropDown Props，会被透传到下拉菜单，如果需要自定义下拉菜单，使用 dropdownProps 中的 render 方法
+-   `count`: 表示收入下拉菜单的 Tab 数量
+-   `render`: 自定义 Trigger 的渲染函数，返回的 ReactNode 会被渲染为下拉菜单的 Trigger
+-   `dropdownProps`: 传入 DropDown Props，会被透传到下拉菜单，如果需要自定义下拉菜单，使用 dropdownProps 中的 render 方法
 
 ```jsx live=true dir=column
 import React from 'react';
-import { Tabs, TabPane } from '@douyinfe/semi-ui';
+import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 
-function Demo(){
-  return (
-          <Tabs more={{ count: 4, render: ()=>{return <div style={{ display: 'inline-block' }}>Click to show More</div>;}, dropdownProps: { trigger: "click" } }} style={{ width: '60%', margin: '20px' }} type="card">
+function Demo() {
+    return (
+        <Tabs
+            more={{
+                count: 4,
+                render: () => {
+                    return <Button type='tertiary'>Click to show More</Button>;
+                },
+                dropdownProps: { trigger: 'click', position: 'bottomRight' },
+            }}
+            style={{ width: '60%', margin: '20px' }}
+            type="card"
+        >
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
-                      Content of card tab {i}
-                    </TabPane>
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
             ))}
-          </Tabs>
-  );
+        </Tabs>
+    );
 }
 ```
 
-
 ### 垂直的标签栏
 
 支持水平和垂直两种模式， `tabPosition='left|top'`
@@ -280,7 +284,7 @@ class App extends React.Component {
                 <RadioGroup
                     onChange={e => this.onSelect(e)}
                     value={this.state.type}
-                    type='button'
+                    type="button"
                     style={{
                         display: 'flex',
                         width: 200,
@@ -338,9 +342,7 @@ class App extends React.Component {
                                     backgroundColor: 'var(--semi-color-fill-0)',
                                 }}
                             >
-                                <code>
-                                    yarn add @douyinfe/semi-ui
-                                </code>
+                                <code>yarn add @douyinfe/semi-ui</code>
                             </pre>
                         </div>
                     </TabPane>
@@ -379,7 +381,6 @@ class App extends React.Component {
 
 ### 滚动折叠
 
-**v>= 1.1.0**  
 通过设置 `collapsible` 可以支持滚动折叠，目前只支持 horizontal 模式。
 
 ```jsx live=true dir=column
@@ -401,6 +402,112 @@ class App extends React.Component {
 }
 ```
 
+**自定义滚动箭头渲染**
+
+通过 renderArrow 修改滚动折叠模式下，左右切换箭头的渲染，入参为溢出的 items 和 位置
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Tabs, TabPane, Dropdown } from '@douyinfe/semi-ui';
+
+() => {
+    const [activeKey, setActiveKey] = useState('Tab-0');
+    const renderArrow = (items, pos, handleArrowClick) => {
+        const style = {
+            width: 32,
+            height: 32,
+            margin: '0 12px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '100%',
+            background: 'rgba(var(--semi-grey-1), 1)',
+            color: 'var(--semi-color-text)',
+            cursor: 'pointer',
+        };
+        return (
+            <Dropdown
+                render={
+                    <Dropdown.Menu>
+                        {items.map(item => {
+                            return (
+                                <Dropdown.Item onClick={() => setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>
+                            );
+                        })}
+                    </Dropdown.Menu>
+                }
+            >
+                {pos === 'start' ? (
+                    <div style={style} onClick={handleArrowClick}>
+                        ←
+                    </div>
+                ) : (
+                    <div style={style} onClick={handleArrowClick}>
+                        →
+                    </div>
+                )}
+            </Dropdown>
+        );
+    };
+
+    return (
+        <Tabs
+            renderArrow={renderArrow}
+            style={{ width: '50%', margin: '20px' }}
+            activeKey={activeKey}
+            type="card"
+            collapsible
+            onChange={k => setActiveKey(k)}
+        >
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                    Content of card tab {i}
+                </TabPane>
+            ))}
+        </Tabs>
+    );
+};
+```
+
+**修改切换箭头的渲染位置**
+
+通过 `arrowPosition` 来修改溢出指示器的位置，可选 `start` `both` `end`
+
+```jsx live=true dir=column
+import React from 'react';
+import { Tabs, TabPane } from '@douyinfe/semi-ui';
+
+class App extends React.Component {
+    render() {
+        return (
+            <>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'start'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'both'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'end'}>
+                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                            Content of card tab {i}
+                        </TabPane>
+                    ))}
+                </Tabs>
+            </>
+        );
+    }
+}
+```
+
 ### 禁用
 
 禁用标签栏中的某一个标签页。
@@ -563,7 +670,7 @@ class App extends React.Component {
 
 ### 关闭
 
-关闭标签栏中的某一个标签页。   
+关闭标签栏中的某一个标签页。  
 只有卡片样式的页签支持关闭选项。使用 `closable={true}` 来开启。
 
 ```jsx live=true
@@ -578,114 +685,122 @@ class App extends React.Component {
                 { tab: '文档', itemKey: '1', text: '文档', closable: true },
                 { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
                 { tab: '帮助', itemKey: '3', text: '帮助' },
-            ]
+            ],
         };
     }
     close(key) {
         const newTabList = [...this.state.tabList];
-        const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
+        const closeIndex = newTabList.findIndex(t => t.itemKey === key);
         newTabList.splice(closeIndex, 1);
         this.setState({ tabList: newTabList });
     }
     render() {
         return (
             <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}>
-                {
-                    this.state.tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
-                }
+                {this.state.tabList.map(t => (
+                    <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>
+                        {t.text}
+                    </TabPane>
+                ))}
             </Tabs>
         );
     }
 }
-
 ```
 
 ## API 参考
 
 ### Tab
 
-属性 | 说明 | 类型                                                                        | 默认值     |
---- | --- |---------------------------------------------------------------------------|---------|
-activeKey | 当前激活的 tab 页的 itemKey 值 | string                                                                    | 无       |
-className | 类名 | string                                                                    | 无       |
-collapsible | 折叠的 Tabs，**>=1.1.0** | boolean                                                                   | false   |
-contentStyle | 内容区域外层样式对象 | CSSProperties                                                             | 无       |
-defaultActiveKey | 初始化选中的 tab 页的 key 值 | string                                                                    | '1'     |
-keepDOM | 使用 TabPane 写法时是否渲染隐藏面板的 DOM 结构，**>=1.0.0** | boolean                                                                   | true    |
-lazyRender | 懒渲染，仅当面板激活过才被渲染在 DOM 树中, **>=1.0.0** | boolean                                                                   | false   |
-more | 将一部分 Tab 渲染到下拉菜单中 ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | -       |                                                              
-renderTabBar | 用于二次封装标签栏 | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode    | 无       |
-preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean                                                                   |         |  |
-size | 大小，提供 `large`、`medium`、`small` 三种类型，**>=1.11.0，目前仅支持线性 Tabs** | string                                                                    | `large` |
-style | 样式对象 | CSSProperties                                                             | 无       |
-tabBarExtraContent | 用于扩展标签栏的内容 | ReactNode                                                                 | 无       |
-tabList | 标签页对象组成的数组，该对象支持 itemKey（对应 activeKey，tab（标签页文字）及 icon（标签页图标） | TabPane[]                                                                 | 无       |
-tabPaneMotion | 是否使用动画切换 tabs | boolean                                                                   | true    |
-tabPosition | tab 的位置，支持`top`(水平), `left`(垂直)，**>=1.0.0** | string                                                                    | `top`   |
-type | 标签栏的样式，可选`line`、 `card`、 `button` | string                                                                    | `line`  |
-onChange | 切换 tab 页时的回调函数 | function(activeKey: string)                                               | 无       |
-onTabClick | 单击事件 | function(key: string, e: Event)                                           | 无       |
-onTabClose | 关闭 tab 页时的回调函数 **>=2.1.0** | function(tabKey: string)                                                  | 无       
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| activeKey | 当前激活的 tab 页的 itemKey 值 | string | 无 |
+| arrowPosition | 折叠模式下，左右切换箭头渲染位置 **>=2.61.0** | "start" "end" "both" | 无 |
+| className | 类名 | string | 无 |
+| collapsible | 折叠的 Tabs，**>=1.1.0** | boolean | false |
+| visibleTabsStyle | 整体滚动区域 Style **>=2.61.0** | style: CSSProperties | 无 |
+| contentStyle | 内容区域外层样式对象 | CSSProperties | 无 |
+| defaultActiveKey | 初始化选中的 tab 页的 key 值 | string | '1' |
+| keepDOM | 使用 TabPane 写法时是否渲染隐藏面板的 DOM 结构 | boolean | true |
+| lazyRender | 懒渲染，仅当面板激活过才被渲染在 DOM 树中  | boolean | false |
+| more | 将一部分 Tab 渲染到下拉菜单中 ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | - |
+| renderTabBar | 用于二次封装标签栏 | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | 无 |
+| renderArrow | 折叠滚动模式下，自定义左右切换箭头如何渲染，默认为箭头按钮 hover 时展开溢出项 **>=2.61.0** | (items: OverflowItem[],pos:"start"\|"end", handleArrowClick:()=>void)=> ReactNode | 无 |
+| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
+| showRestInDropdown | 是否将收起的 Tab 展示在下拉菜单中（仅当 collapsible 为 true 时生效） **>= 2.61.0** | boolean | true |
+| size | 大小，提供 `large`、`medium`、`small` 三种类型，**>=1.11.0，目前仅支持线性 Tabs** | string | `large` |
+| style | 样式对象 | CSSProperties | 无 |
+| tabBarExtraContent | 用于扩展标签栏的内容 | ReactNode | 无 |
+| tabList | 标签页对象组成的数组，该对象支持 itemKey（对应 activeKey，tab（标签页文字）及 icon（标签页图标） | TabPane[] | 无 |
+| tabPaneMotion | 是否使用动画切换 tabs | boolean | true |
+| tabPosition | tab 的位置，支持`top`(水平), `left`(垂直) | string | `top` |
+| type | 标签栏的样式，可选`line`、 `card`、 `button` | string | `line` |
+| onChange | 切换 tab 页时的回调函数 | function(activeKey: string) | 无 |
+| onTabClick | 单击事件 | function(key: string, e: Event) | 无 |
+| onTabClose | 关闭 tab 页时的回调函数 **>=2.1.0** | function(tabKey: string) | 无 |
+| onVisibleTabsChange | 折叠滚动模式下，溢出项切换变化回调 **>= 2.61.0** | (visibleState:Record\<string,bool\>)=>void | 无 |
 
 ### TabPane
 
-属性      | 说明             | 类型               | 默认值 |
---------- | ---------------- | ------------------ | ------ |
-className | 类名             | string             | 无     |
-disabled  | 标签页栏是否禁用 | boolean            | 无     |
-icon      | 标签页栏 icon    | ReactNode | 无     |
-itemKey   | 对应 `activeKey` | string             | 无     |
-style     | 样式对象         | CSSProperties             | 无     |
-tab       | 标签页栏显示文字 | ReactNode | 无     |
-closable  | 允许关闭tab **>=2.1.0**| boolean | false |
+| 属性      | 说明                     | 类型          | 默认值 |
+| --------- | ------------------------ | ------------- | ------ |
+| className | 类名                     | string        | 无     |
+| disabled  | 标签页栏是否禁用         | boolean       | 无     |
+| icon      | 标签页栏 icon            | ReactNode     | 无     |
+| itemKey   | 对应 `activeKey`         | string        | 无     |
+| style     | 样式对象                 | CSSProperties | 无     |
+| tab       | 标签页栏显示文字         | ReactNode     | 无     |
+| closable  | 允许关闭 tab **>=2.1.0** | boolean       | false  |
 
 ## Accessibility
 
 ### ARIA
-- 关于 role
-  - TabBar 对应的 role 为 `tablist`
-  - TabBar 中的 Tab 对应的 role 为 `tab`
-  - TabPane 对应的 role 为 `tabpanel`
-- aria-orientation: 表明 TabBar 的方向，有 `vertical` 和 `horizontal` 两种。当传入 tabPosition 为 left 时, aria-orientation 会被设置为 `vertical`，tabPosition 为 top 时，设置为 `horizontal`
-- aria-disabled: 当 TabPane 设置为 disabled 时，对应 Tab 的 aria-disabled 会被设置为 true
-- aria-selected: 表明 Tab 是否被选中
-- aria-controls: 指向 Tab 标签所控制的 TabPane
-- aria-labelledby: 指向设置 TabPane 标签的元素
+
+-   关于 role
+    -   TabBar 对应的 role 为 `tablist`
+    -   TabBar 中的 Tab 对应的 role 为 `tab`
+    -   TabPane 对应的 role 为 `tabpanel`
+-   aria-orientation: 表明 TabBar 的方向，有 `vertical` 和 `horizontal` 两种。当传入 tabPosition 为 left 时, aria-orientation 会被设置为 `vertical`，tabPosition 为 top 时，设置为 `horizontal`
+-   aria-disabled: 当 TabPane 设置为 disabled 时，对应 Tab 的 aria-disabled 会被设置为 true
+-   aria-selected: 表明 Tab 是否被选中
+-   aria-controls: 指向 Tab 标签所控制的 TabPane
+-   aria-labelledby: 指向设置 TabPane 标签的元素
 
 ### 键盘和焦点
+
 WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
-- 选项卡可以被获取到焦点，但禁用的选项卡除外
-- 键盘用户可以使用 `Tab` 键，将焦点移动到已被选择的选项卡元素的选项卡面板上
-- 当焦点位于水平选项卡列表中的选项卡元素上时，使用 `左右箭头` 来切换选项
-- 当焦点位于垂直选项卡列表中的选项卡元素上时，使用 `上下箭头` 来切换选项
-- 当焦点位于选项卡列表中的未被激活的选项卡元素上时，可以使用 `Space` 或 `Enter` 键来激活该选项卡
-- 当键盘用户想要直接将焦点聚焦到选项卡列表中的最后一个选项卡元素时：
-    - Mac 用户：`fn` + `右箭头`
-    - Windows 用户：`End`
-- 当键盘用户想要直接将焦点聚焦到选项卡列表中的第一个选项卡元素时：
-    - Mac 用户：`fn` + `左箭头`
-    - Windows 用户：`Home`
-- 当选项卡允许被删除时：
-    - 用户可以使用 `Delete` 键删除选项卡
-    - 删除后，焦点转移到被删除选项卡元素的后一个元素上；若被删除元素无后一个元素则转移到前一个元素上
 
+-   选项卡可以被获取到焦点，但禁用的选项卡除外
+-   键盘用户可以使用 `Tab` 键，将焦点移动到已被选择的选项卡元素的选项卡面板上
+-   当焦点位于水平选项卡列表中的选项卡元素上时，使用 `左右箭头` 来切换选项
+-   当焦点位于垂直选项卡列表中的选项卡元素上时，使用 `上下箭头` 来切换选项
+-   当焦点位于选项卡列表中的未被激活的选项卡元素上时，可以使用 `Space` 或 `Enter` 键来激活该选项卡
+-   当键盘用户想要直接将焦点聚焦到选项卡列表中的最后一个选项卡元素时：
+    -   Mac 用户：`fn` + `右箭头`
+    -   Windows 用户：`End`
+-   当键盘用户想要直接将焦点聚焦到选项卡列表中的第一个选项卡元素时：
+    -   Mac 用户：`fn` + `左箭头`
+    -   Windows 用户：`Home`
+-   当选项卡允许被删除时：
+    -   用户可以使用 `Delete` 键删除选项卡
+    -   删除后，焦点转移到被删除选项卡元素的后一个元素上；若被删除元素无后一个元素则转移到前一个元素上
 
 ## 设计变量
 
 <DesignToken/>
 
 ## 文案规范
-- 标签文案需要准确清晰地解释标签内容
-- 用简短的，易区分的标签
-- 尽量保持在一个词以内
 
+-   标签文案需要准确清晰地解释标签内容
+-   用简短的，易区分的标签
+-   尽量保持在一个词以内
 
 ## FAQ
 
--   **为什么在Tabs中使用 Typography 的省略 ellipsis 失效？**
+-   **为什么在 Tabs 中使用 Typography 的省略 ellipsis 失效？**
 
-    因为Tabs渲染TabPane时，默认是全部渲染display: none。此时这些组件无法获取到正确的宽度或高度值。建议1.x的版本开启lazyRender，或者关闭keepDOM。0.x的版本需要使用tabList的写法。
+    因为 Tabs 渲染 TabPane 时，默认是全部渲染 display: none。此时这些组件无法获取到正确的宽度或高度值。建议 1.x 的版本开启 lazyRender，或者关闭 keepDOM。0.x 的版本需要使用 tabList 的写法。
 
--   **为什么在Tabs中使用Collapse/Collapsible/Resizable Table等组件的高度或宽度值不对？**
+-   **为什么在 Tabs 中使用 Collapse/Collapsible/Resizable Table 等组件的高度或宽度值不对？**
 
     原因同上，另外如果 collapse 不需要动画，也可以通过设置 motion={false} 来关闭动画效果。此时无需获取组件的高度。

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Navigation
 title:  Tree
 subTitle: Tree
@@ -2271,6 +2271,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | ------------------- | --------------------- | ------------------------------------------------- | ------- | ------ |
 | autoExpandParent | Toggle whether to expand parent node automatically | boolean | false | 0.34.0 |
 | autoExpandWhenDragEnter | Toggle whether allow autoExpand when drag enter node | boolean | true | 1.8.0 | 
+| 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 | 
 | blockNode           | Toggle whether to display node as row     | boolean                     | true    | - |
 | checkRelation | In multiple, the relationship between the checked states of the nodes, optional: 'related'、'unRelated' | string | 'related' | 2.5.0 |
 | className           | Class name| string                      | -       | - |

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree
@@ -2286,6 +2286,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 |-------------   | ----------- | -------------- | -------------- | --------|
 | autoExpandParent | 是否自动展开父节点，默认为 false，当组件初次挂载时为 true | boolean | false | 0.34.0 |
 | autoExpandWhenDragEnter | 是否允许拖拽到节点上时自动展开改节点 | boolean | true | 1.8.0 | 
+| autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将包括该节点以及该子孙节点。（在leafOnly为false的情况下生效）| boolean | true | 2.61.0 | 
 | blockNode | 行显示节点 | boolean | true | - |
 | checkRelation | 多选时，节点之间选中状态的关系，可选：'related'、'unRelated' | string | 'related' | 2.5.0 |
 | className | 类名 | string | - | - |

content/order.js

@@ -8,6 +8,7 @@ const order = [
     'overview',
     'faq',
     "tailwind",
+    "web-components",
     'content-guidelines',
     'changelog',
     'update-to-v2',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 76
+order: 77
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 76
+order: 77
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 78
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 78
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title:  Avatar
 subTitle: avatar
@@ -18,7 +18,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 ```
 ### Size
 
-You can change the size of the avatars with `size` property. The following sizes are supported:  `extra-extra-small`(20x20), `extra-small`(24x24),`small`(32x32), `default`(40x40), `medium`(48x48), `large`(72x72), `extra-large`(128 x 128).
+You can change the size of the avatars with `size` property. The following sizes are supported:  `extra-extra-small`, `extra-small`,`small`, `default`, `medium`, `large`, `extra-large`.
 
 ```jsx live=true
 import React from 'react';
@@ -437,7 +437,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 | hoverMask    | Avatar content overlay when hover                                                                                                                                                         | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -        |
 | imgAttr | Native html img attributes **>=1.5.0**                                                                                                                                                    | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | - |
 | shape        | Shape of the avatar, one of `circle`, `square`                                                                                                                                            | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `circle` |
-| size         | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large`                                                                        | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `medium` |
+| size         | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and valid value like "10px"                                                    | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `medium` |
 | src          | Resource address for imgage avatars                                                                                                                                                       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | srcSet       | Set the image avatar responsive resource address                                                                                                                                          | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | style        | Style name                                                                                                                                                                                | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -        |

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar
@@ -17,7 +17,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 
 ### 尺寸
 
-可以通过 `size` 属性设置图标大小，支持``extra-extra-small`(20x20)，`extra-small`(24x24)，`small`(32x32)，`default`(40x40)，`medium`(48x48)，`large`(72x72)，`extra-large`(128x128)`。
+可以通过 `size` 属性设置图标大小，支持`extra-extra-small`，`extra-small`，`small`，`default`，`medium`，`large`，`extra-large`。
 
 ```jsx live=true
 import React from 'react';
@@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 | gap | 字符头像距离左右两侧的像素大小                                                                                                                                                   | number                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 3 |
 | imgAttr | 原生 img 属性 **>=1.5.0**                                                                                                                                             | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | - |
 | shape | 指定头像的形状，支持 `circle`、`square`                                                                                                                                      | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `circle` |
-| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large`                                                                     | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `medium` |
+| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和 合法的 width 属性值例如 "10px"                                                           | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `medium` |
 | src | 图片类头像的资源地址                                                                                                                                                        | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | srcSet | 设置图片类头像响应式资源地址                                                                                                                                                    | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | style | 样式名                                                                                                                                                               | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | - |

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 51
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Show
 title: Collapse
 subTitle: Collapse