From 6a7945d2fd2d35cd9c9aa17f5e6c0d36f7342c71 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Thu, 11 Apr 2024 15:29:10 +0800
Subject: [PATCH 1/4] feat: Button support autoInsertSpace prop (#48348)

* feat: Button support autoInsertSpaceInButton prop

* demo: update demo

* fix: fix

* test: add test case

* docs: update docs

* chore: deprecated autoInsertSpaceInButton prop

* Update components/button/button.tsx

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* fix: fix

* Update components/button/button.tsx

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* Update components/button/button.tsx

Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    | 25 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 23 +++++++++++++++++
 components/button/__tests__/index.test.tsx    |  6 +++++
 components/button/button.tsx                  | 15 ++++++-----
 components/button/demo/noSpace.md             |  7 ++++++
 components/button/demo/noSpace.tsx            | 15 +++++++++++
 components/button/index.en-US.md              | 15 ++---------
 components/button/index.zh-CN.md              | 16 +++---------
 .../config-provider/__tests__/index.test.tsx  | 12 ++++++++-
 .../__tests__/useConfig.test.tsx              | 15 +++++++++++
 components/config-provider/context.ts         |  4 ++-
 components/config-provider/index.en-US.md     |  3 +--
 components/config-provider/index.tsx          | 20 ++++++++++++++-
 components/config-provider/index.zh-CN.md     |  3 +--
 14 files changed, 140 insertions(+), 39 deletions(-)
 create mode 100644 components/button/demo/noSpace.md
 create mode 100644 components/button/demo/noSpace.tsx

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index d94a8373dcf0..49edf12208e9 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2776,6 +2776,31 @@ exports[`renders components/button/demo/multiple.tsx extend context correctly 1`
 
 exports[`renders components/button/demo/multiple.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index cd8af88f275e..847c1f1f7325 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -2243,6 +2243,29 @@ exports[`renders components/button/demo/multiple.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/button/demo/noSpace.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div
diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index 3ad957aadf48..4285a847df95 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -442,4 +442,10 @@ describe('Button', () => {
     const { container } = render(<Button type={'' as any} />);
     expect(container.querySelector('.ant-btn-default')).toBeTruthy();
   });
+
+  it('should support autoInsertSpace', () => {
+    const text = '确定';
+    const { container } = render(<Button autoInsertSpace={false}>{text}</Button>);
+    expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe(text);
+  });
 });
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 4a62cc6ef89e..cdd709050088 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -51,6 +51,7 @@ type MergedHTMLAttributes = Omit<
 export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
   href?: string;
   htmlType?: ButtonHTMLType;
+  autoInsertSpace?: boolean;
 }
 
 type LoadingConfigType = {
@@ -98,6 +99,7 @@ const InternalCompoundedButton = React.forwardRef<
     htmlType = 'button',
     classNames: customClassNames,
     style: customStyle = {},
+    autoInsertSpace,
     ...rest
   } = props;
 
@@ -105,7 +107,10 @@ const InternalCompoundedButton = React.forwardRef<
   // Compatible with original `type` behavior
   const mergedType = type || 'default';
 
-  const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
+  const { getPrefixCls, direction, button } = useContext(ConfigContext);
+
+  const mergedInsertSpace = autoInsertSpace ?? button?.autoInsertSpace ?? true;
+
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -151,7 +156,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   useEffect(() => {
     // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !(buttonRef as any).current || autoInsertSpaceInButton === false) {
+    if (!buttonRef || !(buttonRef as any).current || !mergedInsertSpace) {
       return;
     }
     const buttonText = (buttonRef as any).current.textContent;
@@ -190,7 +195,6 @@ const InternalCompoundedButton = React.forwardRef<
     );
   }
 
-  const autoInsertSpace = autoInsertSpaceInButton !== false;
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
@@ -214,7 +218,7 @@ const InternalCompoundedButton = React.forwardRef<
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
       [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(mergedType),
       [`${prefixCls}-loading`]: innerLoading,
-      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace && !innerLoading,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -252,12 +256,11 @@ const InternalCompoundedButton = React.forwardRef<
     );
 
   const kids =
-    children || children === 0 ? spaceChildren(children, needInserted && autoInsertSpace) : null;
+    children || children === 0 ? spaceChildren(children, needInserted && mergedInsertSpace) : null;
 
   const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) => {
     const isRTL = direction === 'rtl';
     const iconFirst = (iconPosition === 'start' && !isRTL) || (iconPosition === 'end' && isRTL);
-
     return (
       <>
         {iconFirst ? iconComponent : kidsComponent}
diff --git a/components/button/demo/noSpace.md b/components/button/demo/noSpace.md
new file mode 100644
index 000000000000..8a5d3a85706d
--- /dev/null
+++ b/components/button/demo/noSpace.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+我们默认在两个汉字之间添加空格，可以通过设置 `autoInsertSpace` 为 `false` 关闭。
+
+## en-US
+
+We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`.
diff --git a/components/button/demo/noSpace.tsx b/components/button/demo/noSpace.tsx
new file mode 100644
index 000000000000..9eeab746b235
--- /dev/null
+++ b/components/button/demo/noSpace.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Flex } from 'antd';
+
+const App: React.FC = () => (
+  <Flex gap="middle" wrap="wrap">
+    <Button type="primary" autoInsertSpace={false}>
+      确定
+    </Button>
+    <Button type="primary" autoInsertSpace>
+      确定
+    </Button>
+  </Flex>
+);
+
+export default App;
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index dcf9f4a60c18..f250d3b14cbe 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -58,6 +58,7 @@ Different button styles can be generated by setting Button properties. The recom
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | Set the danger status of button | boolean | false |  |
@@ -73,7 +74,7 @@ Different button styles can be generated by setting Button properties. The recom
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
+| onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
 
 It accepts all props which native buttons support.
 
@@ -97,18 +98,6 @@ If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvi
 </ConfigProvider>
 ```
 
-### How to remove space between 2 chinese characters?
-
-Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
-
-```jsx
-<ConfigProvider autoInsertSpaceInButton={false}>
-  <Button>按钮</Button>
-</ConfigProvider>
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" width="100px" height="64px" style="box-shadow: none; margin: 0;" alt="Button with two Chinese characters" />
-
 <style>
 .site-button-ghost-wrapper {
   padding: 16px;
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 31e1dad6c91d..3d85cf848ba2 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -52,6 +52,7 @@ group:
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 <code src="./demo/linear-gradient.tsx">渐变按钮</code>
+<code src="./demo/noSpace.tsx" version="5.17.0">移除两个汉字之间的空格</code>
 
 ## API
 
@@ -63,6 +64,7 @@ group:
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | 设置危险按钮 | boolean | false |  |
@@ -78,7 +80,7 @@ group:
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
+| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
 
 支持原生 button 的其他所有属性。
 
@@ -102,18 +104,6 @@ group:
 </ConfigProvider>
 ```
 
-### 如何移除两个汉字之间的空格？
-
-根据 Ant Design 设计规范要求，我们会在按钮内（文本按钮和链接按钮除外）只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `autoInsertSpaceInButton` 为 `false`。
-
-```jsx
-<ConfigProvider autoInsertSpaceInButton={false}>
-  <Button>按钮</Button>
-</ConfigProvider>
-```
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0" width="100px" height="64px" alt="移除两个汉字之间的空格"  />
-
 <style>
 .site-button-ghost-wrapper {
   padding: 16px;
diff --git a/components/config-provider/__tests__/index.test.tsx b/components/config-provider/__tests__/index.test.tsx
index 052274d070ec..d1818f6674d8 100644
--- a/components/config-provider/__tests__/index.test.tsx
+++ b/components/config-provider/__tests__/index.test.tsx
@@ -25,7 +25,17 @@ describe('ConfigProvider', () => {
         <Button>{text}</Button>
       </ConfigProvider>,
     );
-    expect(container.querySelector('span')?.innerHTML).toBe(text);
+    expect(container.querySelector<HTMLSpanElement>('span')?.innerHTML).toBe(text);
+  });
+
+  it('button.autoInsertSpace', () => {
+    const text = '确定';
+    const { container } = render(
+      <ConfigProvider button={{ autoInsertSpace: false }}>
+        <Button>{text}</Button>
+      </ConfigProvider>,
+    );
+    expect(container.querySelector<HTMLSpanElement>('span')?.innerHTML).toBe(text);
   });
 
   it('renderEmpty', () => {
diff --git a/components/config-provider/__tests__/useConfig.test.tsx b/components/config-provider/__tests__/useConfig.test.tsx
index 33edb8ce1adc..845075aa01c9 100644
--- a/components/config-provider/__tests__/useConfig.test.tsx
+++ b/components/config-provider/__tests__/useConfig.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'antd';
 
 import ConfigProvider from '..';
 import { resetWarned } from '../../_util/warning';
@@ -61,4 +62,18 @@ describe('ConfigProvider.useConfig', () => {
     );
     errSpy.mockRestore();
   });
+
+  it('deprecated autoInsertSpaceInButton', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <ConfigProvider autoInsertSpaceInButton={false}>
+        <Button>测试</Button>
+      </ConfigProvider>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: ConfigProvider] `autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.',
+    );
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 76d9e5a3dc39..a17eb6b1e28c 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -140,7 +140,8 @@ export type InputConfig = ComponentStyleConfig &
 export type TextAreaConfig = ComponentStyleConfig &
   Pick<TextAreaProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear'>;
 
-export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames' | 'styles'>;
+export type ButtonConfig = ComponentStyleConfig &
+  Pick<ButtonProps, 'classNames' | 'styles' | 'autoInsertSpace'>;
 
 export type NotificationConfig = ComponentStyleConfig & Pick<ArgsProps, 'closeIcon'>;
 
@@ -194,6 +195,7 @@ export interface ConfigConsumerProps {
    * @descEN Set the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config.
    */
   csp?: CSPConfig;
+  /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
   input?: InputConfig;
   textArea?: TextAreaConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 8efe6c3f7e38..9c5717683df9 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -52,7 +52,6 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
 | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
@@ -105,7 +104,7 @@ const {
 | avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
 | card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
 | calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index de714cc9104e..ec7d7a91f657 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -4,7 +4,7 @@ import IconContext from '@ant-design/icons/lib/components/Context';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import { merge } from 'rc-util/lib/utils/set';
 
-import warning, { WarningContext } from '../_util/warning';
+import warning, { devUseWarning, WarningContext } from '../_util/warning';
 import type { WarningContextProps } from '../_util/warning';
 import ValidateMessagesContext from '../form/validateMessagesContext';
 import type { Locale } from '../locale';
@@ -122,6 +122,7 @@ export interface ConfigProviderProps {
   children?: React.ReactNode;
   renderEmpty?: RenderEmptyHandler;
   csp?: CSPConfig;
+  /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
   form?: FormConfig;
   input?: InputConfig;
@@ -463,6 +464,15 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     floatButtonGroup,
   };
 
+  if (process.env.NODE_ENV !== 'production') {
+    const warningFn = devUseWarning('ConfigProvider');
+    warningFn(
+      !('autoInsertSpaceInButton' in props),
+      'deprecated',
+      '`autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.',
+    );
+  }
+
   const config: ConfigConsumerProps = {
     ...parentContext,
   };
@@ -482,6 +492,14 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     }
   });
 
+  if (typeof autoInsertSpaceInButton !== 'undefined') {
+    // merge deprecated api
+    config.button = {
+      autoInsertSpace: autoInsertSpaceInButton,
+      ...config.button,
+    };
+  }
+
   // https://github.com/ant-design/ant-design/issues/27617
   const memoedConfig = useMemo(
     () => config,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index f8dad60fc26d..f6fedb44675c 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -53,7 +53,6 @@ export default Demo;
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
 | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
@@ -107,7 +106,7 @@ const {
 | avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
 | calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
 | carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

From a09b9dd82078fcfe12fdef87c17b7b530ee1ae42 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Thu, 11 Apr 2024 22:29:50 +0800
Subject: [PATCH 2/4] feat: wrap prop support boolean (#48391)

* feat: wrap prop support boolean

* test: add test case

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* test: update

* chore: revert
---
 components/flex/__tests__/index.test.tsx | 15 +++++++++++++++
 components/flex/index.en-US.md           |  8 ++++----
 components/flex/index.zh-CN.md           |  8 ++++----
 components/flex/interface.ts             |  2 +-
 components/flex/utils.ts                 | 19 +++++++++----------
 5 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/components/flex/__tests__/index.test.tsx b/components/flex/__tests__/index.test.tsx
index 7ec72caa718a..d802f0255b1e 100644
--- a/components/flex/__tests__/index.test.tsx
+++ b/components/flex/__tests__/index.test.tsx
@@ -67,4 +67,19 @@ describe('Flex', () => {
       'ant-flex-align-center',
     );
   });
+
+  it('wrap prop shouled support boolean', () => {
+    const { container, rerender } = render(<Flex>test</Flex>);
+    const element = container.querySelector<HTMLDivElement>('.ant-flex');
+
+    ([true, 'wrap'] as const).forEach((value) => {
+      rerender(<Flex wrap={value}>test</Flex>);
+      expect(element).toHaveClass('ant-flex-wrap-wrap');
+    });
+
+    ([false, 'nowrap'] as const).forEach((value) => {
+      rerender(<Flex wrap={value}>test</Flex>);
+      expect(element).not.toHaveClass('ant-flex-wrap-wrap');
+    });
+  });
 });
diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md
index aecdbc487d37..8a1650611372 100644
--- a/components/flex/index.en-US.md
+++ b/components/flex/index.en-US.md
@@ -37,10 +37,10 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | type | Default | Version |
 | --- | --- | --- | --- | --- |
 | vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` |  |
-| wrap | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | nowrap |  |
-| justify | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal |  |
-| align | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal |  |
-| flex | flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal |  |
+| wrap | Set whether the element is displayed in a single line or in multiple lines | [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
+| justify | Sets the alignment of elements in the direction of the main axis | [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal |  |
+| align | Sets the alignment of elements in the direction of the cross axis | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal |  |
+| flex | flex CSS shorthand properties | [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal |  |
 | gap | Sets the gap between grids | `small` \| `middle` \| `large` \| string \| number | - |  |
 | component | custom element type | React.ComponentType | `div` |  |
 
diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md
index 3ec09c337e0e..a657a637df24 100644
--- a/components/flex/index.zh-CN.md
+++ b/components/flex/index.zh-CN.md
@@ -38,10 +38,10 @@ tag: 5.10.0
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | vertical | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean | `false` |
-| wrap | 设置元素单行显示还是多行显示 | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | nowrap |  |
-| justify | 设置元素在主轴方向上的对齐方式 | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal |  |
-| align | 设置元素在交叉轴方向上的对齐方式 | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal |  |
-| flex | flex CSS 简写属性 | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal |  |
+| wrap | 设置元素单行显示还是多行显示 | [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) \| boolean | nowrap | boolean: 5.17.0 |
+| justify | 设置元素在主轴方向上的对齐方式 | [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal |  |
+| align | 设置元素在交叉轴方向上的对齐方式 | [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal |  |
+| flex | flex CSS 简写属性 | [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal |  |
 | gap | 设置网格之间的间隙 | `small` \| `middle` \| `large` \| string \| number | - |  |
 | component | 自定义元素类型 | React.ComponentType | `div` |  |
 
diff --git a/components/flex/interface.ts b/components/flex/interface.ts
index 6e7f42151b72..d2d5f8d864ae 100644
--- a/components/flex/interface.ts
+++ b/components/flex/interface.ts
@@ -7,7 +7,7 @@ export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLEleme
   prefixCls?: string;
   rootClassName?: string;
   vertical?: boolean;
-  wrap?: React.CSSProperties['flexWrap'];
+  wrap?: boolean | React.CSSProperties['flexWrap'];
   justify?: React.CSSProperties['justifyContent'];
   align?: React.CSSProperties['alignItems'];
   flex?: React.CSSProperties['flex'];
diff --git a/components/flex/utils.ts b/components/flex/utils.ts
index 1cd814e6979a..3acc8dca0004 100644
--- a/components/flex/utils.ts
+++ b/components/flex/utils.ts
@@ -2,9 +2,9 @@ import classNames from 'classnames';
 
 import type { FlexProps } from './interface';
 
-export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'] as const;
+export const flexWrapValues: React.CSSProperties['flexWrap'][] = ['wrap', 'nowrap', 'wrap-reverse'];
 
-export const justifyContentValues = [
+export const justifyContentValues: React.CSSProperties['justifyContent'][] = [
   'flex-start',
   'flex-end',
   'start',
@@ -17,9 +17,9 @@ export const justifyContentValues = [
   'normal',
   'left',
   'right',
-] as const;
+];
 
-export const alignItemsValues = [
+export const alignItemsValues: React.CSSProperties['alignItems'][] = [
   'center',
   'start',
   'end',
@@ -30,14 +30,13 @@ export const alignItemsValues = [
   'baseline',
   'normal',
   'stretch',
-] as const;
+];
 
 const genClsWrap = (prefixCls: string, props: FlexProps) => {
-  const wrapCls: Record<PropertyKey, boolean> = {};
-  flexWrapValues.forEach((cssKey) => {
-    wrapCls[`${prefixCls}-wrap-${cssKey}`] = props.wrap === cssKey;
-  });
-  return wrapCls;
+  const wrap = props.wrap === true ? 'wrap' : props.wrap;
+  return {
+    [`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap),
+  };
 };
 
 const genClsAlign = (prefixCls: string, props: FlexProps) => {

From d34ab0071714b215ef39c06b2fad8bcfa16c5bb7 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 12 Apr 2024 12:10:38 +0800
Subject: [PATCH 3/4] demo: update `wrap="wrap"` => `wrap` (#48409)

---
 .dumi/pages/index/components/Theme/ColorPicker.tsx | 2 +-
 .dumi/pages/index/components/Theme/ThemePicker.tsx | 2 +-
 .dumi/theme/builtins/Previewer/CodePreviewer.tsx   | 3 +--
 components/button/demo/basic.tsx                   | 2 +-
 components/button/demo/chinese-chars-loading.tsx   | 2 +-
 components/button/demo/component-token.tsx         | 6 +++---
 components/button/demo/danger.tsx                  | 2 +-
 components/button/demo/debug-icon.tsx              | 4 ++--
 components/button/demo/ghost.tsx                   | 2 +-
 components/button/demo/icon-position.tsx           | 4 ++--
 components/button/demo/icon.tsx                    | 4 ++--
 components/button/demo/loading.tsx                 | 4 ++--
 components/button/demo/noSpace.tsx                 | 2 +-
 components/button/demo/size.tsx                    | 4 ++--
 components/flex/demo/wrap.tsx                      | 2 +-
 components/layout/demo/basic.tsx                   | 2 +-
 components/progress/demo/circle-mini.tsx           | 2 +-
 components/progress/demo/circle-steps.tsx          | 2 +-
 components/progress/demo/circle.tsx                | 2 +-
 components/progress/demo/dashboard.tsx             | 2 +-
 components/progress/demo/format.tsx                | 2 +-
 components/progress/demo/gradient-line.tsx         | 4 ++--
 components/progress/demo/linecap.tsx               | 2 +-
 components/progress/demo/segment.tsx               | 2 +-
 components/progress/demo/size.tsx                  | 6 +++---
 components/qr-code/demo/status.tsx                 | 2 +-
 components/tag/demo/borderless.tsx                 | 4 ++--
 components/tag/demo/borderlessLayout.tsx           | 4 ++--
 components/tag/demo/checkable.tsx                  | 2 +-
 components/tag/demo/colorful-inverse.tsx           | 2 +-
 components/tag/demo/colorful.tsx                   | 4 ++--
 components/tag/demo/component-token.tsx            | 2 +-
 components/tag/demo/control.tsx                    | 2 +-
 components/tag/demo/customize.tsx                  | 2 +-
 components/tag/demo/draggable.tsx                  | 2 +-
 components/tag/demo/icon.tsx                       | 2 +-
 components/tag/demo/status.tsx                     | 4 ++--
 components/upload/demo/avatar.tsx                  | 2 +-
 38 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
index 34c6835c112c..f0249ff8ed91 100644
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) =
   }, [value]);
 
   return (
-    <Flex gap="large" align="center" wrap="wrap">
+    <Flex gap="large" align="center" wrap>
       <Input
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}
diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
index ac22c57c308e..c88364a9eaf9 100644
--- a/.dumi/pages/index/components/Theme/ThemePicker.tsx
+++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -84,7 +84,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
-    <Flex gap="large" wrap="wrap">
+    <Flex gap="large" wrap>
       {(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
         <Flex vertical gap="small" justify="center" align="center" key={theme}>
           <label
diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index 4fc8ff9964b4..d347b8314f4a 100644
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -405,8 +405,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
               dangerouslySetInnerHTML={{ __html: description }}
             />
           )}
-
-          <Flex wrap="wrap" gap="middle" className="code-box-actions">
+          <Flex wrap gap="middle" className="code-box-actions">
             {showOnlineUrl && (
               <Tooltip title={<FormattedMessage id="app.demo.online" />}>
                 <a
diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx
index 0cda77ee32a3..c0ac0563d6fe 100644
--- a/components/button/demo/basic.tsx
+++ b/components/button/demo/basic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="dashed">Dashed Button</Button>
diff --git a/components/button/demo/chinese-chars-loading.tsx b/components/button/demo/chinese-chars-loading.tsx
index ab6feab6b608..b184e97fa5cc 100644
--- a/components/button/demo/chinese-chars-loading.tsx
+++ b/components/button/demo/chinese-chars-loading.tsx
@@ -7,7 +7,7 @@ const Text2 = () => <span>部署</span>;
 const Text3 = () => <>Submit</>;
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button>
       <span>
         <span>部署</span>
diff --git a/components/button/demo/component-token.tsx b/components/button/demo/component-token.tsx
index f197fc259688..bde16b00400e 100644
--- a/components/button/demo/component-token.tsx
+++ b/components/button/demo/component-token.tsx
@@ -24,12 +24,12 @@ const App: React.FC = () => (
     }}
   >
     <Flex gap="small" vertical>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text">TEXT</Button>
         <Button type="primary">CONTAINED</Button>
         <Button>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" disabled>
           TEXT
         </Button>
@@ -38,7 +38,7 @@ const App: React.FC = () => (
         </Button>
         <Button disabled>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" size="small">
           TEXT
         </Button>
diff --git a/components/button/demo/danger.tsx b/components/button/demo/danger.tsx
index d205355e2a74..0846bcbf4ca1 100644
--- a/components/button/demo/danger.tsx
+++ b/components/button/demo/danger.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button type="primary" danger>
       Primary
     </Button>
diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx
index d25a57f032e8..a39d9a1eb4cd 100644
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@@ -19,7 +19,7 @@ const App: React.FC = () => {
       </Divider>
       <ConfigProvider componentSize={size}>
         <Flex gap="small" vertical>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button type="primary" shape="circle" icon={<SearchOutlined />} />
             </Tooltip>
@@ -34,7 +34,7 @@ const App: React.FC = () => {
             </Tooltip>
             <Button icon={<SearchOutlined />}>Search</Button>
           </Flex>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button shape="circle" icon={<SearchOutlined />} />
             </Tooltip>
diff --git a/components/button/demo/ghost.tsx b/components/button/demo/ghost.tsx
index fe0da63cc443..4615df9ec2b5 100644
--- a/components/button/demo/ghost.tsx
+++ b/components/button/demo/ghost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small" className="site-button-ghost-wrapper">
+  <Flex wrap gap="small" className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
     </Button>
diff --git a/components/button/demo/icon-position.tsx b/components/button/demo/icon-position.tsx
index 6847919c5ab7..df4d57718316 100644
--- a/components/button/demo/icon-position.tsx
+++ b/components/button/demo/icon-position.tsx
@@ -17,7 +17,7 @@ const App: React.FC = () => {
         Preview
       </Divider>
       <Flex gap="small" vertical>
-        <Flex wrap="wrap" gap="small">
+        <Flex wrap gap="small">
           <Tooltip title="search">
             <Button type="primary" shape="circle" icon={<SearchOutlined />} />
           </Tooltip>
@@ -34,7 +34,7 @@ const App: React.FC = () => {
             Search
           </Button>
         </Flex>
-        <Flex wrap="wrap" gap="small">
+        <Flex wrap gap="small">
           <Tooltip title="search">
             <Button shape="circle" icon={<SearchOutlined />} />
           </Tooltip>
diff --git a/components/button/demo/icon.tsx b/components/button/demo/icon.tsx
index 855e8d639350..d6b0695024b2 100644
--- a/components/button/demo/icon.tsx
+++ b/components/button/demo/icon.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <Flex gap="small" vertical>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button type="primary" shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
@@ -19,7 +19,7 @@ const App: React.FC = () => (
       </Tooltip>
       <Button icon={<SearchOutlined />}>Search</Button>
     </Flex>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx
index 0562c4516efe..50b5b62153ee 100644
--- a/components/button/demo/loading.tsx
+++ b/components/button/demo/loading.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="small" vertical>
-      <Flex gap="small" align="center" wrap="wrap">
+      <Flex gap="small" align="center" wrap>
         <Button type="primary" loading>
           Loading
         </Button>
@@ -32,7 +32,7 @@ const App: React.FC = () => {
         </Button>
         <Button type="primary" icon={<PoweroffOutlined />} loading />
       </Flex>
-      <Flex gap="small" wrap="wrap">
+      <Flex gap="small" wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
           Click me!
         </Button>
diff --git a/components/button/demo/noSpace.tsx b/components/button/demo/noSpace.tsx
index 9eeab746b235..5994ec07b31c 100644
--- a/components/button/demo/noSpace.tsx
+++ b/components/button/demo/noSpace.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap="wrap">
+  <Flex gap="middle" wrap>
     <Button type="primary" autoInsertSpace={false}>
       确定
     </Button>
diff --git a/components/button/demo/size.tsx b/components/button/demo/size.tsx
index 2831519db517..7a874bfd6677 100644
--- a/components/button/demo/size.tsx
+++ b/components/button/demo/size.tsx
@@ -18,7 +18,7 @@ const App: React.FC = () => {
         Preview
       </Divider>
       <Flex gap="small" align="flex-start" vertical>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" wrap>
           <Button type="primary" size={size}>
             Primary
           </Button>
@@ -30,7 +30,7 @@ const App: React.FC = () => {
         <Button type="link" size={size}>
           Link
         </Button>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" wrap>
           <Button type="primary" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
diff --git a/components/flex/demo/wrap.tsx b/components/flex/demo/wrap.tsx
index 13e9629c4962..07a671a50cf0 100644
--- a/components/flex/demo/wrap.tsx
+++ b/components/flex/demo/wrap.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const Demo: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     {Array.from({ length: 24 }, (_, i) => (
       <Button key={i} type="primary">
         Button
diff --git a/components/layout/demo/basic.tsx b/components/layout/demo/basic.tsx
index ad38c34e10fc..9f8cb3d84644 100644
--- a/components/layout/demo/basic.tsx
+++ b/components/layout/demo/basic.tsx
@@ -41,7 +41,7 @@ const layoutStyle = {
 };
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap="wrap">
+  <Flex gap="middle" wrap>
     <Layout style={layoutStyle}>
       <Header style={headerStyle}>Header</Header>
       <Content style={contentStyle}>Content</Content>
diff --git a/components/progress/demo/circle-mini.tsx b/components/progress/demo/circle-mini.tsx
index 8e884cf97f5b..116e25c8ae1c 100644
--- a/components/progress/demo/circle-mini.tsx
+++ b/components/progress/demo/circle-mini.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Progress type="circle" percent={30} size={80} />
     <Progress type="circle" percent={70} size={80} status="exception" />
     <Progress type="circle" percent={100} size={80} />
diff --git a/components/progress/demo/circle-steps.tsx b/components/progress/demo/circle-steps.tsx
index d4fd2d25f505..6d9276447b88 100644
--- a/components/progress/demo/circle-steps.tsx
+++ b/components/progress/demo/circle-steps.tsx
@@ -10,7 +10,7 @@ const App: React.FC = () => {
       <Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} />
       <Typography.Title level={5}>Custom gap:</Typography.Title>
       <Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} />
-      <Flex wrap="wrap" gap="middle" style={{ marginTop: 16 }}>
+      <Flex wrap gap="middle" style={{ marginTop: 16 }}>
         <Progress
           type="dashboard"
           steps={8}
diff --git a/components/progress/demo/circle.tsx b/components/progress/demo/circle.tsx
index ccb23bb61021..2f557f6e8cba 100644
--- a/components/progress/demo/circle.tsx
+++ b/components/progress/demo/circle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
diff --git a/components/progress/demo/dashboard.tsx b/components/progress/demo/dashboard.tsx
index d0b3554f1a02..2b1d666bc5f7 100644
--- a/components/progress/demo/dashboard.tsx
+++ b/components/progress/demo/dashboard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
   </Flex>
diff --git a/components/progress/demo/format.tsx b/components/progress/demo/format.tsx
index cc8bb9d06b9b..54f79dd31bd2 100644
--- a/components/progress/demo/format.tsx
+++ b/components/progress/demo/format.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Progress } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Progress type="circle" percent={75} format={(percent) => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
   </Flex>
diff --git a/components/progress/demo/gradient-line.tsx b/components/progress/demo/gradient-line.tsx
index 6af08b715920..56f97865da7e 100644
--- a/components/progress/demo/gradient-line.tsx
+++ b/components/progress/demo/gradient-line.tsx
@@ -17,12 +17,12 @@ const App: React.FC = () => (
   <Flex vertical gap="middle">
     <Progress percent={99.9} strokeColor={twoColors} />
     <Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Progress type="circle" percent={90} strokeColor={twoColors} />
       <Progress type="circle" percent={100} strokeColor={twoColors} />
       <Progress type="circle" percent={93} strokeColor={conicColors} />
     </Flex>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Progress type="dashboard" percent={90} strokeColor={twoColors} />
       <Progress type="dashboard" percent={100} strokeColor={twoColors} />
       <Progress type="dashboard" percent={93} strokeColor={conicColors} />
diff --git a/components/progress/demo/linecap.tsx b/components/progress/demo/linecap.tsx
index 6528588db53e..9377220fb2d3 100644
--- a/components/progress/demo/linecap.tsx
+++ b/components/progress/demo/linecap.tsx
@@ -4,7 +4,7 @@ import { Flex, Progress } from 'antd';
 const App: React.FC = () => (
   <Flex vertical gap="small">
     <Progress strokeLinecap="butt" percent={75} />
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Progress strokeLinecap="butt" type="circle" percent={75} />
       <Progress strokeLinecap="butt" type="dashboard" percent={75} />
     </Flex>
diff --git a/components/progress/demo/segment.tsx b/components/progress/demo/segment.tsx
index 80e27c2500a0..e4dfeca9dcc9 100644
--- a/components/progress/demo/segment.tsx
+++ b/components/progress/demo/segment.tsx
@@ -6,7 +6,7 @@ const App: React.FC = () => (
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} />
     </Tooltip>
-    <Flex gap="small" wrap="wrap">
+    <Flex gap="small" wrap>
       <Tooltip title="3 done / 3 in progress / 4 to do">
         <Progress percent={60} success={{ percent: 30 }} type="circle" />
       </Tooltip>
diff --git a/components/progress/demo/size.tsx b/components/progress/demo/size.tsx
index 8e4aef3719ae..dcca8185aae4 100644
--- a/components/progress/demo/size.tsx
+++ b/components/progress/demo/size.tsx
@@ -8,17 +8,17 @@ const App: React.FC = () => (
       <Progress percent={50} size="small" />
       <Progress percent={50} size={[300, 20]} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress type="circle" percent={50} />
       <Progress type="circle" percent={50} size="small" />
       <Progress type="circle" percent={50} size={20} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress type="dashboard" percent={50} />
       <Progress type="dashboard" percent={50} size="small" />
       <Progress type="dashboard" percent={50} size={20} />
     </Flex>
-    <Flex align="center" wrap="wrap" gap={30}>
+    <Flex align="center" wrap gap={30}>
       <Progress steps={3} percent={50} />
       <Progress steps={3} percent={50} size="small" />
       <Progress steps={3} percent={50} size={20} />
diff --git a/components/qr-code/demo/status.tsx b/components/qr-code/demo/status.tsx
index 55f9aa33e87c..fa0316586666 100644
--- a/components/qr-code/demo/status.tsx
+++ b/components/qr-code/demo/status.tsx
@@ -4,7 +4,7 @@ import { Flex, QRCode } from 'antd';
 const value = 'https://ant.design';
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap="wrap">
+  <Flex gap="middle" wrap>
     <QRCode value={value} status="loading" />
     <QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} />
     <QRCode value={value} status="scanned" />
diff --git a/components/tag/demo/borderless.tsx b/components/tag/demo/borderless.tsx
index da95014d8731..4997f1c17001 100644
--- a/components/tag/demo/borderless.tsx
+++ b/components/tag/demo/borderless.tsx
@@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag bordered={false}>Tag 1</Tag>
       <Tag bordered={false}>Tag 2</Tag>
       <Tag bordered={false} closable>
@@ -14,7 +14,7 @@ const App: React.FC = () => (
       </Tag>
     </Flex>
     <Divider />
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag bordered={false} color="processing">
         processing
       </Tag>
diff --git a/components/tag/demo/borderlessLayout.tsx b/components/tag/demo/borderlessLayout.tsx
index a3c614732d54..fc4fb70fb07c 100644
--- a/components/tag/demo/borderlessLayout.tsx
+++ b/components/tag/demo/borderlessLayout.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => {
   const { token } = theme.useToken();
   return (
     <div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
-      <Flex gap="4px 0" wrap="wrap">
+      <Flex gap="4px 0" wrap>
         <Tag bordered={false}>Tag 1</Tag>
         <Tag bordered={false}>Tag 2</Tag>
         <Tag bordered={false} closable>
@@ -16,7 +16,7 @@ const App: React.FC = () => {
         </Tag>
       </Flex>
       <Divider />
-      <Flex gap="4px 0" wrap="wrap">
+      <Flex gap="4px 0" wrap>
         <Tag bordered={false} color="magenta">
           magenta
         </Tag>
diff --git a/components/tag/demo/checkable.tsx b/components/tag/demo/checkable.tsx
index fcb473ccd5d2..fa1df11f934c 100644
--- a/components/tag/demo/checkable.tsx
+++ b/components/tag/demo/checkable.tsx
@@ -14,7 +14,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap={4} wrap="wrap" align="center">
+    <Flex gap={4} wrap align="center">
       <span>Categories:</span>
       {tagsData.map<React.ReactNode>((tag) => (
         <Tag.CheckableTag
diff --git a/components/tag/demo/colorful-inverse.tsx b/components/tag/demo/colorful-inverse.tsx
index f19b365a963a..79311197be12 100644
--- a/components/tag/demo/colorful-inverse.tsx
+++ b/components/tag/demo/colorful-inverse.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag color="magenta-inverse">magenta</Tag>
     <Tag color="red-inverse">red</Tag>
     <Tag color="volcano-inverse">volcano</Tag>
diff --git a/components/tag/demo/colorful.tsx b/components/tag/demo/colorful.tsx
index e0e4e4765f5c..eff1319ea5d6 100644
--- a/components/tag/demo/colorful.tsx
+++ b/components/tag/demo/colorful.tsx
@@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="magenta">magenta</Tag>
       <Tag color="red">red</Tag>
       <Tag color="volcano">volcano</Tag>
@@ -18,7 +18,7 @@ const App: React.FC = () => (
       <Tag color="purple">purple</Tag>
     </Flex>
     <Divider orientation="left">Custom</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="#f50">#f50</Tag>
       <Tag color="#2db7f5">#2db7f5</Tag>
       <Tag color="#87d068">#87d068</Tag>
diff --git a/components/tag/demo/component-token.tsx b/components/tag/demo/component-token.tsx
index f47a7fa493a2..a85dd5780737 100644
--- a/components/tag/demo/component-token.tsx
+++ b/components/tag/demo/component-token.tsx
@@ -6,7 +6,7 @@ const App: React.FC = () => (
   <ConfigProvider
     theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
   >
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag>
         <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
       </Tag>
diff --git a/components/tag/demo/control.tsx b/components/tag/demo/control.tsx
index bf25ca662b57..2fb7992f6806 100644
--- a/components/tag/demo/control.tsx
+++ b/components/tag/demo/control.tsx
@@ -71,7 +71,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       {tags.map<React.ReactNode>((tag, index) => {
         if (editInputIndex === index) {
           return (
diff --git a/components/tag/demo/customize.tsx b/components/tag/demo/customize.tsx
index 007608b36c46..861153432bc8 100644
--- a/components/tag/demo/customize.tsx
+++ b/components/tag/demo/customize.tsx
@@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag closable closeIcon="关 闭">
       Tag1
     </Tag>
diff --git a/components/tag/demo/draggable.tsx b/components/tag/demo/draggable.tsx
index ad4b7e792e58..9fb889ae086b 100644
--- a/components/tag/demo/draggable.tsx
+++ b/components/tag/demo/draggable.tsx
@@ -68,7 +68,7 @@ const App: React.FC = () => {
   return (
     <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
       <SortableContext items={items} strategy={horizontalListSortingStrategy}>
-        <Flex gap="4px 0" wrap="wrap">
+        <Flex gap="4px 0" wrap>
           {items.map<React.ReactNode>((item) => (
             <DraggableTag tag={item} key={item.id} />
           ))}
diff --git a/components/tag/demo/icon.tsx b/components/tag/demo/icon.tsx
index 04fbbe956395..18f8a7f177ef 100644
--- a/components/tag/demo/icon.tsx
+++ b/components/tag/demo/icon.tsx
@@ -8,7 +8,7 @@ import {
 import { Flex, Tag } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="4px 0" wrap="wrap">
+  <Flex gap="4px 0" wrap>
     <Tag icon={<TwitterOutlined />} color="#55acee">
       Twitter
     </Tag>
diff --git a/components/tag/demo/status.tsx b/components/tag/demo/status.tsx
index af768a92c546..ed401f4f9171 100644
--- a/components/tag/demo/status.tsx
+++ b/components/tag/demo/status.tsx
@@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
 const App: React.FC = () => (
   <>
     <Divider orientation="left">Without icon</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag color="success">success</Tag>
       <Tag color="processing">processing</Tag>
       <Tag color="error">error</Tag>
@@ -20,7 +20,7 @@ const App: React.FC = () => (
       <Tag color="default">default</Tag>
     </Flex>
     <Divider orientation="left">With icon</Divider>
-    <Flex gap="4px 0" wrap="wrap">
+    <Flex gap="4px 0" wrap>
       <Tag icon={<CheckCircleOutlined />} color="success">
         success
       </Tag>
diff --git a/components/upload/demo/avatar.tsx b/components/upload/demo/avatar.tsx
index 40346e7bc7de..45c8958cc39c 100644
--- a/components/upload/demo/avatar.tsx
+++ b/components/upload/demo/avatar.tsx
@@ -49,7 +49,7 @@ const App: React.FC = () => {
   );
 
   return (
-    <Flex gap="middle" wrap="wrap">
+    <Flex gap="middle" wrap>
       <Upload
         name="avatar"
         listType="picture-card"

From 1092660e0ac8e46efcdcf4e240e40c07242c210e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Fri, 12 Apr 2024 17:30:32 +0800
Subject: [PATCH 4/4] feat: optimize CascaderProps (#48420)

---
 components/cascader/Panel.tsx                 | 19 ++--
 components/cascader/__tests__/index.test.tsx  | 14 +--
 components/cascader/__tests__/type.test.tsx   |  8 +-
 components/cascader/demo/basic.tsx            |  5 +-
 components/cascader/demo/change-on-select.tsx |  4 +-
 components/cascader/demo/custom-trigger.tsx   |  4 +-
 components/cascader/demo/default-value.tsx    |  4 +-
 components/cascader/demo/disabled-option.tsx  |  4 +-
 components/cascader/demo/fields-name.tsx      |  4 +-
 components/cascader/demo/hover.tsx            |  4 +-
 components/cascader/demo/lazy.tsx             |  3 +-
 components/cascader/demo/multiple.tsx         |  4 +-
 components/cascader/demo/panel.tsx            |  6 +-
 components/cascader/demo/search.tsx           |  3 +-
 .../cascader/demo/showCheckedStrategy.tsx     |  6 +-
 components/cascader/demo/size.tsx             |  4 +-
 components/cascader/demo/suffix.tsx           |  4 +-
 components/cascader/index.tsx                 | 88 ++++++++-----------
 package.json                                  |  2 +-
 19 files changed, 94 insertions(+), 96 deletions(-)

diff --git a/components/cascader/Panel.tsx b/components/cascader/Panel.tsx
index 7c88e085a55b..71cfe1742b80 100644
--- a/components/cascader/Panel.tsx
+++ b/components/cascader/Panel.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import type { CascaderProps as RcCascaderProps } from 'rc-cascader';
 import { Panel } from 'rc-cascader';
 import type { PickType } from 'rc-cascader/lib/Panel';
 
-import type { CascaderProps } from '.';
+import type { CascaderProps, DefaultOptionType } from '.';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
@@ -14,9 +15,17 @@ import usePanelStyle from './style/panel';
 
 export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootClassName';
 
-export type CascaderPanelProps = Pick<CascaderProps, PanelPickType>;
+export type CascaderPanelProps<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PanelPickType>;
 
-const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
+function CascaderPanel<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+>(props: CascaderPanelProps<OptionType, ValueField, Multiple>) {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -53,7 +62,7 @@ const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
 
   return wrapCSSVar(
     <Panel
-      {...props}
+      {...(props as Pick<RcCascaderProps, PickType>)}
       checkable={checkable}
       prefixCls={cascaderPrefixCls}
       className={classNames(className, hashId, rootClassName, cssVarCls, rootCls)}
@@ -63,6 +72,6 @@ const CascaderPanel: React.FC<CascaderPanelProps> = (props) => {
       loadingIcon={loadingIcon}
     />,
   );
-};
+}
 
 export default CascaderPanel;
diff --git a/components/cascader/__tests__/index.test.tsx b/components/cascader/__tests__/index.test.tsx
index 70001ac0625e..34c1155f9030 100644
--- a/components/cascader/__tests__/index.test.tsx
+++ b/components/cascader/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SingleValueType } from 'rc-cascader/lib/Cascader';
 
-import type { BaseOptionType, DefaultOptionType } from '..';
+import type { DefaultOptionType } from '..';
 import Cascader from '..';
 import { resetWarned } from '../../_util/warning';
 import excludeAllWarning from '../../../tests/shared/excludeWarning';
@@ -71,11 +71,13 @@ const options = [
   },
 ];
 
-function filter<OptionType extends BaseOptionType = DefaultOptionType>(
+function filter<OptionType extends DefaultOptionType = DefaultOptionType>(
   inputValue: string,
   path: OptionType[],
 ): boolean {
-  return path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  return path.some((option) =>
+    option.label?.toString().toLowerCase().includes(inputValue.toLowerCase()),
+  );
 }
 
 describe('Cascader', () => {
@@ -183,7 +185,7 @@ describe('Cascader', () => {
         ],
       },
     ];
-    function customFilter<OptionType extends BaseOptionType = DefaultOptionType>(
+    function customFilter<OptionType extends DefaultOptionType = DefaultOptionType>(
       inputValue: string,
       path: OptionType[],
     ): boolean {
@@ -374,7 +376,7 @@ describe('Cascader', () => {
           {
             value: 'hangzhou',
             label: 'Hangzhou',
-            children: null,
+            children: null as any,
           },
         ],
       },
@@ -516,7 +518,7 @@ describe('Cascader', () => {
 
   it('onChange works correctly when the label of fieldNames is the same as value', () => {
     const onChange = jest.fn();
-    const sameNames = { label: 'label', value: 'label' };
+    const sameNames = { label: 'label', value: 'label' } as const;
     const { container } = render(
       <Cascader options={options} onChange={onChange} showSearch fieldNames={sameNames} />,
     );
diff --git a/components/cascader/__tests__/type.test.tsx b/components/cascader/__tests__/type.test.tsx
index 4dcb9387a954..e7e812420d86 100644
--- a/components/cascader/__tests__/type.test.tsx
+++ b/components/cascader/__tests__/type.test.tsx
@@ -80,16 +80,12 @@ describe('Cascader.typescript', () => {
   });
 
   it('single onChange', () => {
-    const { container } = render(
-      <Cascader multiple={false} onChange={(values: (string | number)[]) => values} />,
-    );
+    const { container } = render(<Cascader multiple={false} onChange={(values) => values} />);
     expect(container).toBeTruthy();
   });
 
   it('multiple onChange', () => {
-    const { container } = render(
-      <Cascader multiple onChange={(values: (string | number)[][]) => values} />,
-    );
+    const { container } = render(<Cascader multiple onChange={(values) => values} />);
     expect(container).toBeTruthy();
   });
 });
diff --git a/components/cascader/demo/basic.tsx b/components/cascader/demo/basic.tsx
index 5c51fdec2458..cf8d68a998af 100644
--- a/components/cascader/demo/basic.tsx
+++ b/components/cascader/demo/basic.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
 
 interface Option {
-  value: string | number;
+  value: string;
   label: string;
   children?: Option[];
 }
@@ -42,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange = (value: (string | number)[]) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/change-on-select.tsx b/components/cascader/demo/change-on-select.tsx
index a9da7593c9e0..666f7f212e6f 100644
--- a/components/cascader/demo/change-on-select.tsx
+++ b/components/cascader/demo/change-on-select.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/custom-trigger.tsx b/components/cascader/demo/custom-trigger.tsx
index 65469a9ea2b6..44cf4f17b0dc 100644
--- a/components/cascader/demo/custom-trigger.tsx
+++ b/components/cascader/demo/custom-trigger.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -34,7 +34,7 @@ const options: Option[] = [
 const App: React.FC = () => {
   const [text, setText] = useState('Unselect');
 
-  const onChange: SingleCascaderProps<Option>['onChange'] = (_, selectedOptions) => {
+  const onChange: CascaderProps<Option>['onChange'] = (_, selectedOptions) => {
     setText(selectedOptions.map((o) => o.label).join(', '));
   };
 
diff --git a/components/cascader/demo/default-value.tsx b/components/cascader/demo/default-value.tsx
index 926d57e00a98..13684ddfd30b 100644
--- a/components/cascader/demo/default-value.tsx
+++ b/components/cascader/demo/default-value.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/disabled-option.tsx b/components/cascader/demo/disabled-option.tsx
index 3a06f2a0b9fa..3ee141444f62 100644
--- a/components/cascader/demo/disabled-option.tsx
+++ b/components/cascader/demo/disabled-option.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -45,7 +45,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/fields-name.tsx b/components/cascader/demo/fields-name.tsx
index 29ef521faa90..690bce725c87 100644
--- a/components/cascader/demo/fields-name.tsx
+++ b/components/cascader/demo/fields-name.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   code: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/hover.tsx b/components/cascader/demo/hover.tsx
index b0cb179a131c..27ec2a34d62c 100644
--- a/components/cascader/demo/hover.tsx
+++ b/components/cascader/demo/hover.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/lazy.tsx b/components/cascader/demo/lazy.tsx
index c9aac58567d3..38b0ff6e8fb1 100644
--- a/components/cascader/demo/lazy.tsx
+++ b/components/cascader/demo/lazy.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
 
 interface Option {
@@ -24,7 +25,7 @@ const optionLists: Option[] = [
 const App: React.FC = () => {
   const [options, setOptions] = useState<Option[]>(optionLists);
 
-  const onChange = (value: (string | number)[], selectedOptions: Option[]) => {
+  const onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {
     console.log(value, selectedOptions);
   };
 
diff --git a/components/cascader/demo/multiple.tsx b/components/cascader/demo/multiple.tsx
index 72ab9bb48b93..11fcb8179fa6 100644
--- a/components/cascader/demo/multiple.tsx
+++ b/components/cascader/demo/multiple.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { MultipleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string | number;
@@ -44,7 +44,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/panel.tsx b/components/cascader/demo/panel.tsx
index 50af7e04209d..a96640d9a1e6 100644
--- a/components/cascader/demo/panel.tsx
+++ b/components/cascader/demo/panel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader, Flex } from 'antd';
-import type { MultipleCascaderProps, SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string | number;
@@ -43,11 +43,11 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
-const onMultipleChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+const onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/search.tsx b/components/cascader/demo/search.tsx
index ba26a07eb21e..0494a021a32c 100644
--- a/components/cascader/demo/search.tsx
+++ b/components/cascader/demo/search.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Cascader } from 'antd';
 import type { CascaderProps, GetProp } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 type DefaultOptionType = GetProp<CascaderProps, 'options'>[number];
 
@@ -52,7 +51,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value, selectedOptions) => {
+const onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {
   console.log(value, selectedOptions);
 };
 
diff --git a/components/cascader/demo/showCheckedStrategy.tsx b/components/cascader/demo/showCheckedStrategy.tsx
index d924b50bc0cd..020a93f2542a 100644
--- a/components/cascader/demo/showCheckedStrategy.tsx
+++ b/components/cascader/demo/showCheckedStrategy.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { MultipleCascaderProps } from 'antd/es/cascader';
 
 const { SHOW_CHILD } = Cascader;
 
@@ -44,7 +44,7 @@ const options: Option[] = [
 ];
 
 const App: React.FC = () => {
-  const onChange: MultipleCascaderProps<Option>['onChange'] = (value) => {
+  const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
     console.log(value);
   };
   return (
@@ -70,7 +70,7 @@ const App: React.FC = () => {
         onChange={onChange}
         multiple
         maxTagCount="responsive"
-        defaultValue={['bamboo']}
+        defaultValue={[['bamboo']]}
       />
     </>
   );
diff --git a/components/cascader/demo/size.tsx b/components/cascader/demo/size.tsx
index a414b14350a4..cc90ba4b7102 100644
--- a/components/cascader/demo/size.tsx
+++ b/components/cascader/demo/size.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -43,7 +43,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/demo/suffix.tsx b/components/cascader/demo/suffix.tsx
index 2c2d02593e35..3e9e07fd1aac 100644
--- a/components/cascader/demo/suffix.tsx
+++ b/components/cascader/demo/suffix.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
+import type { CascaderProps } from 'antd';
 import { Cascader } from 'antd';
-import type { SingleCascaderProps } from 'antd/es/cascader';
 
 interface Option {
   value: string;
@@ -44,7 +44,7 @@ const options: Option[] = [
   },
 ];
 
-const onChange: SingleCascaderProps<Option>['onChange'] = (value) => {
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
   console.log(value);
 };
 
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 24180832c081..3a0ebf550024 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -4,8 +4,7 @@ import type {
   BaseOptionType,
   DefaultOptionType,
   FieldNames,
-  MultipleCascaderProps as RcMultipleCascaderProps,
-  SingleCascaderProps as RcSingleCascaderProps,
+  CascaderProps as RcCascaderProps,
   ShowSearchType,
 } from 'rc-cascader';
 import RcCascader from 'rc-cascader';
@@ -105,51 +104,37 @@ const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixC
   return optionList;
 };
 
-export type SingleCascaderProps<OptionType extends BaseOptionType = any> = Omit<
-  RcSingleCascaderProps<OptionType>,
-  'checkable' | 'options'
-> & {
-  multiple?: false;
-};
-export type MultipleCascaderProps<OptionType extends BaseOptionType = any> = Omit<
-  RcMultipleCascaderProps<OptionType>,
-  'checkable' | 'options'
-> & {
-  multiple: true;
-};
-
-type UnionCascaderProps<OptionType extends BaseOptionType> =
-  | SingleCascaderProps<OptionType>
-  | MultipleCascaderProps<OptionType>;
-
-export type CascaderProps<DataNodeType extends BaseOptionType = any> =
-  UnionCascaderProps<DataNodeType> & {
-    multiple?: boolean;
-    size?: SizeType;
-    /**
-     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
-     *   default behavior, you can hide it by setting `suffixIcon` to null.
-     */
-    showArrow?: boolean;
-    disabled?: boolean;
-    /** @deprecated Use `variant` instead. */
-    bordered?: boolean;
-    placement?: SelectCommonPlacement;
-    suffixIcon?: React.ReactNode;
-    options?: DataNodeType[];
-    status?: InputStatus;
-    autoClearSearchValue?: boolean;
-
-    rootClassName?: string;
-    popupClassName?: string;
-    /** @deprecated Please use `popupClassName` instead */
-    dropdownClassName?: string;
-    /**
-     * @since 5.13.0
-     * @default "outlined"
-     */
-    variant?: Variant;
-  };
+export interface CascaderProps<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+> extends Omit<RcCascaderProps<OptionType, ValueField, Multiple>, 'checkable'> {
+  multiple?: Multiple;
+  size?: SizeType;
+  /**
+   * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+   *   default behavior, you can hide it by setting `suffixIcon` to null.
+   */
+  showArrow?: boolean;
+  disabled?: boolean;
+  /** @deprecated Use `variant` instead. */
+  bordered?: boolean;
+  placement?: SelectCommonPlacement;
+  suffixIcon?: React.ReactNode;
+  options?: OptionType[];
+  status?: InputStatus;
+  autoClearSearchValue?: boolean;
+
+  rootClassName?: string;
+  popupClassName?: string;
+  /** @deprecated Please use `popupClassName` instead */
+  dropdownClassName?: string;
+  /**
+   * @since 5.13.0
+   * @default "outlined"
+   */
+  variant?: Variant;
+}
 
 export interface CascaderRef {
   focus: () => void;
@@ -360,8 +345,13 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
   );
 
   return wrapCascaderCSSVar(wrapSelectCSSVar(renderNode));
-}) as unknown as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
-  props: React.PropsWithChildren<CascaderProps<OptionType>> & React.RefAttributes<CascaderRef>,
+}) as unknown as (<
+  OptionType extends DefaultOptionType = DefaultOptionType,
+  ValueField extends keyof OptionType = keyof OptionType,
+  Multiple extends boolean = false,
+>(
+  props: React.PropsWithChildren<CascaderProps<OptionType, ValueField, Multiple>> &
+    React.RefAttributes<CascaderRef>,
 ) => React.ReactElement) & {
   displayName: string;
   SHOW_PARENT: typeof SHOW_PARENT;
diff --git a/package.json b/package.json
index 7fcf493750a0..8140be3a4fe7 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.24.1",
+    "rc-cascader": "~3.25.0",
     "rc-checkbox": "~3.2.0",
     "rc-collapse": "~3.7.3",
     "rc-dialog": "~9.4.0",