Merge pull request #1150 from DouyinFE/js2css

feat: Animation js2css (part)

.eslintrc.js

@@ -90,7 +90,20 @@ module.exports = {
                 'jsx-a11y/mouse-events-have-key-events': ["warn"],
                 'jsx-a11y/html-has-lang': ['warn'],
                 'object-curly-spacing': ['error', 'always'],
-                'semi-design/no-import': 'error'
+                'semi-design/no-import': 'error',
+                "@typescript-eslint/member-delimiter-style": [
+                    "error",
+                    {
+                        "multiline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        },
+                        "singleline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        }
+                    }
+                ],
             }
         },
     ],

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

@@ -30,12 +30,12 @@ import { Divider } from '@douyinfe/semi-ui';
             <Divider margin='12px'/>
             <span>It defines a set of components.</span>
 
-            <h3 style={{ "marginTop":"40px" }}>Horizontal Dashed Line</h3>
+            <h3 style={{ "marginTop": "40px" }}>Horizontal Dashed Line</h3>
             <span>Semi Design is a design system.</span>
             <Divider dashed={true} margin='12px'/>
             <span>It defines a set of components.</span>
 
-            <h3 style={{ "marginTop":"40px" }}>Vertical Solid Line</h3>
+            <h3 style={{ "marginTop": "40px" }}>Vertical Solid Line</h3>
 
             <div>
                 <span>Left</span>
@@ -45,7 +45,7 @@ import { Divider } from '@douyinfe/semi-ui';
                 <span>Right</span>
             </div>
 
-            <h3 style={{ "marginTop":"40px" }}>Vertical Dashed Line</h3>
+            <h3 style={{ "marginTop": "40px" }}>Vertical Dashed Line</h3>
             <div>
                 <span>Left</span>
                 <Divider layout="vertical" dashed={true} margin='12px'/>

content/basic/divider/index.md

@@ -30,12 +30,12 @@ import { Divider } from '@douyinfe/semi-ui';
             <Divider margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{ "marginTop":"40px" }}>水平虚线</h3>
+            <h3 style={{ "marginTop": "40px" }}>水平虚线</h3>
             <span>Semi Design 是一个设计系统。</span>
             <Divider dashed={true} margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{ "marginTop":"40px" }}>垂直实线</h3>
+            <h3 style={{ "marginTop": "40px" }}>垂直实线</h3>
 
             <div>
                 <span>左</span>
@@ -45,7 +45,7 @@ import { Divider } from '@douyinfe/semi-ui';
                 <span>右</span>
             </div>
 
-            <h3 style={{ "marginTop":"40px" }}>垂直虚线</h3>
+            <h3 style={{ "marginTop": "40px" }}>垂直虚线</h3>
             <div>
                 <span>左</span>
                 <Divider layout="vertical" dashed={true} margin='12px'/>

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

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{ xs:16, sm:16, md:16, lg:24, xl:24, xxl:24 }}>
+        <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

content/basic/grid/index.md

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{ xs:16, sm:16, md:16, lg:24, xl:24, xxl:24 }}>
+        <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

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

@@ -66,7 +66,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key:size }))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key: size }))}</div>;
     });
     return icons;
 };
@@ -82,14 +82,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{ color:'#E91E63' }} >
+        <div style={{ color: '#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{ color:'#6A3AC7' }} size="extra-large" />
-            <IconUnlock style={{ color:'#9C27B0' }} size="extra-large"/>
+            <IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color: '#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

content/basic/icon/index.md

@@ -65,7 +65,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key:size }))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key: size }))}</div>;
     });
     return icons;
 };
@@ -81,14 +81,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{ color:'#E91E63' }} >
+        <div style={{ color: '#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{ color:'#6A3AC7' }} size="extra-large" />
-            <IconUnlock style={{ color:'#9C27B0' }} size="extra-large"/>
+            <IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color: '#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

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

@@ -164,7 +164,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -172,7 +172,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -270,7 +270,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -278,7 +278,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -397,7 +397,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconBell size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />
@@ -405,7 +405,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconHelpCircle size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />

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

@@ -41,13 +41,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -88,7 +88,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{ marginTop:'15px' }}>
+            <Space spacing='tight' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -96,7 +96,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{ marginTop:'15px' }}>
+            <Space spacing='medium' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -104,7 +104,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{ marginTop:'15px' }}>
+            <Space spacing='loose' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -112,7 +112,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8, 16]} wrap style={{ marginTop:'15px' }}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>

content/basic/space/index.md

@@ -39,13 +39,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -86,7 +86,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{ marginTop:'15px' }}>
+            <Space spacing='tight' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -94,7 +94,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{ marginTop:'15px' }}>
+            <Space spacing='medium' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -102,7 +102,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{ marginTop:'15px' }}>
+            <Space spacing='loose' style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -110,7 +110,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8, 16]} wrap style={{ marginTop:'15px' }}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>

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

@@ -218,7 +218,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' }
                     }
                 }}
@@ -266,7 +266,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' }
                     }
                 }}
@@ -277,7 +277,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -288,7 +288,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
                     }
                 }}

content/basic/typography/index.md

@@ -204,7 +204,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '这是自定义要展示的内容' }
                     }
                 }}
@@ -253,7 +253,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation' }
                     }
                 }}
@@ -264,7 +264,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -275,7 +275,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', style: { wordBreak: 'break-all' } }
                     }
                 }}

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

@@ -157,33 +157,33 @@ Please refer to [Use with Tooltip/Popover](/en-US/show/tooltip#Use-with-Popver-o
 
 ## API Reference
 
-| Properties         | Instructions                                                                                                                                                          | Type                       | Default             | Version           |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------- | ----------------- |
-| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                             | boolean                    | false               | **0.34.0** |
-| cancelText         | Cancel button text                                                                                                                                                    | string                     | "Cancel"            |
-| cancelButtonProps  | Properties for cancel button                                                                                                                                          | object                     |                     | **0.29.0**        |
-| cancelType         | Cancel button type                                                                                                                                                    | string                     | "tertiary"          |
+| Properties         | Instructions                                                                                                                                                          | Type                     | Default             | Version           |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | ----------------- |
+| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                             | boolean                  | false               | **0.34.0** |
+| cancelText         | Cancel button text                                                                                                                                                    | string                   | "Cancel"            |
+| cancelButtonProps  | Properties for cancel button                                                                                                                                          | object                   |                     | **0.29.0**        |
+| cancelType         | Cancel button type                                                                                                                                                    | string                   | "tertiary"          |
 | content            | Content displayed                                                                                                                                                     | string \| ReactNode        |                     |
-| defaultVisible     | Bubble box is displayed by default                                                                                                                                    | boolean                    |                     | **0.19.0**        |
-| disabled           | Click on the Pop confirmation box to see if the bubbles pop up.                                                                                                       | boolean                    | false               |
-| getPopupContainer  | Specify the parent DOM, and the pop-up layer will be rendered into the DOM. Customization needs to set `position: relative`                                                                                                       | Function():HTMLElement           | () => document.body |
-| icon               | Custom pop bubble Icon icon                                                                                                                                           |  ReactNode        | <IconAlertTriangle size="extra-large" />    |
-| motion             | Whether there is animation when the drop-down list appears/hidden. You can customize animation by passing in an object that conforms to the structure | boolean\|object | true |
-| position           | Directions, optional values: `top`, `topLeft`, `topRight`, `leftTop`, `leftBottom`, `rightTop`, `rightTop`, `rightBottom`, `bottomLeft`, `bottomRight`, `bottomRight` | string                     | "bottomLeft"        |
-| okText             | Confirm button text                                                                                                                                | string                           | "Confirm"              |
-| okType             | Confirm button type                                                                                                                                | string                           | "primary"           |
-| okButtonProps      | Confirm button props                                                                                                                            | object                           |                     | **0.29.0**        |
-| showArrow          | Whether to show arrow triangle                                                                                                                         | boolean                          | false               |                   |
-| stopPropagation    | Whether to prevent the click event on the bomb layer from bubbling                                                                                                                | boolean                          | true                | **0.34.0** |
-| position           | Popup layer position，Optional value：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                           | "bottomLeft"        |
+| defaultVisible     | Bubble box is displayed by default                                                                                                                                    | boolean                  |                     | **0.19.0**        |
+| disabled           | Click on the Pop confirmation box to see if the bubbles pop up.                                                                                                       | boolean                  | false               |
+| getPopupContainer  | Specify the parent DOM, and the pop-up layer will be rendered into the DOM. Customization needs to set `position: relative`                                                                                                       | Function():HTMLElement         | () => document.body |
+| icon               | Custom pop bubble Icon icon                                                                                                                                           |  ReactNode      | <IconAlertTriangle size="extra-large" />    |
+| motion             | Whether there is animation when the drop-down list appears/hidden. You can customize animation by passing in an object that conforms to the structure | boolean | true |
+| position           | Directions, optional values: `top`, `topLeft`, `topRight`, `leftTop`, `leftBottom`, `rightTop`, `rightTop`, `rightBottom`, `bottomLeft`, `bottomRight`, `bottomRight` | string                   | "bottomLeft"        |
+| okText             | Confirm button text                                                                                                                                | string                         | "Confirm"              |
+| okType             | Confirm button type                                                                                                                                | string                         | "primary"           |
+| okButtonProps      | Confirm button props                                                                                                                            | object                         |                     | **0.29.0**        |
+| showArrow          | Whether to show arrow triangle                                                                                                                         | boolean                        | false               |                   |
+| stopPropagation    | Whether to prevent the click event on the bomb layer from bubbling                                                                                                                | boolean                        | true                | **0.34.0** |
+| position           | Popup layer position，Optional value：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                         | "bottomLeft"        |
 | title              | Displayed title                                                                                                                                  | string\|ReactNode                |                     |
-| trigger            | Timing to trigger the display, optional value：hover / focus / click / custom                                                                                         | string                |   'click'                  |
-| visible            | Whether the bubble box displays controlled attributes                                                                                                                   | boolean                          |                     | **0.19.0**        |
-| zIndex             | Floating layer z-index value                                                                                                                                          | number                     | 1030                |
+| trigger            | Timing to trigger the display, optional value：hover / focus / click / custom                                                                                         | string              |   'click'                  |
+| visible            | Whether the bubble box displays controlled attributes                                                                                                                   | boolean                        |                     | **0.19.0**        |
+| zIndex             | Floating layer z-index value                                                                                                                                          | number                   | 1030                |
 | onConfirm          | Click the confirmation button to call back. Promise support after v2.19                                                                                                                           | (e) => void \| Promise                |                     |
 | onCancel           | Click the Cancel button to call back. Promise support after v2.19                                                                                                                          | (e) => void \| Promise                |                     |
 | onVisibleChange    | Bubble box toggle shows hidden callbacks                                                                                                                              | (visible: boolean) => void | () => {}            | **0.19.0**        |
-| onClickOutSide     | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked                                                 | (e: event) => void         |                     | **2.1.0**        |
+| onClickOutSide     | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked                                                 | (e: event) => void       |                     | **2.1.0**        |
 ## Design Tokens
 <DesignToken/>
 

content/feedback/popconfirm/index.md

@@ -156,31 +156,31 @@ import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';
 
 ## API 参考
 
-| 属性               | 说明                                                                                                                                        | 类型                             | 默认值              | 版本              |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | ----------------- |
-| arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true"                                                                                      | boolean                          | false               | **0.34.0** |
-| cancelText         | 取消按钮文字                                                                                                                                | string                           | "取消"              |
-| cancelButtonProps  | 取消按钮的 props                                                                                                                            | object                           |                     | **0.29.0**        |
-| cancelType         | 取消按钮类型                                                                                                                                | string                           | "tertiary"          |
+| 属性               | 说明                                                                                                                                        | 类型                           | 默认值              | 版本              |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------- | ----------------- |
+| arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true"                                                                                      | boolean                        | false               | **0.34.0** |
+| cancelText         | 取消按钮文字                                                                                                                                | string                         | "取消"              |
+| cancelButtonProps  | 取消按钮的 props                                                                                                                            | object                         |                     | **0.29.0**        |
+| cancelType         | 取消按钮类型                                                                                                                                | string                         | "tertiary"          |
 | content            | 显示的内容                                                                                                                                  | string\|ReactNode                |                     |
-| defaultVisible     | 气泡框默认是否展示                                                                                                                          | boolean                          |                     | **0.19.0**        |
-| disabled           | 点击 Popconfirm 子元素是否弹出气泡确认框                                                                                                    | boolean                          | false               |
-| getPopupContainer  | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义时容器需要设置 `position: relative`                                                                                                       | Function():HTMLElement           | () => document.body |
-| icon               | 自定义弹出气泡 Icon 图标                                                                                                                    | ReactNode                | <IconAlertTriangle size="extra-large" />    |
-| motion             | 下拉列表出现/隐藏时，是否有动画 | boolean\|object | true |
-| okText             | 确认按钮文字                                                                                                                                | string                           | "确认"              |
-| okType             | 确认按钮类型                                                                                                                                | string                           | "primary"           |
-| okButtonProps      | 确认按钮的 props                                                                                                                            | object                           |                     | **0.29.0**        |
-| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                           | "bottomLeft"        |
-| showArrow          | 是否显示箭头三角形                                                                                                                          | boolean                          | false               |                   |
-| stopPropagation    | 是否阻止弹层上的点击事件冒泡                                                                                                                | boolean                          | true                | **0.34.0** |
+| defaultVisible     | 气泡框默认是否展示                                                                                                                          | boolean                        |                     | **0.19.0**        |
+| disabled           | 点击 Popconfirm 子元素是否弹出气泡确认框                                                                                                    | boolean                        | false               |
+| getPopupContainer  | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义时容器需要设置 `position: relative`                                                                                                       | Function():HTMLElement         | () => document.body |
+| icon               | 自定义弹出气泡 Icon 图标                                                                                                                    | ReactNode              | <IconAlertTriangle size="extra-large" />    |
+| motion             | 下拉列表出现/隐藏时，是否有动画 | boolean | true |
+| okText             | 确认按钮文字                                                                                                                                | string                         | "确认"              |
+| okType             | 确认按钮类型                                                                                                                                | string                         | "primary"           |
+| okButtonProps      | 确认按钮的 props                                                                                                                            | object                         |                     | **0.29.0**        |
+| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,<br/>`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                         | "bottomLeft"        |
+| showArrow          | 是否显示箭头三角形                                                                                                                          | boolean                        | false               |                   |
+| stopPropagation    | 是否阻止弹层上的点击事件冒泡                                                                                                                | boolean                        | true                | **0.34.0** |
 | title              | 显示的标题                                                                                                                                  | string\|ReactNode                |                     |
-| trigger            | 触发展示的时机，可选值：hover / focus / click / custom                                                                                         | string                |   'click'                  |
-| visible            | 气泡框是否展示的受控属性                                                                                                                    | boolean                          |                     | **0.19.0**        |
-| zIndex             | 浮层 z-index 值                                                                                                                             | number                           | 1030                |
+| trigger            | 触发展示的时机，可选值：hover / focus / click / custom                                                                                         | string              |   'click'                  |
+| visible            | 气泡框是否展示的受控属性                                                                                                                    | boolean                        |                     | **0.19.0**        |
+| zIndex             | 浮层 z-index 值                                                                                                                             | number                         | 1030                |
 | onConfirm          | 点击确认按钮回调,  Promise类型于 v 2.19后支持                                                                                                                          | Function(e): void \| Promise                      |                     |
 | onCancel           | 点击取消按钮回调，Promise类型于 v 2.19后支持                                                                                                                            | Function(e): void \| Promise                      |                     |
-| onClickOutSide     | 当弹出层处于展示状态，点击非Children、非浮层内部区域时的回调                                                                                      | Function(e)                      |  **2.1.0**      |
+| onClickOutSide     | 当弹出层处于展示状态，点击非Children、非浮层内部区域时的回调                                                                                      | Function(e)                    |  **2.1.0**      |
 | onVisibleChange    | 气泡框切换显示隐藏的回调                                                                                                               | Function(visible: boolean): void | () => {}            | **0.19.0**        |
 
 ## 设计变量

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

@@ -68,7 +68,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -105,7 +105,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>

content/feedback/toast/index.md

@@ -69,7 +69,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -106,7 +106,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>

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

@@ -371,7 +371,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | getPopupContainer | Specify the parent DOM, the floating layer of the drop-down list will be rendered into the DOM, and the customization needs to set `position: relative` | () => HTMLElement | () => document.body |
 | loading | Whether the drop-down list shows loading animation | boolean | false |
 | maxHeight | The maximum height of the drop-down list | number\|string | 300 |
-| motion | Is there an animation when the drop-down list appears/hidden | boolean\|object | true |
+| motion | Is there an animation when the drop-down list appears/hidden | boolean | true |
 | onSelectWithObject | When clicking on the candidate, whether to add other attributes of the selected item option as callback parameters. When set to true, the input parameter type of onSelect will change from `string` to object: {value, label, ...rest} | boolean | false | 1.23.0|
 | placeholder | Input box prompt | string | |
 | position | The display position of the drop-down menu, the optional values are the same as the tooltip component | string | 'bottomLeft' |

content/input/autocomplete/index.md

@@ -386,7 +386,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | getPopupContainer | 指定父级 DOM，下拉列表浮层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | () => HTMLElement | () => document.body |
 | loading | 下拉列表是否展示加载动画 | boolean | false |
 | maxHeight | 下拉列表的最大高度 | number\|string | 300 |
-| motion | 下拉列表出现/隐藏时，是否有动画 | boolean\|object | true |
+| motion | 下拉列表出现/隐藏时，是否有动画 | boolean | true |
 | onSelectWithObject | 点击候选项时，是否将选中项 option 的其他属性也作为回调入参。设为 true 时，onSelect 的入参类型会从 `string` 变为 object: { value, label, ...rest }| boolean | false |1.23.0 |
 | placeholder | 输入框提示 | string | |
 | position | 下拉菜单的显示位置，可选值同 tooltip 组件 | string | 'bottomLeft' |

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

@@ -100,7 +100,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -133,7 +133,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -166,7 +166,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
+                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -198,8 +198,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>large</Button>
-            <Button size='default' style={{ marginRight:8 }}>default</Button>
+            <Button size='large' style={{ marginRight: 8 }}>large</Button>
+            <Button size='default' style={{ marginRight: 8 }}>default</Button>
             <Button size='small'>small</Button>
         </div>
     );
@@ -448,9 +448,9 @@ function SplitButtonDemo(){
     ];
 
     const [btnVisible, setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+        1: false,
+        2: false,
+        3: false
     });
 
     const handleVisibleChange = (key, visible)=>{
@@ -461,22 +461,22 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="Project operate button group">
                 <Button theme="solid" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1]?{ background:'var(--semi-color-primary-hover)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                    <Button style={btnVisible[1]?{ background: 'var(--semi-color-primary-hover)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="Project operate button group">
                 <Button theme="light" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                    <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="Project operate button group">
-                <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-0)' }:null} theme="borderless" type="primary">SplitButton</Button>
+                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:null} theme="borderless" type="primary">SplitButton</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                    <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

content/input/button/index.md

@@ -158,8 +158,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>大尺寸</Button>
-            <Button size='default' style={{ marginRight:8 }}>默认尺寸</Button>
+            <Button size='large' style={{ marginRight: 8 }}>大尺寸</Button>
+            <Button size='default' style={{ marginRight: 8 }}>默认尺寸</Button>
             <Button size='small'>小尺寸</Button>
         </div>
     );
@@ -407,9 +407,9 @@ function SplitButtonDemo(){
     ];
 
     const [btnVisible, setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+        1: false,
+        2: false,
+        3: false
     });
 
     const handleVisibleChange = (key, visible)=>{
@@ -420,22 +420,22 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组">
                 <Button theme="solid" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1] ? { background:'var(--semi-color-primary-hover)', padding:'8px 4px' } : { padding:'8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                    <Button style={btnVisible[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组">
                 <Button theme="light" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                    <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="项目操作按钮组">
-                <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-0)' }:{}} theme="borderless" type="primary">分裂按钮</Button>
+                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:{}} theme="borderless" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                    <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

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

@@ -1519,51 +1519,51 @@ function Demo() {
 
 ### Cascader
 
-| Properties         | Instructions                                                                                                                 | type                                                                 | Default                         | version |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------- | ------- |
-| arrowIcon     | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                   | ReactNode                                                              |                            | 1.15.0       |
+| Properties         | Instructions                                                                                                                 | type                                                               | Default                         | version |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------- |
+| arrowIcon     | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                   | ReactNode                                                            |                            | 1.15.0       |
 | autoAdjustOverflow | Whether to automatically adjust the expansion direction of the dropdown for automatic adjustment of the expansion direction during edge occlusion | boolean | true | - |
 | autoMergeValue | Auto merge value. Specifically, after opening, when a parent node is selected, the value will not include the descendants of the node. Does not support dynamic switching | boolean | true |  1.28.0 |
 | bottomSlot | bottom slot | ReactNode | - |  1.27.0 |
-| changeOnSelect     | Toggle whether non-leaf nodes are selectable                                                                                   | boolean                                                              | false                           | -       |
-| className          | ClassName                                                                                                                    | string                                                               | -                               | -       |
-| defaultOpen       | Set whether to open the dropDown by default              | boolean   | false                                | -      |
+| changeOnSelect     | Toggle whether non-leaf nodes are selectable                                                                                   | boolean                                                            | false                           | -       |
+| className          | ClassName                                                                                                                    | string                                                             | -                               | -       |
+| defaultOpen       | Set whether to open the dropDown by default              | boolean | false                                | -      |
 | defaultValue       | Default selected value      | string\|number\|TreeNode\|(string\|number\|TreeNode)[]                                                   | -                               | -       |
-| disabled           | Makes the element disabled                                                                                                   | boolean                                                              | false                           | -       |
-| displayProp        | Set the attribute value displayed by the backfill option displayed                                                                                             | string                                                               | `label`                         | -       |
+| disabled           | Makes the element disabled                                                                                                   | boolean                                                            | false                           | -       |
+| displayProp        | Set the attribute value displayed by the backfill option displayed                                                                                             | string                                                             | `label`                         | -       |
 | displayRender      | Set the backfill format value                                                                                 | (selected: string[] \| Entity, idx?: number) => ReactNode                                            | selected => selected.join ('/') | -       |
-| dropdownClassName  | ClassName property for the drop-down menu                                                                                    | string                                                               | -                               | -       |
-| dropdownStyle      | Inline style of drop-down menu                                                                                               | object                                                               | -                               | -       |
-| emptyContent       | Content displayed when the search has no result                                                                              | ReactNode                                                            | `No result`                     | -       |
-| filterLeafOnly       |  Whether the search results only show the path of leaf nodes   | boolean    | true    | 1.26.0    |
+| dropdownClassName  | ClassName property for the drop-down menu                                                                                    | string                                                             | -                               | -       |
+| dropdownStyle      | Inline style of drop-down menu                                                                                               | object                                                             | -                               | -       |
+| emptyContent       | Content displayed when the search has no result                                                                              | ReactNode                                                          | `No result`                     | -       |
+| filterLeafOnly       |  Whether the search results only show the path of leaf nodes   | boolean  | true    | 1.26.0    |
 | filterTreeNode     | Set filter, the value of treeNodeFilterProp is used for searching                | ((inputValue: string, treeNodeString: string) => boolean) \| boolean | false                           | -       |
 | getPopupContainer | Specify the parent DOM, the drop-down box will be rendered into the DOM, the customization needs to set position: relative |() => HTMLElement|() => document.body|-|
-| insetLabel         | Prefix alias, used mainly in Form                                                                                            | ReactNode                                                            | -                               | 0.28.0  |
-| leafOnly         | When multiple selections, the set value only includes leaf nodes, that is, the displayed Tag and onChange value parameters only include leaf nodes. Does not support dynamic switching                             | boolean                                                            | false                               | 2.2.0  |
+| insetLabel         | Prefix alias, used mainly in Form                                                                                            | ReactNode                                                          | -                               | 0.28.0  |
+| leafOnly         | When multiple selections, the set value only includes leaf nodes, that is, the displayed Tag and onChange value parameters only include leaf nodes. Does not support dynamic switching                             | boolean                                                          | false                               | 2.2.0  |
 | loadData | Load data asynchronously and the return value should be a promise | (selectOptions: TreeNode[]) => Promise< void > |-| 1.8.0|
 | max| In the case of multiple selections, the number of multiple selections is limited, and the onExceed callback will be triggered when max is exceeded | number |-|1.28.0|
 | maxTagCount| When multiple selections, the maximum number of labels to be displayed will be displayed in the form of +N after exceeding| number |-|1.28.0|
-| motion | Set the pop-up animation of the dropdown box |boolean\|object|true|-|
+| motion | Set the pop-up animation of the dropdown box |boolean|true|-|
 | mouseEnterDelay | After the mouse is moved in, the time to delay the display of the dropdown box, in milliseconds | number | 50 | - |
 | mouseLeaveDelay | After the mouse is moved out, the time to hide the display of the dropdown box, in milliseconds | number | 50 | - |
 | multiple | Set multiple | boolean | false |  1.28.0 |
-| placeholder        | Placeholder                                                                                                                  | string                                                               | -                               | -       |
-| prefix             | Prefix label                                                                                                                 | ReactNode                                                            | -                               | 0.28.0  |
+| placeholder        | Placeholder                                                                                                                  | string                                                             | -                               | -       |
+| prefix             | Prefix label                                                                                                                 | ReactNode                                                          | -                               | 0.28.0  |
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
-|restTagsPopoverProps |The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     |PopoverProps     | {}        |1.28.0|
-| searchPlaceholder  | Placeholder for search input                                                                                                 | string                                                               | -                               | -       |
-| separator  | Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection        | string                                                               | ' / '                               | 2.2.0       |
-| showClear       |  Toggle whether to show clear button   | boolean    | false    | 0.35.0    |
+|restTagsPopoverProps |The configuration properties of the [Popover](/en-US/show/popover#API%20Reference)     |PopoverProps   | {}        |1.28.0|
+| searchPlaceholder  | Placeholder for search input                                                                                                 | string                                                             | -                               | -       |
+| separator  | Custom separator, including: the separator of the content displayed in the dropdown during search and displayed in the Trigger during single selection        | string                                                             | ' / '                               | 2.2.0       |
+| showClear       |  Toggle whether to show clear button   | boolean  | false    | 0.35.0    |
 | showNext| Set the way to expand the Dropdown submenu, one of: `click`、`hover` | string |`click`|1.29.0|
 | showRestTagsPopover| When the number of tags exceeds maxTagCount and hover reaches +N, whether to display the remaining content through Popover| boolean |false|1.28.0|
-| size               | Selectbox size, one of `large`, `small`, `default`                                                                           | string                                                               | `default`                       | -       |
+| size               | Selectbox size, one of `large`, `small`, `default`                                                                           | string                                                             | `default`                       | -       |
 | stopPropagation | Whether to prevent the click event on the dropdown box from bubbling | boolean | true | - |
 | disableStrictly | Set whether to enable strict prohibition. After opening, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent | boolean | false | 1.32.0|
-| style              | Inline style                                                                                                                 | CSSProperties                                                               | -                               | -       |
-| suffix             | Suffix label                                                                                                                 | ReactNode                                                            | -                               | 0.28.0  |
+| style              | Inline style                                                                                                                 | CSSProperties                                                             | -                               | -       |
+| suffix             | Suffix label                                                                                                                 | ReactNode                                                          | -                               | 0.28.0  |
 | topSlot | top slot | ReactNode | - |  1.27.0 |
-| treeData           | Render data. Refer to [TreeNode](#TreeNode)  for detailed formatting. | TreeNode[]                                                      | \ []                            | -       |
-| treeNodeFilterProp | When searching, the input item filters the corresponding treeNode property.                                                  | string                                                               | `label`                         | -       |
+| treeData           | Render data. Refer to [TreeNode](#TreeNode)  for detailed formatting. | TreeNode[]                                                    | \ []                            | -       |
+| treeNodeFilterProp | When searching, the input item filters the corresponding treeNode property.                                                  | string                                                             | `label`                         | -       |
 | triggerRender | Method to create a custom trigger  | (triggerRenderData: object) => ReactNode | - | 0.34.0 |
 | value       | Selected value (controlled mode)    | string\|number\|TreeNode\|(string\|number\|TreeNode)[][]                                                   | -                               | -       |
 | validateStatus |The validation status of the trigger only affects the display style. Optional: default、error、warning | string | `default` | - |
@@ -1573,13 +1573,13 @@ function Demo() {
 | onChange           | Callback function when the tree node is selected                                                                             | (value: string\|number\|TreeNode\|(string\|number\|TreeNode)[]) => void                                | -                               | -       |
 | onClear| When showClear is true, click the clear button to trigger the callback | () => void |-|1.29.0|
 | onChangeWithObject | Toggle whether to return all properties in an option as a return value. When set to true, return value looks like TreeNode. For controlled mode, you need to pass TreeNode to value correspondingly. DefaultValue similarly. | boolean | false | 1.16.0 |
-| onDropdownVisibleChange       | Callback function when dropdown menu visibility changes   | (visible: boolean) => void        | -                                | 0.35.0    |
+| onDropdownVisibleChange       | Callback function when dropdown menu visibility changes   | (visible: boolean) => void      | -                                | 0.35.0    |
 | onExceed| When multiple selections are made, the callback triggered after max is exceeded | (checkedItem: Entity[]) => void |-|1.28.0|
 | onFocus| Focus on Cascader's callback | (e: MouseEvent) => void | - | - |
 | onListScroll | Callback function when panel list scroll | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0 |
 | onLoad | Callback function when a node is loaded | (newLoadedKeys: Set< string >, data: TreeNode) => void | - | 1.8.0|
-| onSearch           | Callback function when the values for search input changes                                                                   | (value: string) => void                                                             | -                               | -       |
-| onSelect           | Callback function when selected                                                                                              | function(selected: string)                                           | -                               | -       |
+| onSearch           | Callback function when the values for search input changes                                                                   | (value: string) => void                                                           | -                               | -       |
+| onSelect           | Callback function when selected                                                                                              | function(selected: string)                                         | -                               | -       |
 
 ### TreeNode
 

content/input/cascader/index.md

@@ -1506,52 +1506,52 @@ function Demo() {
 
 ### Cascader
 
-| 属性               | 说明                                                                                 | 类型                                                                             | 默认值                           | 版本                               |
-| ------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------- |----------------------------------|
-| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                          |                             | 1.15.0                           |
+| 属性               | 说明                                                                                 | 类型                                                                           | 默认值                           | 版本                               |
+| ------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | -------------------------------- |----------------------------------|
+| arrowIcon     |   自定义右侧下拉箭头 Icon，当 showClear 开关打开且当前有选中值时，hover 会优先显示 clear icon                                                              | ReactNode                                                                        |                             | 1.15.0                           |
 | autoAdjustOverflow | 是否自动调整下拉框展开方向，用于边缘遮挡时自动调整展开方向 | boolean | true | -                                |
 | autoMergeValue | 设置自动合并 value。具体而言是，开启后，当某个父节点被选中时，value 将不包括该节点的子孙节点。不支持动态切换 | boolean | true | 1.28.0                           |
 | bottomSlot | 底部插槽 | ReactNode | - | 1.27.0                           |
-| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                          | false                            | -                                |
-| className          | 选择框的 className 属性                                                              | string                                                                           | -                                | -                                |
-| defaultOpen       | 设置是否默认打开下拉菜单              | boolean   | false                                | -                                |
+| changeOnSelect     | 是否允许选择非叶子节点                                                                   | boolean                                                                        | false                            | -                                |
+| className          | 选择框的 className 属性                                                              | string                                                                         | -                                | -                                |
+| defaultOpen       | 设置是否默认打开下拉菜单              | boolean | false                                | -                                |
 | defaultValue       | 指定默认选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
-| disabled           | 是否禁用                                                                             | boolean                                                                          | false                            | -                                |
-| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                           | `label`                          | -                                |
+| disabled           | 是否禁用                                                                             | boolean                                                                        | false                            | -                                |
+| displayProp        | 设置回填选项显示的属性值                                                                 | string                                                                         | `label`                          | -                                |
 | displayRender      | 设置回填格式                                                                 | (selected: string[] \| Entity, idx?: number) => ReactNode                                                        | selected => selected.join(' / ') | -      |
-| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                           | -                                | -                                |
-| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                           | -                                | -                                |
-| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                        | `暂无数据`                       | -                                |
-| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean    | true    | 1.26.0                           |
+| dropdownClassName  | 下拉菜单的 className 属性                                                            | string                                                                         | -                                | -                                |
+| dropdownStyle      | 下拉菜单的样式                                                                       | object                                                                         | -                                | -                                |
+| emptyContent       | 当搜索无结果时展示的内容                                                             | ReactNode                                                                      | `暂无数据`                       | -                                |
+| filterLeafOnly       |  搜索结果是否只展示叶子结点路径   | boolean  | true    | 1.26.0                           |
 | filterTreeNode     | 设置筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | ((inputValue: string, treeNodeString: string) => boolean) \| boolean | false                            | -      |
 | getPopupContainer | 指定父级 DOM，下拉框将会渲染至该 DOM 中，自定义需要设置 position: relative |() => HTMLElement|() => document.body| -                                |
-| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                        | -                                | 0.28.0                           |
+| insetLabel         | 前缀标签别名，主要用于 Form                                                          | ReactNode                                                                      | -                                | 0.28.0                           |
 | leafOnly | 多选时设置 value 只包含叶子节点，即显示的 Tag 和 onChange 的 value 参数只包含叶子节点。不支持动态切换 | boolean | false | 2.2.0                            |
 | loadData | 异步加载数据，需要返回一个Promise | (selectOptions: TreeNode[]) => Promise< void > |- | 1.8.0                            |
 | max| 多选时，限制多选选中的数量，超出 max 后将触发 onExceed 回调 | number |-| 1.28.0                           |
 | maxTagCount| 多选时，标签的最大展示数量，超出后将以 +N 形式展示| number |-| 1.28.0                           |
-| motion | 设置下拉框弹出的动画 |boolean\|object| true                             |-|
+| motion | 设置下拉框弹出的动画 |boolean| true                             |-|
 | mouseEnterDelay | 鼠标移入后，延迟显示下拉框的时间，单位毫秒 | number | 50 | -                                |
 | mouseLeaveDelay | 鼠标移出后，延迟消失下拉框的时间，单位毫秒 | number | 50 | -                                |
 | multiple | 设置多选 | boolean | false | 1.28.0                           |
-| placeholder        | 选择框默认文字                                                                       | string                                                                           | -                                | -                                |
-| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                     | "bottom"                                    | 2.16.0-beta.0                    |
-| prefix             | 前缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| placeholder        | 选择框默认文字                                                                       | string                                                                         | -                                | -                                |
+| position           | 方向，可选值：`top`,`topLeft`,`topRight`,`left`,`leftTop`,`leftBottom`,`right`,`rightTop`,`rightBottom`,`bottom`,`bottomLeft`,`bottomRight` | string                   | "bottom"                                    | 2.16.0-beta.0                    |
+| prefix             | 前缀标签                                                                             | ReactNode                                                                      | -                                | 0.28.0                           |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |                                  |
-|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps     | {}        | 1.28.0                           |
-| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                           | -                                | -                                |
-| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                           | ' / '                                | 2.2.0                            |
-| showClear       |  是否展示清除按钮   | boolean    | false    | 0.35.0                           |
+|restTagsPopoverProps |Popover 的配置属性，可以控制 position、zIndex、trigger 等，具体参考[Popover](/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83)           |PopoverProps   | {}        | 1.28.0                           |
+| searchPlaceholder  | 搜索框默认文字                                                                       | string                                                                         | -                                | -                                |
+| separator  | 自定义分隔符，包括：搜索时显示在下拉框的内容以及单选时回显到 Trigger 的内容的分隔符    | string                                                                         | ' / '                                | 2.2.0                            |
+| showClear       |  是否展示清除按钮   | boolean  | false    | 0.35.0                           |
 | showNext| 设置展开 Dropdown 子菜单的方式，可选: `click`、`hover` | string |`click`| 1.29.0                           |
 | showRestTagsPopover| 当超过 maxTagCount，hover 到 +N 时，是否通过 Popover 显示剩余内容| boolean |false| 1.28.0                           |
-| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                           | `default`                        | -                                |
+| size               | 选择框大小，可选 `large`，`small`，`default`                                         | string                                                                         | `default`                        | -                                |
 | stopPropagation | 是否阻止下拉框上的点击事件冒泡 | boolean | true | -                                |
 | disableStrictly | 设置是否开启严格禁用。开启后，当节点是 disabled 的时候，则不能通过子级或者父级的关系改变选中状态 | boolean | false | 1.32.0                           |
-| style              | 选择框的样式                                                                         | CSSProperties                                                                           | -                                | -                                |
-| suffix             | 后缀标签                                                                             | ReactNode                                                                        | -                                | 0.28.0                           |
+| style              | 选择框的样式                                                                         | CSSProperties                                                                         | -                                | -                                |
+| suffix             | 后缀标签                                                                             | ReactNode                                                                      | -                                | 0.28.0                           |
 | topSlot | 顶部插槽 | ReactNode | - | 1.27.0                           |
-| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                  | \[]                              | -                                |
-| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                           | `label`                          | -                                |
+| treeData           | 展示数据，具体属性参考 [TreeNode](#TreeNode)              | TreeNode[]                                                                | \[]                              | -                                |
+| treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性                                                 | string                                                                         | `label`                          | -                                |
 | triggerRender | 自定义触发器渲染方法  | (triggerRenderData: object) => ReactNode | - | 0.34.0                           |
 | validateStatus | trigger 的校验状态，仅影响展示样式。可选: default、error、warning | string | `default` | -                                |
 | value       | （受控）选中的条目                                                                   | string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]                                                                           | -                                | -      |
@@ -1561,12 +1561,12 @@ function Demo() {
 | onChange           | 选中树节点时调用此函数，默认返回选中项 path 的 value 数组                            | (value: string\|number\| TreeNode\                        |(string\|number\|TreeNode)[]) => void                                                                         | -                                | -      |
 | onChangeWithObject | 是否将选中项 option 的其他属性作为回调。设为 true 时，onChange 的入参类型会从 string/number 变为 TreeNode。此时如果是受控，也需要把 value 设置成 TreeNode 类型，且必须含有 value 的键值，defaultValue 同理 | boolean | false | 1.16.0                           |
 | onClear| showClear 为 true 时，点击清空按钮触发的回调 | () => void |-| 1.29.0                           |
-| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void        | -                                | 0.35.0                           |
+| onDropdownVisibleChange       | 下拉框切换时的回调   | (visible: boolean) => void      | -                                | 0.35.0                           |
 | onExceed| 多选时，超出 max 后触发的回调 | (checkedItem: Entity[]) => void |-| 1.28.0                           |
 | onFocus| 聚焦 Cascader 的回调 | (e: MouseEvent) => void | - | -                                |
 | onListScroll | 下拉面板滚动的回调 | (e: React.Event, panel: { panelIndex: number; activeNode: TreeNode; } ) => void | - | 1.15.0                           |
 | onLoad | 节点加载完毕时触发的回调 | (newLoadedKeys: Set< string >, data: TreeNode) => void |- | 1.8.0                            |
-| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                         | -                                | -                                |
+| onSearch           | 文本框值变化时回调                                                                   | (value: string) => void                                                                       | -                                | -                                |
 | onSelect           | 被选中时调用，返回选中项的 value                                                     | (value: string \| number \| (string \                        | number)[]) => void                                                                         | -                                | -      |
 
 ### TreeNode

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

@@ -136,7 +136,7 @@ class App extends React.Component {
         const plainOptions = ['semi', 'vigo', 'helo'];
         const options = [
             { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" },
-            { label: 'Be grounded & courageous', value: '2', extra:"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
+            { label: 'Be grounded & courageous', value: '2', extra: "Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
             { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." },
             { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused." }
         ];
@@ -295,7 +295,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{ marginTop:6 }}
+                style={{ marginTop: 6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -319,16 +319,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width:280 }}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled 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 value={'3'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{ width:280 }}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>
@@ -346,16 +346,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width:280 }}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled 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 value={'3'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{ width:280 }}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>

content/input/checkbox/index.md

@@ -118,7 +118,7 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
     const plainOptions = ['抖音', '火山', '皮皮虾'];
     const options = [
         { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
-        { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
+        { label: '务实敢为', value: '2', extra: '直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
         { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
         { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点' }
     ];
@@ -278,7 +278,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{ marginTop:6 }}
+                style={{ marginTop: 6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -301,16 +301,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled 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 value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>
@@ -328,16 +328,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled 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 value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>

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

@@ -70,19 +70,19 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Input field='username' label='UserName' style={{ width:80 }}/>
+        <Form.Input field='username' label='UserName' style={{ width: 80 }}/>
         <Form.Input
             field='password'
             label={{ 
                 text: 'Password',
                 extra: <Tooltip content='More info xxx'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
             }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
         />
         <Form.Select
             field="role"
             label={{ text: 'Role', optional: true }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
             optionList={[
                 { label: 'Admin', value: 'admin' },
                 { label: 'User', value: 'user' },
@@ -107,7 +107,7 @@ import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form render={({ formState, formApi, values }) => (
         <>
-            <Form.Select field="role" label='Role' style={{ width:120 }}>
+            <Form.Select field="role" label='Role' style={{ width: 120 }}>
                 <Form.Select.Option value="admin">Admin</Form.Select.Option>
                 <Form.Select.Option value="user">User</Form.Select.Option>
                 <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -134,7 +134,7 @@ import { Form } from '@douyinfe/semi-ui';
         {
             ({ formState, values, formApi }) => (
                 <>
-                    <Form.Select field="role" label='Role' style={{ width:120 }}>
+                    <Form.Select field="role" label='Role' style={{ width: 120 }}>
                         <Form.Select.Option value="admin">Admin</Form.Select.Option>
                         <Form.Select.Option value="user">User</Form.Select.Option>
                         <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -444,7 +444,7 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -851,7 +851,7 @@ class ModalFormDemo extends React.Component {
                                 <Form.Select
                                     field='region'
                                     label="Country/Region"
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -879,7 +879,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="Area"
                                     placeholder='Choose Area'
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}

content/input/form/index.md

@@ -75,16 +75,16 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
     return (
         <Form layout='horizontal' onValueChange={values=>console.log(values)}>
-            <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
+            <Form.Input field='UserName' label='用户名' style={{ width: 80 }}/>
             <Form.Input
                 field='Password'
                 label={{ 
                     text: '密码',
                     extra: <Tooltip content='详情'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
                 }}
-                style={{ width:176 }}
+                style={{ width: 176 }}
             />
-            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width:176 }}>
+            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width: 176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
@@ -144,13 +144,13 @@ import { Form } from '@douyinfe/semi-ui';
             {
                 ({ formState, values, formApi }) => (
                     <>
-                        <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                        <Form.Select field="Role" label='角色' style={{ width: 176 }}>
                             <Form.Select.Option value="admin">管理员</Form.Select.Option>
                             <Form.Select.Option value="user">普通用户</Form.Select.Option>
                             <Form.Select.Option value="guest">访客</Form.Select.Option>
                         </Form.Select>
-                        <Form.Input field='UserName' label='用户名' style={{ width:80 }} />
-                        <Form.Input field='Password' label='密码' style={{ width:176 }}/>
+                        <Form.Input field='UserName' label='用户名' style={{ width: 80 }} />
+                        <Form.Input field='Password' label='密码' style={{ width: 176 }}/>
                         <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
                     </>
                 )
@@ -171,9 +171,9 @@ import { Form } from '@douyinfe/semi-ui';
 () => {
     const fields = ({ formState, formApi, values }) => (
         <>
-            <Form.Input field='Role' style={{ width:176 }}/>
-            <Form.Input field='UserName' style={{ width:80 }}/>
-            <Form.Input field='Password' style={{ width:176 }}/>
+            <Form.Input field='Role' style={{ width: 176 }}/>
+            <Form.Input field='UserName' style={{ width: 80 }}/>
+            <Form.Input field='Password' style={{ width: 176 }}/>
             <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
         </>
     );
@@ -218,7 +218,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'
                     },
                     {
@@ -228,7 +228,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'
                     }
                 ]
@@ -514,7 +514,7 @@ import { Form, Toast, Button } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -710,19 +710,19 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
 () => {
     const { Section, Input, DatePicker, TimePicker, Select, Switch, InputNumber, Checkbox, CheckboxGroup, RadioGroup, Radio } = Form;
     return (
-        <Form style={{ width:560 }}>
+        <Form style={{ width: 560 }}>
             <Section text={'基本信息'}>
                 <Input field='name' label='考试名称' initValue='TCS任务平台使用' style={{ width: 560 }}/>
             </Section>
             <Section text={'合格标准'} >
-                <div style={{ display:'flex' }}>
-                    <InputNumber field='pass' initValue={60} style={{ width:80 }} label={{ text:'及格正确率', required: true }}/>
-                    <InputNumber field='number' initValue={10} style={{ width:80 }} label={{ text:'合格人数', required: true }}/>
+                <div style={{ display: 'flex' }}>
+                    <InputNumber field='pass' initValue={60} style={{ width: 80 }} label={{ text: '及格正确率', required: true }}/>
+                    <InputNumber field='number' initValue={10} style={{ width: 80 }} label={{ text: '合格人数', required: true }}/>
                 </div>
             </Section>
             <Section text={'考试时间'} >
-                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width:272 }} label={{ text:'开始时间', required: true }}/>
-                <div style={{ display:'flex' }}>
+                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width: 272 }} label={{ text: '开始时间', required: true }}/>
+                <div style={{ display: 'flex' }}>
                     <Input field='time' label='考试时长' style={{ width: 176 }} initValue={'60'} addonAfter='分钟'/>
                     <Checkbox initValue={true} noLabel field='auto' style={{ paddingTop: 30, marginLeft: 12 }}>到时间自动交卷</Checkbox>
                 </div>
@@ -746,7 +746,7 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
                 >
                     <Radio value="always">自动放出</Radio>
                     <Radio value="user">
-                        <div style={{ display:'inline-block' }}>
+                        <div style={{ display: 'inline-block' }}>
                             自定义放出时间
                             <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{ width: 464, display: 'inline-block' }}/>
                         </div>
@@ -755,11 +755,11 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
             </Section>
             <Section text={'考试人员'}>
                 <div style={{ display: 'flex' }}>
-                    <Switch field='open' label={{ text:'对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
+                    <Switch field='open' label={{ text: '对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
                 </div>
                 <Select
                     field='users'
-                    label={{ text:'考生', required: true }}
+                    label={{ text: '考生', required: true }}
                     style={{ width: 560 }}
                     multiple
                     initValue={['1', '2', '3', '4']}
@@ -1093,7 +1093,7 @@ class ModalFormDemo extends React.Component {
                                     field='region'
                                     label="国家/地区"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1121,7 +1121,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="投放区域"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1538,7 +1538,7 @@ class ArrayFieldDemo extends React.Component {
                     {({ add, arrayFields, addWithInitValue }) => (
                         <React.Fragment>
                             <Button onClick={add} icon={<IconPlusCircle />} theme='light'>新增空白行</Button>
-                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft:8 }}>新增带有初始值的行</Button>
+                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft: 8 }}>新增带有初始值的行</Button>
                             {
                                 arrayFields.map(({ field, key, remove }, i) => (
                                     <div key={key} style={{ width: 1000, display: 'flex' }}>
@@ -1857,7 +1857,7 @@ const MyComponent = (props) => {
     };
     return (
         <div className='customField'>
-            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight:12 }} />
+            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight: 12 }} />
             <Select
                 insetLabel='角色'
                 value={role}
@@ -1883,7 +1883,7 @@ class WithFieldDemo2 extends React.Component {
     render() {
         return (
             <Form>
-                <CustomField field='baseInfo' label={{ text:'基本信息', required: true }} />
+                <CustomField field='baseInfo' label={{ text: '基本信息', required: true }} />
                 <ComponentUsingFormState />
             </Form>
         );

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

@@ -262,13 +262,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-card">
-        <Radio value={1} extra='Radio description' style={{ width:280 }}>
+        <Radio value={1} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{ width:280 }}>
+        <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{ width:280 }}>
+        <Radio value={3} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
     </RadioGroup>
@@ -288,13 +288,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-pureCard">
-        <Radio value={1} extra='Radio description' style={{ width:280 }}>
+        <Radio value={1} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{ width:280 }}>
+        <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{ width:280 }}>
+        <Radio value={3} extra='Radio description' style={{ width: 280 }}>
             Radio Title
         </Radio>
     </RadioGroup>

content/input/radio/index.md

@@ -196,13 +196,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-card">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
     </RadioGroup>
@@ -220,13 +220,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-pureCard">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 280 }}>
             单选框标题
         </Radio>
     </RadioGroup>

content/input/rating/index.md

@@ -119,10 +119,10 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 
 () => (
     <div>
-        <Rating style={{ color:'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
+        <Rating style={{ color: 'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
         <br/>
         <br/>
-        <Rating style={{ color:'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
+        <Rating style={{ color: 'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
         <br/>
         <br/>
         <Rating character={'赞'} size={18} defaultValue={3}/>

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

@@ -1172,7 +1172,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: 'Semi', otherKey:0 },
+        { value: 'abc', label: 'Semi', otherKey: 0 },
         { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
         { value: 'cam', label: 'UlikeCam', otherKey: 2 },
         { value: 'buzz', label: 'Buzz', otherKey: 3 },

content/input/select/index.md

@@ -64,7 +64,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -1003,7 +1003,7 @@ import { Select } from '@douyinfe/semi-ui';
                 multiple={true}
                 filter={true}
                 placeholder='With renderCreateItem'
-                renderCreateItem={input => <div style={{ padding:10 }}>Create Item：{input}</div>}
+                renderCreateItem={input => <div style={{ padding: 10 }}>Create Item：{input}</div>}
                 onChange={v => console.log(v)}
                 defaultActiveFirstOption
             >
@@ -1227,7 +1227,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },

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

@@ -365,13 +365,13 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['xiakeman']
+            value: ['xiakeman']
         };
         this.list = [
-            { "name": "xiakeman", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "shenyue", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "name": "quchenyi", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
-            { "name": "wenjiamao", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
+            { "name": "xiakeman", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "shenyue", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "name": "quchenyi", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
+            { "name": "wenjiamao", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
         this.mapList = new Map(this.list.map( item => [item.name, item]));
     }

content/input/taginput/index.md

@@ -344,7 +344,7 @@ class TagInputDemo extends React.Component {
         return (
             <>
                 <TagInput defaultValue={['抖音', '火山']} ref={this.ref} />
-                <Button style={{ marginTop:10 }} onClick={this.handleTagInputFocus}>
+                <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}>
                     点击按钮聚焦
                 </Button>
             </>
@@ -365,13 +365,13 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['夏可漫']
+            value: ['夏可漫']
         };
         this.list = [
-            { "name": "夏可漫", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "申悦", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "name": "曲晨一", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
-            { "name": "文嘉茂", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
+            { "name": "夏可漫", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "申悦", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "name": "曲晨一", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
+            { "name": "文嘉茂", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
         this.mapList = new Map(this.list.map( item => [item.name, item]));
     }

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

@@ -476,19 +476,19 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    { itemKey:'user', text:'User Management', icon: <IconUser /> },
-                    { itemKey:'union', text:'guild center', icon: <IconStar /> },
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
+                    { itemKey: 'union', text: 'guild center', icon: <IconStar /> },
                     {
-                        text:'Task platform',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
+                        itemKey: 'job',
                         items: ['task management', 'user task query'],
                     },
                 ]}
                 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:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,
@@ -521,19 +521,19 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    { itemKey:'user', text:'User Management', icon: <IconUser /> },
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
                     {
-                        text:'Task platform',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
+                        itemKey: 'job',
                         items: ['Task Management', {
-                            text:'Task 1',
+                            text: 'Task 1',
                             icon: <IconSetting />,
-                            itemKey:'mission1',
+                            itemKey: 'mission1',
                             items: ['Task 2', {
-                                text:'Task 3 disassembly',
+                                text: 'Task 3 disassembly',
                                 icon: <IconSetting />,
-                                itemKey:'mission3',
+                                itemKey: 'mission3',
                                 items: ['Subtask 1', 'Subtask 2'],
                             }, ],
                         }, ],
@@ -542,7 +542,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:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,

content/navigation/steps/index.md

@@ -67,8 +67,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex', justifyContent:'center' }}>
-        <Steps type="nav" current={1} style={{ margin:'auto' }}>
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" current={1} style={{ margin: 'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -101,8 +101,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex', justifyContent:'center' }}>
-        <Steps type="nav" size="small" current={1} style={{ margin:'auto' }}>
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />

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

@@ -499,9 +499,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: 'Doc', itemKey:'1', text:'Doc', closable:true },
-                { tab: 'Quick Start', itemKey:'2', text:'Quick Start', closable:true },
-                { tab: 'Help', itemKey:'3', text:'Help' },
+                { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },
+                { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },
+                { tab: 'Help', itemKey: '3', text: 'Help' },
             ]
         };
     }
@@ -509,7 +509,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

content/navigation/tabs/index.md

@@ -523,9 +523,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: '文档', itemKey:'1', text:'文档', closable:true },
-                { tab: '快速起步', itemKey:'2', text:'快速起步', closable:true },
-                { tab: '帮助', itemKey:'3', text:'帮助' },
+                { tab: '文档', itemKey: '1', text: '文档', closable: true },
+                { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
+                { tab: '帮助', itemKey: '3', text: '帮助' },
             ]
         };
     }
@@ -533,7 +533,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

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

@@ -43,7 +43,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{ color:'var(--semi-color-primary)' }}/>}>
+            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -179,7 +179,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{ padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>

content/show/badge/index.md

@@ -41,7 +41,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{ color:'var(--semi-color-primary)' }}/>}>
+            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -177,7 +177,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{ padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>

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

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -443,7 +443,7 @@ function Demo() {
                     <Meta 
                         title={
                             <Skeleton
-                                style={{ width:80 }}
+                                style={{ width: 80 }}
                                 placeholder={<Title />}
                                 loading={loading}
                             >
@@ -454,7 +454,7 @@ function Demo() {
                         } 
                         description={
                             <Skeleton 
-                                style={{ width:150, marginTop: 12 }} 
+                                style={{ width: 150, marginTop: 12 }} 
                                 placeholder={<Paragraph rows={1} />} 
                                 loading={loading}
                             >
@@ -587,7 +587,7 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
@@ -599,7 +599,7 @@ function Demo() {
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -637,7 +637,7 @@ function Demo() {
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

content/show/card/index.md

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
+                    <IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -443,7 +443,7 @@ function Demo() {
                     <Meta 
                         title={
                             <Skeleton
-                                style={{ width:80 }}
+                                style={{ width: 80 }}
                                 placeholder={<Title />}
                                 loading={loading}
                             >
@@ -454,7 +454,7 @@ function Demo() {
                         } 
                         description={
                             <Skeleton 
-                                style={{ width:150, marginTop: 12 }} 
+                                style={{ width: 150, marginTop: 12 }} 
                                 placeholder={<Paragraph rows={1} />} 
                                 loading={loading}
                             >
@@ -587,7 +587,7 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
@@ -599,7 +599,7 @@ function Demo() {
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -637,7 +637,7 @@ function Demo() {
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

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

@@ -44,7 +44,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -112,7 +112,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -196,7 +196,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -294,7 +294,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -381,7 +381,7 @@ class CarouselDemo extends React.Component {
     
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -459,7 +459,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -528,7 +528,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -596,7 +596,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

content/show/carousel/index.md

@@ -43,7 +43,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -111,7 +111,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -195,7 +195,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -293,7 +293,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -380,7 +380,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -458,7 +458,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -527,7 +527,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -595,7 +595,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

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

@@ -180,7 +180,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | - |
 | expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | - |
 | 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 |
+| motion | Toggle whether to have animation | boolean | `true` | 1.4.0 |
 | expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0 |
 | style | Inline CSS style | CSSProperties | {} | - |
 | onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | - |

content/show/collapse/index.md

@@ -180,7 +180,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | - |
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | bool | `false` | 0.25.0 |
-| motion | 是否开启动画 | object \| boolean | `true` | 1.4.0 |
+| motion | 是否开启动画 | boolean | `true` | 1.4.0 |
 | style | 内联 CSS 样式 | CSSProperties | {} | - |
 | onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | - |
 

content/show/collapsible/index.md

@@ -209,13 +209,14 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 ## API 参考
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| -- | --- | --- | --- | --- |
 | className | 类名 | string | - | 0.34.0 |
 | collapseHeight | 折叠高度 | number | 0 | 1.0.0 |
 | duration | 动画执行的时间 | number | 250 | - |
+| fade | 是否开启淡入淡出 | boolean | false | 2.21.0 |
 | isOpen | 是否展开内容区域 | boolean | `false` | - |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | boolean | `false` | 0.25.0 |
-| motion | 是否开启动画 | Motion | `true` | - |
+| motion | 是否开启动画 | boolean | `true` | - |
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number \| string | - | 1.5.0 |
 | style | 样式 | CSSProperties | - | 0.34.0 |
 | id | id | html id string type | - | 2.3.0 |

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

@@ -315,7 +315,7 @@ class Demo extends React.Component {
 | mask | Toggle whether to show mask. After `v0.29.0`, when `mask={false}`, you could continue operations outside SideSheet | boolean | true | - |
 | maskClosable | Toggle whether to allow closing when clicking mask | boolean | true | - |
 | maskStyle | Mask style | CSSProperties | - | - |
-| motion | Toggle whether to turn on animation | object \| boolean | true | - |
+| motion | Toggle whether to turn on animation | boolean | true | - |
 | placement | Sliding position, one of `top`, `bottom`, `left`, `right` | string | `right` | - |
 | size | Size, one of `small`(400px)， `medium`(684px), `large`(920px), only take effects when placement is set to `left` or `right` | string | `small` | 0.29.0 |
 | style | Inline style | CSSProperties | - | - |

content/show/sidesheet/index.md

@@ -314,7 +314,7 @@ class Demo extends React.Component {
 | mask | 是否显示遮罩，在 `0.29.0` 版本之后，当 `mask={false}` 时允许对外部区域进行操作 | boolean | true | - |
 | maskClosable | 是否允许通过点击遮罩来关闭面板 | boolean | true | - |
 | maskStyle | 遮罩的样式 | CSSProperties | - | - |
-| motion | 是否允许动画 | object \| boolean | true | - |
+| motion | 是否允许动画 | boolean | true | - |
 | placement | 侧边栏滑出位置，支持`top`, `bottom`, `left`, `right` | string | `right` | - |
 | size | 尺寸，支持 `small`(448px)， `medium`(684px), `large`(920px)，仅在 `left` 或 `right` 时生效 | string | `small` | 0.29.0 |
 | style | 可用于设置样式 | CSSProperties | - | - |

content/show/tag/index.md

@@ -164,7 +164,7 @@ import { Tag, Button } from '@douyinfe/semi-ui';
     return (
         <div>
             <Button onClick={toggleVisible}>{visible ? 'Hide Tag': 'Show Tag'}</Button>
-            <div style={{ marginTop:10 }}>
+            <div style={{ marginTop: 10 }}>
                 <Tag visible={visible}>Invisible tag </Tag>
             </div>
         </div>

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

@@ -148,29 +148,29 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
         mode='alternate' 
         dataSource={[
             {
-                time:'2019-07-14 10:35',
-                extra:'Extra Information',
-                content:'First Node Content',
-                type:'ongoing',
+                time: '2019-07-14 10:35',
+                extra: 'Extra Information',
+                content: 'First Node Content',
+                type: 'ongoing',
             },
             {
-                time:'2019-06-13 16:17',
-                extra:'Extra Information',
-                content:<span style={{ fontSize: '18px' }}>Second Node Content</span>,
-                color:'pink',
+                time: '2019-06-13 16:17',
+                extra: 'Extra Information',
+                content: <span style={{ fontSize: '18px' }}>Second Node Content</span>,
+                color: 'pink',
             },
             {
-                time:'2019-05-14 18:34',
-                extra:'Extra Information',
-                dot:<IconAlertTriangle />,
-                content:'Third Node Content',
-                type:'warning',
+                time: '2019-05-14 18:34',
+                extra: 'Extra Information',
+                dot: <IconAlertTriangle />,
+                content: 'Third Node Content',
+                type: 'warning',
             },
             {
-                time:'2019-05-09 09:12',
-                extra:'Extra Information',
-                content:'Forth Node Content',
-                type:'success',
+                time: '2019-05-09 09:12',
+                extra: 'Extra Information',
+                content: 'Forth Node Content',
+                type: 'success',
             }    
         ]} 
     />

content/show/tooltip/index.md

@@ -443,7 +443,7 @@ function Demo() {
 | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | function():HTMLElement | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
 | mouseLeaveDelay | 鼠标移出后，延迟消失的时间，单位毫秒（仅当 trigger 为 hove/focus 时生效），不小于 mouseEnterDelay | number | 50 |  |
-| motion | 是否展示弹出层动画 | boolean\|object | true |  |
+| motion | 是否展示弹出层动画 | boolean | true |  |
 | position | 弹出层展示位置，可选值：`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
 | prefixCls | 弹出层 wrapper div 的 `className` 前缀，设置该项时，弹出层将不再带 Tooltip 的样式 | string | 'semi-tooltip' |  |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |

package.json

@@ -197,7 +197,7 @@
         "svgo": "^2.7.0",
         "terser-webpack-plugin": "^4.2.3",
         "ts-loader": "^5.4.5",
-        "typescript": "4.4.3",
+        "typescript": "^4.8.3",
         "webpack": "^4.46.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.2",

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

@@ -21,7 +21,7 @@ export interface AnimationProps {
     config?: Record<string, any>;
     autoStart?: boolean;
     forwardInstance?: (value: any) => void;
-    immediate?: boolean;
+    immediate?: boolean
 }
 
 export default class Animation extends PureComponent<AnimationProps> {

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

@@ -11,12 +11,12 @@ export interface KeyFramesProps {
     forwardInstance?: (value: any) => void;
     onFrame?: (value: any) => void;
     onKeyRest?: (value: Record<string, any>) => void;
-    onRest?: (value: Record<string, any>) => void;
+    onRest?: (value: Record<string, any>) => void
 }
 
 export interface KeyFramesStates {
     currentStyle: Record<string, any>;
-    frameIndex: number;
+    frameIndex: number
 }
 
 export default class KeyFrames extends Component<KeyFramesProps, KeyFramesStates> {

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

@@ -25,7 +25,7 @@ export interface StyledAnimationProps {
     prefixCls?: string;
     timing?: string;
     duration?: string | number;
-    fillMode?: string;
+    fillMode?: string
 }
 
 export interface StyledAnimateStyleType {
@@ -35,7 +35,7 @@ export interface StyledAnimateStyleType {
     animationDelay: string | number;
     animationIterationCount: string | number;
     animationDirection: string;
-    animationFillMode: string;
+    animationFillMode: string
 }
 
 const types: any = Object.values(styledTypes).reduce((arr, cur) => [...arr as any, ...cur as any], []);

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

@@ -7,7 +7,7 @@ import noop from './utils/noop';
 export interface ChildFCType {
     animateCls?: string;
     animateStyle?: StyledAnimateStyleType;
-    animateEvents?: (eventProps?: any) => void;
+    animateEvents?: (eventProps?: any) => void
 }
 
 export interface StyledTransitionProps extends StyledAnimationProps {
@@ -20,13 +20,13 @@ export interface StyledTransitionProps extends StyledAnimationProps {
     willLeave?: (value: any) => void;
     didLeave?: (value: any) => void;
     onStart?: (value: any) => void;
-    onRest?: (value: any) => void;
+    onRest?: (value: any) => void
 }
 
 export interface StyledTransitionState {
     state: string | boolean;
     lastChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
-    currentChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
+    currentChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any)
 }
 
 export default class StyledTransition extends Component<StyledTransitionProps, StyledTransitionState> {

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

@@ -15,13 +15,13 @@ export interface TransitionProps extends AnimationProps {
     willLeave?: (value: any) => void;
     didLeave?: (value: any) => void;
     onRest?: (value: any) => void;
-    onStart?: (value: any) => void;
+    onStart?: (value: any) => void
 }
 
 export interface TransitionState {
     state: string | boolean;
     lastChildren: React.ReactNode | ((TransitionProps: any) => React.ReactNode | any);
-    currentChildren: React.ReactNode | ((TransitionProps: any) => React.ReactNode | any);
+    currentChildren: React.ReactNode | ((TransitionProps: any) => React.ReactNode | any)
 }
 
 export default class Transition extends Component<TransitionProps, TransitionState> {

packages/semi-animation/src/presets.ts

@@ -6,7 +6,7 @@
 
 export interface PresetsItem {
     tension: number;
-    friction: number;
+    friction: number
 }
 export interface Presets {
     default: PresetsItem;
@@ -14,7 +14,7 @@ export interface Presets {
     wobbly: PresetsItem;
     stiff: PresetsItem;
     slow: PresetsItem;
-    molasses: PresetsItem;
+    molasses: PresetsItem
 }
 export default {
     default: { tension: 170, friction: 26 }, // the default, if nothing provided

packages/semi-animation/src/wrapValue.ts

@@ -4,22 +4,22 @@ import shouldUseBezier from './shouldUseBezier';
 
 export interface Value {
     easing: string;
-    duration: number | string;
+    duration: number | string
 }
 
 export interface DefaultConfig extends PresetsItem {
-    precision: number;
+    precision: number
 }
 
 export interface Config {
     easing?: string;
     duration?: number | string;
-    delay?: string;
+    delay?: string
 }
 
 export interface Wrapped extends DefaultConfig, Config {
     done: boolean;
-    val?: Value;
+    val?: Value
 }
 
 const defaultConfig: DefaultConfig = {

packages/semi-eslint-plugin/src/rules/no-import.ts

@@ -78,14 +78,14 @@ function isRelativePath(path: string) {
     return path.includes('../');
 }
 
-function isImportRelativePackage(options: { path: string, fileName: string }) {
+function isImportRelativePackage(options: { path: string; fileName: string }) {
     const { path, fileName } = options;
     const currentPackageName = SEMI_PACKAGE_REG.exec(fileName)[0];
     const importPackageName = SEMI_PACKAGE_REG.exec(path)[0];
     return currentPackageName !== importPackageName && isRelativePath(path);
 }
 
-function isImportSelf(options: { path: string, fileName: string }) {
+function isImportSelf(options: { path: string; fileName: string }) {
     const { path, fileName } = options;
     const currentPackageName = SEMI_PACKAGE_REG.exec(fileName)[0];
     const importPackageName = SEMI_PACKAGE_REG.exec(path)[0];

packages/semi-foundation/anchor/foundation.ts

@@ -21,7 +21,7 @@ export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>>
     getContentNode: (selector: string) => HTMLElement;
     notifyChange: (currentLink: string, previousLink: string) => void;
     notifyClick: (e: any, link: string) => void;
-    canSmoothScroll: () => boolean;
+    canSmoothScroll: () => boolean
 }
 
 export default class AnchorFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AnchorAdapter<P, S>, P, S> {

packages/semi-foundation/anchor/linkFoundation.ts

@@ -3,7 +3,7 @@ import { AnchorAdapter } from './foundation';
 
 export interface LinkAdapter extends DefaultAdapter {
     addLink: AnchorAdapter['addLink'];
-    removeLink: AnchorAdapter['removeLink'];
+    removeLink: AnchorAdapter['removeLink']
 }
 
 export default class LinkFoundation extends BaseFoundation<LinkAdapter> {

packages/semi-foundation/autoComplete/foundation.ts

@@ -8,7 +8,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
-    notifyKeyDown: (e: any) => void;
+    notifyKeyDown: (e: any) => void
 }
 
 export interface DataItem {
@@ -19,7 +19,7 @@ export interface DataItem {
 
 export interface StateOptionItem extends DataItem {
     show?: boolean;
-    key?: string | number;
+    key?: string | number
 }
 
 export type AutoCompleteData = Array<DataItem | string>;
@@ -38,7 +38,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyClear: () => void;
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
-    rePositionDropdown: () => void;
+    rePositionDropdown: () => void
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {

packages/semi-foundation/autoComplete/optionFoundation.ts

@@ -9,10 +9,10 @@ export interface BasicOptionProps {
     disabled?: boolean;
     showTick?: boolean;
     className?: string;
-    style?: Record<string, any>;
+    style?: Record<string, any>
 }
 export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
-    notifyClick(option: BasicOptionProps): void;
+    notifyClick(option: BasicOptionProps): void
 }
 
 

packages/semi-foundation/avatar/foundation.ts

@@ -5,7 +5,7 @@ export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyImgState(isImgExist: boolean): void;
     notifyLeave(event: any): void;
     notifyEnter(event: any): void;
-    setFocusVisible: (focusVisible: boolean) => void;
+    setFocusVisible: (focusVisible: boolean) => void
 }
 
 export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {

packages/semi-foundation/backtop/foundation.ts

@@ -10,7 +10,7 @@ export interface BackTopAdapter extends DefaultAdapter {
     notifyClick: (e: BackTopClickEvent) => void;
     targetIsWindow: (target: any) => boolean;
     isWindowUndefined: () => boolean;
-    targetScrollToTop: (targetNode: any, scrollTop: number) => void;
+    targetScrollToTop: (targetNode: any, scrollTop: number) => void
 }
 
 export default class BackTopFoundation extends BaseFoundation<BackTopAdapter> {

packages/semi-foundation/banner/foundation.ts

@@ -2,7 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 
 export interface BannerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: () => void;
-    notifyClose: (e: any) => void;
+    notifyClose: (e: any) => void
 }
 
 export default class BannerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BannerAdapter<P, S>, P, S> {

packages/semi-foundation/base/foundation.ts

@@ -20,7 +20,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getCache(c: string): any;
     getCaches(): any;
     setCache(key: any, value: any): void;
-    stopPropagation(e: any): void;
+    stopPropagation(e: any): void
 }
 
 class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {

packages/semi-foundation/breadcrumb/foundation.ts

@@ -4,7 +4,7 @@ import isEnterPress from '../utils/isEnterPress';
 import { BreadcrumbItemInfo, Route } from './itemFoundation';
 export interface BreadcrumbAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (itemInfo: BreadcrumbItemInfo, event: any) => void;
-    expandCollapsed: (clickEvent?: any) => void;
+    expandCollapsed: (clickEvent?: any) => void
 }
 
 export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbAdapter<P, S>, P, S> {

packages/semi-foundation/breadcrumb/itemFoundation.ts

@@ -4,7 +4,7 @@ export interface BreadcrumbItemInfo {
     name?: any; // maybe reactNode, string, number
     href?: string;
     icon?: any;
-    path?: string;
+    path?: string
 }
 
 export interface Route {
@@ -12,12 +12,12 @@ export interface Route {
     path?: string;
     href?: string;
     name?: string;
-    icon?: any;
+    icon?: any
 }
 
 export interface BreadcrumbItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (item: BreadcrumbItemInfo, e: any) => void;
-    notifyParent: (item: BreadcrumbItemInfo, e: any) => void;
+    notifyParent: (item: BreadcrumbItemInfo, e: any) => void
 }
 
 export default class BreadcrumbItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbItemAdapter<P, S>, P, S> {

packages/semi-foundation/calendar/eventUtil.ts

@@ -93,7 +93,7 @@ export interface DateObj {
     isToday: boolean;
     isWeekend: boolean;
     isSameMonth: boolean;
-    month: string;
+    month: string
 }
 
 export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;

packages/semi-foundation/calendar/foundation.ts

@@ -43,38 +43,38 @@ export interface EventObject {
     start?: Date;
     end?: Date;
     // children?: React.ReactNode;
-    children?: any;
+    children?: any
 }
 
 export interface ParsedEventsWithArray {
     day: Array<any>;
-    allDay: Array<any>;
+    allDay: Array<any>
 }
 
 export interface ParsedEvents {
     day?: Map<string, Array<EventObject>>;
-    allDay?: Map<string, Array<EventObject>>;
+    allDay?: Map<string, Array<EventObject>>
 }
 
 export interface ParsedRangeEvent extends EventObject {
     leftPos?: number;
     width?: number;
-    topInd?: number;
+    topInd?: number
 }
 
 export interface MonthlyEvent {
     day: ParsedRangeEvent[][];
-    display: ParsedRangeEvent[];
+    display: ParsedRangeEvent[]
 }
 
 export interface RangeData {
     month: string;
-    week: any[];
+    week: any[]
 }
 
 export interface WeeklyData {
     month: string;
-    week: DateObj[];
+    week: DateObj[]
 }
 
 export type MonthData = Record<number, DateObj[]>;
@@ -103,7 +103,7 @@ export interface CalendarAdapter<P = Record<string, any>, S = Record<string, any
     getMonthlyData?: () => MonthData;
     notifyClose?: (e: any, key: string) => void;
     openCard?: (key: string, spacing: boolean) => void;
-    setItemLimit?: (itemLimit: number) => void;
+    setItemLimit?: (itemLimit: number) => void
 }
 
 export default class CalendarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CalendarAdapter<P, S>, P, S> {

packages/semi-foundation/card/variables.scss

@@ -16,7 +16,7 @@ $font-card_title-fontSize: $font-size-header-6; // 卡片文字大小 - 标题
 
 $radius-card: var(--semi-border-radius-medium); // 卡片圆角
 
-$motion-card-transition_duration: 0.3s; // 卡片悬浮动画时长
+$motion-card-transition_duration: 300ms; // 卡片悬浮动画时长
 
 $width-card-border: $border-thickness-control; // 卡片描边宽度
 

packages/semi-foundation/cascader/foundation.ts

@@ -24,11 +24,11 @@ export interface BasicData {
     data: BasicCascaderData;
     disabled: boolean;
     key: string;
-    searchText: any[];
+    searchText: any[]
 }
 
 export interface BasicEntities {
-    [idx: string]: BasicEntity;
+    [idx: string]: BasicEntity
 }
 
 export interface BasicEntity {
@@ -50,7 +50,7 @@ export interface BasicEntity {
     /* key path */
     path: Array<string>;
     /* value path */
-    valuePath: Array<string>;
+    valuePath: Array<string>
 }
 
 export interface BasicCascaderData {
@@ -60,7 +60,7 @@ export interface BasicCascaderData {
     disabled?: boolean;
     isLeaf?: boolean;
     loading?: boolean;
-    children?: BasicCascaderData[];
+    children?: BasicCascaderData[]
 }
 
 export type CascaderType = 'large' | 'small' | 'default';
@@ -92,12 +92,12 @@ export interface BasicTriggerRenderProps {
      * with Cascader. */
     onChange: (inputValue: string) => void;
     /* Function to clear the value */
-    onClear: (e: any) => void;
+    onClear: (e: any) => void
 }
 
 export interface BasicScrollPanelProps {
     panelIndex: number;
-    activeNode: BasicCascaderData;
+    activeNode: BasicCascaderData
 }
 
 export interface BasicCascaderProps {
@@ -114,7 +114,7 @@ export interface BasicCascaderProps {
     dropdownStyle?: any;
     emptyContent?: any;
     filterLeafOnly?: boolean;
-    motion?: Motion;
+    motion?: boolean;
     filterTreeNode?: ((inputValue: string, treeNodeString: string) => boolean) | boolean;
     placeholder?: string;
     searchPlaceholder?: string;
@@ -159,7 +159,7 @@ export interface BasicCascaderProps {
     onExceed?: (checkedItem: BasicEntity[]) => void;
     displayRender?: (selected: Array<string> | BasicEntity, idx?: number) => any;
     onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
+    onFocus?: (e: any) => void
 }
 
 export interface BasicCascaderInnerData {
@@ -184,7 +184,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
-    showInput?: boolean;
+    showInput?: boolean
 }
 
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
@@ -211,7 +211,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
     toggleInputShow: (show: boolean, cb: () => void) => void;
-    updateFocusState: (focus: boolean) => void,
+    updateFocusState: (focus: boolean) => void
 }
 
 // eslint-disable-next-line max-len
@@ -550,27 +550,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._adapter.updateFocusState(true);
     }
 
-    getMergedMotion = () => {
-        const { motion } = this.getProps();
-        const { isSearching } = this.getStates();
-        if (isSearching) {
-            const mergedMotion =
-                typeof motion === 'undefined' || motion ?
-                    {
-                        ...motion,
-                        didLeave: (...args: any) => {
-                            const didLeave = get(motion, 'didLeave');
-                            if (typeof didLeave === 'function') {
-                                didLeave(...args);
-                            }
-                            this._adapter.updateStates({ isSearching: false });
-                        },
-                    } :
-                    false;
-            return mergedMotion;
-        }
-        return motion;
-    };
+
+    updateSearching = (isSearching:boolean)=>{
+        this._adapter.updateStates({ isSearching: false });
+    }
 
     handleItemClick(e: any, item: BasicEntity | BasicData) {
         const isDisabled = this._isDisabled();

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -4,14 +4,14 @@ import warning from '../utils/warning';
 
 export interface BasicTargetObject {
     [x: string]: any;
-    checked?: boolean;
+    checked?: boolean
 }
 export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
     nativeEvent: {
-        stopImmediatePropagation: () => void;
+        stopImmediatePropagation: () => void
     }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -25,7 +25,7 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
     setAddonId: () => void;
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
-    focusCheckboxEntity: () => void;
+    focusCheckboxEntity: () => void
 }
 
 class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
@@ -170,7 +170,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
-    preventScroll?: boolean;
+    preventScroll?: boolean
 }
 
 export default CheckboxFoundation;

packages/semi-foundation/checkbox/checkboxGroupFoundation.ts

@@ -4,7 +4,7 @@ import { BasicCheckboxEvent } from './checkboxFoundation';
 
 export interface CheckboxGroupAdapter extends DefaultAdapter{
     updateGroupValue: (value: any[]) => void;
-    notifyChange: (value: any[]) => void;
+    notifyChange: (value: any[]) => void
 }
 class CheckboxGroupFoundation extends BaseFoundation<CheckboxGroupAdapter> {
     static get checkboxGroupDefaultAdapter() {

packages/semi-foundation/collapse/foundation.ts

@@ -13,20 +13,20 @@ export interface CollapseProps{
     style?: any;
     className?: string;
     keepDOM?: boolean;
-    motion?: Motion;
-    expandIconPosition?: 'left' | 'right';
+    motion?: boolean;
+    expandIconPosition?: 'left' | 'right'
 
 }
 
 export interface CollapseState{
-    activeSet: Set<string>;
+    activeSet: Set<string>
 }
 
 export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState>{
     handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
     // getStates: () => CollapseState;
     // getProps: () => CollapseProps;
-    addActiveKey: (newSet: CollapseState['activeSet']) => void;
+    addActiveKey: (newSet: CollapseState['activeSet']) => void
 }
 
 export default class CollapseFoundation extends BaseFoundation<CollapseAdapter> {

packages/semi-foundation/collapsible/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-collapsible-height: 250ms;//折叠-高度-动画持续时间
+$transition_function-collapsible-height: cubic-bezier(0.25,0.1,0.25,1);//折叠-高度-过渡曲线
+$transition_delay-collapsible-height: var(--semi-transition_delay-fastest);//折叠-高度-延迟时间
+
+$transition_duration-collapsible-opacity: 250ms;//折叠-透明度-动画持续时间
+$transition_function-collapsible-opacity: var(--semi-transition_function-easeIn);//折叠-透明度-过渡曲线
+$transition_delay-collapsible-opacity: var(--semi-transition_delay-fastest);//折叠-透明度-延迟时间
+
+
+

packages/semi-foundation/collapsible/collapsible.scss

@@ -0,0 +1,11 @@
+@import "./animation.scss";
+@import "./variables.scss";
+
+
+$module: #{$prefix}-collapsible;
+
+
+.#{$module}-transition{
+    transition: height $transition_duration-collapsible-height $transition_function-collapsible-height $transition_delay-collapsible-height,
+    opacity $transition_duration-collapsible-opacity $transition_function-collapsible-opacity $transition_delay-collapsible-opacity,
+}

packages/semi-foundation/collapsible/foundation.ts

@@ -0,0 +1,59 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+
+export interface CollapsibleFoundationProps {
+    isOpen?: boolean;
+    duration?: number;
+    keepDOM?: boolean;
+    className?: string;
+    collapseHeight?: number;
+    reCalcKey?: number | string;
+    id?: string;
+    fade?: boolean
+}
+
+export interface CollapsibleFoundationState {
+    domInRenderTree: boolean;
+    domHeight: number;
+    visible: boolean;
+    isTransitioning: boolean
+
+}
+
+
+export interface CollapsibleAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setDOMInRenderTree: (isInRenderTree: boolean) => void;
+    setDOMHeight: (domHeight: number) => void;
+    setVisible: (visible: boolean) => void;
+    setIsTransitioning: (isTransitioning: boolean) => void
+}
+
+class CollapsibleFoundation extends BaseFoundation<CollapsibleAdapter<CollapsibleFoundationProps, CollapsibleFoundationState>, CollapsibleFoundationProps, CollapsibleFoundationState> {
+
+    constructor(adapter: CollapsibleAdapter<CollapsibleFoundationProps, CollapsibleFoundationState>) {
+        super({
+            ...adapter
+        });
+    }
+
+
+    updateDOMInRenderTree = (isInRenderTree) => {
+        this._adapter.setDOMInRenderTree(isInRenderTree);
+    }
+
+    updateDOMHeight = (domHeight: number) => {
+        this._adapter.setDOMHeight(domHeight);
+    }
+
+    updateVisible = (visible: boolean) => {
+        this._adapter.setVisible(visible);
+    }
+
+    updateIsTransitioning = (isTransitioning: boolean) => {
+        this._adapter.setIsTransitioning(isTransitioning);
+    }
+
+
+}
+
+
+export default CollapsibleFoundation;

packages/semi-foundation/datePicker/_utils/getDefaultPickerDate.ts

@@ -50,5 +50,5 @@ type BaseValueType = string | number | Date;
 interface GetDefaultPickerValueDateOptions {
     defaultPickerValue?: BaseValueType | BaseValueType[];
     format: string;
-    dateFnsLocale: dateFnsLocale;
+    dateFnsLocale: dateFnsLocale
 }

packages/semi-foundation/datePicker/_utils/getInsetInputFormatToken.ts

@@ -16,7 +16,7 @@ import { getDefaultFormatTokenByType } from './getDefaultFormatToken';
  * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
  * 'Pp' => 'yyyy-MM-dd'
  */
-export default function getInsetInputFormatToken(options: { format: string, type: typeof strings.TYPE_SET[number]; }) {
+export default function getInsetInputFormatToken(options: { format: string; type: typeof strings.TYPE_SET[number] }) {
     const { format, type } = options;
     const dateReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4})/i;
     const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;

packages/semi-foundation/datePicker/_utils/getInsetInputValueFromInsetInputStr.ts

@@ -16,7 +16,7 @@ import { strings } from '../constants';
  * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
  * ```
  */
-export default function getInsetInputValueFromInsetInputStr(options: { inputValue: string; rangeSeparator: string, type: typeof strings.TYPE_SET[number] }) {
+export default function getInsetInputValueFromInsetInputStr(options: { inputValue: string; rangeSeparator: string; type: typeof strings.TYPE_SET[number] }) {
     const timeSeparator = ' ';
     const { inputValue = '', rangeSeparator, type } = options;
     let leftDateInput, leftTimeInput, rightDateInput, rightTimeInput;

packages/semi-foundation/datePicker/_utils/parser.ts

@@ -46,7 +46,7 @@ export function isValueParseValid(options: {
     value: string;
     formatToken: string;
     baseDate?: Date;
-    locale?: Locale;
+    locale?: Locale
 }) {
     const { value, locale, formatToken } = options;
     const baseDate = options.baseDate || new Date();

packages/semi-foundation/datePicker/foundation.ts

@@ -36,7 +36,7 @@ export type DayStatusType = {
     isHover?: boolean; // Date between selection and hover date
     isOffsetRangeStart?: boolean; // Week selection start
     isOffsetRangeEnd?: boolean; // End of week selection
-    isHoverInOffsetRange?: boolean; // Hover in the week selection
+    isHoverInOffsetRange?: boolean // Hover in the week selection
 };
 export type DisabledDateOptions = {
     rangeStart?: string;
@@ -44,12 +44,12 @@ export type DisabledDateOptions = {
     /**
      * current select of range type
      */
-    rangeInputFocus?: 'rangeStart' | 'rangeEnd' | false;
+    rangeInputFocus?: 'rangeStart' | 'rangeEnd' | false
 };
 export type PresetType = {
     start?: string | Date | number;
     end?: string | Date | number;
-    text?: string;
+    text?: string
 };
 
 export type TriggerRenderProps = {
@@ -61,7 +61,7 @@ export type TriggerRenderProps = {
     size?: InputSize;
     disabled?: boolean;
     inputReadOnly?: boolean;
-    componentProps?: DatePickerFoundationProps;
+    componentProps?: DatePickerFoundationProps
 };
 
 export type DateOffsetType = (selectedDate?: Date) => Date;
@@ -70,7 +70,7 @@ export type DisabledDateType = (date?: Date, options?: DisabledDateOptions) => b
 export type DisabledTimeType = (date?: Date | Date[], panelType?: string) => ({
     disabledHours?: () => number[];
     disabledMinutes?: (hour: number) => number[];
-    disabledSeconds?: (hour: number, minute: number) => number[];
+    disabledSeconds?: (hour: number, minute: number) => number[]
 });
 export type OnCancelType = (date: Date | Date[], dateStr: string | string[]) => void;
 export type OnPanelChangeType = (date: Date | Date[], dateStr: string | string[]) => void;
@@ -91,13 +91,13 @@ export interface ElementProps {
     bottomSlot?: any;
     insetLabel?: any;
     prefix?: any;
-    topSlot?: any;
+    topSlot?: any
 }
 
 export interface RenderProps {
     renderDate?: RenderDateType;
     renderFullDate?: RenderFullDateType;
-    triggerRender?: TriggerRenderType;
+    triggerRender?: TriggerRenderType
 }
 
 export type RangeType = 'rangeStart' | 'rangeEnd' | false;
@@ -115,7 +115,7 @@ export interface EventHandlerProps {
     onClear?: (e: any) => void;
     // onFocus?: React.MouseEventHandler<HTMLInputElement>;
     onFocus?: (e: any, rangType: RangeType) => void;
-    onPresetClick?: OnPresetClickType;
+    onPresetClick?: OnPresetClickType
 }
 
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
@@ -138,7 +138,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     inputReadOnly?: boolean;
     inputStyle?: Record<string, any>;
     max?: number;
-    motion?: Motion;
+    motion?: boolean;
     multiple?: boolean;
     needConfirm?: boolean;
     onChangeWithDateFirst?: boolean;
@@ -169,7 +169,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
-    preventScroll?: boolean;
+    preventScroll?: boolean
 }
 
 export interface DatePickerFoundationState {
@@ -179,11 +179,10 @@ export interface DatePickerFoundationState {
     value: Date[];
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
-    motionEnd: boolean;
     rangeInputFocus: RangeType;
     autofocus: boolean;
     insetInputValue: InsetInputValue;
-    triggerDisabled: boolean;
+    triggerDisabled: boolean
 }
 
 export { Type, DateInputFoundationProps };
@@ -206,15 +205,14 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     updateInputValue: (inputValue: string) => void;
     needConfirm: () => boolean;
     typeIsYearOrMonth: () => boolean;
-    setMotionEnd: (motionEnd: boolean) => void;
     setRangeInputFocus: (rangeInputFocus: DatePickerFoundationState['rangeInputFocus']) => void;
     couldPanelClosed: () => boolean;
     isEventTarget: (e: any) => boolean;
     updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
     setInsetInputFocus: () => void;
-    setTriggerDisabled: (disabled: boolean) => void;
+    setTriggerDisabled: (disabled: boolean) => void
 }
-
+ 
 
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -478,7 +476,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *  - inputValue（可以解析为合法日期时）
      *  - value（可以解析为合法日期时）
      */
-    handleInsetInputChange(options: { insetInputStr: string, format: string, insetInputValue: InsetInputValue }) {
+    handleInsetInputChange(options: { insetInputStr: string; format: string; insetInputValue: InsetInputValue }) {
         const { insetInputStr, format, insetInputValue } = options;
         const _isMultiple = this._isMultiple();
         const result = _isMultiple ? this.parseMultipleInput(insetInputStr, format) : this.parseInput(insetInputStr, format);
@@ -1218,18 +1216,6 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         return isSomeDateDisabled;
     }
 
-    getMergedMotion = (motion: any) => {
-        const mergedMotion = typeof motion === 'undefined' || motion ? {
-            ...motion,
-            didEnter: () => {
-                this._adapter.setMotionEnd(true);
-            },
-            didLeave: () => {
-                this._adapter.setMotionEnd(false);
-            }
-        } : false;
-        return mergedMotion;
-    };
 
     /**
      * Format locale date

packages/semi-foundation/datePicker/inputFoundation.ts

@@ -30,12 +30,12 @@ export interface DateInputEventHandlerProps {
     onClear?: (e: any) => void;
     onRangeInputClear?: (e: any) => void;
     onRangeEndTabPress?: (e: any) => void;
-    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void
 }
 
 export interface DateInputElementProps {
     insetLabel?: any;
-    prefix?: any;
+    prefix?: any
 }
 
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
@@ -54,17 +54,17 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     insetInput?: boolean;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
-    defaultPickerValue?: ValueType;
+    defaultPickerValue?: ValueType
 }
 
 export interface InsetInputValue {
     monthLeft: {
         dateInput: string;
-        timeInput: string;
-    },
+        timeInput: string
+    };
     monthRight: {
         dateInput: string;
-        timeInput: string;
+        timeInput: string
     }
 }
 
@@ -72,13 +72,13 @@ export interface InsetInputChangeFoundationProps {
     value: string;
     insetInputValue: InsetInputValue;
     event: any;
-    valuePath: string;
+    valuePath: string
 }
 
 export interface InsetInputChangeProps { 
     insetInputStr: string;
     format: string;
-    insetInputValue: InsetInputValue;
+    insetInputValue: InsetInputValue
 }
 
 export interface DateInputAdapter extends DefaultAdapter {
@@ -92,7 +92,7 @@ export interface DateInputAdapter extends DefaultAdapter {
     notifyFocus: DateInputFoundationProps['onFocus'];
     notifyRangeInputClear: DateInputFoundationProps['onRangeInputClear'];
     notifyRangeInputFocus: DateInputFoundationProps['onFocus'];
-    notifyTabPress: DateInputFoundationProps['onRangeEndTabPress'];
+    notifyTabPress: DateInputFoundationProps['onRangeEndTabPress']
 }
 
 export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
@@ -186,7 +186,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         this._adapter.notifyInsetInputChange({ insetInputValue: newInsetInputValue, format: insetFormatToken, insetInputStr: newInputValue });
     }
 
-    _autoFillTimeToInsetInputValue(options: { insetInputValue: InsetInputValue; format: string; valuePath: string;}) {
+    _autoFillTimeToInsetInputValue(options: { insetInputValue: InsetInputValue; format: string; valuePath: string}) {
         const { valuePath, insetInputValue, format } = options;
         const { type, defaultPickerValue, dateFnsLocale } = this._adapter.getProps();
         const insetInputValueWithTime = cloneDeep(insetInputValue);

packages/semi-foundation/datePicker/monthFoundation.ts

@@ -28,36 +28,36 @@ export interface MonthFoundationProps {
     focusRecordsRef: any;
     locale: any;
     localeCode: string;
-    multiple: boolean;
+    multiple: boolean
 }
 
 export type MonthDayInfo = {
     dayNumber: number;
     dayNumberFull?: string;
-    fullDate: string;
+    fullDate: string
 } | {
     dayNumber: string;
     dayNumberFull?: string;
-    fullDate: string;
+    fullDate: string
 };
 
 export interface MonthInfo {
     weeks: Array<MonthDayInfo[]>;
     monthText: string ;
-    month?: Date;
+    month?: Date
 }
 
 export interface MonthFoundationState {
     weekdays: string[];
     month: MonthInfo;
     todayText: string;
-    weeksRowNum: number;
+    weeksRowNum: number
 }
 
 export interface MonthTable {
     monthText: string;
     weeks: unknown;
-    month: unknown;
+    month: unknown
 }
 
 export interface MonthAdapter extends DefaultAdapter<MonthFoundationProps, MonthFoundationState>{
@@ -67,7 +67,7 @@ export interface MonthAdapter extends DefaultAdapter<MonthFoundationProps, Month
     updateMonthTable: (month: MonthInfo) => void;
     notifyDayClick: MonthFoundationProps['onDayClick'];
     notifyDayHover: MonthFoundationProps['onDayHover'];
-    notifyWeeksRowNumChange: MonthFoundationProps['onWeeksRowNumChange'];
+    notifyWeeksRowNumChange: MonthFoundationProps['onWeeksRowNumChange']
 }
 
 export default class CalendarMonthFoundation extends BaseFoundation<MonthAdapter> {

packages/semi-foundation/datePicker/monthsGridFoundation.ts

@@ -47,7 +47,7 @@ interface MonthsGridElementProps {
     // renderDate?: () => React.ReactNode;
     renderDate?: () => any;
     // renderFullDate?: () => React.ReactNode;
-    renderFullDate?: () => any;
+    renderFullDate?: () => any
 }
 
 export type PanelType = 'left' | 'right';
@@ -76,7 +76,6 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     startDateOffset?: () => void;
     endDateOffset?: () => void;
     autoSwitchDate?: boolean;
-    motionEnd?: boolean;
     density?: string;
     dateFnsLocale?: any;
     timeZone?: string | number;
@@ -93,14 +92,14 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     insetInput: boolean;
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
-    renderDateInput?: any;
+    renderDateInput?: any
 }
 
 export interface MonthInfo {
     pickerDate: Date;
     showDate: Date;
     isTimePickerOpen: boolean;
-    isYearPickerOpen: boolean;
+    isYearPickerOpen: boolean
 }
 
 export interface MonthsGridFoundationState {
@@ -114,11 +113,11 @@ export interface MonthsGridFoundationState {
     currentPanelHeight: number; // current month panel height,
     offsetRangeStart: string;
     offsetRangeEnd: string;
-    weeksRowNum?: number;
+    weeksRowNum?: number
 }
 
 export interface MonthsGridDateAdapter {
-    updateDaySelected: (selected: Set<string>) => void;
+    updateDaySelected: (selected: Set<string>) => void
 }
 export interface MonthsGridRangeAdapter {
     setRangeStart: (rangeStart: string) => void;
@@ -126,7 +125,7 @@ export interface MonthsGridRangeAdapter {
     setHoverDay: (hoverDay: string) => void;
     setWeeksHeight: (maxWeekNum: number) => void;
     setOffsetRangeStart: (offsetRangeStart: string) => void;
-    setOffsetRangeEnd: (offsetRangeEnd: string) => void;
+    setOffsetRangeEnd: (offsetRangeEnd: string) => void
 }
 
 export interface MonthsGridAdapter extends DefaultAdapter<MonthsGridFoundationProps, MonthsGridFoundationState>, MonthsGridRangeAdapter, MonthsGridDateAdapter {
@@ -136,7 +135,7 @@ export interface MonthsGridAdapter extends DefaultAdapter<MonthsGridFoundationPr
     notifyMaxLimit: MonthsGridFoundationProps['onMaxSelect'];
     notifyPanelChange: MonthsGridFoundationProps['onPanelChange'];
     setRangeInputFocus: MonthsGridFoundationProps['setRangeInputFocus'];
-    isAnotherPanelHasOpened: MonthsGridFoundationProps['isAnotherPanelHasOpened'];
+    isAnotherPanelHasOpened: MonthsGridFoundationProps['isAnotherPanelHasOpened']
 }
 
 export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapter> {
@@ -289,7 +288,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
      *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
      */
-    handleSyncChangeMonths(options: { panelType: PanelType, target: Date }) {
+    handleSyncChangeMonths(options: { panelType: PanelType; target: Date }) {
         const { panelType, target } = options;
         const { type } = this._adapter.getProps();
         const { monthLeft, monthRight } = this._adapter.getStates();
@@ -305,7 +304,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     /**
      * Get the target date based on the panel type and switch type
      */
-    getTargetChangeDate(options: { panelType: PanelType, switchType: YearMonthChangeType }) {
+    getTargetChangeDate(options: { panelType: PanelType; switchType: YearMonthChangeType }) {
         const { panelType, switchType } = options;
         const { monthRight, monthLeft } = this._adapter.getStates();
         const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
@@ -908,7 +907,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             showDate?: number | Date;
             pickerDate?: number | Date;
             isTimePickerOpen?: boolean;
-            isYearPickerOpen?: boolean;
+            isYearPickerOpen?: boolean
         }
     ) {
         const { monthLeft, monthRight } = this.getStates();

packages/semi-foundation/datePicker/yearAndMonthFoundation.ts

@@ -16,35 +16,35 @@ export interface YearAndMonthFoundationProps {
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
-    yearAndMonthOpts?: any;
+    yearAndMonthOpts?: any
 }
 
 export interface YearAndMonthFoundationState {
     years: Array<{ value: number; year: number }>;
     months: Array<{ value: number; month: number }>;
     currentYear: number;
-    currentMonth: number;
+    currentMonth: number
 }
 export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
     setCurrentYear: (currentYear: number) => void;
     setCurrentMonth: (currentMonth: number) => void;
     notifySelectYear: (year: number) => void;
     notifySelectMonth: (month: number) => void;
-    notifyBackToMain: () => void;
+    notifyBackToMain: () => void
 }
 
 export interface MonthScrollItem {
     [k: string]: any;
     month: number;
     value: string;
-    disabled: boolean;
+    disabled: boolean
 }
 
 export interface YearScrollItem {
     [k: string]: any;
     year: number;
     value: number;
-    disabled: boolean;
+    disabled: boolean
 }
 
 export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthAdapter> {

packages/semi-foundation/dropdown/foundation.ts

@@ -3,7 +3,7 @@ import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils
 
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
-    notifyVisibleChange(visible: boolean): void;
+    notifyVisibleChange(visible: boolean): void
 }
 
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {

packages/semi-foundation/form/interface.ts

@@ -21,16 +21,16 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
-    initFormId: () => void;
+    initFormId: () => void
 }
 
 export interface FormState<T extends Record<string, any> = any> {
     values?: T extends Record<string, any> ? T : Record<string, any>;
     errors?: T extends Record<string, any> ? { [K in keyof T]?: string } : Record<string, any>;
-    touched?: T extends Record<string, any> ? { [K in keyof T]?: boolean } : Record<string, any>;
+    touched?: T extends Record<string, any> ? { [K in keyof T]?: boolean } : Record<string, any>
 }
 export interface setValuesConfig {
-    isOverride: boolean;
+    isOverride: boolean
 }
 
 // use object replace Record<string, any>, fix issue 933
@@ -62,25 +62,25 @@ export interface BaseFormApi<T extends object = any> {
     getValues: () => T;
     /** set value of multiple fields */
     setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
-    scrollToField: <K extends keyof T>(field: K, scrollConfig?: scrollIntoViewOptions) => void;
+    scrollToField: <K extends keyof T>(field: K, scrollConfig?: scrollIntoViewOptions) => void
 }
 
 export interface CallOpts {
     [x: string]: any;
     notNotify?: boolean;
     notUpdate?: boolean;
-    needClone?: boolean;
+    needClone?: boolean
 }
 
 export interface ComponentProps {
-    [x: string]: any;
+    [x: string]: any
 }
 
 export interface FieldState {
     value?: any;
     touched?: any;
     error?: any;
-    status?: 'error' | 'success';
+    status?: 'error' | 'success'
 }
 
 export interface WithFieldOption {
@@ -89,7 +89,7 @@ export interface WithFieldOption {
     valuePath?: string;
     maintainCursor?: boolean;
     shouldMemo?: boolean;
-    shouldInject?: boolean;
+    shouldInject?: boolean
 }
 
 export interface InternalFieldApi {
@@ -97,20 +97,20 @@ export interface InternalFieldApi {
     setTouched: (isTouched: boolean, opts: CallOpts) => void;
     setError: (errors: any, opts: CallOpts) => void;
     reset: () => void;
-    validate: (val: any, opts: CallOpts) => Promise<unknown>;
+    validate: (val: any, opts: CallOpts) => Promise<unknown>
 }
 
 export interface FieldStaff {
     field: string;
     fieldApi: InternalFieldApi;
     keepState: boolean;
-    allowEmpty: boolean;
+    allowEmpty: boolean
 }
 
 export interface ArrayFieldStaff {
     field: string;
     updateKey?: string;
-    initValue?: any;
+    initValue?: any
 }
 export interface FormUpdaterContextType {
     register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
@@ -128,6 +128,6 @@ export interface FormUpdaterContextType {
     registerArrayField: (arrayFieldPath: string, val: any) => void;
     unRegisterArrayField: (arrayField: string) => void;
     getArrayField: (arrayField: string) => ArrayFieldStaff;
-    updateArrayField: (arrayField: string, updateValue: any) => void;
+    updateArrayField: (arrayField: string, updateValue: any) => void
 }
 

packages/semi-foundation/image/animation.scss

@@ -2,7 +2,7 @@ $transform_rotate-image_preview_spinner: var(--semi-transform_rotate-clockwise36
 $transform_scale3d-image_preview_image_img: 1, 1, 1; // 预览图片放大
 $transform_rotate-image_preview_image_img: var(--semi-transform-rotate-none); // 预览图片旋转角度
 
-$transition_duration-image_preview_image_img: 0.3s; // 预览图像动画持续时间
+$transition_duration-image_preview_image_img: 300ms; // 预览图像动画持续时间
 $transition_function-image_preview_image_img: cubic-bezier(0.215, 0.61, 0.355, 1); // 预览图片动画函数
 $transition_delay-image_preview_image_img: 0s; // 预览图片延迟时间
 

packages/semi-foundation/image/imageFoundation.ts

@@ -3,7 +3,7 @@ import { isObject } from "lodash";
 
 
 export interface ImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getIsInGroup: () => boolean;
+    getIsInGroup: () => boolean
 }
 
 

packages/semi-foundation/image/previewFooterFoundation.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 
 export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    setStartMouseOffset: (time: number) => void;
+    setStartMouseOffset: (time: number) => void
 }
 
 export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {

packages/semi-foundation/image/previewImageFoundation.ts

@@ -3,30 +3,30 @@ import { handlePrevent } from "../utils/a11y";
 import { throttle, isUndefined } from "lodash";
 
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getOriginImageSize: () => { originImageWidth: number; originImageHeight: number; }; 
-    setOriginImageSize: (size: { originImageWidth: number; originImageHeight: number; }) => void;
+    getOriginImageSize: () => { originImageWidth: number; originImageHeight: number }; 
+    setOriginImageSize: (size: { originImageWidth: number; originImageHeight: number }) => void;
     getContainerRef: () => any;
     getImageRef: () => any;
     getMouseMove: () => boolean;
     setStartMouseMove: (move: boolean) => void;
     getMouseOffset: () => { x: number; y: number };
     setStartMouseOffset: (offset: { x: number; y: number }) => void;
-    setLoading: (loading: boolean) => void;
+    setLoading: (loading: boolean) => void
 }
 
 export interface DragDirection {
     canDragVertical: boolean;
-    canDragHorizontal: boolean;
+    canDragHorizontal: boolean
 }
 
 export interface ExtremeBounds {
     left: number;
-    top: number;
+    top: number
 }
 
 export interface ImageOffset {
     x: number;
-    y: number;
+    y: number
 }
 
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {

packages/semi-foundation/image/previewInnerFoundation.ts

@@ -16,9 +16,9 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     getMouseActiveTime: () => number;
     getStopTiming: () => boolean;
     setStopTiming: (value: boolean) => void;
-    getStartMouseDown: () => {x: number, y: number};
+    getStartMouseDown: () => {x: number; y: number};
     setStartMouseDown: (x: number, y: number) => void;
-    setMouseActiveTime: (time: number) => void;
+    setMouseActiveTime: (time: number) => void
 }
 
 const NOT_CLOSE_TARGETS = ["icon", "footer"];

packages/semi-foundation/input/foundation.ts

@@ -6,7 +6,7 @@ import { ENTER_KEY } from './../utils/keyCode';
 
 export interface InputDefaultAdapter {
     notifyChange: noopFunction;
-    setValue: noopFunction;
+    setValue: noopFunction
 }
 
 export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefaultAdapter> {
@@ -22,7 +22,7 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyKeyPress(e: any): void;
     notifyEnterPress(e: any): void;
     setPaddingLeft(paddingLeft: string): void;
-    isEventTarget(e: any): boolean;
+    isEventTarget(e: any): boolean
 }
 
 class InputFoundation extends BaseFoundation<InputAdapter> {

packages/semi-foundation/input/textareaFoundation.ts

@@ -18,14 +18,14 @@ export interface TextAreaDefaultAdapter {
     notifyKeyDown: noopFunction;
     notifyEnterPress: noopFunction;
     toggleHovering(hovering: boolean): void;
-    notifyClear(e: any): void;
+    notifyClear(e: any): void
 }
 
 export interface TextAreaAdapter extends Partial<DefaultAdapter>, Partial<TextAreaDefaultAdapter> {
     setMinLength(length: number): void;
     notifyPressEnter(e: any): void;
     getRef(): any;
-    notifyHeightUpdate(e: any): void;
+    notifyHeightUpdate(e: any): void
 }
 
 export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter> {

packages/semi-foundation/inputNumber/foundation.ts

@@ -26,14 +26,14 @@ export interface InputNumberAdapter extends DefaultAdapter {
     restoreCursor: (str?: string) => boolean;
     fixCaret: (start: number, end: number) => void;
     setClickUpOrDown: (clicked: boolean) => void;
-    updateStates: (states: BaseInputNumberState, callback?: () => void) => void;
+    updateStates: (states: BaseInputNumberState, callback?: () => void) => void
 }
 
 export interface BaseInputNumberState {
     value?: number | string;
     number?: number | null;
     focusing?: boolean;
-    hovering?: boolean;
+    hovering?: boolean
 }
 
 class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {