Release (#104)

* style(docs): transfer demo border style (#78)

* docs: [semi-webpack] commonjs plugin usage

* fix: [TreeSelect] In single-selection search, after selecting a item, its child items will be expanded and Popover will be closed immediately (#78) (#96)

Co-authored-by: chenyuling <[email protected]>

* fix(doc): fix some typo

* docs: Update docs (#95)

* docs: Update docs

* docs: markdown format

* docs: update Notification manual close demo (#97)

* docs: update Notification manual close demo

* docs: update Notification manual close demo

* fix(slider): onAfterChange triggered unexpectedly when value changed (#145)

* fix: [progress] render error when size change (#94)

* fix: [collapsible] Fix the problem that the height of the collapsible component is not fully expanded when the collapsible component is opened by default (#85)

Co-authored-by: yanqi.xu <[email protected]>
Co-authored-by: zwlafk <[email protected]>
Co-authored-by: boomboomchen <[email protected]>
Co-authored-by: chenyuling <[email protected]>
Co-authored-by: GoldSubmarine <[email protected]>
Co-authored-by: zwlafk <[email protected]>
Co-authored-by: tank0317 <[email protected]>
Co-authored-by: Janlay <[email protected]>

README-zh_CN.md

@@ -3,7 +3,7 @@
     <p align="center"><img width="300" src="https://lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/SemiLogo/Logo_1576122865926.png" /></p>
     <h1 style="width: 100%; text-align: center;">Semi-UI</h1>
     <p>
-        现代、全面、灵活的设计系统和 UI 库。 快速搭建美观的React 应用。
+        现代、全面、灵活的设计系统和 UI 库。 快速搭建美观的 React 应用。
     </p>
 </article>
     

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

@@ -14,7 +14,7 @@ brief: Semi Design Tokens
 Variables actually decouple the basic elements of design from specific styles.
 For designers, if the style of the product needs to be updated iteratively, for example, the dangerous function color, namely color danger, needs to be updated, they only need to modify its corresponding color default value to complete the UI iteration of the whole product.
 For R & D, in order to adapt to the iteration of product style update, design token can update the style of all components more quickly without modifying everywhere. This is why we need to pay special attention to using variables instead of fixed default values in the development process. If the style of the product is shared by multiple platforms, it can get twice the result with half the effort.
-In particular, for platforms with dark mode requirements, semi design's color variable is needed to achieve the effect of one click switching between light and dark. Therefore, here we will introduce the design token system of semi design in detail and how to use them.
+In particular, for platforms with dark mode requirements, Semi Design's color variable is needed to achieve the effect of one click switching between light and dark. Therefore, here we will introduce the design token system of Semi Design in detail and how to use them.
 
 ## Basic color
 
@@ -139,7 +139,7 @@ Determine the thickness of different levels of text
 
 In order to reduce the packing volume, the default English font inter needs to be introduced separately
 
-If you want to use it on the business side, you need to add a font face statement in your CSS (it is not included in semi, because the font is slightly larger, and the default loading may affect the speed of the first screen of the business). It is up to the business to decide whether to use it or not.
+If you want to use it on the business side, you need to add a font face statement in your CSS (it is not included in Semi, because the font is slightly larger, and the default loading may affect the speed of the first screen of the business). It is up to the business to decide whether to use it or not.
 
 ```css
 @font-face {
@@ -199,7 +199,7 @@ It is used to describe the sequence of interface elements
 
 ## Variables not yet supported
 
-Currently, semi does not support global variables in the following categories. If you have related requirements, you can give feedback through issue and describe your expected needs in detail.
+Currently, Semi does not support global variables in the following categories. If you have related requirements, you can give feedback through issue and describe your expected needs in detail.
 
 **Line height**
 

content/basic/tokens/index.md

@@ -144,7 +144,7 @@ brief: Semi Design Tokens
 
 应用中各级文本使用的字体，为减少打包体积，默认英文字体 Inter 需要单独引入
 
-业务侧如果想使用，需要在你的css中增加font-face声明（不自带在Semi中，是由于该字体略大，默认加载可能会影响业务首屏速度），由业务自行决定是否需要使用
+业务侧如果想使用，需要在你的 CSS 中增加font-face声明（不自带在Semi中，是由于该字体略大，默认加载可能会影响业务首屏速度），由业务自行决定是否需要使用
 
 ```css
 @font-face {

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

@@ -46,7 +46,7 @@ function Demo() {
 
 ### Text
 
-Text component has different built-in styles. You could also pass `icon` to use the build-in styles for icon. Different from passing icon to children, using `icon` for link will have no underline in compliance with Semi design principles.
+Text component has different built-in styles. You could also pass `icon` to use the build-in styles for icon. Different from passing icon to children, using `icon` for link will have no underline in compliance with Semi Design principles.
 
 ```jsx live=true
 import React from 'react';

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

@@ -52,7 +52,7 @@ import { Banner, Layout, Button } from '@douyinfe/semi-ui';
               margin: '0 auto'
             }}
           >
-            Show Banner
+            { visible ? 'Hide Banner' : 'Show Banner' }
           </Button>
         </>
       );

content/feedback/banner/index.md

@@ -16,6 +16,7 @@ brief: 横幅通常用于标识全页的状态或通知等。它通常是常驻
 ```jsx import
 import { Banner } from '@douyinfe/semi-ui';
 ```
+
 ### 基本用法
 
 ```jsx live=true dir="column"
@@ -50,7 +51,7 @@ import { Banner, Layout, Button } from '@douyinfe/semi-ui';
               margin: '0 auto'
             }}
           >
-            Show Banner
+            { visible ? 'Hide Banner' : 'Show Banner' }
           </Button>
         </>
       );

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

@@ -237,29 +237,31 @@ import { Notification, Button } from '@douyinfe/semi-ui';
   let opts = {
     content: 'Not auto close',
     title: 'Hi',
-    duration: 0
+    duration: 0,
   };
-  const [id, setId] = useState([]);
+  const [ids, setIds] = useState([]);
   function show() {
     let id = Notification.info(opts);
-    setId(id);
+    setIds([...ids, id]);
   }
   function hide() {
-    Notification.close(id);
+    let idsTmp = [...ids];
+    Notification.close(idsTmp.shift());
+    setIds(idsTmp);
   }
   return (
     <>
-      <Button type='primary' onClick={show}>
+      <Button type="primary" onClick={show}>
         Show Notification
       </Button>
-       <br/>
-       <br/>
-      <Button type='primary' onClick={hide}>
+      <br />
+      <br />
+      <Button type="primary" onClick={hide}>
         Hide Notification
       </Button>
     </>
-  )
-}
+  );
+};
 ```
 
 ## API Reference

content/feedback/notification/index.md

@@ -230,13 +230,15 @@ import { Notification, Button } from '@douyinfe/semi-ui';
         title: 'Hi',
         duration: 0,
     };
-    const [id, setId] = useState([]);
+    const [ids, setIds] = useState([]);
     function show() {
         let id = Notification.info(opts);
-        setId(id);
+        setIds([...ids, id]);
     }
     function hide() {
-        Notification.close(id);
+        let idsTmp = [...ids];
+        Notification.close(idsTmp.shift());
+        setIds(idsTmp);
     }
     return (
         <>
@@ -251,6 +253,7 @@ import { Notification, Button } from '@douyinfe/semi-ui';
         </>
     );
 };
+
 ```
 
 ## API 参考

content/input/autocomplete/index.md

@@ -366,7 +366,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | defaultOpen | 是否默认展开下拉菜单 | boolean | false |
 | defaultValue | 默认值 | string | |
 | disabled | 是否禁用 | boolean | false |
-| dropdownClassName | 下拉列表的 css 类名 | string |  |
+| dropdownClassName | 下拉列表的 CSS 类名 | string |  |
 | dropdownStyle | 下拉列表的内联样式 | object |  |
 | emptyContent | data 为空时自定义下拉内容  | ReactNode | null | 1.16.0 |
 | getPopupContainer | 指定父级 DOM，下拉列表浮层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | () => HTMLElement | () => document.body |

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

@@ -392,7 +392,7 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 | checked        | Specify whether the current Checkbox is selected (it is invalid when used in Group)                     | boolean            | false   |
 | defaultChecked | Whether Checked by default (it is invalid when used in Group)                                           | boolean            | false   |
 | disabled       | Disabled state                                               | boolean            | false   |
-| extra          | Provide extra information <br/>**>= v0.25.0**                | reactNode          | -       |
+| extra          | Provide extra information <br/>**>= v0.25.0**                | ReactNode          | -       |
 | value          | The value that the checkbox represents in the CheckboxGroup  | any | - |
 | indeterminate  | Set to indeterminate state, style control only               | boolean            | false   |
 | onChange       | Callback function when change                                | function(e: Event) | -       |

content/input/checkbox/index.md

@@ -377,7 +377,7 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 | checked | 指定当前Checkbox是否选中（在Group中使用时无效） | boolean | false |
 | defaultChecked | 初始是否选中（在Group中使用时无效） | boolean | false |
 | disabled | 失效状态 | boolean | false |
-| extra | 副文本<br/>__v0.25.0后提供__ | reactNode | - |
+| extra | 副文本<br/>__v0.25.0后提供__ | ReactNode | - |
 | value | 该checkbox在CheckboxGroup中代表的value | any | - |
 | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
 | onChange | 变化时回调函数 | function(e:Event) | - |

content/input/datepicker/index.md

@@ -694,7 +694,7 @@ function Demo() {
 | disabledDate | 日期禁止判断方法，返回为 true 时禁止该日期，options 参数 1.9.0 后支持，rangeEnd 1.29 后支持 | (date: Date, options: { rangeStart: string, rangeEnd: string }) => boolean | () => false |  |
 | disabledTime | 时间禁止配置，返回值将会作为参数透传给 [`TimePicker`](/zh-CN/input/timepicker#API_参考) | (date: Date \| Date[], panelType?: string) => ({ <br/>disabledHours:() => number[], <br/>disabledMinutes: (hour: number) => number[], <br/>disabledSeconds: (hour: number, minute: number) => number[] }) | () => false | **0.36.0** |
 | disabledTimePicker | 是否禁止时间选择 | boolean |  | **0.32.0** |
-| dropdownClassName | 下拉列表的 css 类名 | string |  | **1.13.0** |
+| dropdownClassName | 下拉列表的 CSS 类名 | string |  | **1.13.0** |
 | dropdownStyle | 下拉列表的内联样式 | object |  | **1.13.0** |
 | endDateOffset | type 为 dateRange 时，设置单击选择范围的结束日期 | (selectedDate?: Date) => Date; | - | **1.10.0** |
 | format | 在输入框内展现的日期串格式 | string | 与 type 对应：详见[日期时间格式](#日期时间格式) |  |

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

@@ -364,7 +364,7 @@ class App extends React.Component {
 | className | Class name | string |  |
 | defaultChecked | Checked by default | boolean | false |
 | disabled | Disable the radio | boolean | false |
-| extra | Extra information displayed <br/>**provided after v0.25.0** | reactNode | - |
+| extra | Extra information displayed <br/>**provided after v0.25.0** | ReactNode | - |
 | mode | In advanced mode, options can be clicked to uncheck, one of `advanced` | string | - |
 | style | Inline style | CSSProperties |  |
 | value | Compared based on value to determine whether the option is selected | any | - |

content/input/radio/index.md

@@ -320,7 +320,7 @@ class App extends React.Component {
 | className      | 样式类名                                                                | string            |        |
 | defaultChecked | 初始是否选中                                                             | boolean           | false  |
 | disabled       | 禁选单选框                                                              |boolean            | false    |
-| extra          | 副文本，只对type='default'生效<br/>**v0.25.0 后提供**                     | reactNode         | -      |
+| extra          | 副文本，只对type='default'生效<br/>**v0.25.0 后提供**                     | ReactNode         | -      |
 | mode           | 高级和普通模式，高级模式可以在 checked 时点击变成 unchecked，可选值 advanced   | string            | -      |
 | style          | 内联样式                                                                 | CSSProperties    |        |
 | value          | 根据 value 进行比较，判断是否选中                                          | any               | -      |

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

@@ -1361,7 +1361,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | --- | --- | --- | --- |
 | className | The CSS class name of the wrapper element | string |  |
 | disabled | Disabled | boolean | false |
-| label | Text displayed. Prioritize the label when rendering, take the child, value if not, and downgrade in turn | string\|reactNode |  |
+| label | Text displayed. Prioritize the label when rendering, take the child, value if not, and downgrade in turn | string\|ReactNode |  |
 | showTick | Whether to show the Icon of tick when option selected | boolean | true |
 | style | Inline Style | object |  |
 | value | Property value | string\|number |  |
@@ -1395,7 +1395,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
      Please check whether `remote={true}` is set. If remote is not set, the input value of the input box will be compared with the current optionList by default. If there is no match, no data will be displayed.  
      You can turn off matching filtering on the current local data by setting remote to true.
 
--   **Use jsx to declare Option, label is the content after i18n, fail to re-render after switching locale** When the children jsx method declares Options, because it is reactNode, it is impossible to use deepEqual to compare whether the content is updated (excessive performance consumption), so the key of children reactNode will be collected. When the key is unchanged, it is considered that Options have not occurred. Changes will not go through the process of re-collecting data. You can also use locale as part of the Option key.  
+-   **Use jsx to declare Option, label is the content after i18n, fail to re-render after switching locale** When the children jsx method declares Options, because it is ReactNode, it is impossible to use deepEqual to compare whether the content is updated (excessive performance consumption), so the key of children ReactNode will be collected. When the key is unchanged, it is considered that Options have not occurred. Changes will not go through the process of re-collecting data. You can also use locale as part of the Option key.  
     The problem can also be solved by using `optionList` to pass in. Because the key is relatively limited for the object form, isEqual is used inside Select to determine whether there is a change
 
 -   **Use jsx to declare Option, and fail to re-render after dynamically switching the disabled attribute**   

content/input/select/index.md

@@ -1421,7 +1421,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
      可以通过设置 remote 为 true 关闭对本地当前数据的匹配筛选。
 
 -   **使用jsx方式声明Option，label为i18n后的内容，切换locale后未能重新渲染**
-    -   children jsx方式声明Options时，由于是reactNode，不可能用deepEqual来做对比判断内容是否有更新（性能消耗过大），所以会收集children reactNode的key，当key不变时，就认为Options都没有发生变化，不会走重新收集数据的流程。你可以将locale也作为Option key的一部分。
+    -   children jsx方式声明Options时，由于是ReactNode，不可能用deepEqual来做对比判断内容是否有更新（性能消耗过大），所以会收集children ReactNode的key，当key不变时，就认为Options都没有发生变化，不会走重新收集数据的流程。你可以将locale也作为Option key的一部分。
     -   使用optionList方式传入，也可以解决问题。因为对于object形式传入，key相对有限，Select内部会使用isEqual来判断是否发生变化
 
 -   **使用jsx方式声明Option，动态切换disabled属性后未能重新渲染**

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

@@ -130,7 +130,7 @@ import { Slider } from '@douyinfe/semi-ui';
 
 
 ### Segmented Background
-To create a slider with segmented background, you could use css property `linear-gradient` for `railStyle` along with `onChange` to change background dynamically。
+To create a slider with segmented background, you could use CSS property `linear-gradient` for `railStyle` along with `onChange` to change background dynamically。
 ```jsx live=true
 import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';

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

@@ -134,7 +134,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 ### Prefix / Suffix
 
 You can pass the input box prefix through `prefix`, the input box suffix through `suffix`, for text or React Node.  
-The left and right padding is automatically brought when the content passed in by prefix and reactix is text or Icon. If it is a custom ReactNode, the left and right padding is 0.If necessary, you can set it in the reactNode you passed in.
+The left and right padding is automatically brought when the content passed in by prefix and reactix is text or Icon. If it is a custom ReactNode, the left and right padding is 0.If necessary, you can set it in the ReactNode you passed in.
 
 ```jsx live=true
 import React from 'react';

content/input/taginput/index.md

@@ -131,7 +131,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 ### 前缀 / 后缀
 
 可以通过 `prefix` 传入输入框前缀，通过 `suffix` 传入输入框后缀，可以为文本或者 ReactNode。  
-当 `prefix`、`suffix` 传入的内容为 string 或者 Icon 时，会自动带上左右间隔；若为自定义 ReactNode，则左右间隔为 0，如需可以在你传入的reactNode中自行设置。  
+当 `prefix`、`suffix` 传入的内容为 string 或者 Icon 时，会自动带上左右间隔；若为自定义 ReactNode，则左右间隔为 0，如需可以在你传入的 ReactNode中自行设置。  
 
 ```jsx live=true
 import React from 'react';

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

@@ -397,7 +397,7 @@ class CustomRenderDemo extends React.Component {
         super(props);
         this.state = {
             dataSource: Array.from({ length: 100 }, (v, i) => ({
-                label: `Haidilao Store ${i}`,
+                label: `Hdl Store ${i}`,
                 value: i,
                 disabled: false,
                 key: i,
@@ -491,7 +491,7 @@ class CustomRenderDemo extends React.Component {
         return (
             <section className="selected-panel">
                 <div className="panel-header sp-font">
-                    <div>Selected sync store: {selectedData.length}</div>
+                    <div>Selected: {selectedData.length}</div>
                     <Button theme="borderless" type="primary" onClick={onClear} size="small">
                         {clearText || 'Clear '}
                     </Button>
@@ -518,12 +518,14 @@ class CustomRenderDemo extends React.Component {
 
 ```scss
 .component-transfer-demo-custom-panel {
+
     .sp-font {
         color: rgba(var(--semi-grey-9), 1);
         font-size: 12px;
         font-weight: 500;
         line-height: 20px;
     }
+
     .empty {
         width: 100%;
         height: 100%;
@@ -531,78 +533,102 @@ class CustomRenderDemo extends React.Component {
         align-items: center;
         justify-content: center;
     }
+
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
-        background-color: rgba(22, 24, 35, 0.03);
+        background-color: rgba(22, 24, 35, .03);
+
         &-main {
             flex-grow: 1;
         }
+
         p {
             margin: 0 12px;
             flex-basis: 100%;
         }
+
         .panel-item-remove {
             cursor: pointer;
             color: var(--semi-color-primary);
         }
     }
+
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
+
         .panel-controls {
             margin: 10px 12px;
             font-size: 12px;
             line-height: 20px;
+
             .semi-button {
                 margin-left: 8px;
                 font-size: 12px;
             }
         }
+
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
+
     .selected-panel {
         width: 200px;
         height: 353px;
+
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, 0.16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }
@@ -625,7 +651,7 @@ class CustomRenderDragDemo extends React.Component {
         super(props);
         this.state = {
             dataSource: Array.from({ length: 100 }, (v, i) => ({
-                label: `Haidilao Store ${i}`,
+                label: `Hdl Store ${i}`,
                 value: i,
                 disabled: false,
                 key: i,
@@ -749,7 +775,7 @@ class CustomRenderDragDemo extends React.Component {
         return (
             <section className="selected-panel">
                 <div className="panel-header sp-font">
-                    <div>Selected sync store: {selectedData.length}</div>
+                    <div>Selected: {selectedData.length}</div>
                     <Button theme="borderless" type="primary" onClick={onClear} size="small">
                         {clearText || 'Clear '}
                     </Button>

content/input/transfer/index.md

@@ -520,12 +520,14 @@ class CustomRenderDemo extends React.Component {
 
 ```scss
 .component-transfer-demo-custom-panel {
+
     .sp-font {
         color: rgba(var(--semi-grey-9), 1);
         font-size: 12px;
         font-weight: 500;
         line-height: 20px;
     }
+
     .empty {
         width: 100%;
         height: 100%;
@@ -533,78 +535,102 @@ class CustomRenderDemo extends React.Component {
         align-items: center;
         justify-content: center;
     }
+
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
-        background-color: rgba(22, 24, 35, 0.03);
+        background-color: rgba(22, 24, 35, .03);
+
         &-main {
             flex-grow: 1;
         }
+
         p {
             margin: 0 12px;
             flex-basis: 100%;
         }
+
         .panel-item-remove {
             cursor: pointer;
             color: var(--semi-color-primary);
         }
     }
+
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
+
         .panel-controls {
             margin: 10px 12px;
             font-size: 12px;
             line-height: 20px;
+
             .semi-button {
                 margin-left: 8px;
                 font-size: 12px;
             }
         }
+
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
+
     .selected-panel {
         width: 200px;
         height: 353px;
+
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, 0.16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }

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

@@ -1277,7 +1277,7 @@ import { Tree } from '@douyinfe/semi-ui';
 You could use `renderFullLabel` for advanced rendering to render the entire option on you own.
 
 <Notice type="primary" title="Important">
-<div>If virtualized is set to true, be sure to apply `style` to targeted reactNode to correctly render virtualized list.</div>
+<div>If virtualized is set to true, be sure to apply `style` to targeted ReactNode to correctly render virtualized list.</div>
 </Notice>
 
 Here are some demos.

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

@@ -403,7 +403,7 @@ If you want to accurately set the time zone of a region, it is recommended to us
 
 ### FAQ
 
-- The ConfigProvider does not provide the function of global custom prefix classname. How to achieve similar requirements (for example, Semi is used in the SDK, and it is expected that the packaged dom style does not have the .semi-xx prefix, so as not to be affected by the host's global css)?
+- The ConfigProvider does not provide the function of global custom prefix classname. How to achieve similar requirements (for example, Semi is used in the SDK, and it is expected that the packaged dom style does not have the .semi-xx prefix, so as not to be affected by the host's global CSS)?
     - Since prefixCls needs to be consumed by the js/css of the component layer at the same time, Semi put this switch in the configuration item of webpack plugin, rather than as a configuration item of ConfigProvider.
     - If you use webpack, please configure it in the parameters of `SemiWebpackPlugin`
 

content/other/configprovider/index.md

@@ -73,7 +73,7 @@ function Demo(props = {}) {
 
 特殊组件：
 - Modal，Notification，Toast 的命令式调用需要通过 prop 传 `direction`。
-- 如果你想对有方向性的 Icon 做 RTL 国际化，需要自己单独进行处理。我们认为对 Icon 进行 RTL 会让它变得难以理解和维护。其他组件内的 icon semi 已经做了 RTL 适配。
+- 如果你想对有方向性的 Icon 做 RTL 国际化，需要自己单独进行处理。我们认为对 Icon 进行 RTL 会让它变得难以理解和维护。其他组件内的 icon Semi 已经做了 RTL 适配。
 - Table 的固定列或表头，树形数据，虚拟化表格暂不支持 RTL，Slider 暂不支持 RTL
 
 
@@ -404,7 +404,7 @@ function Demo(props = {}) {
 
 ### FAQ
 
-- ConfigProvider中没有提供全局自定义prefix classname的功能，有类似需求如何实现（例如SDK中使用了Semi，期望打包的dom样式不带.semi-xx前缀，以免被宿主的全局css影响）？
+- ConfigProvider中没有提供全局自定义prefix classname的功能，有类似需求如何实现（例如SDK中使用了Semi，期望打包的dom样式不带.semi-xx前缀，以免被宿主的全局 CSS 影响）？
     - 由于 prefixCls 需要同时被组件层的 js/css 消费，Semi 将此开关放在了webpack plugin的配置项中，而不是作为ConfigProvider的配置项。
     - 如果你使用webpack，请在`SemiWebpackPlugin`的参数中进行配置
 

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

@@ -136,7 +136,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0 |
 | motion | Toggle whether to have animation | object \| boolean | `true` | 1.4.0 |
 | expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0 |
-| style | Inline css style | CSSProperties | {} | - |
+| style | Inline CSS style | CSSProperties | {} | - |
 | onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | - |
 
 ### Collapse.Panel
@@ -147,7 +147,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | header | Panel head content | ReactNode | - | - ||
 | itemKey | Required and must be unique, used to match `activeKey`, `defaultActiveKey` | string | - ||
 | reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | string \| number |-| 1.5.0 |
-| style | inline css style | CSSProperties | - ||
+| style | inline CSS style | CSSProperties | - ||
 
 ## Design Tokens
 

content/show/collapse/index.md

@@ -135,7 +135,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | bool | `false` | 0.25.0 |
 | motion | 是否开启动画 | object \| boolean | `true` | 1.4.0 |
-| style | 内联 css 样式 | CSSProperties | {} | - |
+| style | 内联 CSS 样式 | CSSProperties | {} | - |
 | onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | - |
 
 ### Collapse.Panel
@@ -147,7 +147,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | header    | 面板头内容                                                            | ReactNode      | 无     ||
 | itemKey   | 必填且唯一，选中状态匹配 `activeKey`，`defaultActiveKey`              | string                 | 无     ||
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | string \| number |无| 1.5.0  |
-| style     | 内联 css 样式                                                         | CSSProperties                 |  无  |    |
+| style     | 内联 CSS 样式                                                         | CSSProperties                 |  无  |    |
 
 ## 设计变量
 

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

@@ -278,7 +278,7 @@ Version：Major.Minor.Patch
         - Fix the problem that the button type Radio is not aligned, add align-item: middle
     - Design Token
         - PopConfirm add new component sass token: $radius-popconfirm-popover , you can use it to modify border-radius of popConfirm
-        - Add new css global token: --border-radius，can be used to create full-size rounded corners, such as capsule labels, etc.
+        - Add new CSS global token: --border-radius，can be used to create full-size rounded corners, such as capsule labels, etc.
 - 【Fix】
     - Table
         - Fixed the problem of incorrect rendering of selectable cells disabled with controlled rowSelection
@@ -518,7 +518,7 @@ Version：Major.Minor.Patch
   - Select
     - Fix the problem that ref.selectAll does not take effect when Select onChangeWithObject is true; fix the problem that onChange is not triggered after calling ref.selectAll 
     - Fix the problem of updating the optionList after Select search and changing the number of options, in some cases directly hitting Enter will throw Uncaught TypeError: Cannot read property'_inputCreateOnly' of undefined
-  - Fixed the problem that propType check warning was thrown when the Description data key was passed into reactNode
+  - Fixed the problem that propType check warning was thrown when the Description data key was passed into ReactNode
 - 【Style】
   - Radio and Checkbox border color are aligned with the design draft, unified update to var(--color-text-3) 
   - Fix the incorrect color of Radio disabled border 
@@ -590,7 +590,7 @@ Version：Major.Minor.Patch
 - 【Style】
   - Display ToolTip when TagInput tag is too long and truncated 
   - Add 2px margin between title and description in Banner non-full screen mode 
-  - Form label font-weight update from 700 to 600, the corresponding scss variable font-weight-bold is also adjusted from 700 to 600 
+  - Form label font-weight update from 700 to 600, the corresponding Scss variable font-weight-bold is also adjusted from 700 to 600 
 
 
 #### 🎉 1.19.0 (2021-04-02)
@@ -728,7 +728,7 @@ Version：Major.Minor.Patch
   - Fix the problem that when selecting autoFocus, directly clicking on the external out of focus does not trigger the onBlur event 
   - Fix Table functional component rowSelection failure when using literal value 
 - 【Style】
-  - Solve the problem that Form.Section does not reference css variables and displays abnormal in dark mode
+  - Solve the problem that Form.Section does not reference CSS variables and displays abnormal in dark mode
   - Description Add an explicit line-height declaration to prevent inheritance when the parent sets the line-height
 - 【Chore】
   - Update Form autoScrollToError type definition to supplement object type
@@ -1194,7 +1194,7 @@ Version：Major.Minor.Patch
     -   Fix the problem that `Table` still displays selected columns when rowSelection is false 
     -   Fix `Tooltip`'s getPopupContainer using configProvider is invalid 
 -   【Performance】
-    -   Optimized displayName of withField HOC to facilitate positioning related elements in react devtool 
+    -   Optimized displayName of withField HOC to facilitate positioning related elements in React devtool 
 -   【Style】
     -   `Modal` imperative content and header add 8px spacing
     -   Fix the center alignment problem of `Banner` close button
@@ -1271,7 +1271,7 @@ Version：Major.Minor.Patch
         -   Field Props add
             -   `helpText` placement prompt information (share the same block display with the verification result, when both have values, the verification result is displayed first)
             -   `extraText` is used to place additional prompt information, often displayed and will not Overwritten by verification result
-        -   error message supports reactNode (return reactNode in validate or rules in version 0.x will be considered to pass verification, and return to reactNode after version 1.0 will be the same as the return of string, which is regarded as verification failure)
+        -   error message supports ReactNode (return ReactNode in validate or rules in version 0.x will be considered to pass verification, and return to ReactNode after version 1.0 will be the same as the return of string, which is regarded as verification failure)
     -   InputNumber
         -   New: `hideButtons` is used to control the hiding of the" increase / decrease "buttons, ** discard the original suffix = {null} method **.
     -   List
@@ -1339,7 +1339,7 @@ Version：Major.Minor.Patch
         -   Automatically added when error message is displayed ❌ icon (if not required, you can close it with showValidateIcon)
     -   Input prefix / suffix / addonBefore / addonAfter style adjustment 
         -   prefix / suffix is no longer processed as Icon when passing in a string, and is directly mapped into a string; Icon needs to be passed in the form of React.Node
-        -   there will be no padding when passing in a custom reactNode, only the String and Icon have their own padding
+        -   there will be no padding when passing in a custom ReactNode, only the String and Icon have their own padding
     -   InputNumber
         -"Up / Down" button is adjusted to the right of Input
     -   Modal
@@ -2049,7 +2049,7 @@ Version：Major.Minor.Patch
 #### 0.16.0
 
 -   [Feat] Add the `TimeLine` component
--   [feat] semi global variable update
+-   [feat] Semi global variable update
 -   [feat] `Back Top` component adds animation, adds character attribute
 -   [Feat] `Modal` component adds centered properties and updates the positioning of the default style
 -   [feat] `Cascader` component supports dynamic update subnodes
@@ -2069,7 +2069,7 @@ Version：Major.Minor.Patch
 
 #### 0.15 .3
 
--   [style] semi adds global font font-family statement
+-   [style] Semi adds global font font-family statement
 
 #### 0.15.1
 
@@ -2196,7 +2196,7 @@ Version：Major.Minor.Patch
 
 #### 0.4.0
 
--   [feat] semi supports dark mode
+-   [feat] Semi supports dark mode
 
 #### 0.3.0
 

content/start/changelog/index.md

@@ -278,7 +278,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
         - 修复按钮类型的 Radio 默认背景色和设计稿的差异，从 var(--color-fill-1) 改为 var(--color-fill-0) 
         - 修复按钮类型的 Radio 不对齐的问题，添加 align-item: middle
     - Design Token
-        - Popconfirm 新增 $radius-popconfirm-popover SCSS 变量，通过配置此变量可以自定义本组件border-radius
+        - Popconfirm 新增 $radius-popconfirm-popover Scss 变量，通过配置此变量可以自定义本组件border-radius
         - 新增 --border-radius-full（值为9999px） CSS 变量，可用于创建全尺寸圆角，如胶囊标签等
 - 【Fix】
     - Table
@@ -530,7 +530,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
   - Select  
     - 修复 Select onChangeWithObject 为 true 时，调用ref.selectAll不生效问题；修复调用ref.selectAll后未触发onChange的问题 
     - 修复 Select 搜索后更新optionList将选项个数变更后，某些情况下直接敲击回车抛出 Uncaught TypeError: Cannot read property '_inputCreateOnly' of undefined 的问题 
-  - 修复 Description data key传入reactNode时，抛出propType check warning的问题
+  - 修复 Description data key传入ReactNode时，抛出propType check warning的问题
 - 【Style】
   - Radio、Checkbox border color 与设计稿对齐，统一更新为 var(--color-text-3) 
   - 修复 Radio disabled border 颜色不正确问题 
@@ -602,7 +602,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 - 【Style】
   - TagInput 标签过长发生截断时，自动显示 ToolTip 
   - Banner 非全屏模式下 title 与 description 添加 2px 间距 
-  - Form label font-weight 更新 700 => 600，相对应的 scss 变量 font-weight-bold 也从 700 调整为 600 
+  - Form label font-weight 更新 700 => 600，相对应的 Scss 变量 font-weight-bold 也从 700 调整为 600 
 
 
 #### 🎉 1.19.0 (2021-04-02)
@@ -741,7 +741,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - 修复Select autoFocus时，直接点击外部失焦未触发onBlur事件的问题 
     - 修复 Table 函数式组件 rowSelection 在使用字面量方式时选择失效问题 
 - 【Style】
-    - 解决Form.Section未引用css变量，在暗色模式下显示不正常的问题
+    - 解决Form.Section未引用 CSS 变量，在暗色模式下显示不正常的问题
     - Description增加显式line-height声明，防止父级设置了line-height时被继承
 - 【Chore】
     - 更新 Form autoScrollToError 类型定义，补充 object 类型
@@ -1125,7 +1125,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 -   【Fix】
     -   修复了 Form.TimePicker 点击清空按钮后未触发 validator 在 1.3 版本中复现的问题
     -   修改了 DatePicker 和 TimePicker onBlur 事件的触发时机，input blur => panel close 
-    -   修复 Tree 组件 label 中的所有 icon 都会加上右 margin 的 css 选择器的样式问题
+    -   修复 Tree 组件 label 中的所有 icon 都会加上右 margin 的 CSS 选择器的样式问题
 -   【Docs】
     -   更新 Table 组件的文档，修正部分 props 默认值描述错误的问题
 
@@ -1156,16 +1156,16 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 -   【Fix】
     -   修复 `Tree` TriggerRender 多选模式下 value 值始终为空数组的问题
 -   【Perf】
-    -   修复 sass-loader 9.x scss 变量未字符串化的 warning 
+    -   修复 sass-loader 9.x Scss 变量未字符串化的 warning 
 
 #### 🎉 1.2.2 (2020-07-26)
 
 -   【Perf】
-    -   优化 `Icon` 中的 svg 动画为 css 动画，修复当页面引入有 svg 动画的 `Icon` 或者全量引入（默认）时页面不断重绘的问题。如有单独使用 loading `Icon` 的需要添加 css 动画
+    -   优化 `Icon` 中的 svg 动画为 CSS 动画，修复当页面引入有 svg 动画的 `Icon` 或者全量引入（默认）时页面不断重绘的问题。如有单独使用 loading `Icon` 的需要添加 CSS 动画
     -   `OverflowList` 不再对渲染函数的更新做状态重置，如需重置可以通过更新 key 刷新组件
     -   优化 `Typography` ellipsis 模式下文本动态更新时进行状态重置
 -   【Fix】
-    -   修复 `Button` height css 被移除，导致父级为 `display:flex` 时，高度不对的问题
+    -   修复 `Button` height CSS 被移除，导致父级为 `display:flex` 时，高度不对的问题
     -   修复 `Descriptions` row 不同尺寸下的样式丢失问题
 
 #### 🎉 1.2.0-beta.0 (2020-07-17)
@@ -1210,7 +1210,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     -   修复 `Table` 在 rowSelection 为 false 时依旧显示选择列的问题 
     -   修复 `Tooltip` 使用 configProvider 的 getPopupContainer 无效的问题 
 -   【Performance】
-    -   优化 withField HOC 的 displayName，方便在 react devtool 中定位相关元素 
+    -   优化 withField HOC 的 displayName，方便在 React devtool 中定位相关元素 
 -   【Style】
     -   `Modal` 命令式 content 与 header 增加 8px 的 spacing
     -   修复 `Banner` 关闭按钮的居中对齐问题
@@ -1286,7 +1286,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
         -   Field Props 增加
             -   `helpText` 放置提示信息（与校验结果共用同一区块展示，两者均有值时，优先展示校验结果）
             -   `extraText` 用于放置额外的提示信息，常显且不会被校验结果覆盖
-        -   错误信息支持 reactNode（0.x 版本中在 validate 或者 rules 中 return reactNode 会被认为校验通过，1.0 版本后返回 reactNode 会与返回 string 一样，被视为校验失败）
+        -   错误信息支持 ReactNode（0.x 版本中在 validate 或者 rules 中 return ReactNode 会被认为校验通过，1.0 版本后返回 ReactNode 会与返回 string 一样，被视为校验失败）
     -   InputNumber
         -   新增: `hideButtons`用于控制隐藏“增/减”按钮，**废弃原先的 suffix={null} 的方式**。
     -   List
@@ -1354,7 +1354,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
         -   **错误信息展示时自动添加 ❌ icon（如不需要，可以通过 showValidateIcon 关闭）**
     -   **Input prefix/suffix/addonBefore/addonAfter 样式调整** 
         -   prefix/suffix 传入字符串时不再处理为 Icon，直接映射成字符串；Icon 需要通过 React.Node 的形式传入
-        -   传入自定义 reactNode 时不会有 padding，只有 String、Icon 时有自带的 padding
+        -   传入自定义 ReactNode 时不会有 padding，只有 String、Icon 时有自带的 padding
     -   InputNumber
         -   **“上/下”按钮调整到 Input 右侧**
     -   Modal
@@ -2017,7 +2017,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 -   【New Component】
     -  新增 `TimeLine` 组件
 -   【Feat】
-    -  semi 全局变量更新
+    -  Semi 全局变量更新
     -  `BackTop` 组件增加动画，增加 duration 属性
     -  `Modal` 组件增加 centered 属性，并且更新默认样式的定位
     -  `Cascader` 组件支持动态更新子节点
@@ -2029,7 +2029,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     -  `Form` setValues 时触发多次 onChange、onValuesChange 改为只触发一次
 -   【Style】
     -  `Navigation` 组件样式优化，功能优化
-    -  semi 增加全局字体 font-family 的声明
+    -  Semi 增加全局字体 font-family 的声明
 -   【Perf】
     -  `Select`、`Tooltip`、`Popover` 等浮层动效优化与调整
     -  `Table` 组件底层优化，滚动错位问题修复
@@ -2096,7 +2096,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 #### 0.5.0 (2019-08-05)
 -   【Feat】
-    -  🎉🎉 semi 支持暗色模式 🎉🎉
+    -  🎉🎉 Semi 支持暗色模式 🎉🎉
     -  `ScrollList` 支持卷轴滚动以及无限循环滚动模式
 -   【Style】
     - 优化 `TimePicker` 组件样式

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

@@ -33,9 +33,9 @@ After downloading the theme, publish the npm package by yourself. (Temporary beh
 
 Then you need to specify the theme to be used in the configuration file.
 
-### When using Webpack as a build tool
+### When using webpack as a build tool
 
-For users who use Webpack, add the `theme` parameter to SemiWebpackPlugin.
+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`
 

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

@@ -41,9 +41,9 @@ You can submit your issue to describe your needs. Issue Label Please select `Fea
 
 Welcome to ours [Customer Service Lark Group](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe) For a consultation question.
 
-#### Is the style of Semi based on SCSS or LESS? Why not use CSS Module?
+#### Is the style of Semi based on Scss or Less? Why not use CSS Module?
 
-Our style is based on SCSS, and we also use CSS Variable as the color wheel variable. Color variables and common variables are mounted under `body`. CSS Module is not used because we want to have a fixed className and retain the ability to modify / override Semi style for our users(although it is not recommended, it is really needed sometime).
+Our style is based on Scss, and we also use CSS Variable as the color wheel variable. Color variables and common variables are mounted under `body`. CSS Module is not used because we want to have a fixed className and retain the ability to modify / override Semi style for our users(although it is not recommended, it is really needed sometime).
 
 #### Semi's default theme style does not match the positioning of our system. Can i configure another theme?
 

content/start/faq/index.md

@@ -18,7 +18,7 @@ order: 7
 
 #### Semi是否支持Tree Shaking
 -  Semi执行发包时，发布的其实是esModule源码，因此天然支持tree shaking，不需要再进行额外的配置。
- -  组件的SCSS也是由组件的index.(j|t)sx负责import的，因此样式也会shaking。简单来说，只有你使用的组件会被打包
+ -  组件的 Scss 也是由组件的index.(j|t)sx负责import的，因此样式也会shaking。简单来说，只有你使用的组件会被打包
 
 #### 为什么 defaultValue、defaultXXX 不起作用？
 
@@ -34,9 +34,9 @@ Semi 组件中，所有的 defaultValue、defaultXXX 传参只会在组件被 mo
 
 Semi 目前支持 14 种语言，具体使用可以查阅 [Semi·LocaleProvider](/zh-CN/other/locale)
 
-#### Semi 的样式是基于 SCSS 还是 LESS？为什么不用 CSS Module？
+#### Semi 的样式是基于 Scss 还是 Less ？为什么不用 CSS Module？
 
-我们的样式基于 SCSS，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。
+我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。
 不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
 
 #### Semi 的默认的主题风格跟我们系统的定位不符，可以配置另外的主题吗？
@@ -56,7 +56,7 @@ Semi 目前支持 14 种语言，具体使用可以查阅 [Semi·LocaleProvider]
 欢迎进我们的 [客服飞书 Lark 群](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe) 进行咨询提问。
 
 #### 希望自定义滚动条的样式？
-可以使用 `.semi-light-scrollbar` 类名，会对 webkit (chrome/safari) 的浏览器应用 semi 的滚动条样式。该类名放在最外层的DOM元素即可，会对所有子元素生效。注：使用了通配符，可能会对性能有影响。其他浏览器可以参考是否有相关的css属性支持滚动条的样式定制。
+可以使用 `.semi-light-scrollbar` 类名，会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的DOM元素即可，会对所有子元素生效。注：使用了通配符，可能会对性能有影响。其他浏览器可以参考是否有相关的css属性支持滚动条的样式定制。
 
 #### 更多的FAQ
 请查阅 https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug

content/start/getting-started/index.md

@@ -41,7 +41,7 @@ class Demo extends React.Component {
 
 > 我们并不推荐直接使用已构建文件，这样会全量引入所有组件，无法实现按需加载。但如果确实有非构建场景的需求，可以通过以下方式引用
 
-在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 SemiUI
+在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 `SemiUI`
 
 1. 请确保你已提前引入 react 以及 react-dom
 2. 引入 JS 文件，以下示例 URL 中 2.0.0 为 version 标识，希望使用不同版本 Semi 时，将 version 中对应的值替换即可（注意构建文件仅在 v1.3.0 后开始提供）

content/start/introduction/index.md

@@ -116,7 +116,7 @@ Foundation 层同样基于 MIT 协议开源，我们会在未来的迭代中，
 
 ## 兼容性
 
--   现代浏览器（Semi 的暗色模式/样式文件依赖于 css variable，最低版本要求为 edge，ie11 及以下均不支持）
+-   现代浏览器（Semi 的暗色模式/样式文件依赖于 CSS variable，最低版本要求为 edge，ie11 及以下均不支持）
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
 | --- | --- | --- | --- | --- | --- |

content/start/update-to-v2/index-en-US.md

@@ -95,7 +95,7 @@ If you use Semi plug-ins, such as `@ies/semi-ui-plugin-webpack` or `@ies/semi-ui
 
 #### Icon/Illustration use adjustment
 
-In the 0.x/1.x version of Semi, we strongly rely on svg-sprite-loader to convert svg files to svg symbols and insert body at runtime, so that we can use Icon icons only through < Icon type = 'xxx'/> in the form of string. While convenient to use, it also brings some problems: icon is introduced in full by default and cannot be shaken; svg-sprite-loader is strongly bound to Webpack and cannot easily support Rollup, Vite, Snowpack and other construction schemes. Therefore, in 2.0, we removed the strong binding with svg-sprite-loader, and the consumption mode of Icon needs to be changed:
+In the 0.x/1.x version of Semi, we strongly rely on svg-sprite-loader to convert svg files to svg symbols and insert body at runtime, so that we can use Icon icons only through < Icon type = 'xxx'/> in the form of string. While convenient to use, it also brings some problems: icon is introduced in full by default and cannot be shaken; svg-sprite-loader is strongly bound to webpack and cannot easily support Rollup, Vite, Snowpack and other construction schemes. Therefore, in 2.0, we removed the strong binding with svg-sprite-loader, and the consumption mode of Icon needs to be changed:
 Icon usage adjustment:
 
 ```jsx
@@ -140,13 +140,13 @@ import { IllustrationConstruction } from '@douyinfe/semi-illustrations';
 ## FAQ
 
 ### Why has the reference path changed?
-In 1.x, Semi uses source code publishing. It will not perform precompilation before performing npm publishing. The scss and jsx/js of the component library will be compiled together with the business code. In 2.0, precompilation was performed before npm publishing. For ordinary users, precompilation can make Semi work out of the box: there is no need for users to compile Semi source files, and there is no need to introduce Semi plug-ins when using them. Since the compiled results are under lib/es, the reference path of the interface and language package has changed, but for component references, you do not need to change the original reference path (because package.json main attribute points to lib/es/index.js).
+In 1.x, Semi uses source code publishing. It will not perform precompilation before performing npm publishing. The Scss and jsx/js of the component library will be compiled together with the business code. In 2.0, precompilation was performed before npm publishing. For ordinary users, precompilation can make Semi work out of the box: there is no need for users to compile Semi source files, and there is no need to introduce Semi plug-ins when using them. Since the compiled results are under lib/es, the reference path of the interface and language package has changed, but for component references, you do not need to change the original reference path (because package.json main attribute points to lib/es/index.js).
 
 ### The project wants to upgrade to 2.0, but the Semi material is used in the project. The material is based on 1.x Semi. Can it be used at the same time?
 Since Semi 2.0 does not have the same package name as 1.x, they will actually be two separate packages that do not affect each other.
 
 ### Why do CSS variables add semi prefixes?
-Due to the increasing number of business micro front-end application scenarios, in order to avoid naming conflicts with other library css variables and avoid the problem of mutual influence of styles.
+Due to the increasing number of business micro front-end application scenarios, in order to avoid naming conflicts with other library CSS variables and avoid the problem of mutual influence of styles.
 
 ### Why is the local dark/bright mode changed from add id to add class?
 ID is semantically globally unique, while class does not. Using class is more in line with the specification.

content/start/update-to-v2/index.md

@@ -140,7 +140,7 @@ import { IllustrationConstruction } from '@douyinfe/semi-illustrations';
 
 ## FAQ
 ### 为什么引用路径发生了变化？
-在 1.x 中，Semi 采用源码发布的方式，执行 npm publish 前不会执行预编译，组件库的 scss、jsx/js 会跟随业务代码一同进行编译，2.0 中 npm publish前进行了预编译，对于普通用户来说，预编译可以让 Semi 做到开箱即用：无需让用户编译 Semi 源文件，无需在使用时引入 Semi 插件。由于编译后的结果在 lib/es 下，因此接口和语言包的引用路径发生了变化，但对于组件引用，你无需改变原有的引用路径（因为 package.json main 属性指向 lib/es/index.js）。
+在 1.x 中，Semi 采用源码发布的方式，执行 npm publish 前不会执行预编译，组件库的 Scss、jsx/js 会跟随业务代码一同进行编译，2.0 中 npm publish前进行了预编译，对于普通用户来说，预编译可以让 Semi 做到开箱即用：无需让用户编译 Semi 源文件，无需在使用时引入 Semi 插件。由于编译后的结果在 lib/es 下，因此接口和语言包的引用路径发生了变化，但对于组件引用，你无需改变原有的引用路径（因为 package.json main 属性指向 lib/es/index.js）。
 ### 项目希望升级至 2.0，但项目中使用了 Semi 物料，物料基于 1.x Semi，是否可同时使用？
 由于Semi 2.0的包名与1.x并不相同，所以实际上他们会成了两个单独的包，互不影响。
 

packages/semi-animation-react/src/Transition.tsx

@@ -158,7 +158,7 @@ export default class Transition extends Component<TransitionProps, TransitionSta
         return (
             <Animation {...restProps} force from={from} to={to} onRest={this.onRest} onStart={this.onStart}>
                 {
-                    (props: any) => (
+                    (props: Record<string, any>) => (
                         // eslint-disable-next-line no-nested-ternary
                         typeof children === 'function' ?
                             children(props) :

packages/semi-foundation/slider/foundation.ts

@@ -71,7 +71,7 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
     isEventFromHandle: (e: any) => boolean;
     getOverallVars: () => OverallVars;
     updateDisabled: (disabled: SliderState['disabled']) => void;
-    transNewPropsToState: <K extends keyof SliderState>(stateObj: Pick<SliderState, K>, callback: () => void) => void;
+    transNewPropsToState: <K extends keyof SliderState>(stateObj: Pick<SliderState, K>, callback?: () => void) => void;
     notifyChange: (callbackValue: number | number[]) => void;
     setDragging: (value: boolean[]) => void;
     updateCurrentValue: (value: SliderState['currentValue']) => void;
@@ -447,7 +447,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
             resultState = disableState;
         }
         if (resultState) {
-            this._adapter.transNewPropsToState(resultState, () => this._adapter.onHandleUpAfter());
+            this._adapter.transNewPropsToState(resultState);
 
         }
     };

packages/semi-foundation/treeSelect/foundation.ts

@@ -241,10 +241,6 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return this.getProp('expandedKeys');
     }
 
-    _isFilterable() {
-        return Boolean(this.getProp('filterTreeNode')); // filter can be boolean or function
-    }
-
     _isSelectToClose() {
         return !this.getProp('expandAction');
     }
@@ -402,9 +398,6 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.closeMenu();
         this._adapter.unregisterClickOutsideHandler();
         this._notifyBlur(e);
-        if (this._isFilterable()) {
-            this.clearInput();
-        }
         if (this.getProp('motionExpand')) {
             this._adapter.updateState({ motionKeys: new Set([]) } as any);
         }

packages/semi-scss-compile/README.md

@@ -1,4 +1,4 @@
-> A scss compile tool for Semi Design
+> A Scss compile tool for Semi Design
 
 ## Description
 

packages/semi-ui/collapsible/index.tsx

@@ -2,7 +2,7 @@
 import { Transition } from '@douyinfe/semi-animation-react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
 import { cssClasses } from '@douyinfe/semi-foundation/collapsible/constants';
 import { Motion } from '../_base/base';
 import getMotionObjFromProps from '@douyinfe/semi-foundation/utils/getMotionObjFromProps';
@@ -55,6 +55,7 @@ const Collapsible = (props: CollapsibleProps) => {
         if (currHeight && maxHeight !== currHeight) {
             setMaxHeight(currHeight);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [left, reCalcKey, maxHeight]);
 
     const resetHeight = () => {
@@ -65,6 +66,10 @@ const Collapsible = (props: CollapsibleProps) => {
 
     const shouldKeepDOM = () => keepDOM || collapseHeight !== 0;
 
+    const defaultMaxHeight = useMemo(() => {
+        return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight
+    }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
+
     const renderChildren = (transitionStyle: Record<string, any>) => {
         const transition =
             transitionStyle && typeof transitionStyle === 'object' ?
@@ -73,10 +78,15 @@ const Collapsible = (props: CollapsibleProps) => {
 
         const wrapperstyle = {
             overflow: 'hidden',
-            maxHeight: (isOpen || !shouldKeepDOM() && !motion) ? 'none' : collapseHeight,
+            maxHeight: defaultMaxHeight,
             ...style,
             ...transition,
         };
+
+        if (isFirst) {
+            wrapperstyle.maxHeight = defaultMaxHeight;
+        }
+
         const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
         return (
             <div style={wrapperstyle} className={wrapperCls} ref={ref}>
@@ -143,4 +153,4 @@ Collapsible.defaultProps = {
     collapseHeight: 0
 };
 
-export default Collapsible;
+export default Collapsible;

packages/semi-ui/progress/index.tsx

@@ -153,7 +153,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
 
         return (
             <div className={classNames.wrapper} style={style}>
-                <svg className={classNames.svg} height={width} width={width}>
+                <svg key={size} className={classNames.svg} height={width} width={width}>
                     <circle
                         strokeDashoffset={0}
                         strokeWidth={strokeWidth}

packages/semi-ui/treeSelect/index.tsx

@@ -1125,6 +1125,14 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         return key;
     };
 
+    /* Event handler function after popover is closed */
+    handlePopoverClose = isVisible => {
+        const { filterTreeNode } = this.props;
+        if (isVisible === false && Boolean(filterTreeNode)) {
+            this.foundation.clearInput();
+        }
+    }
+
     renderTreeNode = (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => {
         const { data } = treeNode;
         // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -1281,6 +1289,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 autoAdjustOverflow={autoAdjustOverflow}
                 mouseLeaveDelay={mouseLeaveDelay}
                 mouseEnterDelay={mouseEnterDelay}
+                onVisibleChange={this.handlePopoverClose}
             >
                 {selection}
             </Popover>

packages/semi-webpack/README.md

@@ -1,9 +1,9 @@
-> A webpack plugin for SemiDesign to custom theme、replace prefix and so on.
+> A webpack plugin for Semi Design to custom theme、replace prefix and so on.
 
 ## Introduction
-The plugin is designed for SemiDesign, support webpack4 and webpack5, provides two major abilities:
+The plugin is designed for Semi Design, support webpack4 and webpack5, provides two major abilities:
 - Custom theme
-- Replace prefix of css selector 
+- Replace prefix of CSS selector 
 
 ## Usage 
 
@@ -17,20 +17,20 @@ yarn add --dev @douyinfe/semi-webpack-plugin
 ```
 
 ### Custom theme
-SemiDesign uses the scss variables to extract thousands of Design Tokens. You can replace Token through this plugin to achieve theme customization. [More info](https://semi.design/dsm/)
+Semi Design uses the Scss variables to extract thousands of Design Tokens. You can replace Token through this plugin to achieve theme customization. [More info](https://semi.design/dsm/)
 
 You can custom theme through three ways:
-- NPM package for custom theme
-- Local scss file in your project
+- npm package for custom theme
+- Local Scss file in your project
 - Pass key-value pair parameters to plugin 
 Priority from low to high.
-#### Through NPM package 
+#### Through npm package 
 
-In order to use the NPM package, you need to customize the theme through [Semi Design System](https://semi.design/dsm/).After finishing the customization, Semi DSM will generate an NPM package for you, and then you can use it like this.
+In order to use the npm package, you need to customize the theme through [Semi Design System](https://semi.design/dsm/).After finishing the customization, Semi DSM will generate a npm package for you, and then you can use it like this.
 
 ``` js
 // webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
 
 module.exports = {
     // ...
@@ -43,7 +43,7 @@ module.exports = {
 };
 ```
 
-#### Through local scss file
+#### Through local Scss file
 
 You can check which tokens can be customized on the [Semi WebSite](https://semi.design/zh-CN/basic/tokens).
 
@@ -57,7 +57,7 @@ $font-size-small: 16px;
 ``` js
 // webpack.config.js
 const path = require('path');
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
 
 module.exports = {
     // ...
@@ -72,7 +72,7 @@ module.exports = {
 #### Through parameters
 ``` js
 // webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
 
 module.exports = {
     // ...
@@ -86,12 +86,12 @@ module.exports = {
 };
 ```
 
-### Replace prefix of css selector
-The css selectors used by SemiDesign is prefixed with semi by default(e.g, `.semi-button`).You can replace the prefix through this plugin.
+### Replace prefix of CSS selector
+The CSS selectors used by Semi Design is prefixed with semi by default(e.g, `.semi-button`).You can replace the prefix through this plugin.
 
 ``` js
 // webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin');
+const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
 
 module.exports = {
     // ...
@@ -104,7 +104,7 @@ module.exports = {
 };
 ```
 
-Then you get the replaced css selectors(e.g, `.custom-button`).
+Then you get the replaced CSS selectors(e.g, `.custom-button`).
 
 ## Api
 ### new SemiPlugin(options)
@@ -113,13 +113,13 @@ Then you get the replaced css selectors(e.g, `.custom-button`).
 
 Type: `String`
 
-The prefix of css selector.
+The prefix of CSS selector.
 
 #### options.theme
 
 Type: `String` or `Object`
 
-When the type is string, it represents the name of NPM for custom theme.You can use [Semi Design System](https://semi.design) to custom theme.
+When the type is string, it represents the name of npm for custom theme.You can use [Semi Design System](https://semi.design) to custom theme.
 
 ##### options.theme.name
 
@@ -129,10 +129,10 @@ Same performance as when the type of `options.theme` is string.
 
 Type: `String`
 
-The absolute path of the local scss file.
+The absolute path of the local Scss file.
 
 ##### options.variables
 
 Type: `Object`
 
-The key-value pair of scss token.
+The key-value pair of Scss token.

src/locale/zh-CN.js

@@ -96,8 +96,8 @@ const appLocale = {
         "component_design__referring_to_the_design_schemes_of_other_business_platforms__s_e47da10ff860ba8b9db1268c06011006": "的组件设计，参考其他业务平台的设计方案，总结了自己的前端规范，统一平台的交付标准。",
         "product_manager__bytedance": "产品经理, 字节跳动",
         "super_good!_strong_push_": "Semi 超级好用！强推。",
-        "as_an_excellent_benchmarking_industry": "Semi 作为对标业界优秀的 UI 库来说做的确实很不错了，对于问题的相应速度，问题的解决效率都有很好的保障。",
-        "the_library_did_a_really_good_job__it_has_a_good_guarantee_for_the_corresponding_61cb34deb7e27e6561dd9a5bce00de72": "库来说做的确实很不错了，对于问题的相应速度，问题的解决效率都有很好的保障。",
+        "as_an_excellent_benchmarking_industry": "Semi 作为对标业界优秀的 UI 库来说做的确实很不错了，对于问题的响应速度，问题的解决效率都有很好的保障。",
+        "the_library_did_a_really_good_job__it_has_a_good_guarantee_for_the_corresponding_61cb34deb7e27e6561dd9a5bce00de72": "库来说做的确实很不错了，对于问题的响应速度，问题的解决效率都有很好的保障。",
         "easy_to_use__beautiful_style_": "Semi Design使用方便，样式美观。",
         "uniform_style_and_high_fidelity_prototype_facilitate_communication_with_front_en_95d0c0ccece05c104b98ac0dae9fb53b": "Semi 统一的样式，高保真的原型便于与前端同学进行沟通。",
         "the_documentation_is_very_detailed_and_the_details_of_the_components_are_well_th_aadc51a1122c41cf69ebd4b15e83e864": "文档非常详细，对组件的细节思考非常充足。",

src/styles/docDemo.scss

@@ -13,6 +13,7 @@
             background: var(--semi-color-primary-light-default);
             outline: 1px solid var(--semi-color-primary-light-active);
         }
+
         // .semi-col:nth-child(2n) {
         //     height: 30px;
         //     line-height: 30px;
@@ -60,6 +61,11 @@
     border-top: 2px dashed #1890ff;
 }
 
+.semi-right-item-drag-handler {
+    margin-right: 8px;
+    cursor: pointer;
+}
+
 .components-transfer-demo-selected-item {
 
     .semi-icon-close {
@@ -94,10 +100,9 @@
     }
 
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
         background-color: rgba(22, 24, 35, .03);
@@ -117,19 +122,44 @@
         }
     }
 
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
 
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
 
         .panel-controls {
@@ -144,8 +174,9 @@
         }
 
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
 
@@ -154,29 +185,15 @@
         height: 353px;
 
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, .16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }
@@ -286,11 +303,11 @@
 }
 
 .components-datepicker-demo-slot {
-    
+
     .semi-tabs-content {
         padding: 0;
     }
-    
+
     .semi-tabs-bar-line.semi-tabs-bar-top {
         border-bottom: none;
     }