Merge branch 'main' into release

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

@@ -65,6 +65,7 @@ import { Divider } from '@douyinfe/semi-ui';
 ```jsx live=true
 import React from 'react';
 import { Divider, Typography } from '@douyinfe/semi-ui';
+import { IconSemiLogo } from '@douyinfe/semi-icons';
 
 () => {
 
@@ -83,7 +84,7 @@ import { Divider, Typography } from '@douyinfe/semi-ui';
             </Divider>
 
             <Divider margin='12px'>
-                <IconTiktokLogo/>
+                <IconSemiLogo />
             </Divider>
         </div>
     );

content/basic/divider/index.md

@@ -65,6 +65,7 @@ import { Divider } from '@douyinfe/semi-ui';
 ```jsx live=true
 import React from 'react';
 import { Divider, Typography } from '@douyinfe/semi-ui';
+import { IconSemiLogo } from '@douyinfe/semi-icons';
 
 () => {
 
@@ -83,7 +84,7 @@ import { Divider, Typography } from '@douyinfe/semi-ui';
             </Divider>
 
             <Divider margin='12px'>
-                <IconTiktokLogo/>
+                <IconSemiLogo />
             </Divider>
         </div>
     );

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

@@ -6,7 +6,7 @@ title:  Layout
 subTitle: Layout
 icon: doc-layout
 dir: column
-brief: Assist in the overall layout of a page.
+brief: Used to quickly divide the overall layout of the page
 ---
 
 

content/basic/layout/index.md

@@ -5,7 +5,7 @@ category: 基础
 title: Layout 布局
 icon: doc-layout
 dir: column
-brief: 协助进行页面级整体布局。
+brief: 用于快捷划分页面整体布局
 ---
 
 ## 概述

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

@@ -5,19 +5,12 @@ category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm
 icon: doc-popconfirm
-brief: Click on the element to pop up the bubble confirmation box.
+brief: Used when the operation of the target element requires further confirmation from the user. Compared with Popover, it has a built-in series of configurable action buttons. Compared with Modal, it does not force full-screen centering, and the interaction is lighter.
 ---
 
 
-## When to Use
-
-When the operation of the target element requires further confirmation by the user, a floating layer prompt pops up near the target element to ask the user.
-
-and `Modal.confirm` Compared with the pop-up full-screen centered mode dialog box, the interactive form is lighter.
-
 ## Demos
 
-
 ### How to import
 
 ```jsx import

content/feedback/popconfirm/index.md

@@ -4,16 +4,9 @@ order: 64
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm
-brief: 点击元素，弹出气泡式的确认框。
+brief: 目标元素的操作需要用户进一步的确认时使用。与 Popover 相比它内置了一系列可配置的操作按钮，与 Modal 相比它不强制全屏居中显示，交互也更轻量
 ---
 
-
-## 何时使用
-
-目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
-
-和 `Modal.confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -6,13 +6,8 @@ title: Progress
 subTitle: Progress
 icon: doc-progress
 width: 60%
-brief: Show the current progress of the operation.
+brief: Used to display the current progress and status of the user operation, and is generally used when the operation takes a long time. Can also be used to indicate the degree of completion of a task/object
 ---
-
-## When to use
-
-Display the current progress and state of the operation for the user when the operation takes a long time to complete
-
 ## Demos
 
 ### How to import
@@ -35,7 +30,7 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-       <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
+        <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
         <br />
         <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
         <br />

content/feedback/progress/index.md

@@ -5,13 +5,8 @@ category: 反馈类
 title: Progress 进度条
 icon: doc-progress
 width: 60%
-brief: 展示操作的当前进度。
+brief: 用于展示用户操作的当前进度和状态，一般在操作耗时较长时使用。也可用来表示任务/对象的完成度
 ---
-
-## 何时使用
-
-在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态
-
 ## 代码演示
 
 ### 如何引入

content/input/autocomplete/index.md

@@ -7,7 +7,7 @@ icon: doc-autocomplete
 brief: 输入框自动填充。
 ---
 
-## 何时使用
+## 使用场景
 
 用于对输入框提供输入建议，进行自动补全的操作
 

content/input/checkbox/index.md

@@ -8,10 +8,10 @@ brief: 复选框允许用户选中多个选项
 ---
 
 
-## 何时使用
+## 使用场景
 
-- 在一组可选项中进行多项选择时；
-- 单独使用可以表示两种状态之间的切换，和 Switch 类似。区别在于切换 Switch 会直接触发状态改变，而 Checkbox 一般用于状态标记，需要和提交操作配合。
+- 勾选框可以让用户在两种相反的状态、行为或取值之间选择;
+- 适用于在列表中选择单个或多个选项，开启或关闭某个选项
 
 ## 代码演示
 

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

@@ -8,10 +8,6 @@ icon: doc-datepicker
 brief: The date selector is used to help the user select a compliant, formatted date (time) or date (time) range.
 ---
 
-## When to Use
-
-When the user needs to enter a date, you can click on the standard input box and pop up the date panel to select.
-
 ## Demos
 
 ### How to import

content/input/datepicker/index.md

@@ -7,10 +7,6 @@ icon: doc-datepicker
 brief: 日期选择器用于帮助用户选择一个符合要求的、格式化的日期（时间）或日期（时间）范围
 ---
 
-## 何时使用
-
-当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -5,7 +5,7 @@ category: Input
 title:  InputNumber
 subTitle: InputNumber
 icon: doc-inputnumber
-brief: Enter values within range through a mouse or keyboard.
+brief: Through the mouse or keyboard, input the value in the range. Unlike Input, it has a stepper operation area for digital scenes, and it can display more complex content formats when used with Parser.
 ---
 
 

content/input/inputnumber/index.md

@@ -4,14 +4,9 @@ order: 24
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber
-brief: 通过鼠标或键盘，输入范围内的数值。
+brief: 通过鼠标或键盘，输入范围内的数值，与 Input 不同的是它带有针对数字场景的步进器操作区，配合 Parser 使用可以展示更复杂的内容格式
 ---
 
-
-## 何时使用
-
-当需要获取标准数值时。
-
 ## 代码演示
 
 ### 如何引入

content/input/radio/index.md

@@ -7,10 +7,10 @@ icon: doc-radio
 brief: 用户使用单选框来从少量的选项集合中选择单个选项
 ---
 
-## 何时使用
+## 使用场景
 
--   用于在多个备选项中选中单个状态。
--   和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
+单选框(Radio)也叫单选按钮，它允许用户在一组选项中选择其中一个。  
+当选项很多时，单选下拉菜单（Select）可能比较适合，因为它所占用的画面空间比单选按钮来得要少。
 
 ## 代码演示
 ### 如何引入

content/input/rating/index.md

@@ -4,7 +4,7 @@ order: 26
 category: 输入类
 title:  Rating 评分
 icon: doc-rating
-brief: 展示评分的组件。
+brief: 展示评分的组件
 ---
 
 

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

@@ -5,7 +5,7 @@ category: Input
 title:  Slider
 subTitle: Slider
 icon: doc-slider
-brief: Slider is used to help users quickly enter a numeric value or range.
+brief: Selector to quickly select a number or range of values using drag interaction, more intuitive than InputNumber
 ---
 
 

content/input/slider/index.md

@@ -4,7 +4,7 @@ order: 28
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider
-brief: 滑动选择器帮助用户快速输入连续或离散的数值，或由这些数值组成的一段数值范围。
+brief: 滑动选择器，使用拖动交互快速选择数值或数值范围，与 InputNumber 相比更直观
 ---
 
 

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

@@ -8,10 +8,6 @@ icon: doc-timepicker
 brief: Users can easily select a compliant, formatted point of time using the time selector.
 ---
 
-## When to Use
-
-When users need to enter a time, they can click on the standard input box and pop up the time panel to select.
-
 ## Demos
 
 ### How to import

content/input/timepicker/index.md

@@ -8,10 +8,6 @@ brief: 用户使用时间选择器可以方便地选择某一符合要求的、
 ---
 
 
-## 何时使用
-
-当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -5,7 +5,8 @@ category: Input
 title:  TreeSelect
 subTitle: TreeSelect
 icon: doc-treeselect
-brief: A tree view component for selection.
+brief: TreeSelector is used for structured display & selection of multi-level tree data, such as displaying a list of folders and files, displaying a list of organizational structure members, and so on.
+---
 ---
 
 

content/input/treeselect/index.md

@@ -4,14 +4,9 @@ order: 33
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect
-brief: 树型选择组件。
+brief: 树选择器用于多层级树形数据的结构化展示 & 选取，例如显示文件夹与文件的列表、显示组织架构成员列表等等。
 ---
 
-## 何时使用
-
-类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
-
-
 ## 代码演示
 
 ### 如何引入

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

@@ -5,7 +5,6 @@ category: Navigation
 title: BackTop
 subTitle: BackTop
 icon: doc-backtop
-brief: The BackTop component is a button used to return to the top of the page.
 ---
 
 ## Demos

content/navigation/backtop/index.md

@@ -4,7 +4,6 @@ order: 36
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop
-brief: 返回页面顶部的操作按钮。
 ---
 
 ## 代码演示

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

@@ -10,11 +10,6 @@ dir: column
 brief: A menu list that provides navigation for pages and features.
 ---
 
-
-## When to Use
-
-The navigation menu is the soul of a website, and users rely on navigation to jump in various pages. It is generally divided into top navigation and side navigation, top navigation provides global categories and functions, and side navigation provides a multi-level structure to accommodate and arrange the website architecture.
-
 ## Demos
 
 ### How to import

content/navigation/navigation/index.md

@@ -10,10 +10,6 @@ brief: 为页面和功能提供导航的菜单列表。
 ---
 
 
-## 何时使用
-
-导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -6,13 +6,9 @@ title: Steps
 subTitle: Steps
 icon: doc-steps
 dir: column
-brief: When a long process needs to be step by step, use the step component to let the user know its current progress
+brief: Decompose complex tasks or tasks with prior relationships, use step components to guide users to operate according to the prescribed process, and let them know their current progress
 ---
 
-## When to use
-
-When the task is complex or has a sequential relationship, it is broken down into a series of steps to simplify the task.
-
 ## Demos
 
 ### How to import

content/navigation/steps/index.md

@@ -5,14 +5,9 @@ category: 导航类
 title:  Steps 步骤
 icon: doc-steps
 dir: column
-brief: 当一个长流程需要分步时，使用步骤组件来让用户知道其当前的进度
+brief: 将复杂任务或存在先后关系的任务分解，使用步骤组件引导用户按规定流程操作，并让其知道其当前的进度
 ---
 
-
-## 何时使用
-
-当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -6,7 +6,7 @@ title:  Calendar
 subTitle: Calendar
 icon: doc-calendar
 dir: column
-brief: A container that displays data in calendar form.
+brief: Calendar component that allows to display corresponding events in day/week/month view
 ---
 
 ## Demos

content/show/calendar/index.md

@@ -5,7 +5,7 @@ category: 展示类
 title: Calendar 日历
 icon: doc-calendar
 dir: column
-brief: 按照日历形式展示数据的容器。
+brief: 日历组件，允许以日/周/月视图展示对应事件
 ---
 
 ## 代码演示

content/show/collapsible/index.md

@@ -7,7 +7,7 @@ icon: doc-collapsible
 brief: 行为组件，是一个用于展开或折叠内容的容器。
 ---
 
-## 何时使用
+## 使用场景
 
 -   `Collapsible` 是一个行为组件，默认开启动画效果。它被用于 Semi 的各种组件中，如：`Navigation`， `Collapse`, `Tree`， `TreeSelect`，以及 `Typography` 中。
 -   当上述组件不能满足需求或者需要自定义一些折叠行为时，可以使用 `Collapsible` 来包裹需要展开或者折叠的内容。

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

@@ -6,13 +6,9 @@ title: List
 subTitle: List
 icon: doc-list
 dir: column
-brief: Lists display a set of related contents.
+brief: Lists display a set of related contents
 ---
 
-## When to Use
-
-Lists display a set of texts, lists, images, paragraphs, etc. It is commonly used in data display pages.
-
 ## Demos
 
 ### How to import

content/show/list/index.md

@@ -6,13 +6,9 @@ title: List 列表
 icon: doc-list
 dir: column
 noInline: true
-brief: 基础列表组件。
+brief: 基础列表组件
 ---
 
-## 使用场景
-
-最基础的列表展示，可展现文字、列表、图片、段落等，常用于后台数据展示页面。
-
 ## 代码演示
 
 ### 如何引入

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

@@ -5,13 +5,8 @@ category: Show
 title: OverflowList
 subTitle: OverflowList
 icon: doc-overflowList
-brief: The OverflowList component is a container component used to take list of items and display as many items as can fit inside itself.
+brief: OverflowList is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.
 ---
-
-## When to use
-
-`OverflowList` is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.
-
 ## Demos
 
 ### How to import

content/show/overflowlist/index.md

@@ -4,13 +4,9 @@ order: 54
 category: 展示类
 title: OverflowList 折叠列表
 icon: doc-overflowList
-breif: 用于自动折叠过长内容的容器。
+brief: OverflowList 是一个行为组件，用于展示列表，并支持自适应来展示尽可能多的项目。因过长而溢出项目将折叠为一个元素。当检测到调整大小时，可见项将被重新计算。
 ---
 
-## 何时使用
-
-`OverflowList` 是一个行为组件，用于展示列表，并支持自适应来展示尽可能多的项目。因过长而溢出项目将折叠为一个元素。当检测到调整大小时，可见项将被重新计算。
-
 ## 代码演示
 
 ### 如何引入

content/show/popover/index.md

@@ -7,11 +7,11 @@ icon: doc-popover
 brief: 点击/鼠标移入元素，弹出气泡式的卡片浮层。
 ---
 
-## 何时使用
+## 使用场景
 
-当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
+Popover 气泡卡片是由用户自主打开的临时性浮层卡片，能够承载一些额外内容和交互行为而不影响原页面。
 
-和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
+和 Tooltip 的区别是，它可以承载更复杂的内容，而不仅仅是提示文本。
 
 ## 代码演示
 

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

@@ -5,13 +5,12 @@ category: Show
 title: SideSheet
 subTitle: SideSheet
 icon: doc-sidesheet
-brief: SideSheet is a panel which slides in from the edge of the screen.
+brief: An overlay panel that slides out from the edge of the screen, typically used to host secondary action pages.
 ---
 
 ## Demos
 
 ### How to import
-
 ```jsx import
 import { SideSheet } from '@douyinfe/semi-ui';
 ```

content/show/sidesheet/index.md

@@ -4,7 +4,7 @@ order: 57
 category: 展示类
 title: SideSheet 滑动侧边栏
 icon: doc-sidesheet
-brief: 屏幕边缘滑出的浮层面板。
+brief: 可从屏幕边沿滑出的浮层面板，通常用于承载二级操作页面
 ---
 
 ## 代码演示

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

@@ -6,14 +6,9 @@ title: Table
 subTitle: Table
 icon: doc-table
 dir: column
-brief: Show row data.
+brief: Tables are used to present structured data content, usually accompanied by the ability to manipulate the data (sort, search, paginate...).
 ---
 
-## When to Use
-
--   When there is a large amount of structured data to be presented;
--   When complex behaviors such as sorting, searching, paging and customizing data need to be performed.
-
 ## How to Use
 
 Into the header. `columns` And data. `DataSource` To render.

content/show/table/index.md

@@ -4,15 +4,10 @@ order: 58
 category: 展示类
 title:  Table 表格
 icon: doc-table
-brief: 展示行列数据。
+brief: 表格用于呈现结构化的数据内容，通常会伴随提供对数据进行操作（排序、搜素、分页……）的能力。
 ---
 
 
-## 何时使用
-
--   当有大量结构化的数据需要展现时；
--   当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
-
 ## 如何使用
 
 往 Table 传入表头 `columns` 和数据 `dataSource` 进行渲染。

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

@@ -151,5 +151,8 @@ Introduce the full amount of semi css in `global.css`. Currently, on-demand impo
 
 **Using theme in nextjs**
 
-Please refer to [this issue](https://github.com/DouyinFE/semi-design/issues/565)
-
+You need to replace the path of the import statement in Step3, and replace the default theme CSS product with the CSS product in your customized theme package, for example, the theme package is `@semi-bot/semi-theme-nyx-c`
+```css
+/* styles/globals.css */
+@import '~@semi-bot/semi-theme-nyx-c/semi.min.css'';
+```

content/start/getting-started/index.md

@@ -43,7 +43,7 @@ class Demo extends React.Component {
 
 ## 3、在 Next.js 中使用
 
-当你在 Next.js 项目中使用时，需要搭配 Semi 提供的编译插件
+当你在 Next.js 项目中使用时，需要搭配 Semi 提供的编译插件（由于 Next.js 不允许 npm 包从 node_modules 中 import 样式文件，需要配合插件将默认的import CSS 语句移除，并且手动引入 CSS）
 
 ### Step1
 
@@ -51,13 +51,13 @@ class Demo extends React.Component {
 
 ```shell
 # 使用 npm
-npm i @douyinfe/semi-next --save-dev
+npm i @douyinfe/semi-next
 
 # 使用 yarn
-yarn add @douyinfe/semi-next --dev
+yarn add @douyinfe/semi-next
 
 # 使用 pnpm
-pnpm add @douyinfe/semi-next --dev
+pnpm add @douyinfe/semi-next
 ```
 
 ### Step2
@@ -85,9 +85,12 @@ module.exports = semi({
 @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
 ```
 
-**在 nextjs 中使用主题包**
-
-请查阅 [此 issue](https://github.com/DouyinFE/semi-design/issues/565) 中的方法
+**如何在 nextjs 中使用主题包**  
+你需要更换 Step3 中 import 语句的路径，将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物，例如主题包为 `@semi-bot/semi-theme-nyx-c`
+```css
+/* styles/globals.css */
+@import '~@semi-bot/semi-theme-nyx-c/semi.min.css'';
+```
 
 ## 4、UMD 方式使用组件
 

packages/semi-icons/package.json

@@ -58,7 +58,7 @@
     "webpack": "^4.46.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "_unpkg": true,
   "unpkgFiles": [

packages/semi-illustrations/package.json

@@ -28,7 +28,7 @@
     "@babel/runtime-corejs3": "^7.15.4"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.15.8",

packages/semi-ui/cascader/index.tsx

@@ -508,8 +508,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                             this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
                         }}
                     >
-                        {displayProp === 'label' && keyEntities[nodeKey].data.label}
-                        {displayProp === 'value' && keyEntities[nodeKey].data.value}
+                        {keyEntities[nodeKey].data[displayProp]}
                     </Tag>
                 );
             }

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

@@ -78,7 +78,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is undefined', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: undefined,
         };
         const tagInput = getTagInput(props);
@@ -89,7 +89,7 @@ describe('TagInput', () => {
 
     it('TagInput with defaultValue and value is null', () => {
         const props = {
-            defaultValue: ['tiktok', 'hotsoon'],
+            defaultValue: ['semi', 'hotsoon'],
             value: null,
         };
         const tagInput = getTagInput(props);
@@ -123,26 +123,26 @@ describe('TagInput', () => {
         /* when separator is null */
         const props2 = {
             separator: null,
-            inputValue: 'tiktok-hotsoon'
+            inputValue: 'semi-hotsoon'
         }
         const tagInput2 = getTagInput(props2);
         tagInput2.find('input').simulate('keyDown', { keyCode: 13 });
         const tags2 = tagInput2.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags2.length).toEqual(1);
-        expect(tags2.at(0).getDOMNode().textContent).toEqual('tiktok-hotsoon');
+        expect(tags2.at(0).getDOMNode().textContent).toEqual('semi-hotsoon');
         tagInput2.unmount();
 
         /* when separator is number */
         const props3 = {
             separator: 1,
-            inputValue: 'tiktok1hotsoon'
+            inputValue: 'semi1design'
         }
         const tagInput3 = getTagInput(props3);
         tagInput3.find('input').simulate('keyDown', { keyCode: 13 });
         const tags3 = tagInput3.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
         expect(tags3.length).toEqual(2);
-        expect(tags3.at(0).getDOMNode().textContent).toEqual('tiktok');
-        expect(tags3.at(1).getDOMNode().textContent).toEqual('hotsoon');
+        expect(tags3.at(0).getDOMNode().textContent).toEqual('semi');
+        expect(tags3.at(1).getDOMNode().textContent).toEqual('design');
         tagInput3.unmount();
     });
 
@@ -352,10 +352,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: null });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
@@ -364,10 +364,10 @@ describe('TagInput', () => {
 
     it('tagInput with set value to null  ', () => {
         const props = {
-            value: ['tiktok']
+            value: ['semi']
         };
         const tagInput = getTagInput(props);
-        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('semi');
         tagInput.setProps({ value: undefined });
         tagInput.update();
         const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);