Merge branch 'main' into fix/scss_compiler_localSCSS_support

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

@@ -281,7 +281,7 @@ class Demo extends React.Component {
             <>
                 <Button onClick={this.toggle}>Toggle</Button>
                 <div style={{ position: 'relative' }}>
-                    <Collapsible isOpen={isOpen} collapseHeight={80} style={{ ...maskStyle }}>
+                    <Collapsible isOpen={isOpen} collapseHeight={50} style={{ ...maskStyle }}>
                         {collapsed}
                     </Collapsible>
                     {isOpen ? null : (

content/show/collapsible/index.md

@@ -322,7 +322,7 @@ class Demo extends React.Component {
             <>
                 <Button onClick={this.toggle}>Toggle</Button>
                 <div style={{ position: 'relative' }}>
-                    <Collapsible isOpen={isOpen} collapseHeight={80} style={{ ...maskStyle }}>
+                    <Collapsible isOpen={isOpen} collapseHeight={50} style={{ ...maskStyle }}>
                         {collapsed}
                     </Collapsible>
                     {isOpen ? null : (

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

@@ -2066,35 +2066,35 @@ The CSS style definition used in this example:
 With custom elements, we can integrate `react-dnd` To implement drag and drop sorting.
 
 ```jsx live=true dir="column" noInline=true
-import React from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 
-let dragingIndex = -1;
+let draggingIndex = -1;
+const PAGE_SIZE = 5;
 
-class BodyRow extends React.Component {
-    render() {
-        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
-        const style = { ...restProps.style, cursor: 'move' };
+function BodyRow(props) {
+    const { isOver, connectDragSource, connectDropTarget, moveRow, currentPage, ...restProps } = props;
+    const style = { ...restProps.style, cursor: 'move' };
 
-        let { className } = restProps;
-        if (isOver) {
-            if (restProps.index > dragingIndex) {
-                className += ' drop-over-downward';
-            }
-            if (restProps.index < dragingIndex) {
-                className += ' drop-over-upward';
-            }
+    let { className } = restProps;
+    if (isOver) {
+        console.log('true');
+        if (restProps.index > draggingIndex) {
+            className += ' drop-over-downward';
+        }
+        if (restProps.index < draggingIndex) {
+            className += ' drop-over-upward';
         }
-
-        return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
     }
+
+    return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
 }
 
 const rowSource = {
     beginDrag(props) {
-        dragingIndex = props.index;
+        draggingIndex = props.index;
         return {
             index: props.index,
         };
@@ -2116,7 +2116,7 @@ const rowTarget = {
     },
 };
 
-const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+const DraggableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
 }))(
@@ -2146,7 +2146,7 @@ const columns = [
         title: 'Age',
         dataIndex: 'age',
         width: 150,
-        sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        sorter: (a, b) => a.age - b.age > 0 ? 1 : -1,
     },
     {
         title: 'Address',
@@ -2154,72 +2154,72 @@ const columns = [
         dataIndex: 'address',
     },
     {
-        render: (text, record) => (
-            <Tooltip content={record.description}>
-                <Tag color="green">Show Info</Tag>
-            </Tooltip>
-        ),
-    },
+        render: (text, record) => <Tooltip content={record.description}><Tag color='green'>Show Info</Tag></Tooltip>
+    }
 ];
 
-class DragSortingTableDemo extends React.Component {
-    constructor() {
-        this.data = [];
-        for (let i = 0; i < 46; i++) {
-            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
-            let name = `Edward King ${i}`;
-            this.data.push({
-                key: '' + i,
-                name,
-                age,
-                address: `London, Park Lane no. ${i}`,
-                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
-            });
-        }
-
-        this.state = {
-            data: [...this.data],
-        };
+const initData = [];
+for (let i = 0; i < 46; i++) {
+    let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i/3);
+    let name = `Edward King ${i}`;
+    initData.push({
+        key: '' + i,
+        name,
+        age,
+        address: `London, Park Lane no. ${i}`,
+        description: `My name is ${name}, I am ${age} years old, living in New York No. ${i+1} Lake Park.`,
+    });
+}
 
-        this.components = {
-            body: {
-                row: DragableBodyRow,
-            },
-        };
+function DragSortingTableDemo(props) {
+    const [data, setData] = useState([...initData]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageData, setPageData] = useState(data.slice(0, PAGE_SIZE));
 
-        this.pagination = {
-            pageSize: 5,
-        };
+    const components = useMemo(() => ({
+        body: {
+            row: DraggableBodyRow,
+        },
+    }), []);
 
-        this.moveRow = (dragIndex, hoverIndex) => {
-            const { data } = this.state;
-            const dragRow = data[dragIndex];
+    const moveRow = (dragIndex, hoverIndex) => {
+        const totalDragIndex = (currentPage - 1) * PAGE_SIZE + dragIndex;
+        const totalHoverIndex = (currentPage - 1) * PAGE_SIZE + hoverIndex;
+        const dragRow = data[totalDragIndex];
+        const newData = [...data];
+        newData.splice(totalDragIndex, 1);
+        newData.splice(totalHoverIndex, 0, dragRow);
+        setData(newData);
+        setPageData(newData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE));
+    };
 
-            const newData = [...data];
-            newData.splice(dragIndex, 1);
-            newData.splice(hoverIndex, 0, dragRow);
-            this.setState({ data: newData });
-        };
-    }
+    const handlePageChange = (pageNum) => {
+        console.log(pageNum);
+        setCurrentPage(pageNum);
+        setPageData(data.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE));
+    };
 
-    render() {
-        return (
-            <div id="components-table-demo-drag-sorting">
-                <DndProvider backend={HTML5Backend}>
-                    <Table
-                        pagination={this.pagination}
-                        columns={columns}
-                        dataSource={this.state.data}
-                        components={this.components}
-                        onRow={(record, index) => ({
-                            index,
-                            moveRow: this.moveRow,
-                        })}
-                    />
-                </DndProvider>
-            </div>
-        );
-    }
+    return (
+        <div id="components-table-demo-drag-sorting">
+            <DndProvider backend={HTML5Backend}>
+                <Table
+                    columns={columns}
+                    dataSource={pageData}
+                    pagination={{
+                        pageSize: PAGE_SIZE,
+                        total: data.length,
+                        currentPage,
+                        onPageChange: handlePageChange
+                    }}
+                    components={components}
+                    onRow={(record, index) => ({
+                        index,
+                        moveRow,
+                    })}
+                />
+            </DndProvider>
+        </div>
+    );
 }
 
 render(DragSortingTableDemo);

content/show/table/index.md

@@ -2028,35 +2028,35 @@ render(ResizableDemo);
 使用自定义元素，我们可以集成 `react-dnd` 来实现拖拽排序。
 
 ```jsx live=true dir="column" noInline=true hideInDSM
-import React from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 
-let dragingIndex = -1;
+let draggingIndex = -1;
+const PAGE_SIZE = 5;
 
-class BodyRow extends React.Component {
-    render() {
-        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
-        const style = { ...restProps.style, cursor: 'move' };
+function BodyRow(props) {
+    const { isOver, connectDragSource, connectDropTarget, moveRow, currentPage, ...restProps } = props;
+    const style = { ...restProps.style, cursor: 'move' };
 
-        let { className } = restProps;
-        if (isOver) {
-            if (restProps.index > dragingIndex) {
-                className += ' drop-over-downward';
-            }
-            if (restProps.index < dragingIndex) {
-                className += ' drop-over-upward';
-            }
+    let { className } = restProps;
+    if (isOver) {
+        console.log('true');
+        if (restProps.index > draggingIndex) {
+            className += ' drop-over-downward';
+        }
+        if (restProps.index < draggingIndex) {
+            className += ' drop-over-upward';
         }
-
-        return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
     }
+
+    return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
 }
 
 const rowSource = {
     beginDrag(props) {
-        dragingIndex = props.index;
+        draggingIndex = props.index;
         return {
             index: props.index,
         };
@@ -2078,7 +2078,7 @@ const rowTarget = {
     },
 };
 
-const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+const DraggableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
 }))(
@@ -2120,64 +2120,68 @@ const columns = [
     }
 ];
 
-class DragSortingTableDemo extends React.Component {
-    constructor() {
-        this.data = [];
-        for (let i = 0; i < 46; i++) {
-            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i/3);
-            let name = `Edward King ${i}`;
-            this.data.push({
-                key: '' + i,
-                name,
-                age,
-                address: `London, Park Lane no. ${i}`,
-                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i+1} Lake Park.`,
-            });
-        }
+const initData = [];
+for (let i = 0; i < 46; i++) {
+    let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i/3);
+    let name = `Edward King ${i}`;
+    initData.push({
+        key: '' + i,
+        name,
+        age,
+        address: `London, Park Lane no. ${i}`,
+        description: `My name is ${name}, I am ${age} years old, living in New York No. ${i+1} Lake Park.`,
+    });
+}
 
-        this.state = {
-            data: [...this.data],
-        };
+function DragSortingTableDemo(props) {
+    const [data, setData] = useState([...initData]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageData, setPageData] = useState(data.slice(0, PAGE_SIZE));
 
-        this.components = {
-            body: {
-                row: DragableBodyRow,
-            },
-        };
+    const components = useMemo(() => ({
+        body: {
+            row: DraggableBodyRow,
+        },
+    }), []);
 
-        this.pagination = {
-            pageSize: 5
-        };
+    const moveRow = (dragIndex, hoverIndex) => {
+        const totalDragIndex = (currentPage - 1) * PAGE_SIZE + dragIndex;
+        const totalHoverIndex = (currentPage - 1) * PAGE_SIZE + hoverIndex;
+        const dragRow = data[totalDragIndex];
+        const newData = [...data];
+        newData.splice(totalDragIndex, 1);
+        newData.splice(totalHoverIndex, 0, dragRow);
+        setData(newData);
+        setPageData(newData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE));
+    };
 
-        this.moveRow = (dragIndex, hoverIndex) => {
-            const { data } = this.state;
-            const dragRow = data[dragIndex];
-            
-            const newData = [...data];
-            newData.splice(dragIndex, 1);
-            newData.splice(hoverIndex, 0, dragRow);
-            this.setState({ data: newData });
-        };
-    }
+    const handlePageChange = (pageNum) => {
+        console.log(pageNum);
+        setCurrentPage(pageNum);
+        setPageData(data.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE));
+    };
 
-    render() {
-        return (
-            <div id="components-table-demo-drag-sorting">
-                <DndProvider backend={HTML5Backend}>
-                    <Table
-                        pagination={this.pagination}
-                        columns={columns}
-                        dataSource={this.state.data}
-                        components={this.components}
-                        onRow={(record, index) => ({
-                            index,
-                            moveRow: this.moveRow,
-                        })}
-                    />
-                </DndProvider>
-            </div>
-        );
-    }
+    return (
+        <div id="components-table-demo-drag-sorting">
+            <DndProvider backend={HTML5Backend}>
+                <Table
+                    columns={columns}
+                    dataSource={pageData}
+                    pagination={{
+                        pageSize: PAGE_SIZE,
+                        total: data.length,
+                        currentPage,
+                        onPageChange: handlePageChange
+                    }}
+                    components={components}
+                    onRow={(record, index) => ({
+                        index,
+                        moveRow,
+                    })}
+                />
+            </DndProvider>
+        </div>
+    );
 }
 
 render(DragSortingTableDemo);

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

@@ -16,6 +16,22 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.0.2 (2021-11-04)
+- 【Fix】
+  - Fixed the type definition of Toast [#166](https://github.com/DouyinFE/semi-design/issues/166)
+  - Fixed the type definition of Radio `value` and `defaultValue`, from `string` to `string | number` [#159](https://github.com/DouyinFE/semi-design/issues/159)
+  - Fixed the problem of Transfer search under `treeList` `type` [#163](https://github.com/DouyinFE/semi-design/issues/163)
+  - When DatePicker `type=month`, the computer is set to the US Eastern time zone and the date cannot be selected [#173](https://github.com/DouyinFE/semi-design/issues/173)
+  - Fixed List type definition error [#156](https://github.com/DouyinFE/semi-design/issues/156)
+  - Fixed the type definition issue of Select component `renderSelectedItems` [#160](https://github.com/DouyinFE/semi-design/issues/160)
+  - Fixed Tooltip event callback is not removed correctly [#192](https://github.com/DouyinFE/semi-design/issues/192)
+- 【Style】
+  - New tokens for Switch: `$color-switch_disabled-bg-hover`, `$color-switch_disabled-bg-active`, custom disabled background color [#115](https://github.com/DouyinFE/semi-design/issues/115)
+- 【Docs】
+  - Optimize some document issues [#165](https://github.com/DouyinFE/semi-design/issues/165) [#175](https://github.com/DouyinFE/semi-design/issues/175) [@YufeeXing](https://github.com/YufeeXing) [@BestDingSheng](https://github.com/BestDingSheng)
+- 【Chore】
+  - Anchor adds `max-height`, `max-width` test cases [#151](https://github.com/DouyinFE/semi-design/issues/151) [@songjianet](https://github.com/songjianet)
+
 #### 🎉 2.0.1 (2021-11-01)
 - 【Fix】
   - Fixed TreeSelect will expand its child nodes and close them immediately after selecting a node, causing a visual flickering feeling [#78](https://github.com/DouyinFE/semi-design/issues/78)
@@ -39,7 +55,7 @@ Version：Major.Minor.Patch
     - Icon related
       - Icon component no longer supports type = xxx using built-in icons
       - Custom svg no longer supports plug-in configuration srcSvgPaths
-      - The Button icon property no longer supports passing built-in icon names through strings
+      - The Button `icon` and `iconType` property no longer supports passing built-in icon names through strings
       - Dropdown deletes the iconType attribute and unifies it into the icon attribute
       - Navigation icons no longer support incoming by string, ReactNode needs to be passed in
       - Notification icons are no longer passed in by string, please use ReactNode uniformly
@@ -48,6 +64,7 @@ Version：Major.Minor.Patch
     - Form no longer exports Label components from `semi-ui/index.js`
     - Tree onRightClick renamed onContextMenu
     - Upload dragable renamed draggable
+    - Tooltip no longer supports the `disabled` attribute, and components that rely on Tooltip (such as Popover, Dropdown, etc.) transparently transmitted to Tooltip `disabled` will become invalid
     - Table
       - API that no longer responds when componentDidUpdate
         - DefaultExpandAllRows, please replace with expandAllRows

content/start/changelog/index.md

@@ -15,6 +15,23 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.0.2 (2021-11-04)
+- 【Fix】
+  - 修复 Toast 的类型定义 [#166](https://github.com/DouyinFE/semi-design/issues/166)
+  - 修复 Radio value / defaultValue 的类型定义，从 string 改正为 string | number [#159](https://github.com/DouyinFE/semi-design/issues/159)
+  - 修复 Transfer 在 treeList 类型下搜索问题 [#163](https://github.com/DouyinFE/semi-design/issues/163)
+  - 修复 DatePicker type=month 时，计算机设置为美东时区，无法选中日期问题 [#173](https://github.com/DouyinFE/semi-design/issues/173)
+  - 修复 List 类型定义错误问题 [#156](https://github.com/DouyinFE/semi-design/issues/156)
+  - 修复 Select 组件 renderSelectedItems 类型定义问题 [#160](https://github.com/DouyinFE/semi-design/issues/160)
+  - 修复 Tooltip 事件回调没有正确移除问题 [#192](https://github.com/DouyinFE/semi-design/issues/192)
+- 【Style】
+  - Switch 新增 Token：$color-switch_disabled-bg-hover，$color-switch_disabled-bg-active， 定制disabled 态的背景颜色 [#115](https://github.com/DouyinFE/semi-design/issues/115)
+- 【Docs】
+  - 优化一些文档问题 [#165](https://github.com/DouyinFE/semi-design/issues/165) [#175](https://github.com/DouyinFE/semi-design/issues/175) [@YufeeXing](https://github.com//YufeeXing) [@BestDingSheng](https://github.com//BestDingSheng)
+- 【Chore】
+  - Anchor 新增 max-height、max-width 测试用例 [#151](https://github.com/DouyinFE/semi-design/issues/151) [@songjianet](https://github.com//songjianet)
+
+
 #### 🎉 2.0.1 (2021-11-01)
 - 【Fix】
   - 修复 TreeSelect 选中节点后会展开其子节点并立即关闭，造成视觉跳闪的感觉 [#78](https://github.com/DouyinFE/semi-design/issues/78)
@@ -38,7 +55,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - Icon 相关
       - Icon 组件不再支持  type=xxx 方式使用内置 icon
       - 自定义 svg 不再支持插件方式配置 srcSvgPaths
-      - Button icon 属性不再支持通过 string 传递内置 icon 名
+      - Button icon 属性不再支持通过 string 传递内置 icon 名，不再支持 iconType 属性
       - Dropdown 删除 iconType 属性，统一为 icon 属性
       - Navigation icon 不再支持通过 string 方式传入，需要传入 ReactNode
       - Notification icon 不再支持通过 string 方式传入，请统一使用 ReactNode
@@ -47,6 +64,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - Form 不再从 `semi-ui/index.js` 导出 Label组件，如需使用请用 Form.Label
     - Tree onRightClick 更名为 onContextMenu
     - Upload dragable 更名为 draggable
+    - Tooltip 不再支持 disabled 属性，依赖 Tooltip 的组件（如 Popover、Dropdown 等）透传给 Tooltip disabled 将失效
     - Table
       - 不再在 componentDidUpdate 时响应的 API
         - defaultExpandAllRows，请用 expandAllRows 替换

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

@@ -63,7 +63,7 @@ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
 - Icon related
   - Icon component no longer supports type = xxx using built-in icons
   - Custom svg no longer supports plug-in configuration srcSvgPaths
-  - The Button icon property no longer supports passing built-in icon names through strings
+  - The Button `icon` and `iconType` property no longer supports passing built-in icon names through strings
   - Dropdown deletes the iconType attribute and unifies it into the icon attribute
   - Navigation icons no longer support incoming by string, ReactNode needs to be passed in
   - Notification icons are no longer passed in by string, please use ReactNode uniformly
@@ -72,6 +72,7 @@ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
 - Form no longer exports Label components from `semi-ui/index.js`
 - Tree onRightClick renamed onContextMenu
 - Upload dragable renamed draggable
+- Tooltip no longer supports the `disabled` attribute, and components that rely on Tooltip (such as Popover, Dropdown, etc.) transparently transmitted to Tooltip `disabled` will become invalid
 - Table
   - API that no longer responds when componentDidUpdate
     - DefaultExpandAllRows, please replace with expandAllRows

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

@@ -64,7 +64,7 @@ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
 - Icon 相关
   - Icon 组件不再支持  type=xxx 方式使用内置 icon
   - 自定义 svg 不再支持插件方式配置 srcSvgPaths
-  - Button icon 属性不再支持通过 string 传递内置 icon 名
+  - Button icon 属性不再支持通过 string 传递内置 icon 或 iconType
   - Dropdown 删除 iconType 属性，统一为 icon 属性
   - Navigation icon 不再支持通过 string 方式传入，需要传入 ReactNode
   - Notification icon 不再支持通过 string 方式传入，请统一使用 ReactNode
@@ -73,6 +73,7 @@ import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB'
 - Form 不再从 `semi-ui/index.js` 导出 Label组件，如需使用请用 Form.Label
 - Tree onRightClick 更名为 onContextMenu
 - Upload dragable 更名为 draggable
+- Tooltip 不再支持 disabled 属性，依赖 Tooltip 的组件（如 Popover、Dropdown 等）透传给 Tooltip disabled 将失效
 - Table
   - 不再在 componentDidUpdate 时响应的 API
     - defaultExpandAllRows，请用 expandAllRows 替换

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.0.1"
+    "version": "2.0.2"
 }

packages/semi-animation-react/package.json

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

packages/semi-animation-styled/package.json

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

packages/semi-animation/package.json

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

packages/semi-foundation/datePicker/foundation.ts

@@ -770,7 +770,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const { currentMonth, currentYear } = item;
 
         if (typeof currentMonth === 'number' && typeof currentYear === 'number') {
-            const date = new Date(`${currentYear}-${currentMonth}`);
+            // Strings with only dates (e.g. "1970-01-01") will be treated as UTC instead of local time #1460
+            const date = new Date(currentYear, currentMonth - 1);
 
             this.handleSelectedChange([date]);
         }

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "",
     "files": [
         "lib",
@@ -12,7 +12,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.0.1",
+        "@douyinfe/semi-animation": "2.0.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",

packages/semi-foundation/switch/switch.scss

@@ -55,6 +55,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_disabled-bg-default;
         border: $border-thickness-control $color-switch_disabled-border-default solid;
 
+        &:hover {
+            background-color: $color-switch_disabled-bg-hover;
+        }
+
+        &:active {
+            background-color: $color-switch_disabled-bg-active;
+        }
+        
         .#{$module}-knob {
             cursor: not-allowed;
             @include shadow-0;

packages/semi-foundation/switch/variables.scss

@@ -24,6 +24,8 @@ $color-switch_checked-bg-default: var(--semi-color-success); // 开启态开关
 $color-switch_checked-bg-hover: var(--semi-color-success-hover); // 开启态开关背景色 - 悬浮
 $color-switch_checked-bg-active: var(--semi-color-success-active); // 开启态开关背景色 - 按下
 $color-switch_disabled-bg-default: transparent; // 禁用态开关背景色
+$color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
+$color-switch_disabled-bg-active: transparent; // 禁用态开关背景色 - 按下
 $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开关描边颜色
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色

packages/semi-foundation/toast/toastFoundation.ts

@@ -18,7 +18,7 @@ export interface ConfigProps {
 }
 export interface ToastProps extends ConfigProps {
     onClose?: () => void;
-    content?: any;
+    content: any;
     type?: ToastType;
     textMaxWidth?: string | number;
     style?: Record<string, any>;

packages/semi-foundation/utils/Event.ts

@@ -1,3 +1,5 @@
+import isNullOrUndefined from "./isNullOrUndefined";
+
 export default class Event {
     _eventMap = new Map<string, Array<(...arg: any) => void>>();
 
@@ -32,7 +34,7 @@ export default class Event {
                         callbacks.splice(index, 1);
                     }
                 }
-            } else if (callback === null) {
+            } else if (isNullOrUndefined(callback)) {
                 this._eventMap.delete(event);
             }
         }

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "semi icons",
   "keywords": [
     "semi",

packages/semi-illustrations/package.json

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

packages/semi-scss-compile/package.json

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

packages/semi-theme-default/package.json

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

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

@@ -50,4 +50,10 @@ describe('Anchor', () => {
     expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(1)
     expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(false);
   });
+
+  it('anchor max height and max width', () => {
+    const wrapper = mountAnchor({maxHeight: 50, maxWidth: 100})
+    expect(wrapper.find('.semi-anchor').instance().style.maxHeight).toBe('50px')
+    expect(wrapper.find('.semi-anchor').instance().style.maxWidth).toBe('100px')
+  })
 });

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

@@ -513,18 +513,17 @@ describe(`DatePicker`, () => {
     it('click presets disabled date should not trigger onChange', async () => {
         const onChange = sinon.spy();
         const defaultValue = '2021-04-12';
-        const disabeldValue = '2021-04-15';
+        const disabledValue = '2021-04-15';
         const notDisabledValue = '2021-04-30';
-        const defaultDate = new Date(defaultValue);
-        const disableDate = new Date(disabeldValue);
-        const notDisabeldDate = new Date(notDisabledValue);
+        const defaultDate = new Date(`${defaultValue} 00:00:00`);
+        const disableDate = new Date(`${disabledValue} 00:00:00`);
+        const notDisabledDate = new Date(`${notDisabledValue} 00:00:00`);
         let props = {
             open: true,
             motion: false,
             defaultValue,
             onChange,
-            disabledDate: dateStr => {
-                const date = new Date(dateStr);
+            disabledDate: date => {
                 const day = date.getDate();
                 if (day === 15) {
                     return true;
@@ -556,7 +555,7 @@ describe(`DatePicker`, () => {
         btns[1].click();
         await sleep();
         value = elem.state('value');
-        expect(value[0].getDate()).toEqual(notDisabeldDate.getDate());
+        expect(value[0].getDate()).toEqual(notDisabledDate.getDate());
         expect(onChange.called).toBeTruthy();
     });
 

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

@@ -226,3 +226,4 @@ stories.add('Form.DatePicker', () => {
   return <Demo />;
 });
 
+stories.add('fix 1460', () => <DatePicker type={'month'} onChange={(date, dateString) => console.log('DatePicker changed: ', date, dateString)} />);

packages/semi-ui/list/index.tsx

@@ -35,7 +35,7 @@ export interface ListProps {
 
 const prefixCls = cssClasses.PREFIX;
 
-class List extends BaseComponent<ListProps, void> {
+class List extends BaseComponent<ListProps> {
     static Item = ListItem;
 
     static propTypes = {

packages/semi-ui/modal/Modal.tsx

@@ -196,7 +196,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
     }
 
     static getScrollbarWidth() {
-        if (Object.prototype.toString.call(globalThis) === '[object Window]') {
+        if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
             return window.innerWidth - document.documentElement.clientWidth;
         }
         return 0;

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "",
     "main": "lib/es/index.js",
     "module": "lib/es/index.js",
@@ -19,11 +19,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.0.1",
-        "@douyinfe/semi-foundation": "2.0.1",
-        "@douyinfe/semi-icons": "2.0.1",
-        "@douyinfe/semi-illustrations": "2.0.1",
-        "@douyinfe/semi-theme-default": "2.0.1",
+        "@douyinfe/semi-animation-react": "2.0.2",
+        "@douyinfe/semi-foundation": "2.0.2",
+        "@douyinfe/semi-icons": "2.0.2",
+        "@douyinfe/semi-illustrations": "2.0.2",
+        "@douyinfe/semi-theme-default": "2.0.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -70,7 +70,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.0.1",
+        "@douyinfe/semi-scss-compile": "2.0.2",
         "@storybook/addon-knobs": "^6.3.1",
         "babel-loader": "^8.2.2",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",

packages/semi-ui/table/_story/DragableTable/index.jsx

@@ -1,33 +1,33 @@
-import Table from '../..';
+import React, { useState, useMemo, useCallback } from 'react';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import update from 'immutability-helper';
-import React from 'react';
-import '@douyinfe/semi-foundation/table/table.scss';
-
-let dragingIndex = -1;
-class BodyRow extends React.Component {
-    render() {
-        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
-        const style = { ...restProps.style, cursor: 'move' };
-
-        let { className } = restProps;
-        if (isOver) {
-            if (restProps.index > dragingIndex) {
-                className += ' drop-over-downward';
-            }
-            if (restProps.index < dragingIndex) {
-                className += ' drop-over-upward';
-            }
-        }
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
+import './index.scss';
+
+let draggingIndex = -1;
+const PAGE_SIZE = 5;
 
-        return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
+function BodyRow(props) {
+    const { isOver, connectDragSource, connectDropTarget, moveRow, currentPage, ...restProps } = props;
+    const style = { ...restProps.style, cursor: 'move' };
+
+    let { className } = restProps;
+    if (isOver) {
+        console.log('true');
+        if (restProps.index > draggingIndex) {
+            className += ' drop-over-downward';
+        }
+        if (restProps.index < draggingIndex) {
+            className += ' drop-over-upward';
+        }
     }
+
+    return connectDragSource(connectDropTarget(<tr {...restProps} className={className} style={style} />));
 }
 
 const rowSource = {
     beginDrag(props) {
-        dragingIndex = props.index;
+        draggingIndex = props.index;
         return {
             index: props.index,
         };
@@ -39,23 +39,17 @@ const rowTarget = {
         const dragIndex = monitor.getItem().index;
         const hoverIndex = props.index;
 
-        // Don't replace items with themselves
         if (dragIndex === hoverIndex) {
             return;
         }
 
-        // Time to actually perform the action
         props.moveRow(dragIndex, hoverIndex);
 
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
         monitor.getItem().index = hoverIndex;
     },
 };
 
-const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+const DraggableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
 }))(
@@ -68,78 +62,95 @@ const columns = [
     {
         title: 'Name',
         dataIndex: 'name',
-        key: 'name',
+        width: 150,
+        filters: [
+            {
+                text: 'King 3',
+                value: 'King 3',
+            },
+            {
+                text: 'King 4',
+                value: 'King 4',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
     },
     {
         title: 'Age',
         dataIndex: 'age',
-        key: 'age',
+        width: 150,
+        sorter: (a, b) => a.age - b.age > 0 ? 1 : -1,
     },
     {
         title: 'Address',
+        width: 200,
         dataIndex: 'address',
-        key: 'address',
     },
+    {
+        render: (text, record) => <Tooltip content={record.description}><Tag color='green'>Show Info</Tag></Tooltip>
+    }
 ];
 
-export default class DragSortingTable extends React.Component {
-    state = {
-        data: [
-            {
-                key: '1',
-                name: 'John Brown',
-                age: 32,
-                address: 'New York No. 1 Lake Park',
-            },
-            {
-                key: '2',
-                name: 'Jim Green',
-                age: 42,
-                address: 'London No. 1 Lake Park',
-            },
-            {
-                key: '3',
-                name: 'Joe Black',
-                age: 39,
-                address: 'Sidney No. 1 Lake Park',
-            },
-        ],
-    };
+const initData = [];
+for (let i = 0; i < 46; i++) {
+    let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i/3);
+    let name = `Edward King ${i}`;
+    initData.push({
+        key: '' + i,
+        name,
+        age,
+        address: `London, Park Lane no. ${i}`,
+        description: `My name is ${name}, I am ${age} years old, living in New York No. ${i+1} Lake Park.`,
+    });
+}
 
-    components = {
+export default function DragSortingTableDemo(props) {
+    const [data, setData] = useState([...initData]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageData, setPageData] = useState(data.slice(0, PAGE_SIZE));
+
+    const components = useMemo(() => ({
         body: {
-            row: DragableBodyRow,
+            row: DraggableBodyRow,
         },
+    }), []);
+
+    const moveRow = (dragIndex, hoverIndex) => {
+        const totalDragIndex = (currentPage - 1) * PAGE_SIZE + dragIndex;
+        const totalHoverIndex = (currentPage - 1) * PAGE_SIZE + hoverIndex;
+        const dragRow = data[totalDragIndex];
+        const newData = [...data];
+        newData.splice(totalDragIndex, 1);
+        newData.splice(totalHoverIndex, 0, dragRow);
+        setData(newData);
+        setPageData(newData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE));
     };
 
-    moveRow = (dragIndex, hoverIndex) => {
-        const { data } = this.state;
-        const dragRow = data[dragIndex];
-
-        this.setState(
-            update(this.state, {
-                data: {
-                    $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
-                },
-            })
-        );
+    const handlePageChange = (pageNum) => {
+        console.log(pageNum);
+        setCurrentPage(pageNum);
+        setPageData(data.slice((pageNum - 1) * PAGE_SIZE, pageNum * PAGE_SIZE));
     };
 
-    render() {
-        return (
-            <div id="components-table-demo-drag-sorting">
-                <DndProvider backend={HTML5Backend}>
-                    <Table
-                        columns={columns}
-                        dataSource={this.state.data}
-                        components={this.components}
-                        onRow={(record, index) => ({
-                            index,
-                            moveRow: this.moveRow,
-                        })}
-                    />
-                </DndProvider>
-            </div>
-        );
-    }
+    return (
+        <div id="components-table-demo-drag-sorting">
+            <DndProvider backend={HTML5Backend}>
+                <Table
+                    columns={columns}
+                    dataSource={pageData}
+                    pagination={{
+                        pageSize: PAGE_SIZE,
+                        total: data.length,
+                        currentPage,
+                        onPageChange: handlePageChange
+                    }}
+                    components={components}
+                    onRow={(record, index) => ({
+                        index,
+                        moveRow,
+                    })}
+                />
+            </DndProvider>
+        </div>
+    );
 }

packages/semi-ui/table/_story/DragableTable/index.scss

@@ -4,4 +4,4 @@
 
 #components-table-demo-drag-sorting tr.drop-over-upward td {
     border-top: 2px dashed #1890ff;
-}
+}

packages/semi-ui/toast/index.tsx

@@ -21,7 +21,7 @@ export { ToastTransitionProps } from './ToastTransition';
 export interface ToastReactProps extends ToastProps{
     style?: CSSProperties;
     icon?: React.ReactNode;
-    content?: React.ReactNode;
+    content: React.ReactNode;
 }
 
 export {
@@ -30,199 +30,204 @@ export {
     ToastState
 };
 
-export class ToastFactory {
-    static create(config?: ConfigProps): any {
-        class ToastList extends BaseComponent<ToastListProps, ToastListState> {
-            static ref: ToastList;
-            static useToast: typeof useToast;
-            static defaultOpts: ToastProps & { motion: Motion } = {
-                motion: true,
-                zIndex: 1010,
-            };
-            static propTypes = {
-                content: PropTypes.node,
-                duration: PropTypes.number,
-                onClose: PropTypes.func,
-                icon: PropTypes.node,
-                direction: PropTypes.oneOf(strings.directions),
-            };
-
-            static defaultProps = {};
-            private static wrapperId: null | string;
-
-            constructor(props: ToastListProps) {
-                super(props);
-                this.state = {
-                    list: [],
-                    removedItems: [],
-                };
-                this.foundation = new ToastListFoundation(this.adapter);
-            }
-
-            get adapter(): ToastListAdapter {
-                return {
-                    ...super.adapter,
-                    updateToast: (list: ToastInstance[], removedItems: ToastInstance[]) => {
-                        this.setState({ list, removedItems });
-                    },
-                };
-            }
+const createBaseToast = () => class ToastList extends BaseComponent<ToastListProps, ToastListState> {
+    static ref: ToastList;
+    static useToast: typeof useToast;
+    static defaultOpts: ToastReactProps & { motion: Motion } = {
+        motion: true,
+        zIndex: 1010,
+        content: '',
+    };
+    static propTypes = {
+        content: PropTypes.node,
+        duration: PropTypes.number,
+        onClose: PropTypes.func,
+        icon: PropTypes.node,
+        direction: PropTypes.oneOf(strings.directions),
+    };
+
+    static defaultProps = {};
+    static wrapperId: null | string;
+
+    constructor(props: ToastListProps) {
+        super(props);
+        this.state = {
+            list: [],
+            removedItems: [],
+        };
+        this.foundation = new ToastListFoundation(this.adapter);
+    }
 
-            static create(opts: ToastProps) {
-                const id = getUuid('toast');
-                // this.id = id;
-                if (!ToastList.ref) {
-                    const div = document.createElement('div');
-                    if (!this.wrapperId) {
-                        this.wrapperId = getUuid('toast-wrapper').slice(0, 26);
-                    }
-                    div.className = cssClasses.WRAPPER;
-                    div.id = this.wrapperId;
-                    div.style.zIndex = String(typeof opts.zIndex === 'number' ?
-                        opts.zIndex : ToastList.defaultOpts.zIndex);
-                    ['top', 'left', 'bottom', 'right'].map(pos => {
-                        if (pos in ToastList.defaultOpts || pos in opts) {
-                            const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
-                            div.style[pos] = typeof val === 'number' ? `${val}px` : val;
-                        }
-                    });
-                    // document.body.appendChild(div);
-                    if (ToastList.defaultOpts.getPopupContainer) {
-                        const container = ToastList.defaultOpts.getPopupContainer();
-                        container.appendChild(div);
-                    } else {
-                        document.body.appendChild(div);
-                    }
-                    ReactDOM.render(React.createElement(
-                        ToastList,
-                        { ref: instance => (ToastList.ref = instance) }
-                    ),
-                    div,
-                    () => {
-                        ToastList.ref.add({ ...opts, id });
-                    });
-                } else {
-                    const node = document.querySelector(`#${this.wrapperId}`) as HTMLElement;
-                    ['top', 'left', 'bottom', 'right'].map(pos => {
-                        if (pos in opts) {
-                            node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
-                        }
-                    });
-                    ToastList.ref.add({ ...opts, id });
-                }
-                return id;
-            }
+    get adapter(): ToastListAdapter {
+        return {
+            ...super.adapter,
+            updateToast: (list: ToastInstance[], removedItems: ToastInstance[]) => {
+                this.setState({ list, removedItems });
+            },
+        };
+    }
 
-            static close(id: string) {
-                if (ToastList.ref) {
-                    ToastList.ref.remove(id);
-                }
+    static create(opts: ToastReactProps) {
+        const id = getUuid('toast');
+        // this.id = id;
+        if (!ToastList.ref) {
+            const div = document.createElement('div');
+            if (!this.wrapperId) {
+                this.wrapperId = getUuid('toast-wrapper').slice(0, 26);
             }
-
-            static destroyAll() {
-                if (ToastList.ref) {
-                    ToastList.ref.destroyAll();
-                    const wrapper = document.querySelector(`#${this.wrapperId}`);
-                    ReactDOM.unmountComponentAtNode(wrapper);
-                    wrapper && wrapper.parentNode.removeChild(wrapper);
-                    ToastList.ref = null;
-                    this.wrapperId = null;
+            div.className = cssClasses.WRAPPER;
+            div.id = this.wrapperId;
+            div.style.zIndex = String(typeof opts.zIndex === 'number' ?
+                opts.zIndex : ToastList.defaultOpts.zIndex);
+            ['top', 'left', 'bottom', 'right'].map(pos => {
+                if (pos in ToastList.defaultOpts || pos in opts) {
+                    const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
+                    div.style[pos] = typeof val === 'number' ? `${val}px` : val;
                 }
+            });
+            // document.body.appendChild(div);
+            if (ToastList.defaultOpts.getPopupContainer) {
+                const container = ToastList.defaultOpts.getPopupContainer();
+                container.appendChild(div);
+            } else {
+                document.body.appendChild(div);
             }
-            static getWrapperId() {
-                return this.wrapperId;
-            }
-            static info(opts: ToastProps) {
-                if (typeof opts === 'string') {
-                    opts = { content: opts };
+            ReactDOM.render(React.createElement(
+                ToastList,
+                { ref: instance => (ToastList.ref = instance) }
+            ),
+            div,
+            () => {
+                ToastList.ref.add({ ...opts, id });
+            });
+        } else {
+            const node = document.querySelector(`#${this.wrapperId}`) as HTMLElement;
+            ['top', 'left', 'bottom', 'right'].map(pos => {
+                if (pos in opts) {
+                    node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
                 }
-                return this.create({ ...ToastList.defaultOpts, ...opts, type: 'info' });
-            }
+            });
+            ToastList.ref.add({ ...opts, id });
+        }
+        return id;
+    }
 
-            static warning(opts: ToastProps) {
-                if (typeof opts === 'string') {
-                    opts = { content: opts };
-                }
-                return this.create({ ...ToastList.defaultOpts, ...opts, type: 'warning' });
-            }
+    static close(id: string) {
+        if (ToastList.ref) {
+            ToastList.ref.remove(id);
+        }
+    }
 
-            static error(opts: ToastProps) {
-                if (typeof opts === 'string') {
-                    opts = { content: opts };
-                }
-                return this.create({ ...ToastList.defaultOpts, ...opts, type: 'error' });
-            }
+    static destroyAll() {
+        if (ToastList.ref) {
+            ToastList.ref.destroyAll();
+            const wrapper = document.querySelector(`#${this.wrapperId}`);
+            ReactDOM.unmountComponentAtNode(wrapper);
+            wrapper && wrapper.parentNode.removeChild(wrapper);
+            ToastList.ref = null;
+            this.wrapperId = null;
+        }
+    }
+    static getWrapperId() {
+        return this.wrapperId;
+    }
+    static info(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'info' });
+    }
 
-            static success(opts: ToastProps) {
-                if (typeof opts === 'string') {
-                    opts = { content: opts };
-                }
-                return this.create({ ...ToastList.defaultOpts, ...opts, type: 'success' });
-            }
+    static warning(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'warning' });
+    }
 
-            static config(opts: ToastProps) {
-                ['top', 'left', 'bottom', 'right'].forEach(pos => {
-                    if (pos in opts) {
-                        ToastList.defaultOpts[pos] = opts[pos];
-                    }
-                });
+    static error(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'error' });
+    }
 
-                if (typeof opts.zIndex === 'number') {
-                    ToastList.defaultOpts.zIndex = opts.zIndex;
-                }
-                if (typeof opts.duration === 'number') {
-                    ToastList.defaultOpts.duration = opts.duration;
-                }
-                if (typeof opts.getPopupContainer === 'function') {
-                    ToastList.defaultOpts.getPopupContainer = opts.getPopupContainer;
-                }
-            }
+    static success(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'success' });
+    }
 
-            add(opts: ToastInstance) {
-                return this.foundation.addToast(opts);
+    static config(opts: ConfigProps) {
+        ['top', 'left', 'bottom', 'right'].forEach(pos => {
+            if (pos in opts) {
+                ToastList.defaultOpts[pos] = opts[pos];
             }
+        });
 
-            remove(id: string) {
-                return this.foundation.removeToast(id);
-            }
+        if (typeof opts.zIndex === 'number') {
+            ToastList.defaultOpts.zIndex = opts.zIndex;
+        }
+        if (typeof opts.duration === 'number') {
+            ToastList.defaultOpts.duration = opts.duration;
+        }
+        if (typeof opts.getPopupContainer === 'function') {
+            ToastList.defaultOpts.getPopupContainer = opts.getPopupContainer;
+        }
+    }
 
-            destroyAll() {
-                return this.foundation.destroyAll();
-            }
+    add(opts: ToastInstance) {
+        return this.foundation.addToast(opts);
+    }
 
-            render() {
-                let { list } = this.state;
-                const { removedItems } = this.state;
-                list = Array.from(new Set([...list, ...removedItems]));
-
-                return (
-                    <React.Fragment>
-                        {list.map((item, index) =>
-                            (item.motion ? (
-                                <ToastTransition key={item.id || index} motion={item.motion}>
-                                    {removedItems.find(removedItem => removedItem.id === item.id) ?
-                                        null :
-                                        transitionStyle => (
-                                            <Toast
-                                                {...item}
-                                                style={{ ...transitionStyle, ...item.style }}
-                                                close={id => this.remove(id)}
-                                            />
-                                        )}
-                                </ToastTransition>
-                            ) : (
-                                <Toast {...item} style={{ ...item.style }} close={id => this.remove(id)} />
-                            ))
-                        )}
-                    </React.Fragment>
-                );
-            }
+    remove(id: string) {
+        return this.foundation.removeToast(id);
+    }
 
+    destroyAll() {
+        return this.foundation.destroyAll();
+    }
+
+    render() {
+        let { list } = this.state;
+        const { removedItems } = this.state;
+        list = Array.from(new Set([...list, ...removedItems]));
+
+        return (
+            <React.Fragment>
+                {list.map((item, index) =>
+                    (item.motion ? (
+                        <ToastTransition key={item.id || index} motion={item.motion}>
+                            {removedItems.find(removedItem => removedItem.id === item.id) ?
+                                null :
+                                transitionStyle => (
+                                    <Toast
+                                        {...item}
+                                        style={{ ...transitionStyle, ...item.style }}
+                                        close={id => this.remove(id)}
+                                    />
+                                )}
+                        </ToastTransition>
+                    ) : (
+                        <Toast {...item} style={{ ...item.style }} close={id => this.remove(id)} />
+                    ))
+                )}
+            </React.Fragment>
+        );
+    }
+
+
+}
+
+
+export class ToastFactory {
+    static create(config?: ConfigProps): ReturnType<typeof createBaseToast> {
+        const newToast = createBaseToast()
+        newToast.useToast = useToast;
+        config && newToast.config(config);
+        return newToast;
 
-        }
-        ToastList.useToast = useToast;
-        config && ToastList.config(config);
-        return ToastList;
     }
 }
 export default ToastFactory.create();

packages/semi-ui/toast/toast.tsx

@@ -16,7 +16,7 @@ const prefixCls = cssClasses.PREFIX;
 export interface ToastReactProps extends ToastProps {
     style?: CSSProperties;
     icon?: React.ReactNode;
-    content?: React.ReactNode;
+    content: React.ReactNode;
 }
 
 class Toast extends BaseComponent<ToastReactProps, ToastState> {

packages/semi-ui/transfer/index.tsx

@@ -187,7 +187,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         showPath: false,
     };
 
-    _treeRef: React.RefObject<Tree> = null;
+    _treeRef: Tree = null;
 
     constructor(props: TransferProps) {
         super(props);
@@ -471,7 +471,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 value={values}
                 defaultExpandAll
                 leafOnly
-                ref={this._treeRef}
+                ref={tree => this._treeRef = tree}
                 filterTreeNode
                 searchRender={false}
                 searchStyle={{ padding: 0 }}

packages/semi-webpack/package.json

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

src/components/Footer/index.jsx

@@ -15,7 +15,7 @@ export class Footer extends Component {
                     <a href={`/${getLocale()}/start/getting-started`} className='text'>{_t('footer.component')}</a>
                     <a href='https://figma.com/@semi' className='figmaUIKit' target="_blank" rel="noreferrer">Figma UIKit</a>
                     <p className='text_d3ba282e'><a href="https://semi.design/dsm/landing" className='text_8b88424e' target="_blank" rel="noreferrer">{_t('footer.dsm')}</a></p>
-                    <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">Github</a>
+                    <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">GitHub</a>
                 </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/a577c310-324e-11ec-8b14-8fb159794ae4.svg" className='divider' />
                 <div className='autoWrapper'>
                     <p className='a2021SemiDesignAllRi'>© 2021 Semi Design. All rights reserved</p>

src/styles/layout.scss

@@ -449,7 +449,7 @@ $spCol: var(--semi-color-primary);
     }
 }
 
-@media (max-width: 1405px) {
+@media (max-width: 1500px) {
 
     .pageAnchor {
         display: none;