From 2a7e8fe4e2f8d5673817b4469bf913fffd365648 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 2 May 2024 21:40:14 +0800
Subject: [PATCH 01/20] chore(deps): bump classnames from 2.3.3 to 2.5.1
 (#2876)

Bumps [classnames](https://github.com/JedWatson/classnames) from 2.3.3 to 2.5.1.
- [Changelog](https://github.com/JedWatson/classnames/blob/main/HISTORY.md)
- [Commits](https://github.com/JedWatson/classnames/compare/v2.3.3...v2.5.1)

---
updated-dependencies:
- dependency-name: classnames
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30afc73dc6..976752b65a 100644
--- a/package.json
+++ b/package.json
@@ -202,7 +202,7 @@
     "@types/sortablejs": "^1.10.7",
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
-    "classnames": "~2.3.1",
+    "classnames": "~2.5.1",
     "dayjs": "1.11.10",
     "hoist-non-react-statics": "~3.3.2",
     "lodash": "~4.17.15",

From e0f49a958f69e4b81065366947b66dcd4f188e7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Sat, 4 May 2024 18:52:22 +0800
Subject: [PATCH 02/20] chore: fix docs (#2877)

---
 src/checkbox/checkbox.md                  | 2 +-
 src/checkbox/type.ts                      | 2 +-
 src/radio/radio.md                        | 2 +-
 src/radio/type.ts                         | 2 +-
 src/select/hooks/usePanelVirtualScroll.ts | 2 +-
 src/table/BaseTable.tsx                   | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
index 1b106f3964..1393819bab 100644
--- a/src/checkbox/checkbox.md
+++ b/src/checkbox/checkbox.md
@@ -23,7 +23,7 @@ name | String | - | HTML 元素原生属性 | N
 readonly | Boolean | false | 只读状态 | N
 value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>值变化时触发 | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时出发，一般用于外层阻止冒泡场景 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N
 
 ### CheckboxGroup Props
 
diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
index 649b98762a..418904b76a 100644
--- a/src/checkbox/type.ts
+++ b/src/checkbox/type.ts
@@ -59,7 +59,7 @@ export interface TdCheckboxProps {
    */
   onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLInputElement> }) => void;
   /**
-   * 点击时出发，一般用于外层阻止冒泡场景
+   * 点击时触发，一般用于外层阻止冒泡场景
    */
   onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
 }
diff --git a/src/radio/radio.md b/src/radio/radio.md
index afafd20ee8..3f7688bac3 100644
--- a/src/radio/radio.md
+++ b/src/radio/radio.md
@@ -16,7 +16,7 @@ label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定
 name | String | - | HTML 元素原生属性 | N
 value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>选中状态变化时触发 | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时出发，一般用于外层阻止冒泡场景 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N
 
 ### RadioGroup Props
 
diff --git a/src/radio/type.ts b/src/radio/type.ts
index 01de0bad1d..4ab9f830a5 100644
--- a/src/radio/type.ts
+++ b/src/radio/type.ts
@@ -49,7 +49,7 @@ export interface TdRadioProps<T = RadioValue> {
    */
   onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLDivElement> }) => void;
   /**
-   * 点击时出发，一般用于外层阻止冒泡场景
+   * 点击触发，一般用于外层阻止冒泡场景
    */
   onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
 }
diff --git a/src/select/hooks/usePanelVirtualScroll.ts b/src/select/hooks/usePanelVirtualScroll.ts
index 3482fe6712..e349e1931e 100644
--- a/src/select/hooks/usePanelVirtualScroll.ts
+++ b/src/select/hooks/usePanelVirtualScroll.ts
@@ -54,7 +54,7 @@ const usePanelVirtualScroll = ({ popupContentRef, scroll, options, size }: Panel
     }
     const target = e.target as HTMLElement;
     const top = target.scrollTop;
-    // 排除横向滚动出发的纵向虚拟滚动计算
+    // 排除横向滚动触发的纵向虚拟滚动计算
     if (Math.abs(lastScrollY - top) > 5) {
       handleVirtualScroll();
       // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
index 59ce4e0de2..712749f988 100644
--- a/src/table/BaseTable.tsx
+++ b/src/table/BaseTable.tsx
@@ -207,7 +207,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
   const onInnerVirtualScroll = (e: WheelEvent<HTMLDivElement>) => {
     const target = e.target as HTMLElement;
     const top = target.scrollTop;
-    // 排除横向滚动出发的纵向虚拟滚动计算
+    // 排除横向滚动触发的纵向虚拟滚动计算
     if (lastScrollY !== top) {
       virtualConfig.isVirtualScroll && virtualConfig.handleScroll();
     } else {

From e0f807006603ef4e70f1061bd584f85a1b1506a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Mon, 6 May 2024 17:42:21 +0800
Subject: [PATCH 03/20] feat(input): add borderless mode (#2878)

---
 src/_common                               |   2 +-
 src/input/Input.tsx                       |   2 +
 src/input/_example/borderless.jsx         |  12 ++
 src/input/defaultProps.ts                 |   1 +
 src/input/input.en-US.md                  |   1 +
 src/input/input.md                        |   1 +
 src/input/type.ts                         |   5 +
 test/snap/__snapshots__/csr.test.jsx.snap | 155 ++++++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap |   2 +
 9 files changed, 180 insertions(+), 1 deletion(-)
 create mode 100644 src/input/_example/borderless.jsx

diff --git a/src/_common b/src/_common
index a8d0cac78f..b010e4cd35 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit a8d0cac78f86ad80746b07b9cfd3b152b101253c
+Subproject commit b010e4cd357863cf0ae8f74d8bb45b499154e542
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index f3d5f367ae..83fd5dd943 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -56,6 +56,7 @@ const Input = forwardRefWithStatics(
     const {
       type,
       autoWidth,
+      borderless,
       placeholder = t(local.placeholder),
       disabled,
       status,
@@ -248,6 +249,7 @@ const Input = forwardRefWithStatics(
           [`${classPrefix}-is-${tStatus}`]: tStatus && tStatus !== 'default',
           [`${classPrefix}-input--prefix`]: prefixIcon || labelContent,
           [`${classPrefix}-input--suffix`]: suffixIconContent || suffixContent,
+          [`${classPrefix}-input--borderless`]: borderless,
           [`${classPrefix}-input--focused`]: isFocused,
         })}
         onMouseEnter={handleMouseEnter}
diff --git a/src/input/_example/borderless.jsx b/src/input/_example/borderless.jsx
new file mode 100644
index 0000000000..f119c0b4b1
--- /dev/null
+++ b/src/input/_example/borderless.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Input, Space } from 'tdesign-react';
+import { SearchIcon } from 'tdesign-icons-react';
+
+export default function BorderlessInputExample() {
+  return (
+    <Space direction="vertical" style={{ width: 500 }}>
+      <Input placeholder="please input" clearable />
+      <Input placeholder="borderless input" borderless={true} clearable />
+    </Space>
+  );
+}
diff --git a/src/input/defaultProps.ts b/src/input/defaultProps.ts
index 98bbbbe035..feae431aba 100644
--- a/src/input/defaultProps.ts
+++ b/src/input/defaultProps.ts
@@ -10,6 +10,7 @@ export const inputDefaultProps: TdInputProps = {
   autoWidth: false,
   autocomplete: undefined,
   autofocus: false,
+  borderless: false,
   clearable: false,
   placeholder: undefined,
   readonly: false,
diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md
index 89e29ccfb9..f6f2424ab5 100644
--- a/src/input/input.en-US.md
+++ b/src/input/input.en-US.md
@@ -12,6 +12,7 @@ allowInputOverMax | Boolean | false | \- | N
 autoWidth | Boolean | false | \- | N
 autocomplete | String | undefined | \- | N
 autofocus | Boolean | false | \- | N
+borderless | Boolean | false | input without border | N
 clearable | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 format | Function | - | Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
diff --git a/src/input/input.md b/src/input/input.md
index 6f1cb9fd23..a4a719bdcc 100644
--- a/src/input/input.md
+++ b/src/input/input.md
@@ -12,6 +12,7 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 autocomplete | String | undefined | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N
 autofocus | Boolean | false | 自动聚焦 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | - | 是否禁用输入框 | N
 format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N
diff --git a/src/input/type.ts b/src/input/type.ts
index a7f698fc0d..0402ced4f6 100644
--- a/src/input/type.ts
+++ b/src/input/type.ts
@@ -32,6 +32,11 @@ export interface TdInputProps {
    * @default false
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否可清空
    * @default false
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index cfc27de024..b9327a0250 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -119797,6 +119797,159 @@ exports[`csr snapshot test > csr test src/input/_example/base.jsx 1`] = `
 }
 `;
 
+exports[`csr snapshot test > csr test src/input/_example/borderless.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <div
+        class="t-space t-space-vertical"
+        style="width: 500px; gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-align-left"
+            >
+              <input
+                class="t-input__inner"
+                placeholder="please input"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-input__wrap"
+          >
+            <div
+              class="t-input t-align-left t-input--borderless"
+            >
+              <input
+                class="t-input__inner"
+                placeholder="borderless input"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-space t-space-vertical"
+      style="width: 500px; gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-align-left"
+          >
+            <input
+              class="t-input__inner"
+              placeholder="please input"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-align-left t-input--borderless"
+          >
+            <input
+              class="t-input__inner"
+              placeholder="borderless input"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`csr snapshot test > csr test src/input/_example/clearable.jsx 1`] = `
 {
   "asFragment": [Function],
@@ -303786,6 +303939,8 @@ exports[`ssr snapshot test > ssr test src/input/_example/auto-width.jsx 1`] = `"
 
 exports[`ssr snapshot test > ssr test src/input/_example/base.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（无默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\" value=\\"Welcome to TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（有默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Welcome to TDesign\\"/></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/input/_example/borderless.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"please input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--borderless\\"><input placeholder=\\"borderless input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/input/_example/clearable.jsx 1`] = `"<div class=\\"t-input__wrap\\" value=\\"Hello TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Hello TDesign\\"/></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/input/_example/disabled.jsx 1`] = `"<div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-align-left\\"><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" disabled=\\"\\" value=\\"禁用状态\\"/></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index d948b385c7..396ae2cdca 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -502,6 +502,8 @@ exports[`ssr snapshot test > ssr test src/input/_example/auto-width.jsx 1`] = `"
 
 exports[`ssr snapshot test > ssr test src/input/_example/base.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（无默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\" value=\\"Welcome to TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（有默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Welcome to TDesign\\"/></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/input/_example/borderless.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"please input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--borderless\\"><input placeholder=\\"borderless input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/input/_example/clearable.jsx 1`] = `"<div class=\\"t-input__wrap\\" value=\\"Hello TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Hello TDesign\\"/></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/input/_example/disabled.jsx 1`] = `"<div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-align-left\\"><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" disabled=\\"\\" value=\\"禁用状态\\"/></div></div>"`;

From 28fc974b111cd6edbf2d79fc9440e51510f43732 Mon Sep 17 00:00:00 2001
From: fennghuang <89014758+fennghuang@users.noreply.github.com>
Date: Wed, 8 May 2024 00:04:25 +0800
Subject: [PATCH 04/20] =?UTF-8?q?fix(color-picker):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=A2=84=E8=A7=88=E9=A2=9C=E8=89=B2=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E9=80=9A=E9=81=93=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=98=E7=9A=84=E9=97=AE=E9=A2=98=20(#2880)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-picker/hooks/useStyles.ts       |  4 +--
 test/snap/__snapshots__/csr.test.jsx.snap | 32 +++++++++++------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/color-picker/hooks/useStyles.ts b/src/color-picker/hooks/useStyles.ts
index b98c9508cf..71fbeacbef 100644
--- a/src/color-picker/hooks/useStyles.ts
+++ b/src/color-picker/hooks/useStyles.ts
@@ -16,9 +16,9 @@ const useStyles = (params: TdColorSliderStyleParams, panelRectRef) => {
     if (!width) {
       return;
     }
-    const left = Math.round((Number(value) / Number(maxValue)) * width);
+    const left = Math.round((Number(value) / Number(maxValue)) * 100);
     setStyles({
-      left: `${left}px`,
+      left: `${left}%`,
       color: color.rgb,
     });
     // eslint-disable-next-line
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index b9327a0250..cf68913d26 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -53718,7 +53718,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/enable-alpha.jsx
                   <span
                     class="t-color-picker__thumb"
                     role="slider"
-                    style="left: 101px; color: rgb(0, 82, 217);"
+                    style="left: 60%; color: rgb(0, 82, 217);"
                     tabindex="0"
                   />
                 </div>
@@ -53738,7 +53738,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/enable-alpha.jsx
                   <span
                     class="t-color-picker__thumb"
                     role="slider"
-                    style="left: 134px; color: rgb(0, 82, 217);"
+                    style="left: 80%; color: rgb(0, 82, 217);"
                     tabindex="0"
                   />
                 </div>
@@ -54497,7 +54497,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/enable-alpha.jsx
                 <span
                   class="t-color-picker__thumb"
                   role="slider"
-                  style="left: 101px; color: rgb(0, 82, 217);"
+                  style="left: 60%; color: rgb(0, 82, 217);"
                   tabindex="0"
                 />
               </div>
@@ -54517,7 +54517,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/enable-alpha.jsx
                 <span
                   class="t-color-picker__thumb"
                   role="slider"
-                  style="left: 134px; color: rgb(0, 82, 217);"
+                  style="left: 80%; color: rgb(0, 82, 217);"
                   tabindex="0"
                 />
               </div>
@@ -55337,7 +55337,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/panel.jsx 1`] =
                   <span
                     class="t-color-picker__thumb"
                     role="slider"
-                    style="left: 101px; color: rgb(0, 82, 217);"
+                    style="left: 60%; color: rgb(0, 82, 217);"
                     tabindex="0"
                   />
                 </div>
@@ -56071,7 +56071,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/panel.jsx 1`] =
                 <span
                   class="t-color-picker__thumb"
                   role="slider"
-                  style="left: 101px; color: rgb(0, 82, 217);"
+                  style="left: 60%; color: rgb(0, 82, 217);"
                   tabindex="0"
                 />
               </div>
@@ -56879,7 +56879,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/recent-color.jsx
                         <span
                           class="t-color-picker__thumb"
                           role="slider"
-                          style="left: 101px; color: rgb(0, 82, 217);"
+                          style="left: 60%; color: rgb(0, 82, 217);"
                           tabindex="0"
                         />
                       </div>
@@ -57786,7 +57786,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/recent-color.jsx
                         <span
                           class="t-color-picker__thumb"
                           role="slider"
-                          style="left: 101px; color: rgb(0, 82, 217);"
+                          style="left: 60%; color: rgb(0, 82, 217);"
                           tabindex="0"
                         />
                       </div>
@@ -58555,7 +58555,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/recent-color.jsx
                       <span
                         class="t-color-picker__thumb"
                         role="slider"
-                        style="left: 101px; color: rgb(0, 82, 217);"
+                        style="left: 60%; color: rgb(0, 82, 217);"
                         tabindex="0"
                       />
                     </div>
@@ -59462,7 +59462,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/recent-color.jsx
                       <span
                         class="t-color-picker__thumb"
                         role="slider"
-                        style="left: 101px; color: rgb(0, 82, 217);"
+                        style="left: 60%; color: rgb(0, 82, 217);"
                         tabindex="0"
                       />
                     </div>
@@ -60428,7 +60428,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/status-readonly.
                   <span
                     class="t-color-picker__thumb"
                     role="slider"
-                    style="left: 101px; color: rgb(0, 82, 217);"
+                    style="left: 60%; color: rgb(0, 82, 217);"
                     tabindex="0"
                   />
                 </div>
@@ -61219,7 +61219,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/status-readonly.
                 <span
                   class="t-color-picker__thumb"
                   role="slider"
-                  style="left: 101px; color: rgb(0, 82, 217);"
+                  style="left: 60%; color: rgb(0, 82, 217);"
                   tabindex="0"
                 />
               </div>
@@ -62084,7 +62084,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/swatch-color.jsx
                         <span
                           class="t-color-picker__thumb"
                           role="slider"
-                          style="left: 101px; color: rgb(0, 82, 217);"
+                          style="left: 60%; color: rgb(0, 82, 217);"
                           tabindex="0"
                         />
                       </div>
@@ -62460,7 +62460,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/swatch-color.jsx
                         <span
                           class="t-color-picker__thumb"
                           role="slider"
-                          style="left: 101px; color: rgb(0, 82, 217);"
+                          style="left: 60%; color: rgb(0, 82, 217);"
                           tabindex="0"
                         />
                       </div>
@@ -62769,7 +62769,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/swatch-color.jsx
                       <span
                         class="t-color-picker__thumb"
                         role="slider"
-                        style="left: 101px; color: rgb(0, 82, 217);"
+                        style="left: 60%; color: rgb(0, 82, 217);"
                         tabindex="0"
                       />
                     </div>
@@ -63145,7 +63145,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/swatch-color.jsx
                       <span
                         class="t-color-picker__thumb"
                         role="slider"
-                        style="left: 101px; color: rgb(0, 82, 217);"
+                        style="left: 60%; color: rgb(0, 82, 217);"
                         tabindex="0"
                       />
                     </div>

From 40f5c3009f9ed2608e0f296a2ff17885b915fece Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Wed, 8 May 2024 11:50:22 +0800
Subject: [PATCH 05/20] feat(taginput): add collapsedItems onClose (#2881)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(taginput): add collapsedItems onClose

* fix(select): fix typo

* fix(select): fix typo

* fix(select): remove defaultProps optionsLayout

* fix(select): fix typo

* fix(select): fix test example

* Update src/select-input/defaultProps.ts

Co-authored-by: Haixing <65376724+HaixingOoO@users.noreply.github.com>

---------

Co-authored-by: wū yāng <uyarnchen@gmail.com>
---
 src/cascader/_example/collapsed.jsx           |   67 +-
 src/cascader/cascader.en-US.md                |   24 +-
 src/cascader/cascader.md                      |   12 +-
 src/cascader/defaultProps.ts                  |    1 +
 src/cascader/type.ts                          |   35 +-
 src/select-input/_example/collapsed-items.jsx |   59 +-
 src/select-input/defaultProps.ts              |    1 +
 src/select-input/select-input.en-US.md        |   20 +-
 src/select-input/select-input.md              |   16 +-
 src/select-input/type.ts                      |   25 +-
 src/select/_example/collapsed.jsx             |   58 +-
 src/select/base/Select.tsx                    |   16 +-
 src/select/select.en-US.md                    |   42 +-
 src/select/select.md                          |   34 +-
 src/select/type.ts                            |   30 +-
 src/tag-input/TagInput.tsx                    |    2 +-
 src/tag-input/__tests__/tag-input.test.tsx    |    9 +
 src/tag-input/_example/collapsed.jsx          |   63 +-
 src/tag-input/tag-input.en-US.md              |   26 +-
 src/tag-input/tag-input.md                    |   18 +-
 src/tag-input/type.ts                         |   26 +-
 src/tag-input/useTagList.tsx                  |   12 +-
 src/tree-select/TreeSelect.tsx                |   18 +-
 .../__tests__/vitest-tree-select.test.jsx     |    8 +-
 src/tree-select/_example/collapsed.jsx        |   63 +-
 src/tree-select/tree-select.en-US.md          |   13 +-
 src/tree-select/tree-select.md                |   11 +-
 src/tree-select/type.ts                       |   18 +-
 test/snap/__snapshots__/csr.test.jsx.snap     | 1860 +++++++++++++++--
 test/snap/__snapshots__/ssr.test.jsx.snap     |   10 +-
 30 files changed, 2203 insertions(+), 394 deletions(-)

diff --git a/src/cascader/_example/collapsed.jsx b/src/cascader/_example/collapsed.jsx
index 76deb2a0df..8f294ce271 100644
--- a/src/cascader/_example/collapsed.jsx
+++ b/src/cascader/_example/collapsed.jsx
@@ -1,8 +1,13 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Checkbox, Tag, Space, RadioGroup, Popup } from 'tdesign-react';
 
 export default function Example() {
   const [value, setValue] = useState(['1.1', '1.2', '1.3']);
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
   const options = [
     {
       label: '选项一',
@@ -42,26 +47,62 @@ export default function Example() {
     setValue(value);
   };
 
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
+    <Popup
+      key={'tags'}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
+    >
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
+    </Popup>
+  );
+
   return (
     <Space direction="vertical">
+      <h3>default:</h3>
       <Cascader options={options} value={value} onChange={onChange} multiple minCollapsedNum={1} />
+
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
       <Cascader
         options={options}
         value={value}
         onChange={onChange}
         multiple
-        minCollapsedNum={1}
-        collapsedItems={({ count }) =>
-          count > 0 && (
-            <span
-              style={{
-                color: '#00a870',
-              }}
-            >
-              +{count - 1}
-            </span>
-          )
-        }
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
       />
     </Space>
   );
diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
index 8b3fe8b378..32e469d44f 100644
--- a/src/cascader/cascader.en-US.md
+++ b/src/cascader/cascader.en-US.md
@@ -1,23 +1,25 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
-keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
+keys | Object | - | Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 lazy | Boolean | true | \- | N
 load | Function | - | Typescript：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
@@ -31,23 +33,25 @@ options | Array | [] | Typescript：`Array<CascaderOption>` | N
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 popupVisible | Boolean | - | \- | N
+defaultPopupVisible | Boolean | - | uncontrolled property | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | \- | N
 reserveKeyword | Boolean | false | \- | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 showAllLevels | Boolean | true | \- | N
-size | String | medium | options：large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 tips | TNode | - | tips at the bottom of cascader。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-trigger | String | click | options：click/hover | N
+trigger | String | click | options: click/hover | N
 value | String / Number / Array | [] | Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
-valueDisplay | TNode | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N
-valueType | String | single | options：single/full | N
+valueDisplay | TNode | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: CascaderOption[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N
+valueType | String | single | options: single/full | N
 onBlur | Function |  | Typescript：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'`<br/> | N
 onFocus | Function |  | Typescript：`(context: { value: CascaderValue<CascaderOption>; e: FocusEvent }) => void`<br/> | N
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index e9d7cb5b2c..5d5f31f905 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -1,23 +1,25 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autofocus | Boolean | - | 自动聚焦 | N
+borderless | Boolean | false | 无边框模式 | N
 checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 clearable | Boolean | false | 是否支持清空选项 | N
-collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | TNode | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | 是否可搜索 | N
 inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
-keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
+keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 lazy | Boolean | true | 延迟加载 children 为 true 的子节点，即使 expandAll 被设置为 true，也同样延迟加载 | N
 load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
@@ -31,6 +33,8 @@ options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>`
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 popupVisible | Boolean | - | 是否显示下拉框 | N
+defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
+prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
 selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
@@ -45,7 +49,7 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈
 trigger | String | click | 展开下一层级的方式。可选项：click/hover | N
 value | String / Number / Array | [] | 选中项的值。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
-valueDisplay | TNode | - | 【开发中】自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点。可选项：onlyLeaf/parentFirst/all | N
 valueType | String | single | 用于控制选中值的类型。single 表示输入输出值为 叶子结点值， full 表示输入输出值为全路径。可选项：single/full | N
 onBlur | Function |  | TS 类型：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/>当输入框失去焦点时触发 | N
diff --git a/src/cascader/defaultProps.ts b/src/cascader/defaultProps.ts
index 03a78cc259..748b6f8a1d 100644
--- a/src/cascader/defaultProps.ts
+++ b/src/cascader/defaultProps.ts
@@ -5,6 +5,7 @@
 import { TdCascaderProps } from './type';
 
 export const cascaderDefaultProps: TdCascaderProps = {
+  borderless: false,
   checkStrictly: false,
   clearable: false,
   filterable: false,
diff --git a/src/cascader/type.ts b/src/cascader/type.ts
index 406a14369f..93259cdc61 100644
--- a/src/cascader/type.ts
+++ b/src/cascader/type.ts
@@ -12,14 +12,19 @@ import { TagInputProps } from '../tag-input';
 import { TagProps } from '../tag';
 import { TreeNodeModel } from '../tree';
 import { PopupVisibleChangeContext } from '../popup';
-import { TNode, TElement, TreeOptionData, SizeEnum } from '../common';
-import { FocusEvent } from 'react';
+import { TNode, TElement, TreeOptionData, SizeEnum, TreeKeysType } from '../common';
+import { MouseEvent, FocusEvent } from 'react';
 
 export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
   /**
    * 自动聚焦
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 参考 checkbox 组件 API
    */
@@ -35,9 +40,14 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: CascaderOption[];
+    collapsedSelectedItems: CascaderOption[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用组件
    */
@@ -60,9 +70,9 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   inputProps?: InputProps;
   /**
-   * 用来定义 value / label / children 在 `options` 中对应的字段别名
+   * 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
    */
-  keys?: CascaderKeysType;
+  keys?: TreeKeysType;
   /**
    * 左侧文本
    */
@@ -121,6 +131,10 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    * 是否显示下拉框
    */
   popupVisible?: boolean;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
   /**
    * 只读状态，值为真会隐藏输入框，且无法打开下拉框
    * @default false
@@ -186,7 +200,7 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   defaultValue?: CascaderValue<CascaderOption>;
   /**
-   * 【开发中】自定义选中项呈现的内容
+   * 自定义选中项呈现的内容
    */
   valueDisplay?:
     | string
@@ -194,6 +208,7 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
         value: CascaderValue<CascaderOption>;
         onClose: (index: number) => void;
         displayValue?: CascaderValue<CascaderOption>;
+        selectedOptions: CascaderOption[];
       }>;
   /**
    * 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点
@@ -227,12 +242,6 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   onRemove?: (context: RemoveContext<CascaderOption>) => void;
 }
 
-export interface CascaderKeysType {
-  value?: string;
-  label?: string;
-  children?: string | boolean;
-}
-
 export type CascaderValue<T extends TreeOptionData = TreeOptionData> = string | number | T | Array<CascaderValue<T>>;
 
 export interface CascaderChangeContext<CascaderOption> {
diff --git a/src/select-input/_example/collapsed-items.jsx b/src/select-input/_example/collapsed-items.jsx
index 846eb108a2..5af1b29833 100644
--- a/src/select-input/_example/collapsed-items.jsx
+++ b/src/select-input/_example/collapsed-items.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { SelectInput, Checkbox, Tag, Space } from 'tdesign-react';
+import { SelectInput, Checkbox, Tag, Space, RadioGroup, Popup } from 'tdesign-react';
 import { ChevronDownIcon } from 'tdesign-icons-react';
 
 const classStyles = `
@@ -46,6 +46,10 @@ const OPTIONS = [
 export default function SelectInputCollapsedItems() {
   const [options, setOptions] = useState([...OPTIONS]);
   const [value, setValue] = useState(OPTIONS.slice(1));
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
 
   const getCheckboxValue = () => {
     const arr = [];
@@ -111,9 +115,38 @@ export default function SelectInputCollapsedItems() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
+    <Popup
+      key={'tags'}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
+    >
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
+    </Popup>
+  );
+
   return (
     <Space direction="vertical" className="tdesign-demo__select-input-collapsed-items">
       {/* <!-- :popup-props="{ trigger: 'hover' }" --> */}
+      <h3>default:</h3>
       <SelectInput
         value={value}
         minCollapsedNum={1}
@@ -123,18 +156,34 @@ export default function SelectInputCollapsedItems() {
         multiple
         onTagChange={onTagChange}
       />
-      <br /> <br />
+
       {/* 使用 collapsedItems 自定义折叠标签 */}
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
       <SelectInput
         value={value}
-        minCollapsedNum={2}
         panel={CheckboxPanel}
         suffixIcon={<ChevronDownIcon key="suffixIcon" />}
-        collapsedItems={({ collapsedTags }) => <Tag key={'More'}>More(+{collapsedTags.length})</Tag>}
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
         clearable
         multiple
         onTagChange={onTagChange}
       />
     </Space>
   );
-}
\ No newline at end of file
+}
diff --git a/src/select-input/defaultProps.ts b/src/select-input/defaultProps.ts
index 3c003dc979..c735a601c8 100644
--- a/src/select-input/defaultProps.ts
+++ b/src/select-input/defaultProps.ts
@@ -14,5 +14,6 @@ export const selectInputDefaultProps: TdSelectInputProps = {
   minCollapsedNum: 0,
   multiple: false,
   readonly: false,
+  reserveKeyword: false,
   status: 'default',
 };
diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
index 3bd6d9cf78..4647f11921 100644
--- a/src/select-input/select-input.en-US.md
+++ b/src/select-input/select-input.en-US.md
@@ -1,22 +1,23 @@
 :: BASE_DOC ::
 
 ## API
+
 ### SelectInput Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
 autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
-inputValue | String / Number | - | input value。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
-defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
+inputValue | String / Number | - | input value。Typescript：`string` | N
+defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N
 keys | Object | - | Typescript：`SelectInputKeys` `interface SelectInputKeys { label?: string; value?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
@@ -28,7 +29,8 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
 popupVisible | Boolean | - | \- | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
 readonly | Boolean | false | \- | N
-status | String | default | options：default/success/warning/error | N
+reserveKeyword | Boolean | false | \- | N
+status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tag | TNode | - | Typescript：`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -39,9 +41,9 @@ value | String / Number / Boolean / Object / Array / Date | undefined | Typescri
 valueDisplay | TNode | - | Typescript：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 onBlur | Function |  | Typescript：`(value: SelectInputValue, context: SelectInputBlurContext) => void`<br/>trigger on blur。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }`<br/> | N
 onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onEnter | Function |  | Typescript：`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue }) => void`<br/> | N
-onFocus | Function |  | Typescript：`(value: SelectInputValue, context: SelectInputFocusContext) => void`<br/>trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }`<br/> | N
-onInputChange | Function |  | Typescript：`(value: InputValue, context?: SelectInputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }`<br/> | N
+onEnter | Function |  | Typescript：`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(value: SelectInputValue, context: SelectInputFocusContext) => void`<br/>trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }`<br/> | N
+onInputChange | Function |  | Typescript：`(value: string, context?: SelectInputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }`<br/> | N
 onMouseenter | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseenter | N
 onMouseleave | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseleave | N
 onPaste | Function |  | Typescript：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/> | N
diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
index 398f9fdbd2..97481ff271 100644
--- a/src/select-input/select-input.md
+++ b/src/select-input/select-input.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### SelectInput Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -12,11 +13,11 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量。TS 类型：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用 | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
-inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
-defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
+inputValue | String / Number | - | 输入框的值。TS 类型：`string` | N
+defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N
 keys | Object | - | 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`。TS 类型：`SelectInputKeys` `interface SelectInputKeys { label?: string; value?: string; children?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否处于加载状态 | N
@@ -28,6 +29,7 @@ popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`P
 popupVisible | Boolean | - | 是否显示下拉框 | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
 readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
+reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -39,9 +41,9 @@ value | String / Number / Boolean / Object / Array / Date | undefined | 全部
 valueDisplay | TNode | - | 自定义值呈现的全部内容，参数为所有标签的值。TS 类型：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 onBlur | Function |  | TS 类型：`(value: SelectInputValue, context: SelectInputBlurContext) => void`<br/>失去焦点时触发，`context.inputValue` 表示输入框的值；`context.tagInputValue` 表示标签输入框的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }`<br/> | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N
-onEnter | Function |  | TS 类型：`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue }) => void`<br/>按键按下 Enter 时触发 | N
-onFocus | Function |  | TS 类型：`(value: SelectInputValue, context: SelectInputFocusContext) => void`<br/>聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }`<br/> | N
-onInputChange | Function |  | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }`<br/> | N
+onEnter | Function |  | TS 类型：`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }) => void`<br/>按键按下 Enter 时触发 | N
+onFocus | Function |  | TS 类型：`(value: SelectInputValue, context: SelectInputFocusContext) => void`<br/>聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }`<br/> | N
+onInputChange | Function |  | TS 类型：`(value: string, context?: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts)。<br/>`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }`<br/> | N
 onMouseenter | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>进入输入框时触发 | N
 onMouseleave | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>离开输入框时触发 | N
 onPaste | Function |  | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/>粘贴事件，`pasteValue` 表示粘贴板的内容 | N
diff --git a/src/select-input/type.ts b/src/select-input/type.ts
index 539950dea1..1b85cdc00e 100644
--- a/src/select-input/type.ts
+++ b/src/select-input/type.ts
@@ -5,7 +5,6 @@
  * */
 
 import { InputProps } from '../input';
-import { InputValue } from '../input';
 import { PopupProps } from '../popup';
 import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input';
 import { TagProps } from '../tag';
@@ -40,9 +39,14 @@ export interface TdSelectInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>;
+  collapsedItems?: TNode<{
+    value: SelectInputValue;
+    collapsedSelectedItems: SelectInputValue;
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用
    */
@@ -54,11 +58,11 @@ export interface TdSelectInputProps {
   /**
    * 输入框的值
    */
-  inputValue?: InputValue;
+  inputValue?: string;
   /**
    * 输入框的值，非受控属性
    */
-  defaultInputValue?: InputValue;
+  defaultInputValue?: string;
   /**
    * 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`
    */
@@ -108,6 +112,11 @@ export interface TdSelectInputProps {
    * @default false
    */
   readonly?: boolean;
+  /**
+   * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+   * @default false
+   */
+  reserveKeyword?: boolean;
   /**
    * 输入框状态
    * @default default
@@ -158,7 +167,7 @@ export interface TdSelectInputProps {
    */
   onEnter?: (
     value: SelectInputValue,
-    context: { e: KeyboardEvent<HTMLDivElement>; inputValue: InputValue; tagInputValue?: TagInputValue },
+    context: { e: KeyboardEvent<HTMLDivElement>; inputValue: string; tagInputValue?: TagInputValue },
   ) => void;
   /**
    * 聚焦时触发
@@ -167,7 +176,7 @@ export interface TdSelectInputProps {
   /**
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等
    */
-  onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void;
+  onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void;
   /**
    * 进入输入框时触发
    */
@@ -201,7 +210,7 @@ export type SelectInputValue = string | number | boolean | Date | Object | Array
 export type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue };
 
 export interface SelectInputFocusContext {
-  inputValue: InputValue;
+  inputValue: string;
   tagInputValue?: TagInputValue;
   e: FocusEvent<HTMLInputElement>;
 }
diff --git a/src/select/_example/collapsed.jsx b/src/select/_example/collapsed.jsx
index d24c7e98ae..59644c8436 100644
--- a/src/select/_example/collapsed.jsx
+++ b/src/select/_example/collapsed.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Select, Space } from 'tdesign-react';
+import { Select, Space, RadioGroup, Checkbox, Popup, Tag } from 'tdesign-react';
 
 const options = [
   { label: '选项一', value: '1' },
@@ -10,11 +10,46 @@ const options = [
 
 const MultipleSelect = () => {
   const [value, setValue] = useState(['1', '3']);
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
   const onChange = (value) => {
     setValue(value);
   };
+
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
+    <Popup
+      key={'tags'}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
+    >
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
+    </Popup>
+  );
+
   return (
     <Space breakLine style={{ width: '100%' }}>
+      <h3>default:</h3>
       <Select
         value={value}
         onChange={onChange}
@@ -23,14 +58,31 @@ const MultipleSelect = () => {
         options={options}
         minCollapsedNum={1}
       />
+
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
       <Select
         value={value}
         onChange={onChange}
         multiple
         style={{ width: '40%' }}
         options={options}
-        minCollapsedNum={1}
-        collapsedItems={({ count }) => (count > 0 ? <span style={{ color: '#ED7B2F' }}>+{count}</span> : null)}
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
       />
     </Space>
   );
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
index 2dad56f6bf..d251050c34 100644
--- a/src/select/base/Select.tsx
+++ b/src/select/base/Select.tsx
@@ -354,7 +354,7 @@ const Select = forwardRefWithStatics(
                   onRemove?.({
                     value: value[key],
                     data: { label: v, value: value[key] },
-                    e,
+                    e: e as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>,
                   });
                 }}
               >
@@ -372,18 +372,6 @@ const Select = forwardRefWithStatics(
       return parseContentTNode(valueDisplay, { value: selectedLabel, onClose: noop });
     };
 
-    const renderCollapsedItems = useMemo(
-      () =>
-        collapsedItems
-          ? parseContentTNode(collapsedItems, {
-              value: selectedLabel,
-              collapsedSelectedItems: selectedLabel.slice(minCollapsedNum, selectedLabel.length),
-              count: selectedLabel.length - minCollapsedNum,
-            })
-          : null,
-      [selectedLabel, collapsedItems, minCollapsedNum],
-    );
-
     // 将第一个选中的 option 置于列表可见范围的最后一位
     const updateScrollTop = (content: HTMLDivElement) => {
       if (!content || isScrolling) {
@@ -462,7 +450,7 @@ const Select = forwardRefWithStatics(
             ...inputProps,
           }}
           minCollapsedNum={minCollapsedNum}
-          collapsedItems={renderCollapsedItems}
+          collapsedItems={collapsedItems}
           updateScrollTop={updateScrollTop}
           popupProps={{
             overlayClassName: [`${name}__dropdown`, overlayClassName],
diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md
index 09952ca1d6..ad723533ea 100644
--- a/src/select/select.en-US.md
+++ b/src/select/select.en-US.md
@@ -1,26 +1,27 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Select Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 creatable | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-inputValue | String / Number | - | input value。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-keys | Object | - | Typescript：`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+inputValue | String / Number | - | input value。Typescript：`string` | N
+defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N
+keys | Object | - | alias option field。Typescript：`SelectKeysType` `interface SelectKeysType { value?: string \| ((option: SelectOption) => string); label?: string \| ((option: SelectOption) => string); disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
 loadingText | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -28,6 +29,7 @@ max | Number | 0 | \- | N
 minCollapsedNum | Number | 0 | \- | N
 multiple | Boolean | false | \- | N
 options | Array | - | Typescript：`Array<T>` | N
+optionsLayout | String | vertical | layout of options in popup。Typescript：`vertical \| horizontal` | N
 panelBottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 placeholder | String | undefined | \- | N
@@ -40,34 +42,35 @@ reserveKeyword | Boolean | false | \- | N
 scroll | Object | - | lazy load and virtual scroll。Typescript：`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 showArrow | Boolean | true | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number / Object / Array | - | Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+value | String / Number / Boolean / Object / Array | - | Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+defaultValue | String / Number / Boolean / Object / Array | - | uncontrolled property。Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 valueDisplay | TNode | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-valueType | String | value | options：value/object | N
+valueType | String | value | options: value/object | N
 onBlur | Function |  | Typescript：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`<br/> | N
-onChange | Function |  | Typescript：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`<br/> | N
+onChange | Function |  | Typescript：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`<br/> | N
 onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onCreate | Function |  | Typescript：`(value: string \| number) => void`<br/> | N
 onEnter | Function |  | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`<br/> | N
 onFocus | Function |  | Typescript：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`<br/> | N
-onInputChange | Function |  | Typescript：`(value: InputValue, context?: SelectInputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { SelectInputValueChangeContext } from '@SelectInput'`<br/> | N
+onInputChange | Function |  | Typescript：`(value: string, context?: SelectInputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { SelectInputValueChangeContext } from '@SelectInput'`<br/> | N
 onPopupVisibleChange | Function |  | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/> | N
 onRemove | Function |  | Typescript：`(options: SelectRemoveContext<T>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`interface SelectRemoveContext<T> { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onSearch | Function |  | Typescript：`(filterWords: string, context: { e: KeyboardEvent }) => void`<br/> | N
 
+
 ### Option Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 checkAll | Boolean | false | check all option, which can be both top of the panel and bottom of the panel | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -76,16 +79,17 @@ label | String | - | \- | N
 title | String | - | \- | N
 value | String / Number | - | \- | N
 
+
 ### OptionGroup Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 divider | Boolean | true | \- | N
 label | String | - | \- | N
 
-### InfinityScroll
+### TScroll
 
 name | type | default | description | required
 -- | -- | -- | -- | --
@@ -93,4 +97,4 @@ bufferSize | Number | 20 | \- | N
 isFixedRowHeight | Boolean | false | \- | N
 rowHeight | Number | - | \- | N
 threshold | Number | 100 | \- | N
-type | String | - | required。options：lazy/virtual | Y
\ No newline at end of file
+type | String | - | required。options: lazy/virtual | Y
diff --git a/src/select/select.md b/src/select/select.md
index c066d31b18..a88a1ea5ac 100644
--- a/src/select/select.md
+++ b/src/select/select.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Select Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -11,16 +12,16 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可以清空选项 | N
-collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | TNode | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise<boolean>` | N
 filterable | Boolean | false | 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则 | N
 inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+inputValue | String / Number | - | 输入框的值。TS 类型：`string` | N
+defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`SelectKeysType` `interface SelectKeysType { value?: string \| ((option: SelectOption) => string); label?: string \| ((option: SelectOption) => string); disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否为加载状态 | N
 loadingText | TNode | - | 远程加载时显示的文字，支持自定义。如加上超链接。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -28,6 +29,7 @@ max | Number | 0 | 用于控制多选数量，值为 0 则不限制 | N
 minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N
 multiple | Boolean | false | 是否允许多选 | N
 options | Array | - | 数据化配置选项内容。TS 类型：`Array<T>` | N
+optionsLayout | String | vertical | 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列。TS 类型：`vertical \| horizontal` | N
 panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 placeholder | String | undefined | 占位符 | N
@@ -47,24 +49,25 @@ suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用
 tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number / Object / Array | - | 选中值。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| T \| Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| T \| Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+value | String / Number / Boolean / Object / Array | - | 选中值。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+defaultValue | String / Number / Boolean / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。可选项：value/object | N
+valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。。可选项：value/object | N
 onBlur | Function |  | TS 类型：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`<br/>输入框失去焦点时触发 | N
-onChange | Function |  | TS 类型：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>选中值变化时触发。`context.trigger` 表示触发变化的来源；`context.selectedOptions` 表示选中值的完整对象，数组长度一定和 `value` 相同；`context.option` 表示当前操作的选项，不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`<br/> | N
+onChange | Function |  | TS 类型：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>选中值变化时触发。`context.trigger` 表示触发变化的来源；`context.selectedOptions` 表示选中值的完整对象，数组长度一定和 `value` 相同；`context.option` 表示当前操作的选项，不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`<br/> | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击清除按钮时触发 | N
 onCreate | Function |  | TS 类型：`(value: string \| number) => void`<br/>当选择新创建的条目时触发 | N
 onEnter | Function |  | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`<br/>回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值 | N
 onFocus | Function |  | TS 类型：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`<br/>输入框获得焦点时触发 | N
-onInputChange | Function |  | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { SelectInputValueChangeContext } from '@SelectInput'`<br/> | N
+onInputChange | Function |  | TS 类型：`(value: string, context?: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { SelectInputValueChangeContext } from '@SelectInput'`<br/> | N
 onPopupVisibleChange | Function |  | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`<br/>下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/> | N
 onRemove | Function |  | TS 类型：`(options: SelectRemoveContext<T>) => void`<br/>多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`interface SelectRemoveContext<T> { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`<br/> | N
 onSearch | Function |  | TS 类型：`(filterWords: string, context: { e: KeyboardEvent }) => void`<br/>输入值变化时，触发搜索事件。主要用于远程搜索新数据 | N
 
+
 ### Option Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -76,21 +79,22 @@ label | String | - | 选项名称 | N
 title | String | - | 选项标题，在选项过长时hover选项展示 | N
 value | String / Number | - | 选项值 | N
 
+
 ### OptionGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 divider | Boolean | true | 是否显示分隔线 | N
 label | String | - | 分组别名 | N
 
-### InfinityScroll
+### TScroll
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 bufferSize | Number | 20 | 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N
 isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N
 rowHeight | Number | - | 行高，不会给`<tr>`元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑 | N
 threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 | N
-type | String | - | 必需。滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y
\ No newline at end of file
+type | String | - | 必需。滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y
diff --git a/src/select/type.ts b/src/select/type.ts
index 777027a271..37e885def6 100644
--- a/src/select/type.ts
+++ b/src/select/type.ts
@@ -5,7 +5,6 @@
  * */
 
 import { InputProps } from '../input';
-import { InputValue } from '../input';
 import { PopupProps } from '../popup';
 import { SelectInputProps } from '../select-input';
 import { TagInputProps } from '../tag-input';
@@ -37,9 +36,14 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签
    */
-  collapsedItems?: TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: T[];
+    collapsedSelectedItems: T[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否允许用户创建新条目，需配合 filterable 使用
    * @default false
@@ -68,13 +72,13 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
   /**
    * 输入框的值
    */
-  inputValue?: InputValue;
+  inputValue?: string;
   /**
    * 输入框的值，非受控属性
    */
-  defaultInputValue?: InputValue;
+  defaultInputValue?: string;
   /**
-   * 用来定义 value / label 在 `options` 中对应的字段别名
+   * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
    */
   keys?: SelectKeysType;
   /**
@@ -109,6 +113,11 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    * 数据化配置选项内容
    */
   options?: Array<T>;
+  /**
+   * 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列
+   * @default vertical
+   */
+  optionsLayout?: 'vertical' | 'horizontal';
   /**
    * 面板内的底部内容
    */
@@ -242,7 +251,7 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
   /**
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等
    */
-  onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void;
+  onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void;
   /**
    * 下拉框显示或隐藏时触发
    */
@@ -308,16 +317,17 @@ export interface TdOptionGroupProps {
 export interface SelectKeysType {
   value?: string;
   label?: string;
+  disabled?: string;
 }
 
-export type SelectValue<T extends SelectOption = SelectOption> = string | number | T | Array<SelectValue<T>>;
+export type SelectValue<T extends SelectOption = SelectOption> = string | number | boolean | T | Array<SelectValue<T>>;
 
-export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck';
+export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck' | 'default';
 
 export interface SelectRemoveContext<T> {
   value: string | number;
   data: T;
-  e: MouseEvent<SVGSVGElement> | KeyboardEvent<HTMLDivElement>;
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
 }
 
 export type SelectOption = TdOptionProps | SelectOptionGroup | PlainObject;
diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx
index 24b1de9fa3..bc687ac205 100644
--- a/src/tag-input/TagInput.tsx
+++ b/src/tag-input/TagInput.tsx
@@ -116,7 +116,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
   const displayNode = isFunction(valueDisplay)
     ? valueDisplay({
         value: tagValue,
-        onClose: (index, item) => onClose({ index, item }),
+        onClose: (index) => onClose({ index }),
       })
     : valueDisplay;
 
diff --git a/src/tag-input/__tests__/tag-input.test.tsx b/src/tag-input/__tests__/tag-input.test.tsx
index 8d666c1fb4..cc28792cf6 100644
--- a/src/tag-input/__tests__/tag-input.test.tsx
+++ b/src/tag-input/__tests__/tag-input.test.tsx
@@ -1,6 +1,9 @@
+import React from 'react';
 import { fireEvent, vi } from '@test/utils';
+import { render } from '@testing-library/react';
 import { TagInput } from '..';
 import { getTagInputValueMount } from './mount';
+import Collapsed from '../_example/collapsed';
 
 describe('TagInput Component', () => {
   const mockFn = vi.spyOn(HTMLSpanElement.prototype, 'getBoundingClientRect');
@@ -38,4 +41,10 @@ describe('TagInput Component', () => {
     // expect(onDragSort.mock.calls[0][0].target).toEqual('Vue');
     // expect(container.querySelectorAll('.t-tag').item(0).firstChild.title).toEqual('React');
   });
+
+  it('collapsedItems props', () => {
+    const { getByText } = render(<Collapsed />);
+
+    expect(getByText('More(4)')).toBeInTheDocument();
+  });
 });
diff --git a/src/tag-input/_example/collapsed.jsx b/src/tag-input/_example/collapsed.jsx
index 3eba8ac62d..dc64437416 100644
--- a/src/tag-input/_example/collapsed.jsx
+++ b/src/tag-input/_example/collapsed.jsx
@@ -1,24 +1,69 @@
 import React, { useState } from 'react';
-import { TagInput, Popup, Tag, Space } from 'tdesign-react';
+import { TagInput, Popup, Tag, Space, RadioGroup, Checkbox } from 'tdesign-react';
 
 export default function TagInputCollapsedExample() {
   const [tags, setTags] = useState(['Vue', 'React', 'Miniprogram', 'Angular', 'Flutter']);
-  const renderCollapsedItems = ({ collapsedTags }) => (
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
     <Popup
       key={'tags'}
-      content={collapsedTags.map((item) => (
-        <Tag key={item} style={{ marginRight: '4px' }}>
-          {item}
-        </Tag>
-      ))}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
     >
-      <Tag>More({collapsedTags?.length})</Tag>
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
     </Popup>
   );
   return (
     <Space direction="vertical" style={{ width: '80%' }}>
+      <h3>default:</h3>
       <TagInput value={tags} onChange={setTags} minCollapsedNum={1} />
-      <TagInput value={tags} onChange={setTags} minCollapsedNum={3} collapsedItems={renderCollapsedItems}></TagInput>
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
+      <TagInput
+        value={tags}
+        onChange={(val) => {
+          console.log('val', val);
+          setTags(val);
+        }}
+        minCollapsedNum={minCollapsedNum}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
+        collapsedItems={renderCollapsedItems}
+      ></TagInput>
     </Space>
   );
 }
diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
index 30e4601081..7d988a7db3 100644
--- a/src/tag-input/tag-input.en-US.md
+++ b/src/tag-input/tag-input.en-US.md
@@ -1,28 +1,30 @@
 :: BASE_DOC ::
 
 ## API
+
 ### TagInput Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 dragSort | Boolean | false | \- | N
-excessTagsDisplayType | String | break-line | options：scroll/break-line | N
+excessTagsDisplayType | String | break-line | options: scroll/break-line | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
-inputValue | String / Number | '' | input value。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
-defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
+inputValue | String / Number | '' | input value。Typescript：`string` | N
+defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript：`string` | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 max | Number | - | max tag number | N
 minCollapsedNum | Number | 0 | \- | N
 placeholder | String | undefined | placeholder description | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | \- | N
-size | String | medium | options：small/medium/large | N
-status | String | - | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large | N
+status | String | - | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 tag | TNode | - | Typescript：`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -31,14 +33,14 @@ tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](htt
 value | Array | [] | value。Typescript：`TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
 defaultValue | Array | [] | value。uncontrolled property。Typescript：`TagInputValue` `type TagInputValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
 valueDisplay | TNode | - | Typescript：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onBlur | Function |  | Typescript：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`<br/>trigger on blur | N
+onBlur | Function |  | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on blur | N
 onChange | Function |  | Typescript：`(value: TagInputValue, context: TagInputChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`<br/><br/>`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`<br/> | N
 onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onDragSort | Function |  | Typescript：`(context: TagInputDragSortContext) => void`<br/>trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`<br/> | N
-onEnter | Function |  | Typescript：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void`<br/> | N
-onFocus | Function |  | Typescript：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`<br/>trigger on focus | N
-onInputChange | Function |  | Typescript：`(value: InputValue, context?: InputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur'   }`<br/> | N
+onEnter | Function |  | Typescript：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>trigger on focus | N
+onInputChange | Function |  | Typescript：`(value: string, context?: InputValueChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur'   }`<br/> | N
 onMouseenter | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseenter | N
 onMouseleave | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on mouseleave | N
 onPaste | Function |  | Typescript：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/> | N
diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
index 2563e4fd7e..9fea6cba8e 100644
--- a/src/tag-input/tag-input.md
+++ b/src/tag-input/tag-input.md
@@ -1,25 +1,27 @@
 :: BASE_DOC ::
 
 ## API
+
 ### TagInput Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用标签输入框 | N
 dragSort | Boolean | false | 拖拽调整标签顺序 | N
 excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
-inputValue | String / Number | '' | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
-defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
+inputValue | String / Number | '' | 输入框的值。TS 类型：`string` | N
+defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型：`string` | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 max | Number | - | 最大允许输入的标签数量 | N
 minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N
 placeholder | String | undefined | 占位符 | N
+prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N
 size | String | medium | 尺寸。可选项：small/medium/large | N
 status | String | - | 输入框状态。可选项：default/success/warning/error | N
@@ -31,14 +33,14 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈
 value | Array | [] | 值。TS 类型：`TagInputValue` `type TagInputValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
 defaultValue | Array | [] | 值。非受控属性。TS 类型：`TagInputValue` `type TagInputValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts) | N
 valueDisplay | TNode | - | 自定义值呈现的全部内容，参数为所有标签的值。TS 类型：`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onBlur | Function |  | TS 类型：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`<br/>失去焦点时触发 | N
+onBlur | Function |  | TS 类型：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>失去焦点时触发 | N
 onChange | Function |  | TS 类型：`(value: TagInputValue, context: TagInputChangeContext) => void`<br/>值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }`<br/><br/>`type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'`<br/> | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击组件时触发 | N
 onDragSort | Function |  | TS 类型：`(context: TagInputDragSortContext) => void`<br/>【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }`<br/> | N
-onEnter | Function |  | TS 类型：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void`<br/>按键按下 Enter 时触发 | N
-onFocus | Function |  | TS 类型：`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`<br/>聚焦时触发 | N
-onInputChange | Function |  | TS 类型：`(value: InputValue, context?: InputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur'   }`<br/> | N
+onEnter | Function |  | TS 类型：`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`<br/>按键按下 Enter 时触发 | N
+onFocus | Function |  | TS 类型：`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`<br/>聚焦时触发 | N
+onInputChange | Function |  | TS 类型：`(value: string, context?: InputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag-input/type.ts)。<br/>`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur'   }`<br/> | N
 onMouseenter | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>进入输入框时触发 | N
 onMouseleave | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>离开输入框时触发 | N
 onPaste | Function |  | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/>粘贴事件，`pasteValue` 表示粘贴板的内容 | N
diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
index 2eb02a5c04..17d9512821 100644
--- a/src/tag-input/type.ts
+++ b/src/tag-input/type.ts
@@ -5,7 +5,6 @@
  * */
 
 import { InputProps } from '../input';
-import { InputValue } from '../input';
 import { TagProps } from '../tag';
 import { TNode, TElement } from '../common';
 import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
@@ -22,9 +21,14 @@ export interface TdTagInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>;
+  collapsedItems?: TNode<{
+    value: TagInputValue;
+    collapsedSelectedItems: TagInputValue;
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用标签输入框
    */
@@ -47,12 +51,12 @@ export interface TdTagInputProps {
    * 输入框的值
    * @default ''
    */
-  inputValue?: InputValue;
+  inputValue?: string;
   /**
    * 输入框的值，非受控属性
    * @default ''
    */
-  defaultInputValue?: InputValue;
+  defaultInputValue?: string;
   /**
    * 左侧文本
    */
@@ -70,6 +74,10 @@ export interface TdTagInputProps {
    * 占位符
    */
   placeholder?: string;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
   /**
    * 只读状态，值为真会隐藏标签移除按钮和输入框
    * @default false
@@ -121,7 +129,7 @@ export interface TdTagInputProps {
   /**
    * 失去焦点时触发
    */
-  onBlur?: (value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent<HTMLInputElement> }) => void;
+  onBlur?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent<HTMLInputElement> }) => void;
   /**
    * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
    */
@@ -141,15 +149,15 @@ export interface TdTagInputProps {
   /**
    * 按键按下 Enter 时触发
    */
-  onEnter?: (value: TagInputValue, context: { e: KeyboardEvent<HTMLDivElement>; inputValue: InputValue }) => void;
+  onEnter?: (value: TagInputValue, context: { e: KeyboardEvent<HTMLDivElement>; inputValue: string }) => void;
   /**
    * 聚焦时触发
    */
-  onFocus?: (value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent<HTMLInputElement> }) => void;
+  onFocus?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent<HTMLInputElement> }) => void;
   /**
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等
    */
-  onInputChange?: (value: InputValue, context?: InputValueChangeContext) => void;
+  onInputChange?: (value: string, context?: InputValueChangeContext) => void;
   /**
    * 进入输入框时触发
    */
diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
index 9d3ec97125..37a1d2c0b2 100644
--- a/src/tag-input/useTagList.tsx
+++ b/src/tag-input/useTagList.tsx
@@ -22,11 +22,11 @@ export default function useTagList(props: TagInputProps) {
   const [oldInputValue, setOldInputValue] = useState<InputValue>();
 
   // 点击标签关闭按钮，删除标签
-  const onClose = (p: { e?: MouseEvent<SVGSVGElement>; index: number; item: string | number }) => {
+  const onClose = (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => {
     const arr = [...tagValue];
-    arr.splice(p.index, 1);
-    setTagValue(arr, { trigger: 'tag-remove', ...p });
-    onRemove?.({ ...p, trigger: 'tag-remove', value: arr });
+    const [item] = arr.splice(p.index, 1);
+    setTagValue(arr, { trigger: 'tag-remove', ...p, item });
+    onRemove?.({ ...p, item, trigger: 'tag-remove', value: arr });
   };
 
   const clearAll = (context: { e: MouseEvent<SVGSVGElement> }) => {
@@ -80,7 +80,7 @@ export default function useTagList(props: TagInputProps) {
               key={index}
               size={size}
               disabled={disabled}
-              onClose={(context) => onClose({ e: context.e, item, index })}
+              onClose={(context) => onClose({ e: context.e, index })}
               closable={!readonly && !disabled}
               {...getDragProps?.(index, item)}
               {...tagProps}
@@ -103,6 +103,8 @@ export default function useTagList(props: TagInputProps) {
         value: tagValue,
         count: tagValue.length - minCollapsedNum,
         collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: tagValue.slice(minCollapsedNum, tagValue.length),
+        onClose,
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;
       list.push(
diff --git a/src/tree-select/TreeSelect.tsx b/src/tree-select/TreeSelect.tsx
index 6c806746bb..d87d0c6660 100644
--- a/src/tree-select/TreeSelect.tsx
+++ b/src/tree-select/TreeSelect.tsx
@@ -65,6 +65,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     treeProps,
     inputProps,
     valueType,
+    collapsedItems,
     onBlur,
     onFocus,
     onSearch,
@@ -303,21 +304,6 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     );
   };
 
-  const renderCollapsedItems = useMemo(
-    () =>
-      props.collapsedItems
-        ? () =>
-            isFunction(props.collapsedItems)
-              ? props.collapsedItems({
-                  value: normalizedValue,
-                  collapsedSelectedItems: normalizedValue.slice(props.minCollapsedNum, normalizedValue.length),
-                  count: normalizedValue.length - props.minCollapsedNum,
-                })
-              : props.collapsedItems
-        : null,
-    [normalizedValue, props],
-  );
-
   return (
     <SelectInput
       status={props.status}
@@ -349,7 +335,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
           <SelectArrow isActive={popupVisible} isHighlight={hover || popupVisible} disabled={disabled} />
         ))
       }
-      collapsedItems={renderCollapsedItems}
+      collapsedItems={collapsedItems}
       label={parseTNode(prefixIcon)}
       valueDisplay={internalInputValueDisplay}
     />
diff --git a/src/tree-select/__tests__/vitest-tree-select.test.jsx b/src/tree-select/__tests__/vitest-tree-select.test.jsx
index 333c0808ff..91c009c881 100644
--- a/src/tree-select/__tests__/vitest-tree-select.test.jsx
+++ b/src/tree-select/__tests__/vitest-tree-select.test.jsx
@@ -94,12 +94,8 @@ describe('TreeSelect Component', () => {
     });
     expect(fn).toHaveBeenCalled();
     expect(fn.mock.calls[0][0].count).toBe(1);
-    expect(fn.mock.calls[0][0].value).toEqual([
-      { label: 'tdesign-vue', value: 1 },
-      { label: 'tdesign-miniprogram', value: 3 },
-      { label: 'tdesign-angular', value: '5' },
-    ]);
-    expect(fn.mock.calls[0][0].collapsedSelectedItems).toEqual([{ label: 'tdesign-angular', value: '5' }]);
+    expect(fn.mock.calls[0][0].value).toEqual(['tdesign-vue', 'tdesign-miniprogram', 'tdesign-angular']);
+    expect(fn.mock.calls[0][0].collapsedSelectedItems).toEqual(['tdesign-angular']);
   });
 
   it('props.data: empty data with panel content node', () => {
diff --git a/src/tree-select/_example/collapsed.jsx b/src/tree-select/_example/collapsed.jsx
index 9096ca22ca..5cd0b1b091 100644
--- a/src/tree-select/_example/collapsed.jsx
+++ b/src/tree-select/_example/collapsed.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TreeSelect, Tag, Tooltip, Space } from 'tdesign-react';
+import { TreeSelect, Tag, Space, RadioGroup, Checkbox, Popup } from 'tdesign-react';
 
 const options = [
   {
@@ -35,8 +35,42 @@ const options = [
 export default function Example() {
   const [value, setValue] = useState(['guangzhou', 'shenzhen']);
   const [customizeValue, setCustomizeValue] = useState(['guangzhou', 'shenzhen']);
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadOnly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
+  const renderCollapsedItems = ({ collapsedSelectedItems, onClose }) => (
+    <Popup
+      key={'tags'}
+      overlayInnerStyle={{
+        padding: '5px',
+      }}
+      content={
+        <Space size={5} align="center">
+          {collapsedSelectedItems.map((item, index) => (
+            <Tag
+              key={item}
+              size={size}
+              disabled={disabled}
+              closable={!readonly && !disabled}
+              onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+            >
+              {item}
+            </Tag>
+          ))}
+        </Space>
+      }
+    >
+      <Tag size={size} disabled={disabled}>
+        More({collapsedSelectedItems?.length})
+      </Tag>
+    </Popup>
+  );
+
   return (
-    <Space direction="vertical" style={{ width: 300 }}>
+    <Space direction="vertical" style={{ width: '80%' }}>
+      <h3>default:</h3>
       <TreeSelect
         data={options}
         multiple
@@ -46,17 +80,30 @@ export default function Example() {
         value={value}
         onChange={(val) => setValue(val)}
       />
+
+      <h3>use collapsedItems:</h3>
+      <Space align="center">
+        <div>size control:</div>
+        <RadioGroup value={size} options={['small', 'medium', 'large']} onChange={(value) => setSize(value)} />
+      </Space>
+      <Space align="center">
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={(value) => setDisabled(value)} />
+      </Space>
+      <Space align="center">
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={(value) => setReadOnly(value)} />
+      </Space>
       <TreeSelect
         data={options}
         multiple
         clearable
         placeholder="请选择"
-        minCollapsedNum={1}
-        collapsedItems={({ collapsedSelectedItems }) => (
-          <Tooltip content={collapsedSelectedItems.map((item) => item.label).join('、')}>
-            <Tag>更多...</Tag>
-          </Tooltip>
-        )}
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
         value={customizeValue}
         onChange={(val) => setCustomizeValue(val)}
       />
diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md
index a6154103eb..5fa69bb9bb 100644
--- a/src/tree-select/tree-select.en-US.md
+++ b/src/tree-select/tree-select.en-US.md
@@ -1,25 +1,26 @@
 :: BASE_DOC ::
 
 ## API
+
 ### TreeSelect Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 data | Array | [] | Typescript：`Array<DataOption>` | N
 disabled | Boolean | - | \- | N
 empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, option: DataOption) => boolean` | N
 filterable | Boolean | false | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
-inputValue | String / Number | - | input value。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
-defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
+inputValue | String / Number | - | input value。Typescript：`string` | N
+defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N
 keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | \- | N
@@ -53,7 +54,7 @@ onChange | Function |  | Typescript：`(value: TreeValueType, context: TreeSelec
 onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onEnter | Function |  | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`<br/> | N
 onFocus | Function |  | Typescript：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`<br/> | N
-onInputChange | Function |  | Typescript：`(value: InputValue, context: SelectInputValueChangeContext) => void`<br/> | N
+onInputChange | Function |  | Typescript：`(value: string, context: SelectInputValueChangeContext) => void`<br/> | N
 onPopupVisibleChange | Function |  | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext<DataOption>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。<br/>`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`<br/><br/>`interface TreeSelectPopupVisibleContext<T> {   e?: PopupTriggerEvent \| Event;   node?: TreeNodeModel<T>;   trigger?: PopupTriggerSource \| 'clear'; }`<br/> | N
 onRemove | Function |  | Typescript：`(options: RemoveOptions<DataOption, TreeValueType>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。<br/>`export interface RemoveOptions<T extends TreeOptionData = TreeOptionData, N extends TreeSelectValue = TreeSelectValue> {   value: N;   data: T;  index: number; node: TreeNodeModel<T>;   e?: MouseEvent \| KeyboardEvent;   trigger: 'tag-remove' \| 'backspace'; }`<br/> | N
 onSearch | Function |  | Typescript：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`<br/> | N
diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md
index 3c7c92bb55..e26aa84fbe 100644
--- a/src/tree-select/tree-select.md
+++ b/src/tree-select/tree-select.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### TreeSelect Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -11,15 +12,15 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否允许清空 | N
-collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 data | Array | [] | 树选择的数据列表。结构：`[{ label: TNode, value: string \| number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。<br />其中 `label` 和 `value` 可以使用 `keys` 属性定义别名。TS 类型：`Array<DataOption>` | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | TNode | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | 过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, option: DataOption) => boolean` | N
 filterable | Boolean | false | 是否可搜索 | N
 inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
-inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
-defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts) | N
+inputValue | String / Number | - | 输入框的值。TS 类型：`string` | N
+defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N
 keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否正在加载数据 | N
@@ -53,7 +54,7 @@ onChange | Function |  | TS 类型：`(value: TreeValueType, context: TreeSelect
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击清除按钮时触发 | N
 onEnter | Function |  | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`<br/>回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N
 onFocus | Function |  | TS 类型：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
-onInputChange | Function |  | TS 类型：`(value: InputValue, context: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N
+onInputChange | Function |  | TS 类型：`(value: string, context: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等 | N
 onPopupVisibleChange | Function |  | TS 类型：`(visible: boolean, context: TreeSelectPopupVisibleContext<DataOption>) => void`<br/>下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。<br/>`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`<br/><br/>`interface TreeSelectPopupVisibleContext<T> {   e?: PopupTriggerEvent \| Event;   node?: TreeNodeModel<T>;   trigger?: PopupTriggerSource \| 'clear'; }`<br/> | N
 onRemove | Function |  | TS 类型：`(options: RemoveOptions<DataOption, TreeValueType>) => void`<br/>多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tree-select/type.ts)。<br/>`export interface RemoveOptions<T extends TreeOptionData = TreeOptionData, N extends TreeSelectValue = TreeSelectValue> {   value: N;   data: T;  index: number; node: TreeNodeModel<T>;   e?: MouseEvent \| KeyboardEvent;   trigger: 'tag-remove' \| 'backspace'; }`<br/> | N
 onSearch | Function |  | TS 类型：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`<br/>输入值变化时，触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`，即一旦存在这个远程搜索事件 `filter` 失效 | N
diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts
index 2cb9268c2e..502f703945 100644
--- a/src/tree-select/type.ts
+++ b/src/tree-select/type.ts
@@ -5,12 +5,11 @@
  * */
 
 import { InputProps } from '../input';
-import { InputValue } from '../input';
 import { PopupProps } from '../popup';
 import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext } from '../select-input';
 import { TagProps } from '../tag';
 import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree';
-import { PopupTriggerEvent, PopupTriggerSource } from '../popup';
+import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '../popup';
 import { TNode, TElement, TreeOptionData } from '../common';
 import { MouseEvent, KeyboardEvent, FocusEvent } from 'react';
 
@@ -39,9 +38,14 @@ export interface TdTreeSelectProps<
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: DataOption[];
+    collapsedSelectedItems: DataOption[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 树选择的数据列表。结构：`[{ label: TNode, value: string | number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。<br />其中 `label` 和 `value` 可以使用 `keys` 属性定义别名
    * @default []
@@ -71,11 +75,11 @@ export interface TdTreeSelectProps<
   /**
    * 输入框的值
    */
-  inputValue?: InputValue;
+  inputValue?: string;
   /**
    * 输入框的值，非受控属性
    */
-  defaultInputValue?: InputValue;
+  defaultInputValue?: string;
   /**
    * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`
    */
@@ -220,7 +224,7 @@ export interface TdTreeSelectProps<
   /**
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等
    */
-  onInputChange?: (value: InputValue, context: SelectInputValueChangeContext) => void;
+  onInputChange?: (value: string, context: SelectInputValueChangeContext) => void;
   /**
    * 下拉框显示或隐藏时触发。单选场景，选中某个选项时触发关闭，此时需要添加参数 `node`
    */
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index cf68913d26..197839905e 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -44220,6 +44220,13 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
         class="t-space t-space-vertical"
         style="gap: 16px;"
       >
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            default:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
@@ -44292,6 +44299,166 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
             </div>
           </div>
         </div>
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            use collapsedItems:
+          </h3>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <div>
+                size control:
+              </div>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-radio-group t-size-m t-radio-group__outline"
+              >
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'small'"
+                    tabindex="-1"
+                    type="radio"
+                    value="small"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    small
+                  </span>
+                </label>
+                <label
+                  class="t-radio t-is-checked"
+                  tabindex="0"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__former"
+                    data-value="'medium'"
+                    tabindex="-1"
+                    type="radio"
+                    value="medium"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    medium
+                  </span>
+                </label>
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'large'"
+                    tabindex="-1"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    large
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                disabled control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                readonly control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
         <div
           class="t-space-item"
         >
@@ -44329,12 +44496,15 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
                       />
                     </svg>
                   </div>
-                  <span
-                    style="color: rgb(0, 168, 112);"
+                  <div
+                    class="t-tag t-tag--default t-tag--dark"
                   >
-                    +
-                    1
-                  </span>
+                    <span>
+                      More(
+                      2
+                      )
+                    </span>
+                  </div>
                 </div>
                 <span
                   class="t-input__input-pre"
@@ -44370,6 +44540,13 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
       class="t-space t-space-vertical"
       style="gap: 16px;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          default:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -44442,6 +44619,166 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
           </div>
         </div>
       </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          use collapsedItems:
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <div>
+              size control:
+            </div>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <div
+              class="t-radio-group t-size-m t-radio-group__outline"
+            >
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'small'"
+                  tabindex="-1"
+                  type="radio"
+                  value="small"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  small
+                </span>
+              </label>
+              <label
+                class="t-radio t-is-checked"
+                tabindex="0"
+              >
+                <input
+                  checked=""
+                  class="t-radio__former"
+                  data-value="'medium'"
+                  tabindex="-1"
+                  type="radio"
+                  value="medium"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  medium
+                </span>
+              </label>
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'large'"
+                  tabindex="-1"
+                  type="radio"
+                  value="large"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              disabled control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              readonly control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
       <div
         class="t-space-item"
       >
@@ -44479,12 +44816,15 @@ exports[`csr snapshot test > csr test src/cascader/_example/collapsed.jsx 1`] =
                     />
                   </svg>
                 </div>
-                <span
-                  style="color: rgb(0, 168, 112);"
+                <div
+                  class="t-tag t-tag--default t-tag--dark"
                 >
-                  +
-                  1
-                </span>
+                  <span>
+                    More(
+                    2
+                    )
+                  </span>
+                </div>
               </div>
               <span
                 class="t-input__input-pre"
@@ -167339,6 +167679,13 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
         class="t-space t-space-horizontal t-space--break-line"
         style="width: 100%; gap: 16px;"
       >
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            default:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
@@ -167416,6 +167763,166 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            use collapsedItems:
+          </h3>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <div>
+                size control:
+              </div>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-radio-group t-size-m t-radio-group__outline"
+              >
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'small'"
+                    tabindex="-1"
+                    type="radio"
+                    value="small"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    small
+                  </span>
+                </label>
+                <label
+                  class="t-radio t-is-checked"
+                  tabindex="0"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__former"
+                    data-value="'medium'"
+                    tabindex="-1"
+                    type="radio"
+                    value="medium"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    medium
+                  </span>
+                </label>
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'large'"
+                    tabindex="-1"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    large
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                disabled control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                readonly control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
         <div
           class="t-space-item"
         >
@@ -167457,12 +167964,15 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
                         />
                       </svg>
                     </div>
-                    <span
-                      style="color: rgb(237, 123, 47);"
+                    <div
+                      class="t-tag t-tag--default t-tag--dark"
                     >
-                      +
-                      1
-                    </span>
+                      <span>
+                        More(
+                        1
+                        )
+                      </span>
+                    </div>
                   </div>
                   <span
                     class="t-input__input-pre"
@@ -167499,6 +168009,13 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
       class="t-space t-space-horizontal t-space--break-line"
       style="width: 100%; gap: 16px;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          default:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -167576,6 +168093,166 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          use collapsedItems:
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <div>
+              size control:
+            </div>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <div
+              class="t-radio-group t-size-m t-radio-group__outline"
+            >
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'small'"
+                  tabindex="-1"
+                  type="radio"
+                  value="small"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  small
+                </span>
+              </label>
+              <label
+                class="t-radio t-is-checked"
+                tabindex="0"
+              >
+                <input
+                  checked=""
+                  class="t-radio__former"
+                  data-value="'medium'"
+                  tabindex="-1"
+                  type="radio"
+                  value="medium"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  medium
+                </span>
+              </label>
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'large'"
+                  tabindex="-1"
+                  type="radio"
+                  value="large"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              disabled control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              readonly control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
       <div
         class="t-space-item"
       >
@@ -167617,12 +168294,15 @@ exports[`csr snapshot test > csr test src/select/_example/collapsed.jsx 1`] = `
                       />
                     </svg>
                   </div>
-                  <span
-                    style="color: rgb(237, 123, 47);"
+                  <div
+                    class="t-tag t-tag--default t-tag--dark"
                   >
-                    +
-                    1
-                  </span>
+                    <span>
+                      More(
+                      1
+                      )
+                    </span>
+                  </div>
                 </div>
                 <span
                   class="t-input__input-pre"
@@ -174274,6 +174954,13 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
         class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"
         style="gap: 16px;"
       >
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            default:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
@@ -174346,17 +175033,162 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
         <div
           class="t-space-item"
         >
-          <br />
+          <h3>
+            use collapsedItems:
+          </h3>
         </div>
         <div
           class="t-space-item"
         >
-           
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <div>
+                size control:
+              </div>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-radio-group t-size-m t-radio-group__outline"
+              >
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'small'"
+                    tabindex="-1"
+                    type="radio"
+                    value="small"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    small
+                  </span>
+                </label>
+                <label
+                  class="t-radio t-is-checked"
+                  tabindex="0"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__former"
+                    data-value="'medium'"
+                    tabindex="-1"
+                    type="radio"
+                    value="medium"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    medium
+                  </span>
+                </label>
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'large'"
+                    tabindex="-1"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    large
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
         </div>
         <div
           class="t-space-item"
         >
-          <br />
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                disabled control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                readonly control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
         </div>
         <div
           class="t-space-item"
@@ -174395,33 +175227,12 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
                       />
                     </svg>
                   </div>
-                  <div
-                    class="t-tag t-tag--default t-tag--dark"
-                  >
-                    <span
-                      title="tdesign-react"
-                    >
-                      tdesign-react
-                    </span>
-                    <svg
-                      class="t-icon t-icon-close t-tag__icon-close"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </div>
                   <div
                     class="t-tag t-tag--default t-tag--dark"
                   >
                     <span>
-                      More(+
-                      4
+                      More(
+                      5
                       )
                     </span>
                   </div>
@@ -174457,6 +175268,13 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
       class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"
       style="gap: 16px;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          default:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -174529,17 +175347,162 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
       <div
         class="t-space-item"
       >
-        <br />
+        <h3>
+          use collapsedItems:
+        </h3>
       </div>
       <div
         class="t-space-item"
       >
-         
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <div>
+              size control:
+            </div>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <div
+              class="t-radio-group t-size-m t-radio-group__outline"
+            >
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'small'"
+                  tabindex="-1"
+                  type="radio"
+                  value="small"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  small
+                </span>
+              </label>
+              <label
+                class="t-radio t-is-checked"
+                tabindex="0"
+              >
+                <input
+                  checked=""
+                  class="t-radio__former"
+                  data-value="'medium'"
+                  tabindex="-1"
+                  type="radio"
+                  value="medium"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  medium
+                </span>
+              </label>
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'large'"
+                  tabindex="-1"
+                  type="radio"
+                  value="large"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="t-space-item"
       >
-        <br />
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              disabled control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              readonly control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
       </div>
       <div
         class="t-space-item"
@@ -174578,33 +175541,12 @@ exports[`csr snapshot test > csr test src/select-input/_example/collapsed-items.
                     />
                   </svg>
                 </div>
-                <div
-                  class="t-tag t-tag--default t-tag--dark"
-                >
-                  <span
-                    title="tdesign-react"
-                  >
-                    tdesign-react
-                  </span>
-                  <svg
-                    class="t-icon t-icon-close t-tag__icon-close"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
                 <div
                   class="t-tag t-tag--default t-tag--dark"
                 >
                   <span>
-                    More(+
-                    4
+                    More(
+                    5
                     )
                   </span>
                 </div>
@@ -271234,6 +272176,13 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
         class="t-space t-space-vertical"
         style="width: 80%; gap: 16px;"
       >
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            default:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
@@ -271289,68 +272238,186 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
             </div>
           </div>
         </div>
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            use collapsedItems:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
           <div
-            class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag"
-            value=""
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
           >
             <div
-              class="t-input t-align-left t-input--prefix"
+              class="t-space-item"
+            >
+              <div>
+                size control:
+              </div>
+            </div>
+            <div
+              class="t-space-item"
             >
               <div
-                class="t-input__prefix"
+                class="t-radio-group t-size-m t-radio-group__outline"
               >
-                <div
-                  class="t-tag t-tag--default t-tag--dark"
+                <label
+                  class="t-radio"
+                  tabindex="0"
                 >
+                  <input
+                    class="t-radio__former"
+                    data-value="'small'"
+                    tabindex="-1"
+                    type="radio"
+                    value="small"
+                  />
                   <span
-                    title="Vue"
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
                   >
-                    Vue
+                    small
                   </span>
-                  <svg
-                    class="t-icon t-icon-close t-tag__icon-close"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="t-tag t-tag--default t-tag--dark"
+                </label>
+                <label
+                  class="t-radio t-is-checked"
+                  tabindex="0"
                 >
+                  <input
+                    checked=""
+                    class="t-radio__former"
+                    data-value="'medium'"
+                    tabindex="-1"
+                    type="radio"
+                    value="medium"
+                  />
                   <span
-                    title="React"
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
                   >
-                    React
+                    medium
                   </span>
-                  <svg
-                    class="t-icon t-icon-close t-tag__icon-close"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
+                </label>
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'large'"
+                    tabindex="-1"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
                   >
-                    <path
-                      d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
+                    large
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                disabled control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                readonly control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag"
+            value=""
+          >
+            <div
+              class="t-input t-align-left t-input--prefix"
+            >
+              <div
+                class="t-input__prefix"
+              >
                 <div
                   class="t-tag t-tag--default t-tag--dark"
                 >
                   <span
-                    title="Miniprogram"
+                    title="Vue"
                   >
-                    Miniprogram
+                    Vue
                   </span>
                   <svg
                     class="t-icon t-icon-close t-tag__icon-close"
@@ -271370,7 +272437,7 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
                 >
                   <span>
                     More(
-                    2
+                    4
                     )
                   </span>
                 </div>
@@ -271395,6 +272462,13 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
       class="t-space t-space-vertical"
       style="width: 80%; gap: 16px;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          default:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -271450,68 +272524,186 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
           </div>
         </div>
       </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          use collapsedItems:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
         <div
-          class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag"
-          value=""
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
         >
           <div
-            class="t-input t-align-left t-input--prefix"
+            class="t-space-item"
+          >
+            <div>
+              size control:
+            </div>
+          </div>
+          <div
+            class="t-space-item"
           >
             <div
-              class="t-input__prefix"
+              class="t-radio-group t-size-m t-radio-group__outline"
             >
-              <div
-                class="t-tag t-tag--default t-tag--dark"
+              <label
+                class="t-radio"
+                tabindex="0"
               >
+                <input
+                  class="t-radio__former"
+                  data-value="'small'"
+                  tabindex="-1"
+                  type="radio"
+                  value="small"
+                />
                 <span
-                  title="Vue"
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
                 >
-                  Vue
+                  small
                 </span>
-                <svg
-                  class="t-icon t-icon-close t-tag__icon-close"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-              <div
-                class="t-tag t-tag--default t-tag--dark"
+              </label>
+              <label
+                class="t-radio t-is-checked"
+                tabindex="0"
               >
+                <input
+                  checked=""
+                  class="t-radio__former"
+                  data-value="'medium'"
+                  tabindex="-1"
+                  type="radio"
+                  value="medium"
+                />
                 <span
-                  title="React"
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
                 >
-                  React
+                  medium
                 </span>
-                <svg
-                  class="t-icon t-icon-close t-tag__icon-close"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
+              </label>
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'large'"
+                  tabindex="-1"
+                  type="radio"
+                  value="large"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
                 >
-                  <path
-                    d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
+                  large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              disabled control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              readonly control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag"
+          value=""
+        >
+          <div
+            class="t-input t-align-left t-input--prefix"
+          >
+            <div
+              class="t-input__prefix"
+            >
               <div
                 class="t-tag t-tag--default t-tag--dark"
               >
                 <span
-                  title="Miniprogram"
+                  title="Vue"
                 >
-                  Miniprogram
+                  Vue
                 </span>
                 <svg
                   class="t-icon t-icon-close t-tag__icon-close"
@@ -271531,7 +272723,7 @@ exports[`csr snapshot test > csr test src/tag-input/_example/collapsed.jsx 1`] =
               >
                 <span>
                   More(
-                  2
+                  4
                   )
                 </span>
               </div>
@@ -294500,8 +295692,15 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
     <div>
       <div
         class="t-space t-space-vertical"
-        style="width: 300px; gap: 16px;"
+        style="width: 80%; gap: 16px;"
       >
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            default:
+          </h3>
+        </div>
         <div
           class="t-space-item"
         >
@@ -294574,6 +295773,166 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
             </div>
           </div>
         </div>
+        <div
+          class="t-space-item"
+        >
+          <h3>
+            use collapsedItems:
+          </h3>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <div>
+                size control:
+              </div>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-radio-group t-size-m t-radio-group__outline"
+              >
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'small'"
+                    tabindex="-1"
+                    type="radio"
+                    value="small"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    small
+                  </span>
+                </label>
+                <label
+                  class="t-radio t-is-checked"
+                  tabindex="0"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__former"
+                    data-value="'medium'"
+                    tabindex="-1"
+                    type="radio"
+                    value="medium"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    medium
+                  </span>
+                </label>
+                <label
+                  class="t-radio"
+                  tabindex="0"
+                >
+                  <input
+                    class="t-radio__former"
+                    data-value="'large'"
+                    tabindex="-1"
+                    type="radio"
+                    value="large"
+                  />
+                  <span
+                    class="t-radio__input"
+                  />
+                  <span
+                    class="t-radio__label"
+                  >
+                    large
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                disabled control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-space t-space-align-center t-space-horizontal"
+            style="gap: 16px;"
+          >
+            <div
+              class="t-space-item"
+            >
+              <span>
+                readonly control:
+              </span>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <label
+                class="t-checkbox"
+                tabindex="0"
+              >
+                <input
+                  class="t-checkbox__former"
+                  tabindex="-1"
+                  type="checkbox"
+                  value=""
+                />
+                <span
+                  class="t-checkbox__input"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
         <div
           class="t-space-item"
         >
@@ -294614,10 +295973,10 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
                   <div
                     class="t-tag t-tag--default t-tag--dark"
                   >
-                    <span
-                      title="更多..."
-                    >
-                      更多...
+                    <span>
+                      More(
+                      1
+                      )
                     </span>
                   </div>
                 </div>
@@ -294653,8 +296012,15 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
   "container": <div>
     <div
       class="t-space t-space-vertical"
-      style="width: 300px; gap: 16px;"
+      style="width: 80%; gap: 16px;"
     >
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          default:
+        </h3>
+      </div>
       <div
         class="t-space-item"
       >
@@ -294727,6 +296093,166 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
           </div>
         </div>
       </div>
+      <div
+        class="t-space-item"
+      >
+        <h3>
+          use collapsedItems:
+        </h3>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <div>
+              size control:
+            </div>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <div
+              class="t-radio-group t-size-m t-radio-group__outline"
+            >
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'small'"
+                  tabindex="-1"
+                  type="radio"
+                  value="small"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  small
+                </span>
+              </label>
+              <label
+                class="t-radio t-is-checked"
+                tabindex="0"
+              >
+                <input
+                  checked=""
+                  class="t-radio__former"
+                  data-value="'medium'"
+                  tabindex="-1"
+                  type="radio"
+                  value="medium"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  medium
+                </span>
+              </label>
+              <label
+                class="t-radio"
+                tabindex="0"
+              >
+                <input
+                  class="t-radio__former"
+                  data-value="'large'"
+                  tabindex="-1"
+                  type="radio"
+                  value="large"
+                />
+                <span
+                  class="t-radio__input"
+                />
+                <span
+                  class="t-radio__label"
+                >
+                  large
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              disabled control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-space t-space-align-center t-space-horizontal"
+          style="gap: 16px;"
+        >
+          <div
+            class="t-space-item"
+          >
+            <span>
+              readonly control:
+            </span>
+          </div>
+          <div
+            class="t-space-item"
+          >
+            <label
+              class="t-checkbox"
+              tabindex="0"
+            >
+              <input
+                class="t-checkbox__former"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+              <span
+                class="t-checkbox__input"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
       <div
         class="t-space-item"
       >
@@ -294767,10 +296293,10 @@ exports[`csr snapshot test > csr test src/tree-select/_example/collapsed.jsx 1`]
                 <div
                   class="t-tag t-tag--default t-tag--dark"
                 >
-                  <span
-                    title="更多..."
-                  >
-                    更多...
+                  <span>
+                    More(
+                    1
+                    )
                   </span>
                 </div>
               </div>
@@ -303619,7 +305145,7 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/base.jsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cascader/_example/collapsed.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/collapsed.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/disabled.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-is-disabled t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" disabled=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon t-is-disabled\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-is-disabled t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" disabled=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon t-is-disabled\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
@@ -304189,7 +305715,7 @@ exports[`ssr snapshot test > ssr test src/rate/_example/texts.jsx 1`] = `"<div c
 
 exports[`ssr snapshot test > ssr test src/select/_example/base.jsx 1`] = `"<div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/select/_example/collapsed.jsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/select/_example/collapsed.jsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/select/_example/creatable.jsx 1`] = `"<div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div>"`;
 
@@ -304243,7 +305769,7 @@ exports[`ssr snapshot test > ssr test src/select-input/_example/borderless.jsx 1
 
 exports[`ssr snapshot test > ssr test src/select-input/_example/borderless-multiple.jsx 1`] = `"<div style=\\"width:60%\\"><div class=\\"t-select-input t-select-input--borderless t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->2</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/select-input/_example/collapsed-items.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space tdesign-demo__select-input-collapsed-items t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->5</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"> </div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-react\\">tdesign-react</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(+<!-- -->4<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/select-input/_example/collapsed-items.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space tdesign-demo__select-input-collapsed-items t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->5</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->5<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/select-input/_example/custom-tag.jsx 1`] = `"<div class=\\"tdesign-demo-select-input-custom-tag\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\" \\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform tdesign-demo-select-input__img\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg>tdesign-vue</span></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\" \\"/></div></div></div><br/><br/><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-react</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><span class=\\"t-input__input-pre\\"></span></div></div></div><br/><br/><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
@@ -304467,7 +305993,7 @@ exports[`ssr snapshot test > ssr test src/tag-input/_example/auto-width.jsx 1`]
 
 exports[`ssr snapshot test > ssr test src/tag-input/_example/base.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Angular\\">Angular</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag-input__prefix\\">Controlled: </div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag-input__prefix\\">UnControlled: </div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tag-input/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->4</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Miniprogram\\">Miniprogram</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->2<!-- -->)</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/tag-input/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->4</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->4<!-- -->)</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag-input/_example/custom-tag.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentA</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentB</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentA</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentB</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentC</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
@@ -304585,7 +306111,7 @@ exports[`ssr snapshot test > ssr test src/tree/_example/vscroll.jsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/base.jsx 1`] = `"<div class=\\"t-tree-select t-select-input\\" style=\\"width:300px\\"><div class=\\"t-input__wrap\\" value=\\"广东省\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"广东省\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tree-select/_example/collapsed.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"更多...\\">更多...</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/tree-select/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->1<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/filterable.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;default&#x27;\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">默认</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;function&#x27;\\" value=\\"function\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">自定义方法</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 396ae2cdca..29d4eb33c6 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -182,7 +182,7 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/base.jsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cascader/_example/collapsed.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/collapsed.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/disabled.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-is-disabled t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" disabled=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon t-is-disabled\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-cascader t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-is-disabled t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" disabled=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-cascader__icon t-is-disabled\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
@@ -752,7 +752,7 @@ exports[`ssr snapshot test > ssr test src/rate/_example/texts.jsx 1`] = `"<div c
 
 exports[`ssr snapshot test > ssr test src/select/_example/base.jsx 1`] = `"<div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/select/_example/collapsed.jsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/select/_example/collapsed.jsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-horizontal t-space--break-line\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/select/_example/creatable.jsx 1`] = `"<div class=\\"t-select__wrap\\" style=\\"width:40%\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div>"`;
 
@@ -806,7 +806,7 @@ exports[`ssr snapshot test > ssr test src/select-input/_example/borderless.jsx 1
 
 exports[`ssr snapshot test > ssr test src/select-input/_example/borderless-multiple.jsx 1`] = `"<div style=\\"width:60%\\"><div class=\\"t-select-input t-select-input--borderless t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->2</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/select-input/_example/collapsed-items.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space tdesign-demo__select-input-collapsed-items t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->5</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"> </div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-react\\">tdesign-react</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(+<!-- -->4<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/select-input/_example/collapsed-items.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space tdesign-demo__select-input-collapsed-items t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->5</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"tdesign-vue\\">tdesign-vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->5<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/select-input/_example/custom-tag.jsx 1`] = `"<div class=\\"tdesign-demo-select-input-custom-tag\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\" \\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform tdesign-demo-select-input__img\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg>tdesign-vue</span></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\" \\"/></div></div></div><br/><br/><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-react</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><span class=\\"t-input__input-pre\\"></span></div></div></div><br/><br/><div class=\\"t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><span class=\\"displaySpan\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-control-platform\\"><path fill=\\"currentColor\\" d=\\"M12 .86L22 6.4V17.6l-10 5.55L2 17.6V6.4L12 .86zM4 8.9v7.51l7 3.89v-7.7L4 8.9zm9 11.4l7-3.89V8.9l-7 3.7v7.7zm-1-9.43l7.12-3.77L12 3.14 4.88 7.1 12 10.87z\\"></path></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
@@ -1030,7 +1030,7 @@ exports[`ssr snapshot test > ssr test src/tag-input/_example/auto-width.jsx 1`]
 
 exports[`ssr snapshot test > ssr test src/tag-input/_example/base.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Angular\\">Angular</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag-input__prefix\\">Controlled: </div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag-input__prefix\\">UnControlled: </div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tag-input/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->4</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"React\\">React</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Miniprogram\\">Miniprogram</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->2<!-- -->)</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/tag-input/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->4</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"Vue\\">Vue</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->4<!-- -->)</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag-input/_example/custom-tag.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentA</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span><span><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentB</span></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentA</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentB</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\" style=\\"margin-right:4px\\"><span><div><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\" style=\\"max-width:18px;max-height:18px;border-radius:50%;vertical-align:text-top\\"/>StudentC</div></span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div></div><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\"></span></div></div></div></div>"`;
 
@@ -1148,7 +1148,7 @@ exports[`ssr snapshot test > ssr test src/tree/_example/vscroll.jsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/base.jsx 1`] = `"<div class=\\"t-tree-select t-select-input\\" style=\\"width:300px\\"><div class=\\"t-input__wrap\\" value=\\"广东省\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"广东省\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tree-select/_example/collapsed.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"更多...\\">更多...</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/tree-select/_example/collapsed.jsx 1`] = `"<div style=\\"width:80%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><h3>default:</h3></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+<!-- -->1</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><h3>use collapsedItems:</h3></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div>size control:</div></div><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">small</span></label><label tabindex=\\"0\\" class=\\"t-radio t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio\\"><input type=\\"radio\\" class=\\"t-radio__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio__input\\"></span><span class=\\"t-radio__label\\">large</span></label></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>disabled control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><span>readonly control:</span></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>More(<!-- -->1<!-- -->)</span></div></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/filterable.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;default&#x27;\\" checked=\\"\\" value=\\"default\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">默认</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;function&#x27;\\" value=\\"function\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">自定义方法</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple t-select-input--empty\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">请选择</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 

From ef29c2a63bd6929b88a97a739d4aede51227fbeb Mon Sep 17 00:00:00 2001
From: kang <kang95630@gmail.com>
Date: Wed, 8 May 2024 23:21:41 +0800
Subject: [PATCH 06/20] =?UTF-8?q?feat(dialog):=20dialog=20support=20confir?=
 =?UTF-8?q?m=20button=20loading=20and=20plugin=20functi=E2=80=A6=20(#2883)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(dialog): dialog support confirm button loading and plugin function-call setConfirmLoading

* docs(dialog): add confirmLoading and setConfirmLoading example

* test(dialog): update demo snapshot
---
 src/dialog/Dialog.tsx                     |  3 ++
 src/dialog/DialogCard.tsx                 |  2 ++
 src/dialog/_example/async.jsx             | 41 ++++++++++++++++++++---
 src/dialog/plugin.tsx                     |  5 +++
 src/dialog/type.ts                        |  5 +++
 test/snap/__snapshots__/csr.test.jsx.snap | 24 ++++++++++++-
 test/snap/__snapshots__/ssr.test.jsx.snap |  2 +-
 7 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
index 7ff883f74d..83613ca48a 100644
--- a/src/dialog/Dialog.tsx
+++ b/src/dialog/Dialog.tsx
@@ -90,6 +90,9 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
     hide() {
       setState({ visible: false });
     },
+    setConfirmLoading: (loading: boolean) => {
+      setState({ confirmLoading: loading });
+    },
     destroy() {
       setState({ visible: false, destroyOnClose: true });
     },
diff --git a/src/dialog/DialogCard.tsx b/src/dialog/DialogCard.tsx
index 4a0acdce8f..5498f1a3db 100644
--- a/src/dialog/DialogCard.tsx
+++ b/src/dialog/DialogCard.tsx
@@ -63,6 +63,7 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
     onCloseBtnClick,
     cancelBtn = cancelText,
     confirmBtn = confirmText,
+    confirmLoading,
     ...otherProps
   } = useDefaultProps<DialogCardProps>(props, dialogCardDefaultProps);
 
@@ -120,6 +121,7 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
       });
       const renderConfirmBtn = renderDialogButton(confirmBtn, {
         theme: 'primary',
+        loading: confirmLoading,
         onClick: (e: React.MouseEvent<HTMLButtonElement>) => onConfirm?.({ e }),
       });
 
diff --git a/src/dialog/_example/async.jsx b/src/dialog/_example/async.jsx
index 5fcfe40c7a..01f9f1aa57 100644
--- a/src/dialog/_example/async.jsx
+++ b/src/dialog/_example/async.jsx
@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
-import { Dialog, Button } from 'tdesign-react';
+import { Dialog, Button, DialogPlugin } from 'tdesign-react';
+
+async function delay(time) {
+  return new Promise((resolve) => setTimeout(resolve, time * 1000));
+}
 
 export default function BasicUsage() {
   const [visible, setVisible] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
 
   const handleClick = () => {
     setVisible(true);
@@ -18,15 +22,44 @@ export default function BasicUsage() {
       setLoading(false);
     }, 2000);
   };
+
+  function showFunctionCallDialog() {
+    // 函数调用组件
+    const myDialog = DialogPlugin({
+      header: 'Basic Modal',
+      body: 'This is a dialog',
+      onConfirm: async ({ e }) => {
+        console.log('confirm clicked', e);
+        myDialog.setConfirmLoading(true);
+        await delay(3);
+        myDialog.setConfirmLoading(false);
+        myDialog.hide();
+      },
+      onClose: ({ e, trigger }) => {
+        console.log('e: ', e);
+        console.log('trigger: ', trigger);
+        myDialog.hide();
+      },
+      onCloseBtnClick: ({ e }) => {
+        console.log('close btn: ', e);
+      },
+    });
+  }
+
   return (
     <>
-      <Button theme="primary" onClick={handleClick}>
+      <Button theme="primary" onClick={handleClick} style={{ marginRight: 16 }}>
         Open Modal
       </Button>
+
+      <Button theme="primary" onClick={showFunctionCallDialog}>
+        Open Plugin Modal
+      </Button>
+
       <Dialog
         header="Basic Modal"
         visible={visible}
-        confirmBtn={<Button loading={loading}>保存中...</Button>}
+        confirmLoading={loading}
         onClose={handleClose}
         onConfirm={handleCloseAsync}
       >
diff --git a/src/dialog/plugin.tsx b/src/dialog/plugin.tsx
index ed883d18dd..6d997f2fa9 100644
--- a/src/dialog/plugin.tsx
+++ b/src/dialog/plugin.tsx
@@ -39,6 +39,11 @@ const createDialog: DialogPluginType = (props: DialogOptions): DialogInstance =>
         dialogRef.current?.destroy();
       });
     },
+    setConfirmLoading: (loading: boolean) => {
+      requestAnimationFrame(() => {
+        dialogRef.current?.setConfirmLoading(loading);
+      });
+    },
     update: (updateOptions: DialogOptions) => {
       requestAnimationFrame(() => {
         dialogRef.current?.update(updateOptions);
diff --git a/src/dialog/type.ts b/src/dialog/type.ts
index 723b8a3f5e..6524873d05 100644
--- a/src/dialog/type.ts
+++ b/src/dialog/type.ts
@@ -173,6 +173,7 @@ export interface TdDialogCardProps
     | 'onCancel'
     | 'onCloseBtnClick'
     | 'onConfirm'
+    | 'confirmLoading'
   > {}
 
 export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
@@ -201,6 +202,10 @@ export interface DialogInstance {
    * 隐藏弹框
    */
   hide: () => void;
+  /**
+   * 设置确认按钮加载状态
+   */
+  setConfirmLoading: (loading: boolean) => void;
   /**
    * 显示弹框
    */
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 197839905e..90a7ee2173 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -88043,6 +88043,7 @@ exports[`csr snapshot test > csr test src/dialog/_example/async.jsx 1`] = `
     <div>
       <button
         class="t-button t-button--theme-primary t-button--variant-base"
+        style="margin-right: 16px;"
         type="button"
       >
         <span
@@ -88051,11 +88052,22 @@ exports[`csr snapshot test > csr test src/dialog/_example/async.jsx 1`] = `
           Open Modal
         </span>
       </button>
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          Open Plugin Modal
+        </span>
+      </button>
     </div>
   </body>,
   "container": <div>
     <button
       class="t-button t-button--theme-primary t-button--variant-base"
+      style="margin-right: 16px;"
       type="button"
     >
       <span
@@ -88064,6 +88076,16 @@ exports[`csr snapshot test > csr test src/dialog/_example/async.jsx 1`] = `
         Open Modal
       </span>
     </button>
+    <button
+      class="t-button t-button--theme-primary t-button--variant-base"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        Open Plugin Modal
+      </span>
+    </button>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -305283,7 +305305,7 @@ exports[`ssr snapshot test > ssr test src/descriptions/_example/nest.jsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/descriptions/_example/size.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">large</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">small</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-descriptions\\"><div class=\\"t-descriptions__header\\">Shipping address</div><table class=\\"t-descriptions__body t-size-m t-descriptions__body--border\\"><tbody><tr><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Name</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">TDesign</td><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Telephone Number</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">139****0609</td></tr><tr><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Area</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">China Tencent Headquarters</td><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Address</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">Shenzhen Penguin Island D1 4A Mail Center</td></tr></tbody></table></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/async.jsx 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Modal</span></button>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/async.jsx 1`] = `"<button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Modal</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Plugin Modal</span></button>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/attach.jsx 1`] = `"<div style=\\"position:relative;height:400px\\"><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载在body</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载特定元素</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载函数返回节点</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">展示在挂载元素区域</span></button></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 29d4eb33c6..2d1010539b 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -320,7 +320,7 @@ exports[`ssr snapshot test > ssr test src/descriptions/_example/nest.jsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/descriptions/_example/size.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">large</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">medium</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">small</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-descriptions\\"><div class=\\"t-descriptions__header\\">Shipping address</div><table class=\\"t-descriptions__body t-size-m t-descriptions__body--border\\"><tbody><tr><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Name</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">TDesign</td><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Telephone Number</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">139****0609</td></tr><tr><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Area</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">China Tencent Headquarters</td><td colSpan=\\"1\\" class=\\"t-descriptions__label\\">Address</td><td colSpan=\\"1\\" class=\\"t-descriptions__content\\">Shenzhen Penguin Island D1 4A Mail Center</td></tr></tbody></table></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/dialog/_example/async.jsx 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Modal</span></button>"`;
+exports[`ssr snapshot test > ssr test src/dialog/_example/async.jsx 1`] = `"<button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Modal</span></button><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Open Plugin Modal</span></button>"`;
 
 exports[`ssr snapshot test > ssr test src/dialog/_example/attach.jsx 1`] = `"<div style=\\"position:relative;height:400px\\"><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载在body</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载特定元素</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">挂载函数返回节点</span></button><button style=\\"margin-right:16px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">展示在挂载元素区域</span></button></div>"`;
 

From e8a6e8867a4b6dade3bd0fc33a087e3ca6a72244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Thu, 9 May 2024 11:51:14 +0800
Subject: [PATCH 07/20] feat: complete input components borderless API (#2884)

* feat: complete borderless

* feat: complete borderless

* chore: remove empty line

* chore: fix test
---
 src/auto-complete/AutoComplete.tsx            |  1 +
 src/auto-complete/auto-complete.en-US.md      | 10 ++++++----
 src/auto-complete/auto-complete.md            |  4 +++-
 src/auto-complete/defaultProps.ts             |  1 +
 src/auto-complete/type.ts                     |  5 +++++
 src/cascader/Cascader.tsx                     |  1 +
 src/cascader/_usage/props.json                |  6 ++++++
 src/color-picker/ColorPicker.tsx              | 14 +++++++++-----
 src/color-picker/color-picker.en-US.md        |  1 +
 src/color-picker/color-picker.md              |  1 +
 src/color-picker/components/trigger.tsx       |  5 +++--
 src/color-picker/defaultProps.ts              |  1 +
 src/color-picker/type.ts                      |  5 +++++
 src/date-picker/DatePicker.tsx                |  1 +
 src/date-picker/_usage/date-picker-props.json |  6 ++++++
 src/date-picker/date-picker.en-US.md          |  1 +
 src/date-picker/date-picker.md                |  1 +
 src/date-picker/defaultProps.ts               |  1 +
 src/date-picker/type.ts                       |  5 +++++
 src/input/_usage/props.json                   |  6 ++++++
 src/tag-input/TagInput.tsx                    |  2 ++
 src/tag-input/_usage/props.json               |  6 ++++++
 src/tag-input/defaultProps.ts                 |  1 +
 src/tag-input/tag-input.en-US.md              |  1 +
 src/tag-input/tag-input.md                    |  1 +
 src/tag-input/type.ts                         |  5 +++++
 src/time-picker/TimePicker.tsx                |  2 ++
 src/time-picker/_usage/props.json             |  6 ++++++
 src/time-picker/defaultProps.ts               |  1 +
 src/time-picker/time-picker.en-US.md          |  1 +
 src/time-picker/time-picker.md                |  1 +
 src/time-picker/type.ts                       |  5 +++++
 32 files changed, 96 insertions(+), 12 deletions(-)

diff --git a/src/auto-complete/AutoComplete.tsx b/src/auto-complete/AutoComplete.tsx
index 12f1ac1224..0aceba8e7e 100644
--- a/src/auto-complete/AutoComplete.tsx
+++ b/src/auto-complete/AutoComplete.tsx
@@ -127,6 +127,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
       disabled={props.disabled}
       clearable={props.clearable}
       autofocus={props.autofocus}
+      borderless={props.borderless}
       onClear={props.onClear}
       onChange={onInputChange}
       onFocus={onInnerFocus}
diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md
index e2d32bb536..e7351aefae 100644
--- a/src/auto-complete/auto-complete.en-US.md
+++ b/src/auto-complete/auto-complete.en-US.md
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | \- | N
 disabled | Boolean | - | \- | N
@@ -21,8 +23,8 @@ panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts defi
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 readonly | Boolean | - | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md
index a6e6ca744b..8f7e7e818b 100644
--- a/src/auto-complete/auto-complete.md
+++ b/src/auto-complete/auto-complete.md
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autofocus | Boolean | - | 自动获取焦点 | N
+borderless | Boolean | false | 无边框模式 | N
 children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | 是否允许清空 | N
 disabled | Boolean | - | 是否禁用 | N
diff --git a/src/auto-complete/defaultProps.ts b/src/auto-complete/defaultProps.ts
index 2ed3c6bacb..af97429b7a 100644
--- a/src/auto-complete/defaultProps.ts
+++ b/src/auto-complete/defaultProps.ts
@@ -5,6 +5,7 @@
 import { TdAutoCompleteProps } from './type';
 
 export const autoCompleteDefaultProps: TdAutoCompleteProps = {
+  borderless: false,
   filterable: true,
   highlightKeyword: true,
   placeholder: undefined,
diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts
index 6fea8b877a..b67866c94e 100644
--- a/src/auto-complete/type.ts
+++ b/src/auto-complete/type.ts
@@ -15,6 +15,11 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    * 自动获取焦点
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 触发显示联想词下拉框的元素，同 `triggerElement`
    */
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 68714ff45d..c950d8eb1f 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -97,6 +97,7 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
       className={classNames(COMPONENT_NAME, props.className)}
       style={props.style}
       value={displayValue}
+      borderless={props.borderless}
       inputValue={visible ? inputVal : ''}
       popupVisible={visible}
       allowInput={isFilterable}
diff --git a/src/cascader/_usage/props.json b/src/cascader/_usage/props.json
index f86302b7e3..564afdf5e3 100644
--- a/src/cascader/_usage/props.json
+++ b/src/cascader/_usage/props.json
@@ -1,4 +1,10 @@
 [
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "checkStrictly",
     "type": "Boolean",
diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx
index a3b9e68ad7..e145039829 100644
--- a/src/color-picker/ColorPicker.tsx
+++ b/src/color-picker/ColorPicker.tsx
@@ -10,10 +10,8 @@ import useDefaultProps from '../hooks/useDefaultProps';
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, disabled, inputProps, onChange, colorModes, ...rest } = useDefaultProps<ColorPickerProps>(
-    props,
-    colorPickerDefaultProps,
-  );
+  const { popupProps, disabled, borderless, inputProps, onChange, colorModes, ...rest } =
+    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
   const [innerValue, setInnerValue] = useControlled(props, 'value', onChange);
@@ -49,7 +47,13 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
       }
     >
       <div className={`${baseClassName}__trigger`} ref={triggerRef}>
-        <ColorTrigger disabled={disabled} inputProps={inputProps} value={innerValue} onChange={setInnerValue} />
+        <ColorTrigger
+          disabled={disabled}
+          borderless={borderless}
+          inputProps={inputProps}
+          value={innerValue}
+          onChange={setInnerValue}
+        />
       </div>
     </Popup>
   );
diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md
index 6d985fbc9c..320bf8d046 100644
--- a/src/color-picker/color-picker.en-US.md
+++ b/src/color-picker/color-picker.en-US.md
@@ -7,6 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+borderless | Boolean | false | \- | N
 closeBtn | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | \- | N
diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md
index 813c21ce6b..365c000419 100644
--- a/src/color-picker/color-picker.md
+++ b/src/color-picker/color-picker.md
@@ -7,6 +7,7 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+borderless | Boolean | false | 无边框模式 | N
 closeBtn | TNode | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | 是否禁用组件 | N
diff --git a/src/color-picker/components/trigger.tsx b/src/color-picker/components/trigger.tsx
index ba75c22c2e..52c4cb55d3 100644
--- a/src/color-picker/components/trigger.tsx
+++ b/src/color-picker/components/trigger.tsx
@@ -7,14 +7,14 @@ import useClassName from '../hooks/useClassNames';
 import useControlled from '../../hooks/useControlled';
 import { TdColorContext } from '../interface';
 
-export interface ColorTriggerProps extends Pick<TdColorPickerProps, 'disabled' | 'inputProps'> {
+export interface ColorTriggerProps extends Pick<TdColorPickerProps, 'disabled' | 'inputProps' | 'borderless'> {
   value?: string;
   onChange?: (v?: string, context?: TdColorContext) => {};
 }
 
 const ColorPickerTrigger = (props: ColorTriggerProps) => {
   const baseClassName = useClassName();
-  const { disabled = false, inputProps = { autoWidth: true } } = props;
+  const { disabled = false, borderless = false, inputProps = { autoWidth: true } } = props;
 
   const [value, setValue] = useControlled(props, 'value', props.onChange);
 
@@ -27,6 +27,7 @@ const ColorPickerTrigger = (props: ColorTriggerProps) => {
   return (
     <div className={`${baseClassName}__trigger--default`}>
       <Input
+        borderless={borderless}
         {...inputProps}
         value={value}
         disabled={disabled}
diff --git a/src/color-picker/defaultProps.ts b/src/color-picker/defaultProps.ts
index 4af991af6e..6d2a312593 100644
--- a/src/color-picker/defaultProps.ts
+++ b/src/color-picker/defaultProps.ts
@@ -5,6 +5,7 @@
 import { TdColorPickerProps } from './type';
 
 export const colorPickerDefaultProps: TdColorPickerProps = {
+  borderless: false,
   closeBtn: true,
   colorModes: ['monochrome', 'linear-gradient'],
   enableAlpha: false,
diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
index 850699aa77..5127970a7a 100644
--- a/src/color-picker/type.ts
+++ b/src/color-picker/type.ts
@@ -10,6 +10,11 @@ import { SelectInputProps } from '../select-input';
 import { TNode } from '../common';
 
 export interface TdColorPickerProps {
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮
    * @default true
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 747ea0fc34..c26aa300a0 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -231,6 +231,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
         value={inputValue}
         status={props.status}
         tips={props.tips}
+        borderless={props.borderless}
         popupProps={popupProps}
         inputProps={inputProps}
         popupVisible={popupVisible}
diff --git a/src/date-picker/_usage/date-picker-props.json b/src/date-picker/_usage/date-picker-props.json
index f1b72907f3..92ea438d57 100644
--- a/src/date-picker/_usage/date-picker-props.json
+++ b/src/date-picker/_usage/date-picker-props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",
diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
index c7ffe5ae3e..bafe71b56e 100644
--- a/src/date-picker/date-picker.en-US.md
+++ b/src/date-picker/date-picker.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 defaultTime | String | '00:00:00' | Time selector default value | N
 disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
index c1e59d8ed7..f4eadfb95c 100644
--- a/src/date-picker/date-picker.md
+++ b/src/date-picker/date-picker.md
@@ -8,6 +8,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许输入日期 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否显示清除按钮 | N
 defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N
 disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
diff --git a/src/date-picker/defaultProps.ts b/src/date-picker/defaultProps.ts
index 170addfaff..4b5dbf2dbe 100644
--- a/src/date-picker/defaultProps.ts
+++ b/src/date-picker/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdDatePickerProps, TdDateRangePickerProps, TdDatePickerPanelProps, TdDa
 
 export const datePickerDefaultProps: TdDatePickerProps = {
   allowInput: false,
+  borderless: false,
   clearable: false,
   defaultTime: '00:00:00',
   enableTimePicker: false,
diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
index 9563e1abf7..bc9bf90147 100644
--- a/src/date-picker/type.ts
+++ b/src/date-picker/type.ts
@@ -18,6 +18,11 @@ export interface TdDatePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否显示清除按钮
    * @default false
diff --git a/src/input/_usage/props.json b/src/input/_usage/props.json
index 85b475e6db..d2ff031296 100644
--- a/src/input/_usage/props.json
+++ b/src/input/_usage/props.json
@@ -30,6 +30,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",
diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx
index bc687ac205..6fc5d06a75 100644
--- a/src/tag-input/TagInput.tsx
+++ b/src/tag-input/TagInput.tsx
@@ -27,6 +27,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
   const {
     excessTagsDisplayType,
     autoWidth,
+    borderless,
     readonly,
     disabled,
     clearable,
@@ -143,6 +144,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       autoWidth={true} // 控制input_inner的宽度 设置为true让内部input不会提前换行
       onWheel={onWheel}
       size={size}
+      borderless={borderless}
       readonly={readonly}
       disabled={disabled}
       label={renderLabel({ displayNode, label })}
diff --git a/src/tag-input/_usage/props.json b/src/tag-input/_usage/props.json
index 3270f14b31..4972ed7098 100644
--- a/src/tag-input/_usage/props.json
+++ b/src/tag-input/_usage/props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",
diff --git a/src/tag-input/defaultProps.ts b/src/tag-input/defaultProps.ts
index 193163dda9..33ef14cc3a 100644
--- a/src/tag-input/defaultProps.ts
+++ b/src/tag-input/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdTagInputProps } from './type';
 
 export const tagInputDefaultProps: TdTagInputProps = {
   autoWidth: false,
+  borderless: false,
   clearable: false,
   dragSort: false,
   excessTagsDisplayType: 'break-line',
diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
index 7d988a7db3..b7901560c9 100644
--- a/src/tag-input/tag-input.en-US.md
+++ b/src/tag-input/tag-input.en-US.md
@@ -9,6 +9,7 @@ name | type | default | description | required
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
index 9fea6cba8e..6f9035349f 100644
--- a/src/tag-input/tag-input.md
+++ b/src/tag-input/tag-input.md
@@ -9,6 +9,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autoWidth | Boolean | false | 宽度随内容自适应 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
 collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用标签输入框 | N
diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
index 17d9512821..63cdc4925a 100644
--- a/src/tag-input/type.ts
+++ b/src/tag-input/type.ts
@@ -15,6 +15,11 @@ export interface TdTagInputProps {
    * @default false
    */
   autoWidth?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否可清空
    * @default false
diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
index db2ca6d9b0..25b2d67968 100644
--- a/src/time-picker/TimePicker.tsx
+++ b/src/time-picker/TimePicker.tsx
@@ -34,6 +34,7 @@ const TimePicker = forwardRefWithStatics(
     const TEXT_CONFIG = useTimePickerTextConfig();
     const {
       allowInput,
+      borderless,
       className,
       clearable,
       disabled,
@@ -112,6 +113,7 @@ const TimePicker = forwardRefWithStatics(
           clearable={clearable}
           allowInput={allowInput}
           className={inputClasses}
+          borderless={borderless}
           suffixIcon={<TimeIcon />}
           popupVisible={isPanelShowed}
           onInputChange={handleInputChange}
diff --git a/src/time-picker/_usage/props.json b/src/time-picker/_usage/props.json
index e338fc2b8d..856511e6cb 100644
--- a/src/time-picker/_usage/props.json
+++ b/src/time-picker/_usage/props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",
diff --git a/src/time-picker/defaultProps.ts b/src/time-picker/defaultProps.ts
index 9632d87f67..ecde3d1ce1 100644
--- a/src/time-picker/defaultProps.ts
+++ b/src/time-picker/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdTimePickerProps, TdTimeRangePickerProps } from './type';
 
 export const timePickerDefaultProps: TdTimePickerProps = {
   allowInput: false,
+  borderless: false,
   clearable: false,
   format: 'HH:mm:ss',
   hideDisabledTime: true,
diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
index 82a077cd1b..9dff5180fc 100644
--- a/src/time-picker/time-picker.en-US.md
+++ b/src/time-picker/time-picker.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
 disabled | Boolean | false | \- | N
diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
index 8243b106c9..ad24e65d8b 100644
--- a/src/time-picker/time-picker.md
+++ b/src/time-picker/time-picker.md
@@ -8,6 +8,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许直接输入时间 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
 disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
 disabled | Boolean | false | 是否禁用组件 | N
diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
index 49e65cc39f..dacb770565 100644
--- a/src/time-picker/type.ts
+++ b/src/time-picker/type.ts
@@ -17,6 +17,11 @@ export interface TdTimePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否允许清除选中值
    * @default false

From 9640bbf0cb3bbd7cb5052cfc58725e92be1954f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Thu, 9 May 2024 23:29:57 +0800
Subject: [PATCH 08/20] fix(pagination): auto truncate number after entering
 (#2886)

---
 src/pagination/Pagination.tsx                |  6 ++++--
 src/pagination/__tests__/pagination.test.tsx | 22 +++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/pagination/Pagination.tsx b/src/pagination/Pagination.tsx
index 4ab11e17e5..06514ed87c 100644
--- a/src/pagination/Pagination.tsx
+++ b/src/pagination/Pagination.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useMemo, forwardRef, useEffect } from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
+import isNaN from 'lodash/isNaN';
+
 import noop from '../_util/noop';
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
@@ -75,14 +77,14 @@ const Pagination = forwardRef<HTMLDivElement, PaginationProps>((originalProps, r
       return;
     }
 
-    let nextCurrent = _nextCurrent;
+    let nextCurrent = Math.trunc(_nextCurrent);
+    if (isNaN(nextCurrent)) return;
     let nextPageSize = _nextPageSize;
 
     if (!nextPageSize && !pageSizeValidator(nextPageSize)) {
       nextPageSize =
         pageSize ?? (typeof pageSizeOptions[0] === 'number' ? pageSizeOptions[0] : pageSizeOptions[0]?.value);
     }
-
     // 边界处理
     if (nextCurrent < min) nextCurrent = min;
     if (nextCurrent > pageCount) nextCurrent = pageCount;
diff --git a/src/pagination/__tests__/pagination.test.tsx b/src/pagination/__tests__/pagination.test.tsx
index 05278cd80f..5d0cb83d8e 100644
--- a/src/pagination/__tests__/pagination.test.tsx
+++ b/src/pagination/__tests__/pagination.test.tsx
@@ -9,7 +9,7 @@ describe('Pagination test', () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  test('click page', () => {
+  test('click page works fine', () => {
     const wrapper = render(<Pagination total={300} pageSize={15} />);
 
     fireEvent.click(wrapper.getByText('20'));
@@ -22,7 +22,7 @@ describe('Pagination test', () => {
     expect(document.querySelector('.t-is-current')).toHaveTextContent('19');
   });
 
-  test('pageSize', async () => {
+  test('pageSize works fine', async () => {
     const changeFn = vi.fn();
     const pageSizeChangeFn = vi.fn();
     const { getByText, container, getByDisplayValue } = render(
@@ -43,7 +43,7 @@ describe('Pagination test', () => {
     expect(container.querySelector('.t-pagination__pager').childNodes.length).toBe(5);
     expect(document.querySelector('.t-is-current')).toHaveTextContent('5');
   });
-  test('folded', () => {
+  test('folded works fine', () => {
     const changeFn = vi.fn();
     const pageSizeChangeFn = vi.fn();
     const { getByText, container } = render(
@@ -76,7 +76,7 @@ describe('Pagination test', () => {
     fireEvent.click(container.querySelector('.t-pagination__number--more'));
     expect(document.querySelector('.t-is-current')).toHaveTextContent('2');
   });
-  test('theme', () => {
+  test('theme works fine', () => {
     const changeFn = vi.fn();
     render(<Pagination total={100} defaultPageSize={5} theme="simple" onChange={changeFn} />);
 
@@ -84,7 +84,7 @@ describe('Pagination test', () => {
     fireEvent.keyDown(document.querySelector('.t-pagination__jump .t-input__inner'), { keyCode: 13 });
     expect(document.querySelector('.t-pagination__jump .t-input__inner').value).toEqual('5');
   });
-  test('totalContent', () => {
+  test('totalContent works fine', () => {
     const changeFn = vi.fn();
     const { getByText, rerender } = render(
       <Pagination total={100} defaultPageSize={5} totalContent="总条数" onChange={changeFn} />,
@@ -96,8 +96,7 @@ describe('Pagination test', () => {
     rerender(<Pagination total={100} defaultPageSize={5} totalContent={totalContentFn} onChange={changeFn} />);
     expect(totalContentFn).toBeCalled();
   });
-
-  test('jumper', () => {
+  test('jumper works fine', () => {
     render(<Pagination total={300} pageSize={15} showJumper />);
 
     fireEvent.change(document.querySelector('.t-pagination__jump .t-input__inner'), { target: { value: '5' } });
@@ -112,4 +111,13 @@ describe('Pagination test', () => {
     fireEvent.keyDown(document.querySelector('.t-pagination__jump .t-input__inner'), { keyCode: 13 });
     expect(document.querySelector('.t-is-current')).toHaveTextContent('1');
   });
+  test('jump input number return integral part', () => {
+    // 测试输入小数会自动处理整数
+    const changeFn = vi.fn();
+    render(<Pagination total={100} defaultPageSize={20} theme="simple" onChange={changeFn} />);
+
+    fireEvent.change(document.querySelector('.t-pagination__jump .t-input__inner'), { target: { value: '5.555' } });
+    fireEvent.keyDown(document.querySelector('.t-pagination__jump .t-input__inner'), { keyCode: 13 });
+    expect(document.querySelector('.t-pagination__jump .t-input__inner').value).toEqual('5');
+  });
 });

From 003cf233a740bd661cb905668afe72e73af244bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Fri, 10 May 2024 22:10:06 +0800
Subject: [PATCH 09/20] fix(table): fix table crash when rootThWidthList is
 empty object (#2889)

---
 src/table/hooks/useFixed.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
index 0b152dcf15..77ca5ed0c7 100644
--- a/src/table/hooks/useFixed.ts
+++ b/src/table/hooks/useFixed.ts
@@ -452,6 +452,7 @@ export default function useFixed(
         reduceWidth += thWidthList[key];
       });
       const rootThWidthList = pick(thWidthList, preColKeys);
+      if (!Object.values(rootThWidthList).length) return;
       const oldTotalWidth = Object.values(rootThWidthList).reduce((r = 0, n) => r + n);
       // 保留原有可能编辑过的列宽度，但是当剩余列过小时，表头小于内容宽，需要缩放回内容宽度
       // 使用不包含滚动条的可视化区域宽度，意味着当不再溢出的时候，将宽度设置回完整宽度

From d341dba24ea3b7f356180c57d481b8720df49062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Fri, 10 May 2024 22:10:19 +0800
Subject: [PATCH 10/20] chore: update common (#2890)

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index b010e4cd35..e398021dac 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit b010e4cd357863cf0ae8f74d8bb45b499154e542
+Subproject commit e398021dac2820995b518c1e64f888818448c287

From c49f7b2230dd0acc764e39d4418574f4a60b0738 Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Mon, 13 May 2024 13:47:52 +0800
Subject: [PATCH 11/20] feat(selct-input): support size (#2894)

* fix(selct-input): fix example

* feat(selectinput): select-input support size

* docs: fix docs size typo

---------

Co-authored-by: Heising <heising@travelconnect.cn>
---
 src/select-input/select-input.en-US.md | 1 +
 src/select-input/select-input.md       | 1 +
 src/select-input/type.ts               | 7 ++++++-
 src/select-input/useMultiple.tsx       | 1 +
 src/select-input/useSingle.tsx         | 1 +
 src/tag-input/tag-input.en-US.md       | 2 +-
 src/tag-input/tag-input.md             | 2 +-
 src/tag-input/type.ts                  | 6 +++---
 8 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
index 4647f11921..4658cedbe2 100644
--- a/src/select-input/select-input.en-US.md
+++ b/src/select-input/select-input.en-US.md
@@ -30,6 +30,7 @@ popupVisible | Boolean | - | \- | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
 readonly | Boolean | false | \- | N
 reserveKeyword | Boolean | false | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
index 97481ff271..641079c179 100644
--- a/src/select-input/select-input.md
+++ b/src/select-input/select-input.md
@@ -30,6 +30,7 @@ popupVisible | Boolean | - | 是否显示下拉框 | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
 readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/select-input/type.ts b/src/select-input/type.ts
index 1b85cdc00e..b3eccadba1 100644
--- a/src/select-input/type.ts
+++ b/src/select-input/type.ts
@@ -9,7 +9,7 @@ import { PopupProps } from '../popup';
 import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input';
 import { TagProps } from '../tag';
 import { PopupVisibleChangeContext } from '../popup';
-import { TNode, TElement } from '../common';
+import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdSelectInputProps {
@@ -117,6 +117,11 @@ export interface TdSelectInputProps {
    * @default false
    */
   reserveKeyword?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
   /**
    * 输入框状态
    * @default default
diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
index 92877222b7..86910aaa3f 100644
--- a/src/select-input/useMultiple.tsx
+++ b/src/select-input/useMultiple.tsx
@@ -73,6 +73,7 @@ export default function useMultiple(props: TdSelectInputProps) {
       }}
       {...props.tagInputProps}
       inputProps={{
+        ...props.inputProps,
         readonly: !props.allowInput || props.readonly,
         inputClass: classNames(props.tagInputProps?.className, {
           [`${classPrefix}-input--focused`]: p.popupVisible,
diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx
index d371853d9b..fccadc77eb 100644
--- a/src/select-input/useSingle.tsx
+++ b/src/select-input/useSingle.tsx
@@ -27,6 +27,7 @@ const COMMON_PROPERTIES = [
   'onEnter',
   'onMouseenter',
   'onMouseleave',
+  'size',
 ];
 
 const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
index b7901560c9..9c108fc202 100644
--- a/src/tag-input/tag-input.en-US.md
+++ b/src/tag-input/tag-input.en-US.md
@@ -24,7 +24,7 @@ minCollapsedNum | Number | 0 | \- | N
 placeholder | String | undefined | placeholder description | N
 prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | \- | N
-size | String | medium | options: small/medium/large | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
index 6f9035349f..048389ecac 100644
--- a/src/tag-input/tag-input.md
+++ b/src/tag-input/tag-input.md
@@ -24,7 +24,7 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的
 placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N
-size | String | medium | 尺寸。可选项：small/medium/large | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
index 63cdc4925a..f7ebb16022 100644
--- a/src/tag-input/type.ts
+++ b/src/tag-input/type.ts
@@ -6,7 +6,7 @@
 
 import { InputProps } from '../input';
 import { TagProps } from '../tag';
-import { TNode, TElement } from '../common';
+import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdTagInputProps {
@@ -89,10 +89,10 @@ export interface TdTagInputProps {
    */
   readonly?: boolean;
   /**
-   * 尺寸
+   * 组件尺寸
    * @default medium
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: SizeEnum;
   /**
    * 输入框状态
    */

From 64000fbb2ebf1486eb7f0466f90a48f9b64f44c1 Mon Sep 17 00:00:00 2001
From: kang <kang95630@gmail.com>
Date: Tue, 14 May 2024 23:43:21 +0800
Subject: [PATCH 12/20] fix(treeselect): fix keys not pass pass through to
 default tree store (#2896)

---
 src/tree-select/TreeSelect.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/tree-select/TreeSelect.tsx b/src/tree-select/TreeSelect.tsx
index d87d0c6660..4adef34d4f 100644
--- a/src/tree-select/TreeSelect.tsx
+++ b/src/tree-select/TreeSelect.tsx
@@ -92,7 +92,19 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     [props.keys],
   );
 
-  const { normalizeValue, formatValue, getNodeItem } = useTreeSelectUtils(props, treeRef);
+  const passThroughDefaultStore = useMemo<TreeSelectProps>(
+    () => ({
+      data,
+      treeProps: {
+        keys: tKeys,
+        ...treeProps,
+      },
+      valueType,
+    }),
+    [tKeys, data, treeProps, valueType],
+  );
+
+  const { normalizeValue, formatValue, getNodeItem } = useTreeSelectUtils(passThroughDefaultStore, treeRef);
 
   useImperativeHandle(ref, () => ({
     ...(selectInputRef.current || {}),

From 348aa6185045d980d6f1176788f4d882f0934cc0 Mon Sep 17 00:00:00 2001
From: "Mr.L" <admin@dux.plus>
Date: Wed, 15 May 2024 11:44:30 +0800
Subject: [PATCH 13/20] fix(Table): fix error occur when table is unmounted

---
 src/table/hooks/useRowSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx
index 6e3a34ca2a..94db1f483f 100644
--- a/src/table/hooks/useRowSelect.tsx
+++ b/src/table/hooks/useRowSelect.tsx
@@ -37,7 +37,7 @@ export default function useRowSelect(
 
   const canSelectedRows = useMemo(() => {
     const currentData = reserveSelectedRowOnPaginate ? data : currentPaginateData;
-    return currentData.filter((row, rowIndex): boolean => !isDisabled(row, rowIndex));
+    return currentData?.filter((row, rowIndex): boolean => !isDisabled(row, rowIndex)) || [];
     // eslint-disable-next-line
   }, [reserveSelectedRowOnPaginate, data, currentPaginateData]);
 

From 2d24c501a1f5da170b72f6ad38052aebe482b0ed Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Wed, 15 May 2024 17:59:51 +0800
Subject: [PATCH 14/20] fix(Upload): fix manual uploadFilePercent not update
 display (#2901)

Co-authored-by: Heising <heising@travelconnect.cn>
---
 src/upload/hooks/useUpload.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/upload/hooks/useUpload.ts b/src/upload/hooks/useUpload.ts
index 5ac22f263e..f5e842e61d 100644
--- a/src/upload/hooks/useUpload.ts
+++ b/src/upload/hooks/useUpload.ts
@@ -28,6 +28,7 @@ export default function useUpload(props: TdUploadProps) {
   const xhrReq = useRef<{ files: UploadFile[]; xhrReq: XMLHttpRequest }[]>([]);
   const [toUploadFiles, setToUploadFiles] = useState<UploadFile[]>([]);
   const [sizeOverLimitMessage, setSizeOverLimitMessage] = useState('');
+  const [update, forceUpdate] = useState({});
 
   const locale = useMemo(() => merge({}, globalLocale, props.locale), [globalLocale, props.locale]);
 
@@ -59,7 +60,7 @@ export default function useUpload(props: TdUploadProps) {
       isBatchUpload,
     });
     setDisplayFiles(files);
-  }, [props.multiple, toUploadFiles, uploadValue, autoUpload, isBatchUpload]);
+  }, [props.multiple, toUploadFiles, uploadValue, autoUpload, isBatchUpload, update]);
 
   const uploadFilePercent = (params: { file: UploadFile; percent: number }) => {
     const { file, percent } = params;
@@ -71,6 +72,11 @@ export default function useUpload(props: TdUploadProps) {
     } else {
       const index = uploadValue.findIndex((item) => file.raw === item.raw);
       uploadValue[index] = { ...uploadValue[index], percent };
+      /**
+       * 使用强制更新，修复手动自定义上传的percent无效
+       * https://github.com/Tencent/tdesign-react/issues/2893
+       */
+      forceUpdate({});
     }
   };
 

From 51adf13fc676ae8861a03d587f12e9ff94c215e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Thu, 16 May 2024 10:38:07 +0800
Subject: [PATCH 15/20] fix(Select): fix reserveKeyword render with Option
 children (#2903)

* fix(Select): fix reservekeyword render with Option children

* chore: fix
---
 src/select/base/Select.tsx     |  4 ++--
 src/select/hooks/useOptions.ts | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
index d251050c34..ea8917a666 100644
--- a/src/select/base/Select.tsx
+++ b/src/select/base/Select.tsx
@@ -116,6 +116,7 @@ const Select = forwardRefWithStatics(
       children,
       valueType,
       value,
+      reserveKeyword,
     );
 
     const selectedLabel = useMemo(() => {
@@ -222,7 +223,6 @@ const Select = forwardRefWithStatics(
       if (filterable && isFunction(onSearch)) {
         return;
       }
-
       if (!value) {
         setCurrentOptions(tmpPropOptions);
         return;
@@ -275,7 +275,7 @@ const Select = forwardRefWithStatics(
         handleFilter(String(inputValue));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue]);
+    }, [inputValue, tmpPropOptions]);
 
     // 渲染后置图标
     const renderSuffixIcon = () => {
diff --git a/src/select/hooks/useOptions.ts b/src/select/hooks/useOptions.ts
index 99868eaa7d..60dc6443a0 100644
--- a/src/select/hooks/useOptions.ts
+++ b/src/select/hooks/useOptions.ts
@@ -11,6 +11,7 @@ function UseOptions(
   children: ReactNode,
   valueType: 'object' | 'value',
   value: SelectValue<SelectOption>,
+  reserveKeyword: boolean,
 ) {
   const [valueToOption, setValueToOption] = useState({});
   const [currentOptions, setCurrentOptions] = useState([]);
@@ -22,9 +23,9 @@ function UseOptions(
     let transformedOptions = options;
 
     const arrayChildren = React.Children.toArray(children);
-    const isChildrenFilterable =
-      arrayChildren.length > 0 &&
-      arrayChildren.filter((v: ReactElement) => v.type === Option).length === arrayChildren.length;
+    const optionChildren = arrayChildren.filter((v: ReactElement) => v.type === Option);
+    const isChildrenFilterable = arrayChildren.length > 0 && optionChildren.length === arrayChildren.length;
+    if (reserveKeyword && currentOptions.length && isChildrenFilterable) return;
 
     if (isChildrenFilterable) {
       transformedOptions = arrayChildren?.map<SelectOption>((v) => {
@@ -49,7 +50,8 @@ function UseOptions(
     setTmpPropOptions(transformedOptions);
 
     setValueToOption(getValueToOption(children as ReactElement, options as any, keys) || {});
-  }, [options, keys, children]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options, keys, children, reserveKeyword]);
 
   // 同步 value 对应的 options
   useEffect(() => {

From 610c0d7c173bdd3aa2aa1c740604f069f6fe7576 Mon Sep 17 00:00:00 2001
From: kang <kang95630@gmail.com>
Date: Thu, 16 May 2024 11:18:49 +0800
Subject: [PATCH 16/20] feature: timepicker support onPick and presets features
 (#2902)

* fix(timepicker): steps filter should make sure number compare

* docs(timepicker): timepicker presets demo

* feat(timepicker): timepicker sync from vue-next, support onPick and presets features

* fix(timepicker): remove useCallback

* fix(timepicker): code review problem fix

* test(timepicker): update snapshot for preset example

* feat(timepicker): using type import

* test(timepicker): add time-picker preset test case
---
 src/time-picker/TimePicker.tsx                |  26 +-
 src/time-picker/TimeRangePicker.tsx           |  56 ++-
 .../__tests__/time-picker.test.tsx            |  63 +++-
 src/time-picker/_example/hms.jsx              |  19 +-
 src/time-picker/_example/presets.jsx          |  33 ++
 src/time-picker/panel/SinglePanel.tsx         |   4 +-
 src/time-picker/panel/TimePickerPanel.tsx     |  75 +++-
 test/snap/__snapshots__/csr.test.jsx.snap     | 329 ++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap     |   2 +
 9 files changed, 566 insertions(+), 41 deletions(-)
 create mode 100644 src/time-picker/_example/presets.jsx

diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
index 25b2d67968..cbbec25f52 100644
--- a/src/time-picker/TimePicker.tsx
+++ b/src/time-picker/TimePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, Ref, useEffect } from 'react';
+import React, { useState, Ref } from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -10,9 +10,11 @@ import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import noop from '../_util/noop';
 
-import SelectInput, { SelectInputProps, SelectInputValueChangeContext } from '../select-input';
+import SelectInput from '../select-input';
+import type { SelectInputProps, SelectInputValueChangeContext } from '../select-input';
 import TimeRangePicker from './TimeRangePicker';
 import TimePickerPanel from './panel/TimePickerPanel';
+import type { TimePickerPanelProps } from './panel/TimePickerPanel';
 
 import { useTimePickerTextConfig } from './hooks/useTimePickerTextConfig';
 import { formatInputValue, validateInputValue } from '../_common/js/time-picker/utils';
@@ -49,6 +51,7 @@ const TimePicker = forwardRefWithStatics(
       onFocus = noop,
       onOpen = noop,
       onInput = noop,
+      onPick = noop,
     } = props;
 
     const [value, onChange] = useControlled(props, 'value', props.onChange);
@@ -65,8 +68,13 @@ const TimePicker = forwardRefWithStatics(
       [`${classPrefix}-is-focused`]: isPanelShowed,
     });
 
-    const handleShowPopup = (visible: boolean, context: { e: React.MouseEvent<HTMLDivElement, MouseEvent> }) => {
+    const effectVisibleCurrentValue = (visible: boolean) => {
       setPanelShow(visible);
+      setCurrentValue(visible ? value ?? '' : '');
+    };
+
+    const handleShowPopup = (visible: boolean, context: { e: React.MouseEvent<HTMLDivElement, MouseEvent> }) => {
+      effectVisibleCurrentValue(visible);
       visible ? onOpen(context) : onClose(context); // trigger on-open and on-close
     };
 
@@ -97,12 +105,13 @@ const TimePicker = forwardRefWithStatics(
     const handleClickConfirm = () => {
       const isValidTime = validateInputValue(currentValue, format);
       if (isValidTime) onChange(currentValue);
-      setPanelShow(false);
+      effectVisibleCurrentValue(false);
     };
 
-    useEffect(() => {
-      setCurrentValue(isPanelShowed ? value ?? '' : '');
-    }, [isPanelShowed, value]);
+    const handlePanelChange: TimePickerPanelProps['onChange'] = (v, ctx) => {
+      setCurrentValue(v);
+      onPick?.(v, ctx);
+    };
 
     return (
       <div className={classNames(name, className)} ref={ref} style={style}>
@@ -134,10 +143,11 @@ const TimePicker = forwardRefWithStatics(
               isFooterDisplay={true}
               isShowPanel={isPanelShowed}
               disableTime={disableTime}
-              onChange={setCurrentValue}
+              onChange={handlePanelChange}
               onPick={props.onPick}
               hideDisabledTime={hideDisabledTime}
               handleConfirmClick={handleClickConfirm}
+              presets={props.presets}
             />
           }
         />
diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx
index 3c49318a63..b92d26264d 100644
--- a/src/time-picker/TimeRangePicker.tsx
+++ b/src/time-picker/TimeRangePicker.tsx
@@ -2,11 +2,13 @@ import React, { FC, useState, useEffect } from 'react';
 import classNames from 'classnames';
 
 import { TimeIcon as TdTimeIcon } from 'tdesign-icons-react';
+import isArray from 'lodash/isArray';
 import noop from '../_util/noop';
 import useControlled from '../hooks/useControlled';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
-import { RangeInputPopup, RangeInputPosition } from '../range-input';
+import { RangeInputPopup } from '../range-input';
+import type { RangeInputPopupProps, RangeInputPosition } from '../range-input';
 import TimePickerPanel from './panel/TimePickerPanel';
 
 import { useTimePickerTextConfig } from './hooks/useTimePickerTextConfig';
@@ -20,7 +22,9 @@ import useDefaultProps from '../hooks/useDefaultProps';
 
 export interface TimeRangePickerProps extends TdTimeRangePickerProps, StyledProps {}
 
-const defaultArrVal = [undefined, undefined];
+function handlePositionTrans(income: RangeInputPosition): TimeRangePickerPartial {
+  return income === 'first' ? 'start' : 'end';
+}
 
 const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
   const props = useDefaultProps<TimeRangePickerProps>(originalProps, timeRangePickerDefaultProps);
@@ -41,6 +45,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
     onInput = noop,
     style,
     className,
+    presets,
   } = props;
 
   const [value, onChange] = useControlled(props, 'value', props.onChange);
@@ -59,26 +64,48 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
     [`${classPrefix}-is-focused`]: isPanelShowed,
   });
 
-  const handleShowPopup = (visible: boolean) => {
+  const handleShowPopup: RangeInputPopupProps['onPopupVisibleChange'] = (visible, { trigger }) => {
+    if (trigger === 'trigger-element-click') {
+      setPanelShow(true);
+      return;
+    }
     setPanelShow(visible);
   };
 
+  function handlePickerValue(pickValue: string | string[], currentValue: string[]) {
+    if (Array.isArray(pickValue)) return pickValue;
+    return currentPanelIdx === 0
+      ? [pickValue, currentValue[1] ?? pickValue]
+      : [currentValue[0] ?? pickValue, pickValue];
+  }
+
+  const handleOnPick = (pickValue: string[], e: { e: React.MouseEvent }) => {
+    let context;
+    if (isArray(pickValue)) {
+      context = { e };
+    } else if (currentPanelIdx.value === 0) {
+      context = { e, position: 'start' as TimeRangePickerPartial };
+    } else {
+      context = { e, position: 'end' as TimeRangePickerPartial };
+    }
+    props.onPick?.(pickValue, context);
+  };
+
   const handleClear = (context: { e: React.MouseEvent }) => {
     const { e } = context;
     e.stopPropagation();
     onChange(undefined);
+    setCurrentValue(TIME_PICKER_EMPTY);
   };
 
   const handleClick = ({ position }: { position: 'first' | 'second' }) => {
     setCurrentPanelIdx(position === 'first' ? 0 : 1);
   };
 
-  const handleTimeChange = (newValue: string) => {
-    if (currentPanelIdx === 0) {
-      setCurrentValue([newValue, currentValue[1] ?? newValue]);
-    } else {
-      setCurrentValue([currentValue[0] ?? newValue, newValue]);
-    }
+  const handleTimeChange = (newValue: string | string[], context: { e: React.MouseEvent }) => {
+    const nextCurrentValue = handlePickerValue(newValue, currentValue);
+    setCurrentValue(nextCurrentValue);
+    handleOnPick(nextCurrentValue, context);
   };
 
   const handleInputBlur = (value: TimeRangeValue, { e }: { e: React.FocusEvent<HTMLInputElement> }) => {
@@ -99,7 +126,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
     { e, position }: { e: React.FocusEvent<HTMLInputElement>; position: RangeInputPosition },
   ) => {
     setCurrentValue(inputVal);
-    onInput({ value, e, position: position as TimeRangePickerPartial });
+    onInput({ value, e, position: handlePositionTrans(position) });
   };
 
   const handleClickConfirm = () => {
@@ -112,11 +139,12 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
     value: TimeRangeValue,
     { e, position }: { e: React.FocusEvent<HTMLInputElement>; position: RangeInputPosition },
   ) => {
-    onFocus({ value, e, position: position as TimeRangePickerPartial });
+    onFocus({ value, e, position: handlePositionTrans(position) });
   };
 
   useEffect(() => {
-    setCurrentValue(isPanelShowed ? value ?? TIME_PICKER_EMPTY : defaultArrVal);
+    // to fix the effect trigger before input blur
+    setCurrentValue(isPanelShowed ? value ?? TIME_PICKER_EMPTY : TIME_PICKER_EMPTY);
     if (!isPanelShowed) setCurrentPanelIdx(undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isPanelShowed]);
@@ -136,7 +164,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
           ...props.popupProps,
         }}
         onInputChange={handleInputChange}
-        inputValue={isPanelShowed ? currentValue : value ?? defaultArrVal}
+        inputValue={isPanelShowed ? currentValue : value ?? TIME_PICKER_EMPTY}
         rangeInputProps={{
           size,
           clearable,
@@ -166,6 +194,8 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
             onChange={handleTimeChange}
             handleConfirmClick={handleClickConfirm}
             position={currentPanelIdx === 0 ? 'start' : 'end'}
+            activeIndex={currentPanelIdx}
+            presets={presets}
           />
         }
       />
diff --git a/src/time-picker/__tests__/time-picker.test.tsx b/src/time-picker/__tests__/time-picker.test.tsx
index 86357a1122..07a3444148 100644
--- a/src/time-picker/__tests__/time-picker.test.tsx
+++ b/src/time-picker/__tests__/time-picker.test.tsx
@@ -1,6 +1,6 @@
 import MockDate from 'mockdate';
-import { fireEvent, render, waitFor, vi } from '@test/utils';
-import React from 'react';
+import { fireEvent, render, waitFor, vi, mockDelay } from '@test/utils';
+import React, { useState } from 'react';
 import TimePicker from '../index';
 
 // 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
@@ -129,10 +129,67 @@ describe('Timepicker 组件测试', () => {
       const panelItem1 = document.querySelectorAll('.t-time-picker__panel-body-scroll').item(0);
       fireEvent.click(panelItem1.querySelectorAll('.t-time-picker__panel-body-scroll-item').item(1));
 
-      expect(handlePick).toHaveBeenCalled(1);
+      expect(handlePick).toHaveBeenCalled();
       fireEvent.click(confirmBtn);
       // expect(container.querySelectorAll('input').item(0)).toHaveValue('01:00:00');
       // expect(handleChange).toHaveBeenCalled(1);
     });
   });
+
+  test('TimePicker presets test', async () => {
+    const date = '20:00:00';
+    const { container, getByText } = render(
+      <TimePicker
+        value={date}
+        presets={{
+          此刻: '11:00:00',
+        }}
+        clearable
+      />,
+    );
+
+    fireEvent.click(document.querySelector('.t-input'));
+    await mockDelay();
+    fireEvent.click(getByText('此刻'));
+    fireEvent.click(getByText('确定'));
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.item(0).value).toBe(date);
+  });
+
+  test('TimeRangePick presets test', async () => {
+    const date = ['11:00:00', '12:00:00'];
+    const defaultValue = ['00:00:01', '00:00:02'];
+
+    const RangePicker = () => {
+      const [value, setValue] = useState(defaultValue);
+      const onChange = (value) => {
+        setValue(value);
+      };
+
+      return (
+        <TimePicker.TimeRangePicker
+          value={value}
+          onChange={onChange}
+          allow-input
+          presets={{
+            此刻: ['11:00:00', '12:00:00'],
+          }}
+          format="HH:mm:ss"
+          clearable
+        />
+      );
+    };
+    const { getByText } = render(<RangePicker />);
+    fireEvent.click(document.querySelectorAll('input').item(0));
+    await mockDelay();
+    fireEvent.click(getByText('此刻'));
+    fireEvent.click(document.querySelectorAll('input').item(1));
+    await mockDelay();
+    fireEvent.click(getByText('此刻'));
+    fireEvent.click(getByText('确定'));
+    const inputs = document.querySelectorAll('input');
+    expect(inputs.item(0).value).toBe(date[0]);
+    expect(inputs.item(1).value).toBe(date[1]);
+  });
 });
diff --git a/src/time-picker/_example/hms.jsx b/src/time-picker/_example/hms.jsx
index 116f2dfc08..8d902eb854 100644
--- a/src/time-picker/_example/hms.jsx
+++ b/src/time-picker/_example/hms.jsx
@@ -5,6 +5,7 @@ export default function BasicTimePicker() {
   const [value, setValue] = useState('12:00:00');
 
   const handleValueChange = (v) => {
+    console.log('change', v);
     setValue(v);
   };
 
@@ -12,5 +13,21 @@ export default function BasicTimePicker() {
     console.log('onPick', v, context);
   };
 
-  return <TimePicker value={value} onChange={handleValueChange} onPick={handleOnPick} />;
+  const handleClose = () => {
+    console.log('close');
+  };
+
+  const handleOpen = () => {
+    console.log('open');
+  };
+
+  return (
+    <TimePicker
+      value={value}
+      onChange={handleValueChange}
+      onPick={handleOnPick}
+      onClose={handleClose}
+      onOpen={handleOpen}
+    />
+  );
 }
diff --git a/src/time-picker/_example/presets.jsx b/src/time-picker/_example/presets.jsx
new file mode 100644
index 0000000000..778057a333
--- /dev/null
+++ b/src/time-picker/_example/presets.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { TimePicker, Space } from 'tdesign-react';
+
+const { TimeRangePicker } = TimePicker;
+
+export default function RangeTimePicker() {
+  const [time1, setTime1] = useState('20:22');
+  const [time2, setTime2] = useState(['00:00:00', '23:59:59']);
+  return (
+    <Space direction="vertical">
+      <TimePicker
+        value={time1}
+        onChange={setTime1}
+        presets={{
+          上午十一点: '11:00:00',
+        }}
+        clearable
+      />
+
+      <TimeRangePicker
+        value={time2}
+        onChange={setTime2}
+        style={{ marginTop: '20px' }}
+        clearable
+        format="HH:mm:ss"
+        allow-input
+        presets={{
+          下午: ['13:00:00', '18:00:00'],
+        }}
+      />
+    </Space>
+  );
+}
diff --git a/src/time-picker/panel/SinglePanel.tsx b/src/time-picker/panel/SinglePanel.tsx
index cf2e8d2634..82a13df920 100644
--- a/src/time-picker/panel/SinglePanel.tsx
+++ b/src/time-picker/panel/SinglePanel.tsx
@@ -80,7 +80,7 @@ const SinglePanel: FC<SinglePanelProps> = (props) => {
   const maskRef = useRef(null);
 
   const dayjsValue = useMemo(() => {
-    const isStepsSet = !!steps.filter((v) => v > 1).length;
+    const isStepsSet = !!steps.filter((v) => Number(v) > 1).length;
 
     if (value) return dayjs(value, format);
 
@@ -292,7 +292,7 @@ const SinglePanel: FC<SinglePanelProps> = (props) => {
   const updateTimeScrollPos = useCallback(
     (isAutoScroll = false) => {
       const behavior = value && !isAutoScroll ? 'smooth' : 'auto';
-      const isStepsSet = !!steps.filter((v) => v > 1).length;
+      const isStepsSet = !!steps.filter((v) => Number(v) > 1).length;
 
       cols.forEach((col: EPickerCols, idx: number) => {
         if (!isStepsSet || (isStepsSet && value)) {
diff --git a/src/time-picker/panel/TimePickerPanel.tsx b/src/time-picker/panel/TimePickerPanel.tsx
index a7a77d3271..819e280c65 100644
--- a/src/time-picker/panel/TimePickerPanel.tsx
+++ b/src/time-picker/panel/TimePickerPanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useState, MouseEvent } from 'react';
+import React, { FC, useEffect, useMemo, useState, useCallback } from 'react';
 import dayjs from 'dayjs';
 import SinglePanel, { SinglePanelProps } from './SinglePanel';
 
@@ -7,13 +7,20 @@ import Button from '../../button';
 
 import { useTimePickerTextConfig } from '../hooks/useTimePickerTextConfig';
 import { DEFAULT_STEPS, DEFAULT_FORMAT } from '../../_common/js/time-picker/const';
+import type { TimePickerProps } from '../TimePicker';
+import type { TimeRangePickerProps } from '../TimeRangePicker';
+import log from '../../_common/js/log';
 
 export interface TimePickerPanelProps extends SinglePanelProps {
   isShowPanel?: boolean;
   isFooterDisplay?: boolean; // 是否展示footer
   handleConfirmClick?: (defaultValue: dayjs.Dayjs | string) => void;
+  presets?: TimePickerProps['presets'] | TimeRangePickerProps['presets'];
+  activeIndex?: number;
 }
 
+type PresetValue = TimePickerPanelProps['presets'][keyof TimePickerPanelProps['presets']];
+
 const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
   const {
     format = DEFAULT_FORMAT,
@@ -23,6 +30,7 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
     onChange,
     value,
     isShowPanel = true,
+    presets = null,
   } = props;
   const [triggerScroll, toggleTriggerScroll] = useState(false); // 触发滚动
   const { classPrefix } = useConfig();
@@ -30,7 +38,7 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
   const TEXT_CONFIG = useTimePickerTextConfig();
 
   const panelClassName = `${classPrefix}-time-picker__panel`;
-  const showNowTimeBtn = !!steps.filter((v) => v > 1).length;
+  const showNowTimeBtn = !!steps.filter((v) => Number(v) > 1).length;
 
   const defaultValue = useMemo(() => {
     const formattedValue = dayjs(value, format);
@@ -45,9 +53,52 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
     if (isShowPanel) toggleTriggerScroll(true);
   }, [isShowPanel]);
 
-  const handleOnChange = (v: string, e: MouseEvent<HTMLDivElement>) => {
-    props.onChange(v);
-    props.onPick?.(v, { e });
+  const resetTriggerScroll = useCallback(() => {
+    toggleTriggerScroll(false);
+  }, [toggleTriggerScroll]);
+
+  const handlePresetClick = (presetValue: PresetValue) => {
+    const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
+    if (typeof props.activeIndex === 'number') {
+      if (Array.isArray(presetVal)) {
+        props.onChange?.(presetVal[props.activeIndex]);
+      } else {
+        log.error('TimePicker', `preset: ${presets} 预设值必须是数组!`);
+      }
+    } else {
+      props.onChange?.(presetVal);
+    }
+  };
+
+  const renderFooter = () => {
+    if (presets) {
+      return Object.keys(presets).map((preset) => (
+        <Button
+          key={preset}
+          theme="primary"
+          size="small"
+          variant="text"
+          onClick={() => {
+            handlePresetClick(presets[preset]);
+          }}
+        >
+          {preset}
+        </Button>
+      ));
+    }
+
+    return !showNowTimeBtn ? (
+      <Button
+        theme="primary"
+        variant="text"
+        size="small"
+        onClick={() => {
+          onChange?.(dayjs().format(format));
+        }}
+      >
+        {TEXT_CONFIG.nowTime}
+      </Button>
+    ) : null;
   };
 
   return (
@@ -55,33 +106,29 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
       <div className={`${panelClassName}-section-body`}>
         <SinglePanel
           {...props}
-          onChange={handleOnChange}
+          onChange={onChange}
           format={format}
           steps={steps}
           value={dayjs(value, format).isValid() ? value : defaultValue}
           triggerScroll={triggerScroll}
           isVisible={isShowPanel}
-          resetTriggerScroll={() => toggleTriggerScroll(false)}
+          resetTriggerScroll={resetTriggerScroll}
         />
       </div>
       {isFooterDisplay ? (
         <div className={`${panelClassName}-section-footer`}>
           <Button
+            size="small"
             theme="primary"
             variant="base"
             disabled={!props.value}
             onClick={() => {
-              handleConfirmClick(defaultValue);
+              handleConfirmClick?.(defaultValue);
             }}
-            size="small"
           >
             {TEXT_CONFIG.confirm}
           </Button>
-          {!showNowTimeBtn ? (
-            <Button theme="primary" variant="text" size="small" onClick={() => onChange(dayjs().format(format))}>
-              {TEXT_CONFIG.nowTime}
-            </Button>
-          ) : null}
+          {renderFooter()}
         </div>
       ) : null}
     </div>
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 90a7ee2173..cc87e965fe 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -280326,6 +280326,333 @@ exports[`csr snapshot test > csr test src/time-picker/_example/panel.jsx 1`] = `
 }
 `;
 
+exports[`csr snapshot test > csr test src/time-picker/_example/presets.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <div
+        class="t-space t-space-vertical"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-time-picker"
+          >
+            <div
+              class="t-time-picker__group t-select-input"
+            >
+              <div
+                class="t-input__wrap"
+                value="20:22"
+              >
+                <div
+                  class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"
+                >
+                  <div
+                    class="t-input__prefix"
+                  />
+                  <input
+                    class="t-input__inner"
+                    placeholder="please enter"
+                    readonly=""
+                    type="text"
+                    value="20:22"
+                  />
+                  <span
+                    class="t-input__suffix t-input__suffix-icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-time"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-time-picker"
+            style="margin-top: 20px;"
+          >
+            <div
+              class="t-range-input-popup t-range-input-popup"
+              style="margin-top: 20px;"
+            >
+              <div
+                class="t-range-input t-time-picker__group t-is-default t-range-input--suffix"
+                value="00:00:00,23:59:59"
+              >
+                <div
+                  class="t-range-input__inner"
+                >
+                  <div
+                    class="t-input__wrap t-range-input__inner-left"
+                    value="00:00:00"
+                  >
+                    <div
+                      class="t-input t-is-readonly t-align-left"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="select time"
+                        readonly=""
+                        type="text"
+                        value="00:00:00"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="t-range-input__inner-separator"
+                  >
+                    -
+                  </div>
+                  <div
+                    class="t-input__wrap t-range-input__inner-right"
+                    value="23:59:59"
+                  >
+                    <div
+                      class="t-input t-is-readonly t-align-left"
+                    >
+                      <input
+                        class="t-input__inner"
+                        placeholder="select time"
+                        readonly=""
+                        type="text"
+                        value="23:59:59"
+                      />
+                    </div>
+                  </div>
+                  <span
+                    class="t-range-input__suffix t-range-input__suffix-icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-time"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-space t-space-vertical"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-time-picker"
+        >
+          <div
+            class="t-time-picker__group t-select-input"
+          >
+            <div
+              class="t-input__wrap"
+              value="20:22"
+            >
+              <div
+                class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"
+              >
+                <div
+                  class="t-input__prefix"
+                />
+                <input
+                  class="t-input__inner"
+                  placeholder="please enter"
+                  readonly=""
+                  type="text"
+                  value="20:22"
+                />
+                <span
+                  class="t-input__suffix t-input__suffix-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-time"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-time-picker"
+          style="margin-top: 20px;"
+        >
+          <div
+            class="t-range-input-popup t-range-input-popup"
+            style="margin-top: 20px;"
+          >
+            <div
+              class="t-range-input t-time-picker__group t-is-default t-range-input--suffix"
+              value="00:00:00,23:59:59"
+            >
+              <div
+                class="t-range-input__inner"
+              >
+                <div
+                  class="t-input__wrap t-range-input__inner-left"
+                  value="00:00:00"
+                >
+                  <div
+                    class="t-input t-is-readonly t-align-left"
+                  >
+                    <input
+                      class="t-input__inner"
+                      placeholder="select time"
+                      readonly=""
+                      type="text"
+                      value="00:00:00"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="t-range-input__inner-separator"
+                >
+                  -
+                </div>
+                <div
+                  class="t-input__wrap t-range-input__inner-right"
+                  value="23:59:59"
+                >
+                  <div
+                    class="t-input t-is-readonly t-align-left"
+                  >
+                    <input
+                      class="t-input__inner"
+                      placeholder="select time"
+                      readonly=""
+                      type="text"
+                      value="23:59:59"
+                    />
+                  </div>
+                </div>
+                <span
+                  class="t-range-input__suffix t-range-input__suffix-icon"
+                >
+                  <svg
+                    class="t-icon t-icon-time"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`csr snapshot test > csr test src/time-picker/_example/range.jsx 1`] = `
 {
   "asFragment": [Function],
@@ -306053,6 +306380,8 @@ exports[`ssr snapshot test > ssr test src/time-picker/_example/keyboard.jsx 1`]
 
 exports[`ssr snapshot test > ssr test src/time-picker/_example/panel.jsx 1`] = `"<div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/time-picker/_example/presets.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-time-picker__group t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"20:22\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"20:22\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\" style=\\"margin-top:20px\\"><div style=\\"margin-top:20px\\" class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-time-picker__group t-is-default t-range-input--suffix\\" value=\\"00:00:00,23:59:59\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\" value=\\"00:00:00\\"><div class=\\"t-input t-is-readonly t-align-left\\"><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"00:00:00\\"/></div></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\" value=\\"23:59:59\\"><div class=\\"t-input t-is-readonly t-align-left\\"><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"23:59:59\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/time-picker/_example/range.jsx 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-time-picker__group t-is-default t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"开始时间\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"结束时间\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/time-picker/_example/show-steps.jsx 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-time-picker__group t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 2d1010539b..c4162eb687 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1068,6 +1068,8 @@ exports[`ssr snapshot test > ssr test src/time-picker/_example/keyboard.jsx 1`]
 
 exports[`ssr snapshot test > ssr test src/time-picker/_example/panel.jsx 1`] = `"<div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/time-picker/_example/presets.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-time-picker__group t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"20:22\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"20:22\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\" style=\\"margin-top:20px\\"><div style=\\"margin-top:20px\\" class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-time-picker__group t-is-default t-range-input--suffix\\" value=\\"00:00:00,23:59:59\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\" value=\\"00:00:00\\"><div class=\\"t-input t-is-readonly t-align-left\\"><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"00:00:00\\"/></div></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\" value=\\"23:59:59\\"><div class=\\"t-input t-is-readonly t-align-left\\"><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"23:59:59\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/time-picker/_example/range.jsx 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-time-picker__group t-is-default t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"开始时间\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\">-</div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"结束时间\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/time-picker/_example/show-steps.jsx 1`] = `"<div class=\\"t-time-picker\\"><div class=\\"t-time-picker__group t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select time\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-8 4.41l-4-4V5.5h2v6.09L16.41 15 15 16.41z\\"></path></svg></span></div></div></div></div>"`;

From bee83d4314b5b625b936552952d466db094f82f1 Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Thu, 16 May 2024 14:26:18 +0800
Subject: [PATCH 17/20] fix(Form): formitem change not trigger useWatch of
 formlist (#2904)

* fix(Form): formitem change not trigger useWatch of formlist

* chore: rm redundant console

---------

Co-authored-by: Heising <heising@travelconnect.cn>
---
 src/form/FormItem.tsx      |  2 +-
 src/form/hooks/useWatch.ts | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/form/FormItem.tsx b/src/form/FormItem.tsx
index bc4fc7338b..0edcfe29fe 100644
--- a/src/form/FormItem.tsx
+++ b/src/form/FormItem.tsx
@@ -456,7 +456,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
 
     filterRules.length && validate('change');
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formValue]);
+  }, [formValue, name]);
 
   // 暴露 ref 实例方法
   const instance: FormItemInstance = {
diff --git a/src/form/hooks/useWatch.ts b/src/form/hooks/useWatch.ts
index ad77fbf34b..725fc12814 100644
--- a/src/form/hooks/useWatch.ts
+++ b/src/form/hooks/useWatch.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import get from 'lodash/get';
+import isUndefined from 'lodash/isUndefined';
 import type { NamePath } from '../type';
 import type { InternalFormInstance } from './interface';
 import { HOOK_MARK } from './useForm';
@@ -18,8 +19,7 @@ export default function useWatch(name: NamePath, form: InternalFormInstance) {
 
     const { registerWatch = noop } = form.getInternalHooks?.(HOOK_MARK);
 
-    const cancelRegister = registerWatch((_values, paths) => {
-      if (String(name) !== String(paths)) return;
+    const cancelRegister = registerWatch(() => {
       const allFieldsValue = form.getFieldsValue?.(true);
       const newValue = get(allFieldsValue, name);
       const nextValueStr = JSON.stringify(newValue);
@@ -27,17 +27,17 @@ export default function useWatch(name: NamePath, form: InternalFormInstance) {
       // Compare stringify in case it's nest object
       if (valueStrRef.current !== nextValueStr) {
         valueStrRef.current = nextValueStr;
-        setValue(newValue);
+        setValue(nextValueStr);
       }
     });
 
     const allFieldsValue = form.getFieldsValue?.(true);
     const initialValue = get(allFieldsValue, name);
-    setValue(initialValue);
+    setValue(JSON.stringify(initialValue));
 
     return cancelRegister;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return value;
+  return isUndefined(value) ? value : JSON.parse(value);
 }

From 58764be35e59a318530ed9cac963a7655ee4aa39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Thu, 16 May 2024 15:23:21 +0800
Subject: [PATCH 18/20] chore: update common to synchronize style fix (#2905)

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index e398021dac..9dfe4afe72 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit e398021dac2820995b518c1e64f888818448c287
+Subproject commit 9dfe4afe7214b6dd45678f3350e6270ec98c349b

From 3b985b543daeeae314e5ddaed3b60dc3d6f0d620 Mon Sep 17 00:00:00 2001
From: YiJie <51358815+NWYLZW@users.noreply.github.com>
Date: Thu, 16 May 2024 16:15:03 +0800
Subject: [PATCH 19/20] feat(avatar): more events (#2906)

* feat(avatar): more events

* fix(avatar): typo

* style(avatar): alignment event name style

* Apply suggestions from code review

* chore(avatar): update event description

* style(avatar): simplify
---
 src/avatar/Avatar.tsx      |  6 ++++++
 src/avatar/avatar.en-US.md |  3 +++
 src/avatar/avatar.md       |  3 +++
 src/avatar/type.ts         | 13 +++++++++++++
 4 files changed, 25 insertions(+)

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index 6bbc831432..a2f4751b4e 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -27,6 +27,9 @@ const Avatar = forwardRefWithStatics(
       shape,
       size: avatarSize,
       onError,
+      onClick,
+      onHover,
+      onContextmenu,
       children,
       content,
       style,
@@ -117,6 +120,9 @@ const Avatar = forwardRefWithStatics(
         className={avatarClass}
         style={{ ...numSizeStyle, ...style }}
         {...avatarProps}
+        onClick={(e) => onClick?.({ e })}
+        onMouseEnter={(e) => onHover?.({ e })}
+        onContextMenu={(e) => onContextmenu?.({ e })}
       >
         {renderChildren}
       </div>
diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md
index a2ddd048d0..333a253908 100644
--- a/src/avatar/avatar.en-US.md
+++ b/src/avatar/avatar.en-US.md
@@ -17,6 +17,9 @@ imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./im
 shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
 size | String | - | size | N
 onError | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image load failed | N
+onClick | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on click | N
+onHover | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on hover | N
+onContextmenu | Function |  | Typescript：`(context: { e: React.MouseEvent }) => void`<br/>trigger on right click | N
 
 ### AvatarGroup Props
 
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
index 07ad27d6e9..b2866ebddd 100644
--- a/src/avatar/avatar.md
+++ b/src/avatar/avatar.md
@@ -17,6 +17,9 @@ imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[I
 shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
 onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
+onClick | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>点击时触发 | N
+onHover | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>鼠标移入时触发 | N
+onContextmenu | Function |  | TS 类型：`(context: { e: React.MouseEvent }) => void`<br/>右键点击时触发 | N
 
 ### AvatarGroup Props
 
diff --git a/src/avatar/type.ts b/src/avatar/type.ts
index ee200cb4a3..30fd72703c 100644
--- a/src/avatar/type.ts
+++ b/src/avatar/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { MouseEvent } from 'react';
 import { ImageProps } from '../image';
 import { PopupProps } from '../popup';
 import { TNode, TElement, ImageEvent } from '../common';
@@ -54,6 +55,18 @@ export interface TdAvatarProps {
    * 图片加载失败时触发
    */
   onError?: (context: { e: ImageEvent<HTMLImageElement> }) => void;
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 鼠标移入时触发
+   */
+  onHover?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 右键点击时触发
+   */
+  onContextmenu?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
 }
 
 export interface TdAvatarGroupProps {

From 144de5b7d354f465322ead15a6c7b528958ec76f Mon Sep 17 00:00:00 2001
From: lincao <carolin913@126.com>
Date: Thu, 16 May 2024 04:03:03 -0500
Subject: [PATCH 20/20] chore: release 1.7.1 (#2907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: release 1.7.1

* chore: changelog's changes

* chore: update changelog

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: wū yāng <uyarnchen@gmail.com>
---
 CHANGELOG.md | 37 +++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0475d39e1d..7274d6610e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,43 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.7.1 `2024-05-16`
+
+### 🚀 Features
+
+- `Avatar`: 新增`Click`、`Hover`和`Contextmenu`等鼠标事件，支持对头像操作的场景使用 @NWYLZW ([#2906](https://github.com/Tencent/tdesign-react/pull/2906))
+- `Dialog`: 支持 `setConfirmLoading` 的使用 @ZWkang ([#2883](https://github.com/Tencent/tdesign-react/pull/2883))
+- `SelectInput`: `SelectInput` 支持 `Size` 属性 @HaixingOoO ([#2894](https://github.com/Tencent/tdesign-react/pull/2894))
+- `TimePicker`: 新增支持`onPick`事件 和 `presets` API @ZWkang ([#2902](https://github.com/Tencent/tdesign-react/pull/2902))
+- `Borderless`: `Input`、`AutoComplete`、`ColorPicker`、`DatePicker`、`TagInput`、`TimePicker`新增`borderless` API，支持无边框模式 @uyarn ([#2884](https://github.com/Tencent/tdesign-react/pull/2884)) ([#2878](https://github.com/Tencent/tdesign-react/pull/2878))
+- `Scroll`: 调整`1.6.0`后针对 Chrome 滚动条样式的兼容方法，不依赖`autoprefixer`的版本 @loopzhou ([#2890](https://github.com/Tencent/tdesign-react/pull/2890))
+### 🐞 Bug Fixes
+- `ColorPicker`: 修复切换预览颜色时，通道按钮位置不变的问题 @fennghuang ([#2880](https://github.com/Tencent/tdesign-react/pull/2880))
+- `Form`: 修复由于 `FormItem`的修改，没有触发监听`FormList`的`useWatch`的问题 @HaixingOoO ([#2904](https://github.com/Tencent/tdesign-react/pull/2904))
+- `Menu`: @uyarn 
+  - 修复使用`dist`样式因为样式优先级问题导致子菜单位置偏移的问题 ([#2890](https://github.com/Tencent/tdesign-react/pull/2890))
+  - 提升 `t-popup__menu` 的样式优先级，解决 dist 内样式优先级一致导致样式异常的问题 ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+- `Pagination`: 修复当前页输入小数后没有自动调整的问题 @uyarn ([#2886](https://github.com/Tencent/tdesign-react/pull/2886))
+- `Select`: 
+   - 修复`creatable`功能异常问题 @uyarn ([#2903](https://github.com/Tencent/tdesign-react/pull/2903))
+   - 修复`reserveKeyword`配合`Option Children`用法的异常问题 @uyarn ([#2903](https://github.com/Tencent/tdesign-react/pull/2903))
+   - 优化已选样式覆盖已禁用样式的问题 @fython ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+- `Slider`: 修复 `sliderRef.current` 可能为空的问题 @ZWkang ([#2868](https://github.com/Tencent/tdesign-react/pull/2868))
+- `Table`: 
+  - 修复卸载表格时数据为空导致报错的异常 @duxphp ([#2900](https://github.com/Tencent/tdesign-react/pull/2900))
+  - 修复`1.5.0`版本后部分场景下使用固定列导致异常的问题 @uyarn ([#2889](https://github.com/Tencent/tdesign-react/pull/2889))
+- `TagInput`:
+  - 修复没有透传`tagProps`到折叠选项的问题 @uyarn ([#2869](https://github.com/Tencent/tdesign-react/pull/2869))
+  - 扩展 `collapsedItems` 的删除功能 @HaixingOoO ([#2881](https://github.com/Tencent/tdesign-react/pull/2881))
+- `TreeSelect`: 修复需要通过 `treeProps` 设置 `keys` 属性才生效的问题 @ZWkang ([#2896](https://github.com/Tencent/tdesign-react/pull/2896))
+- `Upload`: 
+  - 修复手动修改上传进度的 bug @HaixingOoO ([#2901](https://github.com/Tencent/tdesign-react/pull/2901))
+  - 修复图片上传错误类型下的样式异常的问题 @uyarn ([#2905](https://github.com/Tencent/tdesign-react/pull/2905))
+### 🚧 Others
+- `TagInput`: 补充`Size`属性的相关文档 @HaixingOoO ([#2894](https://github.com/Tencent/tdesign-react/pull/2894))
+- `Typography`: 删除多余的`defaultProps` @HaixingOoO ([#2866](https://github.com/Tencent/tdesign-react/pull/2866))
+- `Upload`: 修复文档中关于 OPTIONS 方法的说明 @Summer-Shen ([#2865](https://github.com/Tencent/tdesign-react/pull/2865))
+  
 ## 🌈 1.7.0 `2024-04-25` 
 ### 🚀 Features
 - `Typography`: 新增 `Typography` 排版组件 @insekkei ([#2821](https://github.com/Tencent/tdesign-react/pull/2821))
diff --git a/package.json b/package.json
index 976752b65a..62ac67ec61 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",