Merge branch 'main' into release

.gitattributes

@@ -0,0 +1,6 @@
+src/*  -linguist-detectable
+*.test.js -linguist-detectable
+*.storie.js -linguist-detectable
+packages/* linguist-detectable
+*.tsx linguist-language=TypeScript
+*.jsx linguist-language=JavaScript

README-zh_CN.md

@@ -43,7 +43,7 @@
 # 🎉 特性
 
 - 💪 58+高质量组件
-- 💅 强大的主题定制，上千个 Design Token
+- 💅 强大的主题定制，多达两千多个 Design Token，深入定制每一处细节
 - 🌍 国际化支持 14 种语言
 - 👏 使用 TypeScript，良好的类型定义
 - 🥳 支持 SSR

content/basic/layout/index.md

@@ -388,7 +388,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                     ]}
                     header={{
                         logo: <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />,
-                        text: '直播运营后台',
+                        text: 'Semi 运营后台',
                     }}
                     footer={{
                         collapseButton: true,

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

@@ -342,12 +342,15 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
         <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
         <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+            Checkbox Title
+        </Checkbox>
     </CheckboxGroup>
 );
 ```

content/input/checkbox/index.md

@@ -327,12 +327,15 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
         <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
         <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+            单选框标题
+        </Checkbox>
     </CheckboxGroup>
 );
 ```

content/navigation/navigation/index.md

@@ -137,7 +137,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={{
                     collapseButton: true,
@@ -185,7 +185,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={{
                     collapseButton: true,
@@ -214,7 +214,7 @@ class NavApp extends React.Component {
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
             >
-                <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'直播运营后台'} />
+                <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
                 <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
                     <Nav.Item itemKey={'golder'} text={'金主管理'} />
@@ -280,7 +280,7 @@ class NavApp extends React.Component {
                     onSelect={key => console.log(key)}
                     header={{
                         logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                        text: '直播运营后台'
+                        text: 'Semi 运营后台'
                     }}
                     footer={{
                         collapseButton: true,
@@ -334,7 +334,7 @@ class NavApp extends React.Component {
                     onSelect={key => console.log(key)}
                     header={{
                         logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                        text: '直播运营后台'
+                        text: 'Semi 运营后台'
                     }}
                     footer={
                         <Dropdown
@@ -412,7 +412,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={
                     <>
@@ -494,7 +494,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={{
                     collapseButton: true,
@@ -549,7 +549,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={{
                     collapseButton: true,
@@ -600,7 +600,7 @@ class NavApp extends React.Component {
                 ]}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台'
+                    text: 'Semi 运营后台'
                 }}
                 footer={{
                     collapseButton: true
@@ -677,7 +677,7 @@ function NavApp (props = {}) {
             items={items}
             header={{
                 logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                text: '直播运营后台'
+                text: 'Semi 运营后台'
             }}
             footer={{
                 collapseButton: true

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

@@ -85,12 +85,21 @@ function Demo() {
 
 By configuing `disabled` for `Dropdown.Item`, you can disabled an item.  
 By configuring `type` on `Dropdown.Item`, you can display text in different colors.  
-By configuring `icon` on `Dropdown.Item` (`icon` needs to be ReactNode), you can quickly configured icon of item.  
+By configuring `icon` on `Dropdown.Item` (`icon` needs to be ReactNode), you can quickly configured icon of item.
 
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
-import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
+import {
+    IconBox,
+    IconSimilarity,
+    IconSetting,
+    IconForward,
+    IconColorPalette,
+    IconRefresh,
+    IconSearch,
+    IconBranch,
+} from '@douyinfe/semi-icons';
 
 function Demo() {
     return (
@@ -440,6 +449,7 @@ function DropdownEvents() {
 | trigger | The act of triggering a drop-down, optional 'hover', 'focus', 'click', 'custom' | string | 'hover' |  |
 | visible | Display the menu or not, need to be used with trigger custom | boolean |  |  |
 | zIndex | Pop-up layer z-index value | number | 1050 |  |
+| onClickOutSide  | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)  | (e:event) => void | | **2.1.0** |
 | onVisibleChange | Callback when the pop-up layer display state changes | function |  |  |
 
 ### Dropdown.Menu
@@ -457,7 +467,7 @@ function DropdownEvents() {
 | active | Whether the current item is in the active state, there is a tick on the left when the active state is activated, the font is bold, and the color is deepened. When the `showTick` is false, even if the `active` is true, the tick will not be displayed | boolean | false |  |
 | className | Style class name | string |  |  |
 | disabled | Do you disable the menu? | boolean | false |  |
-| icon | Icon of DropdownItem, will be displayed on the left  | ReactNode |  | **1.16.0** |
+| icon | Icon of DropdownItem, will be displayed on the left | ReactNode |  | **1.16.0** |
 | style | Inline style | object |  |  |
 | type | Type, optional values: "primary","secondary", "tertiary", "warning", "danger" | string | "tertiary" |  |
 | onClick | Click the trigger callback event | function |  |  |

content/show/dropdown/index.md

@@ -89,7 +89,16 @@ function Demo() {
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
-import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
+import {
+    IconBox,
+    IconSimilarity,
+    IconSetting,
+    IconForward,
+    IconColorPalette,
+    IconRefresh,
+    IconSearch,
+    IconBranch,
+} from '@douyinfe/semi-icons';
 
 function Demo() {
     return (
@@ -341,9 +350,7 @@ class DropdownEvents extends React.Component {
 
 ### 分组组合
 
-使用 `Dropdown.Divider` 可以插入分割线
-使用 `Dropdown.Title` 可以插入分组名
-组合使用 `Dropdown.Title`、`Dropdown.Divider`、`Dropdown.Item`。
+使用 `Dropdown.Divider` 可以插入分割线使用 `Dropdown.Title` 可以插入分组名组合使用 `Dropdown.Title`、`Dropdown.Divider`、`Dropdown.Item`。
 
 ```jsx live=true
 import React from 'react';
@@ -389,7 +396,7 @@ class DropdownEvents extends React.Component {
 
 ### Json 用法
 
-可以通过menu属性，传入JSON Array快速配置出下拉框菜单
+可以通过 menu 属性，传入 JSON Array 快速配置出下拉框菜单
 
 ```jsx live=true
 import React from 'react';
@@ -418,28 +425,29 @@ function DropdownEvents() {
 
 ### Dropdown
 
-| 属性               | 说明                                                                                                          | 类型                       | 默认值              | 版本              |
-| ------------------ | ------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------- | ----------------- |
-| autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向                                                                                  | boolean                    | true                |                   |
-| className          | 下拉弹层外层样式类名                                                                                          | string                     |                     |                   |
-| children           | 触发弹出层的Trigger元素                                                                                          | ReactNode                  |                     |                   |
-| clickToHide        | 在弹出层内点击时是否自动关闭弹出层                                                                           | boolean                    |                     | **0.24.0**        |
-| contentClassName   | 下拉菜单根元素类名                                                                                            | string                     |                     |                   |
-| getPopupContainer  | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative`                                    | function():HTMLElement     | () => document.body |                   |
-| mouseEnterDelay    | 鼠标移入Trigger后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效）                                     | number                     | 50                    |                   |
-| mouseLeaveDelay    | 鼠标移出弹出层后，延迟消失的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效）                                      | number                     | 50                 |                   |
-| menu               | 通过传入JSON Array来快速配置Dropdown内容                                                                           | Array<DropdownMenuItem\>   | []                  | **1.12.0**        |
-| position           | 弹出菜单的位置，常用："bottom", "bottomLeft", "bottomRight"，更多详见[Tooltip 位置](https://semi.design/zh-CN/show/tooltip#%E4%BD%8D%E7%BD%AE) | string                     | "bottom"            |                   |
-| render             | 弹出层的内容，由 `Dropdown.Menu` 及 `Dropdown.Item`、`Dropdown.Title` 构成                                    | ReactNode                  |                     |                   |
-| rePosKey           | 可以更新该项值手动触发弹出层的重新定位                              | string \| number                |                     |                   |
-| spacing            | 弹出层与 Trigger元素（即Dropdown children）的距离，单位px                                                                                | number                     | 4                   |                   |
-| style              | 弹出层内联样式                                                                                            | object                     |                     |                   |
-| showTick           | 是否自动在 active 的 Dropdown.Item 项左侧展示表示选中的勾                                                     | boolean                    | false               | **0.26.0**        |
-| stopPropagation    | 是否阻止弹出层上的点击事件冒泡                                                                                  | boolean                    | false               | **0.34.0** |
-| trigger            | 触发下拉的行为，可选 "hover", "focus", "click", "custom"                                                      | string                     | "hover"             |                   |
-| visible            | 是否显示菜单，需配合trigger custom使用                                       | boolean                    | 无                  |                   |
-| zIndex             | 弹出层 z-index 值                                                                                             | number                     | 1050                |                   |
-| onVisibleChange    | 弹出层显示状态改变时的回调                                                                                      | function(visible: boolean) |                     |                   |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向 | boolean | true |  |
+| className | 下拉弹层外层样式类名 | string |  |  |
+| children | 触发弹出层的 Trigger 元素 | ReactNode |  |  |
+| clickToHide | 在弹出层内点击时是否自动关闭弹出层 | boolean |  | **0.24.0** |
+| contentClassName | 下拉菜单根元素类名 | string |  |  |
+| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | function():HTMLElement | () => document.body |  |
+| mouseEnterDelay | 鼠标移入 Trigger 后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
+| mouseLeaveDelay | 鼠标移出弹出层后，延迟消失的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
+| menu | 通过传入 JSON Array 来快速配置 Dropdown 内容 | Array<DropdownMenuItem\> | [] | **1.12.0** |
+| position | 弹出菜单的位置，常用："bottom", "bottomLeft", "bottomRight"，更多详见[Tooltip 位置](https://semi.design/zh-CN/show/tooltip#%E4%BD%8D%E7%BD%AE) | string | "bottom" |  |
+| render | 弹出层的内容，由 `Dropdown.Menu` 及 `Dropdown.Item`、`Dropdown.Title` 构成 | ReactNode |  |  |
+| rePosKey | 可以更新该项值手动触发弹出层的重新定位 | string \| number |  |  |
+| spacing | 弹出层与 Trigger 元素（即 Dropdown children）的距离，单位 px | number | 4 |  |
+| style | 弹出层内联样式 | object |  |  |
+| showTick | 是否自动在 active 的 Dropdown.Item 项左侧展示表示选中的勾 | boolean | false | **0.26.0** |
+| stopPropagation | 是否阻止弹出层上的点击事件冒泡 | boolean | false | **0.34.0** |
+| trigger | 触发下拉的行为，可选 "hover", "focus", "click", "custom" | string | "hover" |  |
+| visible | 是否显示菜单，需配合 trigger custom 使用 | boolean | 无 |  |
+| zIndex | 弹出层 z-index 值 | number | 1050 |  |
+| onClickOutSide | 当弹出层处于展示状态，点击非Children、非弹出层内部区域时的回调（仅trigger为custom、click时有效）| function(e:event) |  | **2.1.0** |
+| onVisibleChange | 弹出层显示状态改变时的回调 | function(visible: boolean) |  |  |
 
 ### Dropdown.Menu
 
@@ -451,18 +459,18 @@ function DropdownEvents() {
 
 ### Dropdown.Item
 
-| 属性          | 说明                                                                                                                                                | 类型     | 默认值     | 版本           |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------- | -------------- |
-| active        | 当前项是否处于激活态，激活态时左侧有 √，字体加粗，颜色加深。当 Dropdown 的 showTick 为 false 时，即使 Dropdown.Item 的 active 为 true，√ 也不会展示 | bool     | false      |                |
-| className     | 样式类名                                                                                                                                            | string   |            |                |
-| disabled      | 是否禁用菜单                                                                                                                                        | boolean  | false      |                |
-| icon          | 图标                                                                                                                          | ReactNode  |       |      **1.16.0**          |
-| style         | 内联样式                                                                                                                                            | object   |            |                |
-| type          | 类型，可选值："primary"、"secondary"、"tertiary"、"warning"、"danger"                                                                               | string   | "tertiary" |                |
-| onClick       | 单击触发的回调事件                                                                                                                                  | function | 无         |                |
-| onMouseEnter  | MouseEnter 触发的回调事件                                                                                                                           | function | 无         |                |
-| onMouseLeave  | MouseLeave 触发的回调事件                                                                                                                           | function | 无         |                |
-| onContextMenu | 点击鼠标右键触发的回调事件                                                                                                                          | function | 无         | **1.6.0** |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| active | 当前项是否处于激活态，激活态时左侧有 √，字体加粗，颜色加深。当 Dropdown 的 showTick 为 false 时，即使 Dropdown.Item 的 active 为 true，√ 也不会展示 | bool | false |  |
+| className | 样式类名 | string |  |  |
+| disabled | 是否禁用菜单 | boolean | false |  |
+| icon | 图标 | ReactNode |  | **1.16.0** |
+| style | 内联样式 | object |  |  |
+| type | 类型，可选值："primary"、"secondary"、"tertiary"、"warning"、"danger" | string | "tertiary" |  |
+| onClick | 单击触发的回调事件 | function | 无 |  |
+| onMouseEnter | MouseEnter 触发的回调事件 | function | 无 |  |
+| onMouseLeave | MouseLeave 触发的回调事件 | function | 无 |  |
+| onContextMenu | 点击鼠标右键触发的回调事件 | function | 无 | **1.6.0** |
 
 ### Dropdown.Title
 
@@ -480,9 +488,10 @@ function DropdownEvents() {
 | 其他属性与 Title、Item、Divider 属性对应 |                                            |        |        |
 
 ## 设计变量
+
 <DesignToken/>
 
-<!-- 
+<!--
 ## 相关物料
 
 ```material

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

@@ -4574,7 +4574,7 @@ type Filter = {
 | selectedRowKeys  | Specifies the key array of the selected item, which needs to work with onChange | string []                                                                                    |           |                    |
 | title            | Custom List Selection Box Title                                                 | string                                                                                       | ReactNode |                    |
 | width            | Custom list selection box width                                                 | string                                                                                       | number    |                    |
-| onChange         | A callback in the event of a change in the selected item                        | (selectedRowKeys: number[]\|string[], selectedRows: RecordType[]) => void                        |           |                    |
+| onChange         | A callback in the event of a change in the selected item. The first parameter will save the row keys selected last time, even if you do paging control or update the dataSource [FAQ](#faq) | (selectedRowKeys: number[]\|string[], selectedRows: RecordType[]) => void                        |           |                    |
 | onSelect         | Callback when the user manually clicks the selection box of a row               | (record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent: MouseEvent) => void |           |                    |
 | onSelectAll      | The user manually clicks the callback of the header selection box, and all optional rows in the dataSource will be selected/unselected                        | (selected: boolean, selectedRows: RecordType[], changedRows: RecordType[]) => void                   |           |                    |
 
@@ -4677,6 +4677,10 @@ function Demo() {
     
     It can be controlled by column.onHeaderCell and column.onCell.
 
+- **Why cache the previously selected keys for the first parameter of `rowSelection` `onChange`?**
+    
+    This is for the scenario where the selected row keys are lost when data is selected on the first page during paging, and then the data is selected on the second page. If you don't want to use the cached keys, you can filter it from the current dataSource or use the second parameter of `rowSelection` `onChange`.
+
 - **How is Table implemented, I want to know more details?**
 
     Please click <a href="https://bytedance.feishu.cn/docs/doccnqLgNefWGMZHFz7j70GKqpY" target="_blank">Semi Table component design</a>

content/show/table/index.md

@@ -4589,7 +4589,7 @@ type Filter = {
 | selectedRowKeys  | 指定选中项的 key 数组，需要和 onChange 进行配合                         | string[]                                                                                             |        |            |
 | title            | 自定义列表选择框标题                                                    | string\|ReactNode                                                                                    |        |            |
 | width            | 自定义列表选择框宽度                                                    | string\|number                                                                                       |        |            |
-| onChange         | 选中项发生变化时的回调                                                  | (selectedRowKeys: number[]\|string[], selectedRows: RecordType[]) => void                            |        |            |
+| onChange         | 选中项发生变化时的回调。第一个参数会保存上次选中的 row keys，即使你做了分页受控或更新了 dataSource [FAQ](#faq)    | (selectedRowKeys: number[]\|string[], selectedRows: RecordType[]) => void                            |        |            |
 | onSelect         | 用户手动点击某行选择框的回调                                            | (record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent: MouseEvent) => void |        |            |
 | onSelectAll      | 用户手动点击表头选择框的回调，会选中/取消选中 dataSource 里的所有可选行 | (selected: boolean, selectedRows: RecordType[], changedRows: RecordType[]) => void                   |        |            |
 
@@ -4691,6 +4691,12 @@ function Demo() {
 - **如何给 table cell 设置样式？**
     
     涉及到单个 cell 需要控制样式的，可以通过 column.onHeaderCell、column.onCell 控制。
+
+
+- **为何 rowSelection onChange 的第一个参数缓存了之前选中的 keys ？**
+    
+    这么做为了在分页受控时，在第一页选中数据后，去第二页选择数据，回到第一页后选择的 row keys 丢失的场景。如果不想用缓存的 keys，可以从当前 dataSource 过滤一遍，或者使用 rowSelection onChange 的第二个参数。
+
 - **Table 是如何实现的，我想了解更多细节？**
 
     查看 <a href="https://bytedance.feishu.cn/docs/doccnqLgNefWGMZHFz7j70GKqpY" target="_blank">Semi Table 组件设计方案</a>了解更多。

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

@@ -190,16 +190,16 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
 
 ### TimeLine.Item
 
-| Properties | Instruction                                              | type                                                | Default   |
-| ---------- | -------------------------------------------------------- | --------------------------------------------------- | --------- |
-| className  | Class name                                               | string                                              | -         |
-| color      | Color of dot                                             | string                                              | -         |
-| dot        | Custom dot                                               | React Node                                          | -         |
-| extra      | Custom extra content                                     | React Node                                          | -         |
+| Properties | Instruction                                              | type                                              | Default   |
+| ---------- | -------------------------------------------------------- | ------------------------------------------------- | --------- |
+| className  | Class name                                               | string                                            | -         |
+| color      | Color of dot                                             | string                                            | -         |
+| dot        | Custom dot                                               | ReactNode                                         | -         |
+| extra      | Custom extra content                                     | ReactNode                                         | -         |
 | position   | Custom node location to override TimeLine's mode setting | `left`\|`right`                                     | -         |
-| style      | Inline style                                             | CSSProperties                                              | -         |
-| time       | Time value                                               | string                                              | -         |
+| style      | Inline style                                             | CSSProperties                                           | -         |
+| time       | Time value                                               | ReactNode                                              | -         |
 | type       | Pattern of dot                                           | `default`\|`ongoing`\|`success`\|`warning`\|`error` | `default` |
 
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

content/show/timeline/index.md

@@ -240,7 +240,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
 | extra | 自定义辅助内容 | ReactNode | - |
 | position | 自定义节点位置，可以覆盖 TimeLine 的模式选项 | `left`\|`right` | - |
 | style | 样式 | CSSProperties | - |
-| time | 时间文本 | string | - |
+| time | 时间文本 | ReactNode | - |
 | type | 当前圆圈的模式 | `default`\|`ongoing`\|`success`\|`warning`\|`error` | `default` |
 
 ## 设计变量

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

@@ -16,6 +16,28 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.1.5 (2021-12-10)
+
+- 【Fix】
+  - Timeline.time ts definition supports ReactNode type [#359](https://github.com/DouyinFE/semi-design/issues/359) [@chenc041](https://github.com/chenc041)
+  - Fix the problem of Tree component onContextMenu preventing bubbling [#364](https://github.com/DouyinFE/semi-design/issues/364) [@Nctdtman](https://github.com/Nctdtman)
+  - Fix the missing id of Select/Checkbox/Button [#353](https://github.com/DouyinFE/semi-design/issues/353)
+  - Fix the problem that the definitions of Nav footer and header dts are reversed
+  - Fix the problem that the z-index of Table fixed cell is too small, adjusted from 1 to 101 [#391](https://github.com/DouyinFE/semi-design/issues/391)
+  - Fixed Form Field losing ref bug when it is not given filed prop
+- 【Style】
+  - Fix the problem that the naming of --overlay-bg token is not standardized. Modified to --color-overlay-bg
+#### 🎉 2.1.4 (2021-12-03)
+- 【Fix】
+  - Add nativeEvent.stopImmediatePropagation to the event input parameter of Checkbox onChange callback [#343](https://github.com/DouyinFE/semi-design/issues/343)
+  - Fix the problem that when Cascader is multi-selected, clicking Checkbox will trigger bubbling in some scenarios [#343](https://github.com/DouyinFE/semi-design/issues/343)
+  - Fix that ButtonGroup children are not ReactElement report errors [#318](https://github.com/DouyinFE/semi-design/issues/318) 
+  - Fix Rating component half star ui error, when parent element set line-height [#346](https://github.com/DouyinFE/semi-design/issues/346)
+  - Checkbox/Radio
+    - Fix the style of the state switching of the mouse when the mouse is moved in/out of the checked button [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+    - Fix the border of the checked button will appear when the checked button is hover/active [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+    - Optimize the style of the checked+disabled state of the card/pureCard type [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+
 #### 🎉 2.1.3 (2021-11-30)
 - 【Fix】
   - Fix the bug of replacing source in ImportDeclaration during source code building

content/start/changelog/index.md

@@ -15,11 +15,36 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.1.5 (2021-12-10)
+
+- 【Fix】
+  - Timeline.time ts 定义支持 ReactNode 类型 [#359](https://github.com/DouyinFE/semi-design/issues/359) [@chenc041](https://github.com/chenc041)
+  - 修复 Tree 组件 onContextMenu 阻止冒泡的问题 [#364](https://github.com/DouyinFE/semi-design/issues/364) [@Nctdtman](https://github.com/Nctdtman)
+  - 修复 Select/Checkbox/Button 缺少 id 的问题 [#353](https://github.com/DouyinFE/semi-design/issues/353)
+  - 修复 Nav  footer、header dts定义相反了的问题
+  - 修复 Table fixed 单元格 z-index 过小问题，从 1 调整为 101 [#391](https://github.com/DouyinFE/semi-design/issues/391)
+  - 修复 Form Field 在未声明 field 属性时使用时下丢失 ref 的问题
+- 【Style】
+  - 修复 --overlay-bg token 命名不规范的问题。 修改为 --color-overlay-bg
+#### 🎉 2.1.4 (2021-12-03)
+
+- 【Fix】
+  - Checkbox onChange 回调的入参 event 增加 nativeEvent.stopImmediatePropagation [#343](https://github.com/DouyinFE/semi-design/issues/343)
+  - 修复 Cascader 多选时点击 Checkbox 在某些场景下触发冒泡 [#343](https://github.com/DouyinFE/semi-design/issues/343)
+  - 修复 ButtonGroup 的 children 不是 ReactElement 报错的问题 [#318](https://github.com/DouyinFE/semi-design/issues/318) 
+  - 修复 Rating 组件当父级设置 line-height 时半星展示错误 [#346](https://github.com/DouyinFE/semi-design/issues/346)
+  - Checkbox/Radio
+    - 修复鼠标移入/移出选中按钮过程中，鼠标出现状态切换的样式问题 [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+    - 修复选中态 hover/active 时选中按钮会出现外边框的问题 [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+    - 优化卡片类型 selected+disabled 态的样式 [#319](https://github.com/DouyinFE/semi-design/issues/319) 
+
 #### 🎉 2.1.3 (2021-11-30)
+
 - 【Fix】
   - 修复在源码构建过程中，替换 ImportDeclaration 中 source 的bug
 
 #### 🎉 2.1.2 (2021-11-30)
+
 - 【Feature】
   - 支持 Next.js [#153](https://github.com/DouyinFE/semi-design/issues/153)
   - 替换飞书Logo图标
@@ -29,10 +54,12 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
   - 修复 Input focus 时 hover 态边框颜色错误问题 [#332](https://github.com/DouyinFE/semi-design/issues/332)
 
 #### 🎉 2.1.1 (2021-11-26)
+
 - 【Fix】
   - 提供 semi-icons、semi-illustrations 的 UMD 产物，解决 UMD 场景下无法使用 icon 的问题 [#215](https://github.com/DouyinFE/semi-design/issues/215)
 
 #### 🎉 2.1.0 (2021-11-26)
+
 - 【Fix】
   - 修复 Collapsible 组件在 content 有 margin 时展开/收起卡顿的问题 [@ChelesteWang](https://github.com/ChelesteWang)
 - 【Style】
@@ -43,10 +70,12 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
   - List 增加与 Checkbox、Radio、Input、Pagination 搭配使用的 Demo 示例；增加拖拽排序的Demo示例；增加键盘响应事件的 Demo 示例
 
 #### 🎉 2.1.0-beta.3 (2021-11-24)
+
 - 【Fix】
   - 更新部分组件的ts类型定义，修复 tsconfig.json 开启 strict: true 且 skipLibCheck为false时 build报错的问题 [#283](https://github.com/DouyinFE/semi-design/issues/283)
 
 #### 🎉 2.1.0-beta.1 (2021-11-24)
+
 - 【Fix】
   - Select
     - 修复虚拟化使用崩溃的问题 [#308](https://github.com/DouyinFE/semi-design/issues/308)
@@ -56,6 +85,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
   - 修复 Tree 的 interface ExpanedOtherProps 命名不正确的问题，将其修正为 ExpandedOtherProps [297](https://github.com/DouyinFE/semi-design/issues/297)
 
 #### 🎉 2.1.0-beta.0 (2021-11-19)
+
 - 【Feature】
   - Tabs 新增 关闭可选项 closable API [@xieyezi](https://github.com/xieyezi)
   - TagInput 新增 onKeyDown API [#255](https://github.com/DouyinFE/semi-design/issues/255)
@@ -77,10 +107,12 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.8 (2021-11-11)
+
 - 【Fix】
   - 修复 Modal afterClose 部分场景失效
 
 #### 🎉 2.0.7 (2021-11-10)
+
 - 【Fix】
   - 修复 Icon 包缺少 classnames 依赖问题 [#231](https://github.com/DouyinFE/semi-design/issues/231)
 - 【Style】
@@ -88,11 +120,13 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.6 (2021-11-10)
+
 - 【Style】
   - Table 移除固定列/固定表头时在表头插入的滚动轴列，使用 overflow-y 方案模拟滚动轴 [#164](https://github.com/DouyinFE/semi-design/issues/164)
 
 
 #### 🎉 2.0.5 (2021-11-09)
+
 - 【Style】
   - 修复 Input 组件 hover 时 border 样式问题 [#204](https://github.com/DouyinFE/semi-design/issues/204)
 - 【Perf】
@@ -108,6 +142,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
   - 优化了共建文档 [#224](https://github.com/DouyinFE/semi-design/issues/224) [@btea](https://github.com/btea)
 
 #### 🎉 2.0.3 (2021-11-06)
+
 - 【Fix】
   - 修复 Tree / TreeSelect 在 loading 状态下 item 高度变大的问题 [#181](https://github.com/DouyinFE/semi-design/issues/181)
   - 修复 TagInput 在 separator 不为 string 或 array 时输入值会被清空的问题 [#182](https://github.com/DouyinFE/semi-design/issues/182)
@@ -119,6 +154,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.2 (2021-11-04)
+
 - 【Fix】
   - 修复 Toast 的类型定义 [#166](https://github.com/DouyinFE/semi-design/issues/166)
   - 修复 Radio value / defaultValue 的类型定义，从 string 改正为 string | number [#159](https://github.com/DouyinFE/semi-design/issues/159)
@@ -136,6 +172,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.1 (2021-11-01)
+
 - 【Fix】
   - 修复 TreeSelect 选中节点后会展开其子节点并立即关闭，造成视觉跳闪的感觉 [#78](https://github.com/DouyinFE/semi-design/issues/78)
   - 修复 Progress 组件 size 改变时渲染错误 [#94](https://github.com/DouyinFE/semi-design/issues/94)

content/start/customize-theme/index-en-US.md

@@ -6,16 +6,25 @@ localeCode: en-US
 order: 3
 ---
 
+## 定制方式
 
+Semi provides a complete theme configuration process, which not only maintains the uniformity and coherence of colors, fonts, rounded corners, shadows, layouts, etc. in the visual language, but also meets the diversified visual needs of the business and the brand.  
+You can go to [Semi Design System Management Site](https://semi.design/dsm/) (also known as DSM) to choose or create a theme style that meets your needs.
 
-## Customization
+Currently DSM supports global and component-level style customization, and keeps synchronization between Figma and online code. **Use DSM to adapt Semi Design to Any Design**
 
-Semi provides a complete theme configuration process, which not only maintains the uniformity and coherence of colors, fonts, rounded corners, shadows, layouts, etc. in the visual language, but also meets the diversified visual needs of the business and the brand. You can go to [Semi Design System Management Site](https://semi.design/dsm/) to choose or create a theme style that meets your needs. Currently [Semi Design System Management Site](https://semi.design/dsm/) supports the configuration of theme colors, including fonts, rounded corners, etc.
+- 🎨 Global style variable management
+Supports visual editing and previewing of color wheels, rounded corners, font layout, strokes, and shadows
 
+- 🔁 Two-way synchronization of design variables
+Design variables can be synchronized in real time in both directions on the Web side and the Figma plug-in side.
+
+- 🧩 In-depth component style customization
+In-depth customization of the style of a single component, such as the style customization of the height/spacing of the component.
 
 ### Create a theme
 
-You can also start from a published theme, or choose **Create Now** to create a new theme, or you can update a published theme. After selecting the main color, our color algorithm will generate a set of highly available color wheels for you. On this basis, you can modify common variables and produce corresponding theme packages. One-click publishing can be pushed to bnpm.
+You can also start from a published theme, or choose **Create Now** to create a new theme, or you can update a published theme. After selecting the main color, our color algorithm will generate a set of highly available color wheels for you. On this basis, you can modify common variables and produce corresponding theme packages. One-click publishing can be pushed to npm.
 
 ![Theme Creation](https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png)
 
@@ -37,17 +46,19 @@ Then you need to specify the theme to be used in the configuration file.
 
 For users who use webpack, add the `theme` parameter to SemiWebpackPlugin.
 
-SemiWebpackPlugin  `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @douyinfe/semi-webpack-plugin`
+SemiWebpackPlugin `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @douyinfe/semi-webpack-plugin`
 
 ```jsx
 new SemiWebpackPlugin({
-    theme: `Your theme npm package name`
+    theme: `Your theme npm package name`,
     /* ...options */
 });
 ```
+
 ### Make changes to component-level variables take effect
 
 If you modify the component-level variables in the process of customizing the theme, the `theme` field needs to be configured with the following configuration to make the changes take effect:
+
 ```javascript
 {
     theme: {
@@ -57,7 +68,6 @@ If you modify the component-level variables in the process of customizing the th
 }
 ```
 
-
 ## Update theme
 
 During the development of Semi, it is possible to update or add some common variables for design considerations. If you are using a customized theme, when Semi has released a new universal variable (we will mark it in the update log), we recommend that you go to [Theme Store](https://semi.design/dsm/) to regenerate the theme.

content/start/customize-theme/index.md

@@ -6,16 +6,25 @@ localeCode: zh-CN
 order: 3
 ---
 
+## 定制方式
 
+Semi 提供完整的主题配置流程，既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯，又能满足业务和品牌多样化的视觉需求。  
+你可以前往 [Semi 设计系统管理站点](https://semi.design/dsm/) （又称DSM） 选择或者创造一套符合你的需求的主题风格。
 
-## 定制方式
+目前DSM支持全局、组件级别的样式定制，并在 Figma 和线上代码之间保持同步。**使用 DSM，将 Semi Design 适配为 Any Design**
+
+- 🎨 全局样式 变量管理  
+支持色盘、圆角、字体排版、描边、阴影的可视化编辑预览  
 
-Semi 提供完整的主题配置流程，既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯，又能满足业务和品牌多样化的视觉需求。你可以前往 [Semi 设计系统管理站点](https://semi.design/dsm/) 选择或者创造一套符合你的需求的主题风格。目前 [Semi 设计系统管理站点](https://semi.design/dsm/) 支持主题色的配置，包括字体、圆角、等。
+- 🔁 设计变量双向同步  
+设计变量可以在 Web 端与 Figma 插件侧双向实时同步。  
 
+- 🧩 深度的组件样式定制  
+对单个组件的样式进行深度定制，例如组件的 高度 / 间距等样式定制；  
 
 ### 创造主题
 
-你也可以从已发布的主题出发，或者选择 **立即创造** 来创造一个新的主题，也可以更新已发布的主题。选取主色后，我们的颜色算法会为你生成一套高可用的色盘。在此基础上你可以修改通用变量并产出对应的主题包。一键发布即可推送到 bnpm 中。
+你也可以从已发布的主题出发，或者选择 **立即创造** 来创造一个新的主题，也可以更新已发布的主题。选取主色后，我们的颜色算法会为你生成一套高可用的色盘。在此基础上你可以修改通用变量并产出对应的主题包。一键发布即可推送到 npm 中。
 
 ![主题创建](https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png)
 
@@ -41,7 +50,9 @@ SemiWebpackPlugin  `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @dou
 
 ```jsx
 new SemiWebpackPlugin({
-    theme: `你的主题npm包名称`
+    theme: {
+        name: '你的主题npm包名称'
+    }
     /* ...options */
 });
 ```
@@ -60,5 +71,5 @@ new SemiWebpackPlugin({
 
 ## 更新主题
 
-Semi 在开发过程中，有可能出于设计考虑更新或者添加部分通用变量。如果你使用的是定制主题，当 Semi 发布了新的通用变量后（我们会在更新日志里标注），我们建议你前往 [主题商店](https://semi.design/dsm/) 重新生成该主题。
+Semi 在开发过程中，有可能出于设计考虑更新或者添加部分通用变量。如果你使用的是定制主题，当 Semi 发布了新的通用变量后（我们会在更新日志里标注），我们建议你前往 [Semi 设计系统管理站点](https://semi.design/dsm/)重新生成该主题。
 

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

@@ -9,10 +9,11 @@ order: 7
 
 
 
-
-#### About the release time
-
-Semi team will release the official minor version every two Fridays, and the minor beta will be released on the middle Friday
+#### What is the relationship between Semi 2.x (open source version) and Semi 1.x?
+ - The Semi v2.0 version is refactored based on v1.x using ts, which brings a better ts experience and a more out-of-the-box engineering solution, which solves the coexistence of multi-component libraries in the micro front-end scenario Style conflict issues, etc. All subsequent long-term work of the Semi team will be based on the v2.x version
+ - At present, v2.0 and v1.x will still be maintained in parallel for a period of time. Feature addition on v1.x will be gradually stopped in the future, and only necessary bug fix changes will be provided.
+ - For new projects, we recommend that you directly use 2.x [@douyin/semi-ui](https://semi.design) for development. For existing projects, we also recommend that you upgrade as soon as possible. In order to reduce the cost of upgrading, we provide a cli tool one-click migration (@ies/semi-codemod-v2) that can help you automatically complete up to 90% of the migration and modification (limited by the AST implementation principle, there are still a small number of cases that require manual labor review modification, but not much 😉)
+ - Upgrade from Semi 1.x to Semi 2.x for detailed operation steps [From v1 to v2](https://semi.design/zh-CN/start/update-to-v2)
 
 #### Relationship between versions
 
@@ -24,12 +25,6 @@ Semi team will release the official minor version every two Fridays, and the min
 Property like `defaultValue`, `defaultXXX` will only be consumed once when the component mount. If your `defaultXXX` property is updated asynchronously later, the component will not reconsume the value. If necessary, you should use controlled `value`, controlled `XXX`.
 Or force React to remount the component by passing in a different `key`.
 
-#### this._adapter.xxx is not a function
-
-This situation generally occurs when semi-ui-react does not match the semi-ui version of the dependency. It is more common when users lock the semi-ui-react version in package.json (that is, remove ^), but In some cases, package-lock.json and node_modules were deleted, and install was executed again
-Please check the version of semi-ui and semi-ui-react through package-lock.json in your project. It is recommended that if the version is locked, either lock both. Either don't lock both of them, and directly use the package-lock.json mechanism to ensure that the versions used are consistent.
-
-
 #### Does Semi support i18n?
 As of 2021-10, Semi supports 14 languages. See [Semi·LocaleProvider](/en-US/other/locale) for details.
 
@@ -47,7 +42,7 @@ Our style is based on Scss, and we also use CSS Variable as the color wheel vari
 
 #### Semi's default theme style does not match the positioning of our system. Can i configure another theme?
 
-Please refer to [Custom theme](/en-US/start/customize-theme) . In our [DSM](/dsm) You can configure the style. You only need to specify the theme package name in `webpack.config.js` to complete the access.
+Please refer to [Custom theme](/en-US/start/customize-theme) . In [Semi DSM](/dsm) You can configure the style. You only need to specify the theme package name in `webpack.config.js` to complete the access.
 
 #### Why Tooltip、Typography does not set style word-break to all or word?  
    Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.

content/start/faq/index.md

@@ -1,34 +1,38 @@
 ---
 category: 开始
-title:  FAQ 常见问题
+title: FAQ 常见问题
 icon: doc-faq
 localeCode: zh-CN
 order: 7
 ---
 
+#### Semi 2.x 与 Semi 1.x 有什么不同？
 
+-   Semi v2.0 版本 基于 v1.x 使用 ts 进行了重构，带来了更好的 ts 使用体验、以及更开箱即用的工程化方案，解决了对微前端场景下多组件库共存的样式冲突问题等。Semi 2.x 为开源版本， Semi 团队后续所有长期工作都将基于 v2.x 版本进行
+-   目前 v2.0 与 v1.x 仍将并行迭代维护一段时间，后续会逐步停止 v1.x 上的 feature 添加，仅提供必要的 bug fix 变更。
+-   我们建议大家直接使用 2.x [@douyin/semi-ui](https://semi.design) 进行开发。现有旧项目，我们也建议大家尽快进行升级。为减轻升级成本，我们提供了 cli 工具一键迁移（@ies/semi-codemod-v2 ）可帮助大家自动完成高达 90%的迁移修改（受限于 AST 实现原理，仍存在一小部分 case 需人工 review 修改，但不多 😉 ）
+-   Semi 1.x 升级至 Semi 2.x 详细操作步骤请查阅 [从 v1 到 v2](https://semi.design/zh-CN/start/update-to-v2)
 
-#### 关于发版时间
+#### 各版本之间的关系
 
--   Semi 团队每双周周五进行 minor 正式版发包，中间的周五会发布一次 minor beta 版
+-   Semi 版本号遵循 Semver 规范（主版本号-次版本号-修订版本号），我们会在 minor 版本新增 feature 或组件，在 patch 版本我们仅会进行 bug 修复，而不会做新功能更新。但不同 minor 版本之间可能存在样式上的调整，当你需要升级时，我们推荐你在 changelog 页面使用版本 Diff 功能，检查所有变更并确实是否对你的业务系统有影响。
+-   后续所有新 Feature、新组件都会基于 2.x 版本进行开发，我们推荐业务方尽可能地保持使用最新版本
+-   2.x 各版本之间，API 会保持**向前兼容**
+-   1.x 各版本之间，API 也会保持**向前兼容**, 1.x 后续会停止迭代。由 1.x 升级到 2.x 时，会包含 breaking change，具体升级注意事项请查阅文档
+-   0.x 版本目前已停止更新，当且仅当必须进行 bugfix 时才会进行 hotfix 更新。由 0.x 升级至 1.x 时，会包含 breaking change，具体升级注意事项请查阅文档
 
-#### 各版本之间的关系
--   Semi 版本号遵循Semver规范（主版本号-次版本号-修订版本号），我们会在minor版本新增feature或组件，在patch版本我们仅会进行bug修复，而不会做新功能更新。
--   2.x 各版本之间（即major版本号相同时），API 会保持**向前兼容**，但不同minor版本之间可能存在样式上的调整，当你需要升级时，我们推荐你在changelog页面使用版本Diff功能，检查所有变更并确实是否对你的业务系统有影响。
+#### Semi 是否支持 Tree Shaking
 
-#### Semi是否支持Tree Shaking
--  Semi执行发包时，发布的其实是esModule源码，因此天然支持tree shaking，不需要再进行额外的配置。
- -  组件的 Scss 也是由组件的index.(j|t)sx负责import的，因此样式也会shaking。简单来说，只有你使用的组件会被打包
+-   Semi 执行发包时，发布的其实是 esModule 源码，因此天然支持 tree shaking，不需要再进行额外的配置。
+-   组件的 Scss 也是由组件的 index.(j|t)sx 负责 import 的，因此样式也会 shaking。简单来说，只有你使用的组件会被打包
 
 #### 为什么 defaultValue、defaultXXX 不起作用？
 
-Semi 组件中，所有的 defaultValue、defaultXXX 传参只会在组件被 mounted 时进行消费（即仅消费一次）。如果你的 defaultXXX 属性是后期进行异步更新的，组件不会重新进行消费该值。如有需要，你应该使用受控的 value，受控的 xxx。
-或者直接通过传入一个不一样的`key`值，强制 React 重新挂载该组件。
+Semi 组件中，所有的 defaultValue、defaultXXX 传参只会在组件被 mounted 时进行消费（即仅消费一次）。如果你的 defaultXXX 属性是后期进行异步更新的，组件不会重新进行消费该值。如有需要，你应该使用受控的 value，受控的 xxx。或者直接通过传入一个不一样的`key`值，强制 React 重新挂载该组件。
 
-#### 安装新版本 Semi 后，提示 can't resolve date-fns/esm/_libs/cloneObject.js 或其他有 date-fns 相关的依赖错误
+#### 安装新版本 Semi 后，提示 can't resolve date-fns/esm/\_libs/cloneObject.js 或其他有 date-fns 相关的依赖错误
 
-检查下项目中的 package-lock.json，是否有其他包依赖了 date-fns（大概率是 1.x 的），导致 semi 依赖声明的 date-fns 2.x 没有被安装上。手动 install date-fns，确保是 2.x 版本的即可
-`npm install date-fns date-fns-tz`
+检查下项目中的 package-lock.json，是否有其他包依赖了 date-fns（大概率是 1.x 的），导致 semi 依赖声明的 date-fns 2.x 没有被安装上。手动 install date-fns，确保是 2.x 版本的即可 `npm install date-fns date-fns-tz`
 
 #### Semi 支持 i18n 吗？
 
@@ -36,12 +40,11 @@ Semi 目前支持 14 种语言，具体使用可以查阅 [Semi·LocaleProvider]
 
 #### Semi 的样式是基于 Scss 还是 Less ？为什么不用 CSS Module？
 
-我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。
-不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
+我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
 
 #### Semi 的默认的主题风格跟我们系统的定位不符，可以配置另外的主题吗？
 
-具体请参考 [定制主题](/zh-CN/start/customize-theme) 。在我们的 [主题管理平台](/dsm) 里可以进行样式的配置，你只需要在 webpack.config.js 里指定使用的主题包名即可完成接入（需接入 Semi 插件）。
+具体请参考 [定制主题](/zh-CN/start/customize-theme) 。在[Semi DSM](/dsm) 里可以进行样式的配置，你只需要在 webpack.config.js 里指定使用的主题包名即可完成接入（需接入 Semi 插件）。
 
 #### 为什么 Tooltip、Typography 不默认配置 word-break 样式？
 
@@ -56,7 +59,9 @@ Semi 目前支持 14 种语言，具体使用可以查阅 [Semi·LocaleProvider]
 欢迎进我们的 [客服飞书 Lark 群](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe) 进行咨询提问。
 
 #### 希望自定义滚动条的样式？
-可以使用 `.semi-light-scrollbar` 类名，会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的DOM元素即可，会对所有子元素生效。注：使用了通配符，可能会对性能有影响。其他浏览器可以参考是否有相关的css属性支持滚动条的样式定制。
 
-#### 更多的FAQ
-请查阅 https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug
+可以使用 `.semi-light-scrollbar` 类名，会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的 DOM 元素即可，会对所有子元素生效。注：使用了通配符，可能会对性能有影响。其他浏览器可以参考是否有相关的 css 属性支持滚动条的样式定制。
+
+#### 更多的 FAQ
+
+请查阅 https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug

content/start/getting-started/index-en-US.md

@@ -52,19 +52,23 @@ class Demo extends React.Component {
 Use script and link tags to import files directly in the browser, and use the global variable `SemiUI`、`SemiIcons`、`SemiIllustrations`
 
 1. Please make sure you have import `react` and `react-dom` in advance
-2. Import the JS file, the following example URL 2.0.0 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version (note that the build file is only available after v1.3.0)
-    - semi-ui min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.min.js`
-    - semi-ui normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui-react.js`
+2. Import the JS file, the following example URL 2.1.4 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version
 
+| Resource | URL |
+| --- | --- |
+| semi-ui (min) | https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js |
+| semi-icons (min) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js |
+| semi-illustrations (min) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js |
+| semi-ui (normal) | https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.js |
+| semi-icons (normal) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js |
+| semi-illustrations (normal) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js |
 
-    - semi-icons min: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js`
-    - semi-icons normal: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js`
-
-    - semi-illustrations min: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js`
-    - semi-illustrations normal: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js`
 3. Import the CSS style file of the Semi default theme
-    - `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`
-    - `https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css`
+
+| Resource | URL |
+| --- | --- |
+| semi.css | https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css |
+| semi-icons.css | https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css |
 
 ```diff
 <!DOCTYPE html>
@@ -74,8 +78,8 @@ Use script and link tags to import files directly in the browser, and use the gl
 +       <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 +       <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 
-+       <script src="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/umd/semi-ui-react.min.js"></script>
-+       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/css/semi.css">
++       <script src="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui-react.min.js"></script>
++       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css">
 
 +       <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
 +       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">

content/start/getting-started/index.md

@@ -49,7 +49,7 @@ class Demo extends React.Component {
 
 在项目根目录安装 `@douyinfe/semi-next` 。
 
-``` shell
+```shell
 # 使用 npm
 npm i @douyinfe/semi-next --save-dev
 
@@ -66,7 +66,9 @@ pnpm add @douyinfe/semi-next --dev
 
 ```js
 // next.config.js
-const semi = require('@douyinfe/semi-next').default({/* the extension options */});
+const semi = require('@douyinfe/semi-next').default({
+    /* the extension options */
+});
 module.exports = semi({
     // your custom Next.js configuration
 });
@@ -78,7 +80,7 @@ module.exports = semi({
 
 在 `global.css` 中引入全量的 semi css。目前不支持按需引入。
 
-``` css
+```css
 /* styles/globals.css */
 @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
 ```
@@ -96,19 +98,24 @@ module.exports = semi({
 
 在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 `SemiUI`、`SemiIcons`、`SemiIllustrations`
 
-1. 请确保你已提前引入 react 以及 react-dom
-2. 引入 JS 文件，以下示例 URL 中 2.0.0 为 version 标识，希望使用不同版本 Semi 时，将 version 中对应的值替换即可（注意构建文件仅在 v1.3.0 后开始提供）
-    - semi-ui min：`https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js`
-    - semi-ui normal: `https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.js`
+1、 请确保你已提前引入 react 以及 react-dom  
+2、 引入 JS 文件，以下示例 URL 中 2.1.4 为 version 标识，希望使用不同版本 Semi 时，将 version 中对应的值替换即可  
+
+| 资源 | URL |
+| --- | --- |
+| semi-ui (min) | https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js |
+| semi-icons (min) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js |
+| semi-illustrations (min) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js |
+| semi-ui (normal) | https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.js |
+| semi-icons (normal) | https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js |
+| semi-illustrations (normal) | https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js |
 
-    - semi-icons min: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js`
-    - semi-icons normal: `https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js`
+3、 引入 Semi 默认主题的 CSS 样式文件
 
-    - semi-illustrations min: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js`
-    - semi-illustrations normal: `https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js`
-3. 引入 Semi 默认主题的 CSS 样式文件  
-    - `https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css`
-    - `https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css`
+| 资源 | URL |
+| --- | --- |
+| semi.css | https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css |
+| semi-icons.css | https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css |
 
 ```diff
 <!DOCTYPE html>
@@ -118,8 +125,8 @@ module.exports = semi({
 +       <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 +       <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 
-+       <script src="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/umd/semi-ui.min.js"></script>
-+       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/css/semi.css">
++       <script src="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.min.js"></script>
++       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css">
 
 +       <script src="https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js"></script>
 +       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css">
@@ -138,11 +145,14 @@ module.exports = semi({
     const { IconHome } = SemiIcons;
     const { IllustrationConstruction } = SemiIllustrations;
     ReactDOM.render(
-    <div>
-        <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
-        <Input defaultValue="semi" onChange={value => Toast.info('hello semi')}></Input>
-        <IconHome size="large" />
-        <IllustrationConstruction style={{width: 150, height: 150}} />
-    </div>, document.getElementById("root"));
-</script>;
-```
+        <div>
+            <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
+            <Input defaultValue="semi" onChange={value => Toast.info('hello semi')}></Input>
+            <IconHome size="large" />
+            <IllustrationConstruction style={{ width: 150, height: 150 }} />
+        </div>,
+        document.getElementById('root')
+    );
+</script>
+;
+```

content/start/introduction/index.md

@@ -26,7 +26,7 @@ Semi Design 始终致力于提升企业应用的体验。通过提炼简洁轻
 
 ![基于 Semi Design 的多元化产品与团队组件](https://lf9-static.semi.design/obj/semi-tos/images/introduction-showcase.gif)
 
-坚守优质且稳定的默认基础(不变)，并在需要时充分开放自定义的灵活度(多变)，这是 Semi Design 独特的，并将一直遵循的设计原则。
+**坚守优质且稳定的默认基础(不变)，并在需要时充分开放自定义的灵活度(多变)，这是 Semi Design 独特的，并将一直遵循的设计原则。**
 
 ### 主题化 —— 品牌一键定制
 

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.1.4-alpha.0"
+    "version": "2.1.5"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.1.3",
-    "@douyinfe/semi-animation-styled": "2.1.3",
+    "@douyinfe/semi-animation": "2.1.5",
+    "@douyinfe/semi-animation-styled": "2.1.5",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-foundation/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -107,6 +107,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
 }
 
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

packages/semi-foundation/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

packages/semi-foundation/modal/modalFoundation.ts

@@ -29,7 +29,7 @@ export interface ModalProps {
     footer?: any;
     hasCancel?: boolean;
     header?: any;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskStyle?: Record<string, any>;
@@ -43,7 +43,7 @@ export interface ModalProps {
     style?: Record<string, any>;
     title?: any;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     icon?: any;
     getPopupContainer?: () => HTMLElement;

packages/semi-foundation/modal/variables.scss

@@ -1,6 +1,6 @@
 // Color
 $color-modal-bg: var(--semi-color-bg-2); // 模态框背景颜色
-$color-modal_mask-bg: var(--semi-overlay-bg); // 模态框蒙层颜色
+$color-modal_mask-bg: var(--semi-color-overlay-bg); // 模态框蒙层颜色
 $color-modal_main-text: var(--semi-color-text-0); // 模态框文字颜色
 $color-modal_info-icon: var(--semi-color-info); // 模态框信息图标颜色
 $color-modal_primary-icon: var(--semi-color-primary); // 模态框主要图标颜色

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.1.3",
+    "version": "2.1.5",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.1.3",
+        "@douyinfe/semi-animation": "2.1.5",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",

packages/semi-foundation/radio/radio.scss

@@ -29,6 +29,7 @@ $inner-width: $width-icon-medium;
         width: 100%;
         height: 100%;
         margin: 0;
+        cursor: pointer;
     }
 
     &:hover {
@@ -46,6 +47,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-hover;
+                border-color: $color-radio_checked-border-hover;
             }
         }
     }
@@ -64,6 +66,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-active;
+                border-color: $color-radio_checked-border-active;
             }
         }
     }
@@ -135,6 +138,29 @@ $inner-width: $width-icon-medium;
         &_checked {
             background: $color-radio_cardRadioGroup-bg-checked;
             border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
+
+            &:hover {
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-hover;
+
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_border-hover;
+                }
+            }
+
+            &:active {
+                background: $color-radio_cardRadioGroup-bg-checked;
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-active;
+
+                .#{$module}-inner-checked {
+                    .#{$module}-inner-display {
+                        border-color: $color-radio_cardRadioGroup_checked_border-active;
+                    }
+
+                    &:hover .#{$module}-inner-display {
+                        background: $color-radio_primary-bg-active;
+                    }
+                }
+            }
         }
 
         &_hover {
@@ -146,6 +172,21 @@ $inner-width: $width-icon-medium;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardRadioGroup  {
+            background: $color-radio_cardRadioGroup_disabled-bg-checked;
+            border: $width-radio_cardRadioGroup_checked_disabled-border solid $color-radio_cardRadioGroup_border_disabled-active;
+
+            .#{$module}-inner-checked .#{$module}-inner-display {
+                border-color: $color-radio_cardRadioGroup_checked_disabled-border-default;
+            }
+            
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_disabled-border-hover;
+                }
+            }
+        }
     }
 
     &.#{$module}-disabled:hover,
@@ -158,6 +199,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_checked-bg-disabled;
+                border-color: $color-radio_checked-border-disabled;
             }
         }
     }
@@ -293,7 +335,7 @@ $inner-width: $width-icon-medium;
             &-display {
                 opacity: 0.75;
                 background: $color-radio_disabled-bg-default;
-                border-color: $color-radio_checked-border-disabled;
+                border-color: $color-radio_default-border-disabled;
 
                 &:hover {
                     background: $color-radio_disabled-bg-hover;
@@ -308,6 +350,7 @@ $inner-width: $width-icon-medium;
 
                 &:hover {
                     background: $color-radio_checked-bg-disabled;
+                    border-color: $color-radio_checked-border-disabled;
                 }
             }
         }

packages/semi-foundation/radio/variables.scss

@@ -3,6 +3,8 @@ $color-radio_default-bg-default: transparent; // 默认态背景颜色
 $color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
 $color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
 $color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
+$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
+$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
 
 $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
 $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
@@ -14,7 +16,8 @@ $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景
 $color-radio_primary-text-default: white; // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
-$color-radio_checked-border-disabled: var(--semi-color-border); // 选中项禁用态描边颜色
+$color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
+$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
 
 $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
 $color-radio_disabled-bg-hover: transparent;
@@ -30,11 +33,17 @@ $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
+$color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
-$color-radio_cardRadioGroup_border-active: var(--semi-color-focus-border); // 卡片样式单选选中态描边颜色
+$color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
+$color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
+$color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态
+$color-radio_cardRadioGroup_border_disabled-active: var(--semi-color-primary-disabled); // 卡片样式单选选中且禁用时的描边颜色
 $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡片样式单选标题文字颜色
 $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
+$color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
+$color-radio_cardRadioGroup_checked_disabled-border-hover:  var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
 $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
 $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
 $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
@@ -44,6 +53,7 @@ $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式
 $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
 
 $width-radio_cardRadioGroup_checked-border: 1px; // 卡片式单选描边宽度
+$width-radio_cardRadioGroup_checked_disabled-border: 1px; // 卡片式单选选中且禁用时的描边宽度
 $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮态
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态

packages/semi-foundation/rating/rating.scss

@@ -56,6 +56,10 @@ $module: #{$prefix}-rating;
             font-size: $font-rating_item_default-fontSize;
         }
 
+        &-wrapper {
+            position: relative;
+        }
+
         &-first,
         &-second {
             color: $color-rating-bg-default;

packages/semi-foundation/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
+@import './option.scss';
 @import './variables.scss';
 @import './mixin.scss';
-@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;

packages/semi-foundation/sideSheet/variables.scss

@@ -1,5 +1,5 @@
 // Color
-$color-sideSheet_mask-bg: var(--semi-overlay-bg); // 侧边栏打开后蒙层颜色
+$color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
 

packages/semi-foundation/table/table.scss

@@ -104,7 +104,7 @@ $module: #{$prefix}-table;
 
                     &-left,
                     &-right {
-                        z-index: 1;
+                        z-index: $z-table_fixed_column;
                         position: sticky;
                         background-color: $color-table-bg-default;
 
@@ -247,7 +247,7 @@ $module: #{$prefix}-table;
 
                 &-left,
                 &-right {
-                    z-index: 1;
+                    z-index: $z-table_fixed_column;;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }

packages/semi-foundation/table/variables.scss

@@ -82,3 +82,6 @@ $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动
 $border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
 $border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
+
+$z-table-fixed: 101!default; // fixed列的zIndex值
+$z-table_fixed_column: $z-table-fixed; // fixed列的zIndex值

packages/semi-foundation/upload/variables.scss

@@ -22,7 +22,7 @@ $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
 $color-upload_pic_add-bg-hover: var(--semi-color-fill-1); // 图片墙上传背景色 - 悬浮
 $color-upload_pic_add-bg: var(--semi-color-fill-0); // 图片墙上传背景色 - 默认
-$color-upload_pic_remove-bg: var(--semi-overlay-bg); // 图片墙上传移除图标颜色
+$color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息（序号）文字颜色

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.1.3",
+    "@douyinfe/semi-webpack-plugin": "2.1.5",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.1.3",
+    "version": "2.1.5",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,6 +23,6 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.1.3"
+        "@douyinfe/semi-webpack-plugin": "2.1.5"
     }
 }

packages/semi-scss-compile/README.md

@@ -15,11 +15,11 @@ There are mainly the following two usage scenarios:
 ```shell
 npm i -g @douyinfe/semi-scss-compile
 
-semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --icon="path/to/'@douyinfe/semi-icons'" --output="path/to/output.css" --min=true
+semi-build-scss --foundation="path/to/foundation" --theme="path/to/theme" --icon="path/to/'@douyinfe/semi-icons'" --output="path/to/output.css" --min
 
 # or for short
 
-semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinfe/semi-icons'" -o "path/to/output.css" -m true
+semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinfe/semi-icons'" -o "path/to/output.css" -m
 
 ```
 

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-scss-compile/src/bin.ts

@@ -1,27 +1,33 @@
 #!/usr/bin/env node
 
-import arg from "arg";
-import { compile } from "./index";
+import arg from 'arg';
+import { compile } from './index';
 
 const main = () => {
     const userArgs = arg({
-        "--foundation": String,
-        "--theme": String,
-        "--output": String,
-        "--icon":String,
-        "--min": Boolean,
+        '--foundation': String,
+        '--theme': String,
+        '--output': String,
+        '--icon': String,
+        '--min': Boolean,
 
-        "-f": "--foundation",
-        "-t": "--theme",
-        "-i":"--icon",
-        "-o": "--output",
-        "-m": "--min"
-    }, {permissive: true});
-    const {"--foundation": foundationPath, '--theme': themePath, '--output': outputPath,'--icon':iconPath,'--min': isMin} = userArgs;
+        '-f': '--foundation',
+        '-t': '--theme',
+        '-i': '--icon',
+        '-o': '--output',
+        '-m': '--min'
+    }, { permissive: true });
+    const {
+        '--foundation': foundationPath,
+        '--theme': themePath,
+        '--output': outputPath,
+        '--icon': iconPath,
+        '--min': isMin
+    } = userArgs;
     console.log(`foundationPath: ${foundationPath},\nthemePath: ${themePath},\noutputPath: ${outputPath}\n`);
     if (foundationPath && themePath && iconPath && outputPath) {
         compile({
-            foundationPath,themePath,iconPath,outputPath,isMin
+            foundationPath, themePath, iconPath, outputPath, isMin
         });
     } else {
         console.error('Error: lack of args.');

packages/semi-scss-compile/src/index.ts

@@ -1,7 +1,7 @@
-import generateScssMap from "./utils/generateSCSSMap";
-import writeFile from "./utils/writeFile";
-import compilerFromScssMap from "./utils/compiler";
-import path from "path";
+import generateScssMap from './utils/generateSCSSMap';
+import writeFile from './utils/writeFile';
+import compilerFromScssMap from './utils/compiler';
+import path from 'path';
 import fs from 'fs-extra';
 
 
@@ -13,7 +13,7 @@ export interface Options {
     isMin?: boolean,
 }
 
-const compile = ({foundationPath, themePath, iconPath, outputPath, isMin = false}: Options) => {
+const compile = ({ foundationPath, themePath, iconPath, outputPath, isMin = false }: Options) => {
     const scssMap = generateScssMap(foundationPath, themePath, iconPath);
     const tempDir = writeFile(scssMap);
     const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);

packages/semi-scss-compile/src/utils/compiler.ts

@@ -2,7 +2,11 @@ import sass from 'sass';
 
 
 const compile = (entryScssPath: string, isMin: boolean = false) => {
-    const result = sass.renderSync({ file: entryScssPath, outputStyle: isMin ? 'compressed' : 'expanded' });
+    const result = sass.renderSync({
+        file: entryScssPath,
+        outputStyle: isMin ? 'compressed' : 'expanded',
+        charset: false
+    });
     return result;
 };
 

packages/semi-scss-compile/src/utils/generateSCSSMap.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import fs from "fs-extra";
+import fs from 'fs-extra';
 import { set } from 'lodash';
 
 const lodash = { set };
@@ -44,7 +44,7 @@ const generateThemeScssMap = (themePath: string) => {
         const scssAbsolutePath = path.join(themePath, 'scss', fileName);
         if (fs.existsSync(scssAbsolutePath)) {
             //in theme folder
-            themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, { encoding: "utf8" });
+            themeScssMap[fileName] = fs.readFileSync(scssAbsolutePath, { encoding: 'utf8' });
         }
     }
     // console.log(themeScssMap)

packages/semi-scss-compile/src/utils/writeFile.ts

@@ -1,8 +1,8 @@
 import fs from 'fs-extra';
 import path from 'path';
 import os from 'os';
-import generateScssMap from "./generateSCSSMap";
-import { cloneDeep, omit } from "lodash";
+import generateScssMap from './generateSCSSMap';
+import { cloneDeep, omit } from 'lodash';
 
 const lodash = { cloneDeep, omit };
 
@@ -22,7 +22,7 @@ const writeThemeScss = (scssMap: (ReturnType<typeof generateScssMap>)['theme'],
     fs.emptyDirSync(themeDirPath);
 
     for (const scssFileName of Object.keys(scssMap)) {
-        fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, { encoding: "utf8" });
+        fs.writeFileSync(path.join(themeDirPath, scssFileName), scssMap[scssFileName as keyof typeof scssMap] as string, { encoding: 'utf8' });
     }
     return;
 };
@@ -52,11 +52,11 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
 
 
     //----- inject component token file local.scss to component's variables.scss -----
-    const themeLocalRaw = scssMap.theme["local.scss"];
+    const themeLocalRaw = scssMap.theme['local.scss'];
     if (themeLocalRaw) {
         for (const componentName of Object.keys(scssMap['components'])) {
-            if (scssMap["components"][componentName]['variables.scss']) {
-                scssMap["components"][componentName]['variables.scss'] += `\n\n\n\n//inject custom theme variables\n${themeLocalRaw}`;
+            if (scssMap['components'][componentName]['variables.scss']) {
+                scssMap['components'][componentName]['variables.scss'] += `\n\n\n\n//inject custom theme variables\n${themeLocalRaw}`;
             }
         }
     }
@@ -64,7 +64,7 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
 
     return {
         ...{
-            components: scssMap["components"],
+            components: scssMap['components'],
             theme: lodash.omit(scssMap['theme'], 'local.scss')
         },
         index: compilerEntryContent
@@ -76,10 +76,10 @@ const writeFile = (scssMap: ReturnType<typeof generateScssMap>, tempDir: string
     fs.emptyDirSync(tempDir);
 
     const finalScssMapWaitForCompiling = preProcessScssMap(scssMap);
-    writeComponentScss(finalScssMapWaitForCompiling["components"], tempDir);
+    writeComponentScss(finalScssMapWaitForCompiling['components'], tempDir);
     writeThemeScss(finalScssMapWaitForCompiling['theme'], tempDir);
     //write compile entry
-    fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], { encoding: "utf8" });
+    fs.writeFileSync(path.join(tempDir, 'index.scss'), finalScssMapWaitForCompiling['index'], { encoding: 'utf8' });
     return tempDir;
 };
 

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.1.3",
+    "version": "2.1.5",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-theme-default/scss/global.scss

@@ -80,7 +80,7 @@ body, body[theme-mode="dark"] .semi-always-light {
     --semi-color-border: rgba(var(--semi-grey-9), .08); // 默认描边颜色
     --semi-color-nav-bg: rgba(var(--semi-white), 1); // 导航背景色
 
-    --semi-overlay-bg: rgba(22, 22, 26, .6); // 蒙层背景色
+    --semi-color-overlay-bg: rgba(22, 22, 26, .6); // 蒙层背景色
 
     --semi-color-fill-0: rgba(var(--semi-grey-8), .05); // 填充色 - 默认态
     --semi-color-fill-1: rgba(var(--semi-grey-8), .09); // 填充色 - 悬浮态
@@ -168,7 +168,7 @@ body[theme-mode="dark"], body .semi-always-dark {
     --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
     --semi-color-nav-bg: rgba(35, 36, 41, 1);
     --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-    --semi-overlay-bg: rgba(22, 22, 26, .6);
+    --semi-color-overlay-bg: rgba(22, 22, 26, .6);
     --semi-color-fill-0: rgba(var(--semi-white), .05);
     --semi-color-fill-1: rgba(var(--semi-white), .09);
     --semi-color-fill-2: rgba(var(--semi-white), .13);

packages/semi-theme-default/scss/variables.scss

@@ -31,6 +31,8 @@ $z-portal: 1; // 抽象插槽，适用于未经特殊定制的所有组件
 $z-affix: 10; // 固定位置的页面元素 z-index
 $z-backtop: 10; // 返回顶部 z-index
 $z-badge: 10; // badge z-index
+// $z-avatar-default: 100;
+$z-table-fixed: 101; // table fixed column
 $z-modal: 1000; // modal z-index
 $z-modal-mask: 1000; // modal 遮罩 z-index
 

packages/semi-ui/button/Button.tsx

@@ -15,6 +15,7 @@ export type Theme = 'solid' | 'borderless' | 'light';
 export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

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

@@ -1,4 +1,5 @@
 import Button from '../index';
+import ButtonGroup from '../index';
 import { mount } from 'enzyme';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import { IconEdit } from '@douyinfe/semi-icons';
@@ -46,4 +47,18 @@ describe('Button', () => {
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-left`).length).toBe(1);
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-right`).length).toBe(0);
     });
+
+    it(`button group with invalid child`, () => {
+        const buttonGroup = mount(
+            <ButtonGroup>
+                {false}
+                {null}
+                {undefined}
+                {1}
+                <Button>查询</Button>
+                <Button>剪切</Button>
+            </ButtonGroup>
+        );
+        expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
+    });
 });

packages/semi-ui/button/_story/button.stories.js

@@ -122,6 +122,19 @@ export const ButtonGroupDemo = () => (
       </Button>
     </ButtonGroup>
     <br />
+    <div>ButtonGroup children 不是合法元素的情况:</div>
+    <ButtonGroup>
+      {false}
+      {123}
+      {null}
+      {undefined}
+      text
+      <span>span</span>
+      {true && <Button>拷贝</Button>}
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
   </div>
 );
 

packages/semi-ui/button/buttonGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -38,9 +38,11 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         let inner;
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children]) as React.ReactElement[]).map((itm, index) =>
-                React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
-            );
+            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+                isValidElement(itm)
+                    ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
+                    : itm
+            ));
         }
         return <div className={`${prefixCls}-group`}>{inner}</div>;
     }

packages/semi-ui/checkbox/__test__/checkboxGroup.test.js

@@ -136,13 +136,45 @@ describe('CheckboxGroup', () => {
     });
 
     it('checkboxGroup card style', () => {
-        const checkbox = getCG({ type: 'card' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'card' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'card', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 
     it('checkboxGroup pure card style', () => {
-        const checkbox = getCG({ type: 'pureCard' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'pureCard' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'pureCard', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 });

packages/semi-ui/checkbox/_story/checkbox.stories.js

@@ -574,12 +574,12 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
@@ -767,12 +767,12 @@ export const CheckboxGroupPureCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="pureCard" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>

packages/semi-ui/checkbox/checkbox.tsx

@@ -123,6 +123,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             onMouseLeave,
             extra,
             value,
+            id,
         } = this.props;
         const { checked } = this.state;
         const props: Record<string, any> = {
@@ -154,6 +155,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
             [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
             [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+            [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
             [className]: Boolean(className),
         });
 
@@ -173,6 +175,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             <span
                 style={style}
                 className={wrapper}
+                id={id}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 onClick={this.handleChange}

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -25,6 +25,7 @@ export type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 
 export type CheckboxGroupState = {
@@ -96,7 +97,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
     }
 
     render() {
-        const { children, options, prefixCls, direction, className, style, type } = this.props;
+        const { children, options, prefixCls, direction, className, id, style, type } = this.props;
 
         const isPureCardType = type === strings.TYPE_PURECARD;
         const isCardType = type === strings.TYPE_CARD || isPureCardType;
@@ -148,7 +149,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
         }
 
         return (
-            <div className={prefixClsDisplay} style={style}>
+            <div className={prefixClsDisplay} style={style} id={id}>
                 <Context.Provider
                     value={{
                         checkboxGroup: {

packages/semi-ui/form/_story/form.stories.js

@@ -432,73 +432,6 @@ FieldDisplayName.story = {
   name: 'Field displayName',
 };
 
-class ReUseDemo extends React.Component {
-  constructor() {
-    super();
-    this.getFormApi = this.getFormApi.bind(this);
-    this.suppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top10以下', value: 10 },
-      { label: 'top30以下', value: 30 },
-    ];
-    this.citySuppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top3以下', value: 3 },
-      { label: 'top5以下', value: 5 },
-      { label: 'top10以下', value: 10 },
-    ];
-  }
-
-  getFormApi(formApi) {
-    this.formApi = formApi;
-  }
-
-  render() {
-    return (
-      <Form
-        getFormApi={this.getFormApi}
-        initValues={{ listType: 'online', attr: { suppress_rank: 0, city_suppress_rank: 5 } }}
-        onValueChange={values => console.log(values)}
-        style={{ width: 250 }}
-      >
-        {({ formState }) => (
-          <>
-            <Form.Select
-              field="listType"
-              label="榜单类型"
-              disabled={this.ifUseOld}
-              style={{ width: '100%' }}
-              // onChange={val => this.onChangeListType(val)}
-            >
-              <Option value="online">热点榜</Option>
-              <Option value="riseHot">上升热点榜</Option>
-              <Option value="sameCity">同城热点榜</Option>
-            </Form.Select>
-            {formState.values.listType !== 'sameCity' ? (
-              <Form.Select
-                label="竞品打压类型"
-                field="attr.suppress_rank"
-                optionList={this.suppressRankOptions}
-              />
-            ) : (
-              <Form.Select
-                label="同城竞品打压"
-                field="attr.city_suppress_rank"
-                optionList={this.citySuppressRankOptions}
-              />
-            )}
-          </>
-        )}
-      </Form>
-    );
-  }
-}
-export const SameFieldSwitchCauseReuse = () => <ReUseDemo />;
-
-SameFieldSwitchCauseReuse.story = {
-  name: 'same field switch cause reuse',
-};
-
 export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {

packages/semi-ui/form/hoc/withField.tsx

@@ -75,7 +75,7 @@ function withField<
         // 无需注入的直接返回，eg：Group内的checkbox、radio
         // Return without injection, eg: <Checkbox> / <Radio> inside CheckboxGroup/RadioGroup
         if (!shouldInject) {
-            return <Component {...rest} />;
+            return <Component {...rest} ref={ref} />;
         }
 
         // grab formState from context

packages/semi-ui/modal/Modal.tsx

@@ -47,8 +47,8 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         closable: PropTypes.bool,
         centered: PropTypes.bool,
         visible: PropTypes.bool,
-        width: PropTypes.number,
-        height: PropTypes.number,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -266,7 +266,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         } else if (visible && this.state.hidden) {
             this.foundation.toggleHidden(false);
         }
-    }
+    };
 
     renderFooter = (): ReactNode => {
         const {

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

@@ -36,7 +36,7 @@ describe(`Navigation`, () => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,
@@ -71,7 +71,7 @@ describe(`Navigation`, () => {
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
             >
-                <Nav.Header logo={'bytedance_logo'} text={'直播运营后台'} />
+                <Nav.Header logo={'bytedance_logo'} text={'Semi 运营后台'} />
                 <Nav.Item itemKey={'union'} text={'公会中心'} icon={'star'} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon="user">
                     <Nav.Item itemKey={'golder'} text={'金主管理'} />
@@ -135,7 +135,7 @@ describe(`Navigation`, () => {
                 items={items}
                 header={{
                     logo: 'bytedance_logo',
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{ collapseButton: true }}
             />
@@ -201,7 +201,7 @@ describe(`Navigation`, () => {
                 onClick={onClick}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

packages/semi-ui/navigation/_story/AutoOpen/index.js

@@ -55,7 +55,7 @@ const Demo = (props = {}) => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi运营后台',
                 }}
                 footer={{
                     collapseButton: true,

packages/semi-ui/navigation/_story/WithChildren/index.js

@@ -106,7 +106,7 @@ const Demo = (props = {}) => {
                 onOpenChange={onOpenChange}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

packages/semi-ui/navigation/_story/navigation.stories.js

@@ -272,7 +272,7 @@ class HorizontalDemo extends React.Component {
             logo: (
               <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />
             ),
-            text: '直播运营后台',
+            text: 'Semi 运营后台',
           }}
           footer={{
             collapseButton: true,

packages/semi-ui/navigation/_story/navigation.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar } from '@douyinfe/semi-icons';
+import { IconHome, IconHistogram, IconSetting, IconLive, IconUser, IconStar, IconUserGroup } from '@douyinfe/semi-icons';
 
 import Nav from '..';
 
@@ -15,7 +15,7 @@ stories.add(`default`, () => {
                 <Nav onSelect={(...args: any[]) => console.log(...args)}>
                     <Nav.Header logo={<img src={logo} />} text={'火山运营'} />
                     <Nav.Item itemKey={'1'} text={'Option 1'} icon="mail" link="/mail" />
-                    <Nav.Sub text={'Group 2'} icon="folder" stayWhenClick={true} itemKey={'2'}>
+                    <Nav.Sub text={'Group 2'} icon="folder" itemKey={'2'}>
                         {['2-1', '2-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} link={`folder/${k}`} />
                         ))}
@@ -27,7 +27,7 @@ stories.add(`default`, () => {
                     </Nav.Sub>
                     <Nav.Item key={3} itemKey={'3'} text={'Option 3'} icon="gift" />
                     <Nav.Item key={4} itemKey={'4'} text={'Option 4'} icon="list" />
-                    <Nav.Sub text={'Group 5'} icon="flag" stayWhenClick={true} itemKey={'5'}>
+                    <Nav.Sub text={'Group 5'} icon="flag" itemKey={'5'}>
                         {['5-1', '5-2'].map(k => (
                             <Nav.Item key={k} itemKey={String(k)} text={'Option ' + k} />
                         ))}
@@ -80,7 +80,7 @@ stories.add(`fix 35`, () => {
                     onSelect={data => console.log('trigger onSelect: ', data)}
                     onClick={data => console.log('trigger onClick: ', data)}
                 >
-                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'直播运营后台'} />
+                    <Nav.Header logo={<img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />} text={'Semi 运营后台'} />
                     <Nav.Item itemKey={'union'} text={'公会中心'} icon={<IconStar />} />
                     <Nav.Sub itemKey={'user'} text="用户管理" icon={<IconUser />}>
                         <Nav.Item itemKey={'golder'} text={'金主管理'} />

packages/semi-ui/navigation/index.tsx

@@ -50,8 +50,8 @@ export interface NavProps extends BaseProps {
     defaultIsCollapsed?: boolean;
     defaultOpenKeys?: React.ReactText[];
     defaultSelectedKeys?: React.ReactText[];
-    footer?: React.ReactNode | NavHeaderProps;
-    header?: React.ReactNode | NavFooterProps;
+    footer?: React.ReactNode | NavFooterProps;
+    header?: React.ReactNode | NavHeaderProps;
     isCollapsed?: boolean;
     items?: NavItems;
     limitIndent?: boolean;

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.1.4-alpha.0",
+    "version": "2.1.5",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.1.3",
-        "@douyinfe/semi-foundation": "2.1.3",
-        "@douyinfe/semi-icons": "2.1.3",
-        "@douyinfe/semi-illustrations": "2.1.3",
-        "@douyinfe/semi-theme-default": "2.1.3",
+        "@douyinfe/semi-animation-react": "2.1.5",
+        "@douyinfe/semi-foundation": "2.1.5",
+        "@douyinfe/semi-icons": "2.1.5",
+        "@douyinfe/semi-illustrations": "2.1.5",
+        "@douyinfe/semi-theme-default": "2.1.5",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -53,6 +53,14 @@
         "pc component",
         "dark mode"
     ],
+    "homepage": "https://semi.design",
+    "bugs": {
+      "url": "https://github.com/DouyinFE/semi-design/issues"
+    },
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/DouyinFE"
+    },
     "_unpkg": true,
     "unpkgFiles": [
         "dist/css",
@@ -66,7 +74,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.1.3",
+        "@douyinfe/semi-scss-compile": "2.1.5",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

packages/semi-ui/radio/__test__/radioGroup.test.jsx

@@ -131,20 +131,55 @@ describe('RadioGroup', () => {
     });
 
     it('radioGroup card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'card' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        radioGroup.unmount();
+
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'card', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
     });
 
     it('radioGroup pure card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'pureCard' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
-    });
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
+        radioGroup.unmount();
 
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'pureCard', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
+    });
 
     it('The buttonSize of the button type radio', () => {
         const smallRadio = mount(

packages/semi-ui/radio/_story/radio.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Button from '../../button';
 import Space from '../../space';
 
-import { Radio, RadioGroup } from '../../index';
+import { Radio, RadioGroup, Form, Tooltip } from '../../index';
 import { Row, Col } from '../../grid';
 import './radio.scss';
 
@@ -481,10 +481,10 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="card" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -495,13 +495,13 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="card" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>
@@ -678,10 +678,10 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="pureCard" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -692,13 +692,13 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="pureCard" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>
@@ -855,3 +855,14 @@ export const RadioGroupPureCardStyle = () => (
 RadioGroupPureCardStyle.story = {
   name: 'radioGroup pureCard style'
 }
+
+export const FixWithFieldLossRef = () => {
+  return (
+    <Form>
+        <Tooltip visible trigger="custom" content={'hi bytedance'}>
+            <Form.Radio>Semi</Form.Radio>
+        </Tooltip>
+    </Form>
+  );
+}
+FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';

packages/semi-ui/radio/radio.tsx

@@ -193,6 +193,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
             [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
             [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
+            [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
             [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
             [className]: Boolean(className),
         });

packages/semi-ui/rating/item.tsx

@@ -101,6 +101,7 @@ export default class Item extends PureComponent<RatingItemProps> {
                     aria-posinset={index + 1}
                     aria-setsize={count}
                     tabIndex={0}
+                    className={`${prefixCls}-wrapper`}
                 >
                     <div className={`${prefixCls}-first`} style={{ width: `${firstWidth * 100}%` }}>{content}</div>
                     <div className={`${prefixCls}-second`}>{content}</div>

packages/semi-ui/select/index.tsx

@@ -78,6 +78,7 @@ export type RenderMultipleSelectedItemFn = (optionNode: Record<string, any>, mul
 export type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 
 export type SelectProps = {
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
@@ -981,6 +982,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             multiple,
             filter,
             style,
+            id,
             size,
             className,
             validateStatus,
@@ -1063,6 +1065,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={ref => ((this.triggerRef as any).current = ref)}
                 onClick={e => this.foundation.handleClick(e)}
                 style={style}
+                id={id}
                 tabIndex={tabIndex}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}

packages/semi-ui/table/_story/DynamicFilters/index.js

@@ -6,22 +6,19 @@ class App extends React.Component {
     constructor() {
         super();
         const labels = [
-            { text: '范政源测试', value: 1428 },
-            { text: '商业化接单候选人', value: 4 },
-            { text: '华星MCN签约', value: 6 },
-            { text: '抖音', value: 18 },
-            { text: '抖音认证特效师', value: 3 },
-            { text: '测试boe能解决', value: 1427 },
-            { text: 'a哈哈哈哈', value: 1 },
-            { text: '测试啊', value: 1406 },
-            { text: 'asa', value: 1404 },
-            { text: '啊啊啊啊啊啊大 sad但', value: 1401 },
-            { text: 'chess', value: 1397 },
-            { text: '试试看嗷', value: 1396 },
-            { text: '爆款特效师', value: 2 },
-            { text: '123456789123', value: 24 },
-            { text: '哈哈', value: 23 },
-            { text: '匠子空间mcn签约', value: 7 },
+            { text: '测试数据0', value: 4 },
+            { text: '测试数据1', value: 18 },
+            { text: '测试数据2', value: 3 },
+            { text: '测试数据3', value: 1427 },
+            { text: '测试数据4', value: 1 },
+            { text: '测试数据5', value: 1406 },
+            { text: '测试数据6', value: 1404 },
+            { text: '测试数据7', value: 1401 },
+            { text: '测试数据8', value: 1397 },
+            { text: '测试数据9', value: 1396 },
+            { text: '测试数据10', value: 2 },
+            { text: '测试数据11', value: 24 },
+            { text: '测试数据12', value: 23 },
         ];
         this.state = {
             data: datsJson,

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

@@ -234,4 +234,20 @@ describe('Timeline', () => {
         timelineRight.unmount();
     });
 
-});
+  it('Timeline with time type ReactNode',()=>{
+    const timeline=mount(<Timeline>
+      <Timeline.Item time={<span>2019-07-14 10:35</span>}>第一个节点内容</Timeline.Item>
+      <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
+    </Timeline>, {
+      attachTo: document.getElementById('container'),
+    });
+    const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content .${BASE_CLASS_PREFIX}-timeline-item-content-time`).at(0);
+    expect(
+      firstItem
+        .getDOMNode()
+        .innerHTML
+    ).toEqual('<span>2019-07-14 10:35</span>');
+    timeline.unmount();
+  });
+
+});

packages/semi-ui/timeline/item.tsx

@@ -6,7 +6,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
-    time?: string;
+    time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;
     extra?: React.ReactNode;
@@ -20,7 +20,7 @@ const prefixCls = cssClasses.ITEM;
 export default class Item extends PureComponent<TimelineItemProps> {
     static propTypes = {
         color: PropTypes.string,
-        time: PropTypes.string,
+        time: PropTypes.node,
         type: PropTypes.oneOf(strings.ITEM_TYPE),
         dot: PropTypes.node,
         extra: PropTypes.node,
@@ -67,8 +67,8 @@ export default class Item extends PureComponent<TimelineItemProps> {
                 </div>
                 <div className={`${prefixCls}-content`}>
                     {children}
-                    {extra ? <div className={`${prefixCls}-content-extra`}>{extra}</div> : null}
-                    <div className={`${prefixCls}-content-time`}>{time}</div>
+                    {extra && <div className={`${prefixCls}-content-extra`}>{extra}</div>}
+                    {time && <div className={`${prefixCls}-content-time`}>{time}</div>}
                 </div>
             </li>
         );

packages/semi-ui/tree/_story/tree.stories.js

@@ -251,7 +251,7 @@ export const SimpleTree = () => (
     // onExpand={(e, { expanded, node }) => console.log('expand', e, expanded, node)}
     // onSelect={(e, bool, node) => console.log('select', e, bool, node)}
     // onChange={e => console.log('change', e)}
-    onRightClick={(e, node) => console.log(e.currentTarget, node)}
+    onContextMenu={(e, node) => console.log(e.currentTarget, node)}
     onDoubleClick={(e, node) => console.log(e, node)}
     motion={true}
   />
@@ -268,7 +268,7 @@ export const MultipleTree = () => (
     labelInValue
     // onExpand={(e, { expanded, node }) => console.log('expand', e, expanded, node)}
     // onSelect={(e, bool) => console.log('select', e, bool)}
-    onRightClick={(e, node) => console.log(e, node)}
+    onContextMenu={(e, node) => console.log(e, node)}
     onDoubleClick={(e, node) => console.log(e, node)}
     onChange={e => console.log('change', e)}
   />

packages/semi-ui/tree/treeNode.tsx

@@ -75,8 +75,6 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
 
     onContextMenu = (e: React.MouseEvent) => {
         const { onNodeRightClick } = this.context;
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
         onNodeRightClick(e, this.props);
     };
 

packages/semi-webpack/README.md

@@ -147,4 +147,17 @@ In the compilation phase, whether to exclude css references.Used to solve the pr
 
 Type: `webpack NormalModule`
 
+##### options.extractCssOptions.loader
+
+Type: `String`
+
+The path of webpack loader that extract css.
+
+##### options.extractCssOptions.loaderOptions
+
+Type: `Object`
+
+The options of webpack loader that extract css.
+
+
 In webpack@5, some hooks need to be obtained through api `NormalModule.getCompilationHooks`. But in some scenarios, webpack will not be installed, such as Next.js. Therefore, the user is required to pass in NormalModule as a parameter.

packages/semi-webpack/package.json

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

packages/semi-webpack/src/semi-webpack-plugin.ts

@@ -5,13 +5,19 @@ const _NormalModule_ = require('webpack/lib/NormalModule');
 export interface WebpackContext {
     NormalModule?: any;
 }
+
+export interface ExtractCssOptions {
+    loader: string;
+    loaderOptions?: any;
+}
 export interface SemiWebpackPluginOptions {
     theme?: string | SemiThemeOptions;
     prefixCls?: string;
     variables?: {[key: string]: string | number};
     include?: string;
     omitCss?: boolean;
-    webpackContext?: WebpackContext
+    webpackContext?: WebpackContext;
+    extractCssOptions?: ExtractCssOptions;
 }
 
 export interface SemiThemeOptions {
@@ -82,10 +88,14 @@ export default class SemiWebpackPlugin {
                 name: this.options.theme
             };
             if (!this.hasSemiThemeLoader(module.loaders)) {
+                const lastLoader = this.options.extractCssOptions ? {
+                    loader: this.options.extractCssOptions.loader,
+                    options: this.options.extractCssOptions.loaderOptions || {}
+                } : {
+                    loader: styleLoader
+                };
                 module.loaders = [
-                    {
-                        loader: styleLoader
-                    },
+                    lastLoader,
                     {
                         loader: cssLoader
                     }, {

src/components/Footer/footer.scss

@@ -91,14 +91,18 @@ body[theme-mode='dark'] {
     }
 
     .autoWrapper {
+        width: 1110px;
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: space-between;
+    }
+    .icpWrapper{
+        display: flex;
     }
-
     .a2021SemiDesignAllRi {
-        min-width: 263px;
-        margin: 0px 495px 0px 0px;
+        min-width: 394px;
+        margin: 0px 8px 0px 0px;
         font-size: 14px;
         font-family: Inter;
         color: #d9dbe1ff;
@@ -107,7 +111,23 @@ body[theme-mode='dark'] {
         text-align: left;
         vertical-align: top;
     }
+    
+    .image45 {
+        width: 20px;
+        height: 20px;
+        margin: 0px 8px 0px 0px;
+    }
 
+    .beianText{
+        min-width: 175px;
+        font-size: 14px;
+        font-family: Inter;
+        color: #d9dbe1ff;
+        line-height: 24px;
+        font-weight: 400;
+        text-align: left;
+        vertical-align: top;
+    }
     .designedDevelopedWit {
         min-width: 352px;
         font-size: 14px;

src/components/Footer/index.jsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import UserContext from 'context/context';
 import './footer.scss';
-import { _t } from 'src/utils/locale'
+import { _t } from 'src/utils/locale';
 import { getLocale } from '../../utils/locale';
 
 export class Footer extends Component {
@@ -18,7 +18,7 @@ export class Footer extends Component {
                     <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">GitHub</a>
                 </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/a577c310-324e-11ec-8b14-8fb159794ae4.svg" className='divider' />
                 <div className='autoWrapper'>
-                    <p className='a2021SemiDesignAllRi'>© 2021 Semi Design. All rights reserved</p>
+                    <div className='icpWrapper'><p className={'a2021SemiDesignAllRi'}>© 2021 Semi Design. All rights reserved. 京 ICP 备16016397</p><img src="https://tosv.byted.org/obj/ies-semi/images/f2a93900-5bfe-11ec-a3e2-111db7c8929a.png" className={'image45'} /><a href="https://beian.miit.gov.cn/" target="_blank" className={'beianText'} rel="noreferrer">京公安网备 110000023049</a></div>
                     <p className='designedDevelopedWit'><span className='designedDevelopedWit_c0c5d39b'>Designed & Developed with love by </span><span className='designedDevelopedWit_6eaa79ba'>Douyin FE</span><span className='designedDevelopedWit_c0c5d39b'> & </span><a href="https://dribbble.com/MetaEnterpriseDesign" className='designedDevelopedWit_6eaa79ba'>MED</a></p>
                 </div>
             </div>

src/sitePages/newHome/components/banner/banner.jsx

@@ -4,15 +4,15 @@ import { navigate } from 'gatsby-link';
 import React from 'react';
 import { getLocale } from '../../../../utils/locale';
 import styles from "./banner.module.scss";
-import {IconGithubLogo} from '@douyinfe/semi-icons'
+import {IconGithubLogo} from '@douyinfe/semi-icons';
 
 function Banner() {
     const goStart = () => {
         navigate(`/${getLocale()}/start/getting-started`);
-    }
+    };
     const goGithub = () => {
-        window.open('https://github.com/DouyinFE/semi-design')
-    }
+        window.open('https://github.com/DouyinFE/semi-design');
+    };
     return (
         <div className={styles.frame4565}>
             <div className={styles.autoWrapper}>
@@ -27,7 +27,7 @@ function Banner() {
                         </div>
                     </div>
                 </div>
-                <div className={styles.autoWrapper_4fa00029}><div className={styles.background}></div><img src="https://lf9-static.semi.design/obj/semi-tos/images/f54dfa40-33dd-11ec-adec-e911cea4cf98.png" className={styles.group3736} /></div>
+                <div className={styles.autoWrapper_4fa00029}><div className={styles.background}></div><img src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/37361.png" className={styles.group3736} /></div>
             </div>
         </div>
     );

test/semi.html

@@ -14,8 +14,8 @@
     <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
     <!-- <script src='../packages/semi-ui-react/dist/umd/semi-ui-react.js'></script>
     <link rel="stylesheet" href="../packages/semi-theme-default/css/semi.css"> -->
-    <script src="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/umd/semi-ui.min.js"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.0.0/dist/css/semi.css">
+    <script src="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css">
 </head>
 
 <body>