chore: update toast doc

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

@@ -291,7 +291,14 @@ function Demo() {
 render(Demo);
 ```
 
-### useToast Hooks
+### Destroy all
+
+Globally Destroy (>= 0.25.0):
+
+-   `Toast.destroyAll()`
+
+
+### Consume Context
 
 You could use `Toast.useToast` to create a `contextHolder` that could access context. Created toast will be inserted to where contextHolder is placed.
 
@@ -328,65 +335,13 @@ function Demo(props = {}) {
 render(Demo);
 ```
 
-You could also use `ReactDOM.createPortal` to insert toast in a Portal.
-
-```jsx live=true noInline=true
-import React, { useRef } from 'react';
-import { Toast, Button } from '@douyinfe/semi-ui';
-
-const ReachableContext = React.createContext();
-
-const useCreatePortalInBody = () => {
-    const wrapperRef = useRef(null);
-    if (wrapperRef.current === null && typeof document !== 'undefined') {
-        const div = document.createElement('div');
-        wrapperRef.current = div;
-    }
-    useLayoutEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper || typeof document === 'undefined') {
-            return;
-        }
-        document.querySelector('.article-wrapper').appendChild(wrapper);
-        return () => {
-            document.querySelector('.article-wrapper').appendChild(wrapper);
-        };
-    }, []);
-    return children => wrapperRef.current && ReactDOM.createPortal(children, wrapperRef.current);
-};
-
-function Demo(props = {}) {
-    const [toast, contextHolder] = Toast.useToast();
-    const createBodyPortal = useCreatePortalInBody();
-    const config = {
-        duration: 3,
-        title: 'This is a success message',
-        content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
-    };
-
-    return (
-        <ReachableContext.Provider value="Light">
-            <div>
-                <Button
-                    onClick={() => {
-                        toast.success(config);
-                    }}
-                >
-                    Hook Toast
-                </Button>
-            </div>
-            {createBodyPortal(
-                <div style={{ position: 'fixed', top: 0, left: '50%', zIndex: 10000 }}>{contextHolder}</div>
-            )}
-        </ReachableContext.Provider>
-    );
-}
-
-render(Demo);
-```
 
 ### Create Toast with different configurations
 
+<Notice>
+Commonly used to override global configuration
+</Notice>
+
 -   `ToastFactory.create(config) => Toast`  
     If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):
 
@@ -417,7 +372,7 @@ Globally Destroy (>= 0.25.0):
 
 -   `Toast.destroyAll()`
 
-HookToast
+Consume Context
 
 -   `Toast.useToast` **v>=1.2.0**  
     When you need access Context, you could use `Toast.useToast` to create a `contextHolder` and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where `contextHolder` is inserted. Hook toast has following methods: `info`, `success`, `warning`, `error`, `close`.
@@ -427,12 +382,19 @@ HookToast
 
 The static methods provided are as follows: Display: You can pass in `options` object or string directly. Methods return the value of `toastId`: `const toastId = Toast.info({ /*...options*/ })`
 
+**The global configuration is set before any method call, and takes effect only once (>= 0.25.0)**
+-   `Toast.config(config)`
+
+** Show Toast Directly
+
 -   `Toast.info(options || string)`
 -   `Toast.error(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.success(options || string)`
--   `Toast.close(toastId)`  Close Manually ( `toastId` is the return value of the display methods)
--   `Toast.config(config)`  The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
+
+**`info` `error` `warning` `success` return the `toastId`, can be used for manually closing **
+- `Toast.close(toastId)`  Close Manually 
+
 
 ## Options
 
@@ -459,7 +421,7 @@ The static methods provided are as follows: Display: You can pass in `options` o
 | right | Pop-up position right                                                                                                                                       | number \| string | - | 0.25.0 |
 | top | Pop-up position top                                                                                                                                         | number \| string | - | 0.25.0 |
 | zIndex | Z-index value                                                                                                                                               | number | 1010 |  |
-| theme | Style of background fill, one of `light`, `normal` | string | `normal` | 1.0.0   |
+| theme | Style of background fill, one of `light`, `normal` | string | `normal` | 2.54.0   |
 | duration | Automatic close delay, no auto-close when set to 0 | number | 3 |         |
 | getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative`   This will change the DOM tree position, but not the view's rendering position.  | () => HTMLElement \| null | () => document.body | 0.34.0 |
 ## Accessibility

content/feedback/toast/index.md

@@ -291,7 +291,13 @@ function Demo() {
 render(Demo);
 ```
 
-### Hooks 用法
+### 销毁所有
+
+全局销毁 ( >= 0.25.0 )：
+
+-   `Toast.destroyAll()`
+
+### 消费 Context
 
 通过 Toast.useToast 创建支持读取 context 的 contextHolder。此时的 toast 会渲染在 contextHolder 所在的节点处。
 
@@ -328,65 +334,13 @@ function Demo(props = {}) {
 render(Demo);
 ```
 
-如果需要渲染到 Portal 中可以使用 ReactDOM.createPortal 方法。
-
-```jsx live=true noInline=true
-import React, { useRef } from 'react';
-import { Toast, Button } from '@douyinfe/semi-ui';
-
-const ReachableContext = React.createContext();
-
-const useCreatePortalInBody = () => {
-    const wrapperRef = useRef(null);
-    if (wrapperRef.current === null && typeof document !== 'undefined') {
-        const div = document.createElement('div');
-        wrapperRef.current = div;
-    }
-    useLayoutEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper || typeof document === 'undefined') {
-            return;
-        }
-        document.querySelector('.article-wrapper').appendChild(wrapper);
-        return () => {
-            document.querySelector('.article-wrapper').appendChild(wrapper);
-        };
-    }, []);
-    return children => wrapperRef.current && ReactDOM.createPortal(children, wrapperRef.current);
-};
-
-function Demo(props = {}) {
-    const [toast, contextHolder] = Toast.useToast();
-    const createBodyPortal = useCreatePortalInBody();
-    const config = {
-        duration: 3,
-        title: 'This is a success message',
-        content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
-    };
-
-    return (
-        <ReachableContext.Provider value="Light">
-            <div>
-                <Button
-                    onClick={() => {
-                        toast.success(config);
-                    }}
-                >
-                    Hook Toast
-                </Button>
-            </div>
-            {createBodyPortal(
-                <div style={{ position: 'fixed', top: 0, left: '50%', zIndex: 10000 }}>{contextHolder}</div>
-            )}
-        </ReachableContext.Provider>
-    );
-}
-
-render(Demo);
-```
 
 ### 创建不同配置 Toast
 
+<Notice>
+常用于覆盖全局配置
+</Notice>
+
 -   `ToastFactory.create(config) => Toast`  
     如果您的应用中需要使用不同 config 的 Toast，可以使用 ToastFactory.create(config)创建新的 Toast (>= 1.23):
 
@@ -417,7 +371,7 @@ render(Demo);
 
 -   `Toast.destroyAll()`
 
-HookToast ( >= 1.2.0 )：
+消费 Context ( >= 1.2.0 )：
 
 -   `Toast.useToast()`  
     当你需要使用 Context 时，可以通过 Toast.useToast 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Toast 将会得到 contextHolder 所在位置的所有上下文。创建的 toast 对象拥有与以下方法：`info`, `success`, `warning`, `error`, `close`。
@@ -425,44 +379,55 @@ HookToast ( >= 1.2.0 )：
 
 ## API 参考
 
-组件提供的静态方法，使用方式和参数如下：展示：可以直接传入 `options` 对象或 `string`，返回值为`toastId`：  
-`const toastId = Toast.info({ /*...options*/ })`
+组件提供的静态方法，使用方式和参数如下：展示：可以直接传入 `options` 对象或 `string`：
 
+**全局配置, 在调用前提前配置，全局一次生效 ( >= 0.25.0 )**
+-   `Toast.config(config)` 
+
+**直接展示 Toast**
 -   `Toast.info(options || string)`
 -   `Toast.error(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.success(options || string)`
--   `Toast.close(toastId)` 手动关闭 （ `toastId` 为展示方法的返回值）
--   `Toast.config(config)` 全局配置在调用前提前配置，全局一次生效 ( >= 0.25.0 )
+
+**`info` `error` `warning` `success` 返回值为`toastId`, 可用于手动关闭 **
+
+`const toastId = Toast.info({ /*...options*/ })`
+-   `Toast.close(toastId)` 手动关闭 
+
+
+
+
+
 
 ## Options
 
 **Toast Options 支持以下 API 及 Config 中的 API**
 
-| 属性           | 说明            | 类型            | 默认值 | 版本     |
-|--------------|---------------|---------------| --- |--------|
-| content      | 提示内容          | ReactNode     | '' |        |
-| icon         | 自定义图标         | ReactNode     |  | 0.25.0 |
-| showClose    | 是否展示关闭按钮      | boolean       | true | 0.25.0 |
-| textMaxWidth | 内容的最大宽度       | number \      | string | 450 | 0.25.0 |
-| onClose      | toast 关闭的回调函数 | () => void    |  |        |
-| stack        | 是否堆叠 Toast    | boolean       | false | 2.42.0 |
-| id           | 自定义 ToastId   | number        |  |  |
+| 属性           | 说明            | 类型       | 默认值 | 版本     |
+|--------------|---------------|----------| --- |--------|
+| content      | 提示内容          | ReactNode | '' |        |
+| icon         | 自定义图标         | ReactNode |  | 0.25.0 |
+| showClose    | 是否展示关闭按钮      | boolean  | true | 0.25.0 |
+| textMaxWidth | 内容的最大宽度       | number \| string | 450 | 0.25.0 |
+| onClose      | toast 关闭的回调函数 | () => void |  |        |
+| stack        | 是否堆叠 Toast    | boolean  | false | 2.42.0 |
+| id           | 自定义 ToastId   | number   |  |  |
 
 ## Config
 
 **以下 API 支持全局配置，用于更改当前 Toast 的默认配置**
 
-| 属性 | 说明                                                                                        | 类型 | 默认值 | 版本 |
-| --- |-------------------------------------------------------------------------------------------| --- | --- | --- |
-| bottom | 弹出位置 bottom                                                                               | number \| string | - | 0.25.0 |
-| left | 弹出位置 left                                                                                 | number \| string | - | 0.25.0 |
-| right | 弹出位置 right                                                                                | number \| string | - | 0.25.0 |
-| top | 弹出位置 top                                                                                  | number \| string | - | 0.25.0 |
-| zIndex | 弹层 z-index 值                                                                              | number | 1010 |  |
-| theme | 填充样式，支持 `light`, `normal` | string | `normal` | 1.0.0  |
-| duration | 自动关闭的延时，单位 s，设为 0 时不自动关闭  | number | 3 |        |
-| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 container 和 内部的 .semi-toast-wrapper 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。  `position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
+| 属性 | 说明                                                                                                                    | 类型 | 默认值 | 版本     |
+| --- |-----------------------------------------------------------------------------------------------------------------------| --- | --- |--------|
+| bottom | 弹出位置 bottom                                                                                                           | number \| string | - | 0.25.0 |
+| left | 弹出位置 left                                                                                                             | number \| string | - | 0.25.0 |
+| right | 弹出位置 right                                                                                                            | number \| string | - | 0.25.0 |
+| top | 弹出位置 top                                                                                                              | number \| string | - | 0.25.0 |
+| zIndex | 弹层 z-index 值                                                                                                          | number | 1010 |        |
+| theme | 填充样式，支持 `light`, `normal`                                                                                             | string | `normal` | 2.54.0 |
+| duration | 自动关闭的延时，单位 s，设为 0 时不自动关闭                                                                                              | number | 3 |        |
+| getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 container 和 内部的 .semi-toast-wrapper `position: relative`, 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 | () => HTMLElement \| null | () => document.body | 0.34.0 |
 
 ## Accessibility