From 5df309742ed3bcd7aa94af85cb3db7b54769eea4 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 27 Jun 2023 20:03:43 +0800
Subject: [PATCH 01/27] fix: Popcomfirm should support  and (#43212)

---
 components/popconfirm/style/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx
index 0f77bd6fee..11a5c3ae5a 100644
--- a/components/popconfirm/style/index.tsx
+++ b/components/popconfirm/style/index.tsx
@@ -12,6 +12,7 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
   const {
     componentCls,
     iconCls,
+    antCls,
     zIndexPopup,
     colorText,
     colorWarning,
@@ -25,7 +26,10 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
   return {
     [componentCls]: {
       zIndex: zIndexPopup,
-      color: colorText,
+
+      [`&${antCls}-popover`]: {
+        fontSize,
+      },
 
       [`${componentCls}-message`]: {
         marginBottom: marginXS,
@@ -51,6 +55,7 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
 
         [`${componentCls}-description`]: {
           marginTop: marginXXS,
+          color: colorText,
         },
       },
 

From f0059cebc24bd113ac135b188872a972031c8bdc Mon Sep 17 00:00:00 2001
From: kang <kang95630@gmail.com>
Date: Tue, 27 Jun 2023 23:37:24 +0800
Subject: [PATCH 02/27] type: pass-through cascader option generic type
 (#43231)

---
 components/cascader/index.tsx | 47 +++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 08ab5a23bf..a6a35bcaaf 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -96,30 +96,39 @@ const defaultSearchRender: ShowSearchType['render'] = (inputValue, path, prefixC
   return optionList;
 };
 
-type SingleCascaderProps = Omit<RcSingleCascaderProps, 'checkable' | 'options'> & {
+type SingleCascaderProps<OptionType extends BaseOptionType> = Omit<
+  RcSingleCascaderProps<OptionType>,
+  'checkable' | 'options'
+> & {
   multiple?: false;
 };
-type MultipleCascaderProps = Omit<RcMultipleCascaderProps, 'checkable' | 'options'> & {
+type MultipleCascaderProps<OptionType extends BaseOptionType> = Omit<
+  RcMultipleCascaderProps<OptionType>,
+  'checkable' | 'options'
+> & {
   multiple: true;
 };
 
-type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps;
-
-export type CascaderProps<DataNodeType = any> = UnionCascaderProps & {
-  multiple?: boolean;
-  size?: SizeType;
-  disabled?: boolean;
-  bordered?: boolean;
-  placement?: SelectCommonPlacement;
-  suffixIcon?: React.ReactNode;
-  options?: DataNodeType[];
-  status?: InputStatus;
-
-  rootClassName?: string;
-  popupClassName?: string;
-  /** @deprecated Please use `popupClassName` instead */
-  dropdownClassName?: string;
-};
+type UnionCascaderProps<OptionType extends BaseOptionType> =
+  | SingleCascaderProps<OptionType>
+  | MultipleCascaderProps<OptionType>;
+
+export type CascaderProps<DataNodeType extends BaseOptionType = any> =
+  UnionCascaderProps<DataNodeType> & {
+    multiple?: boolean;
+    size?: SizeType;
+    disabled?: boolean;
+    bordered?: boolean;
+    placement?: SelectCommonPlacement;
+    suffixIcon?: React.ReactNode;
+    options?: DataNodeType[];
+    status?: InputStatus;
+
+    rootClassName?: string;
+    popupClassName?: string;
+    /** @deprecated Please use `popupClassName` instead */
+    dropdownClassName?: string;
+  };
 
 export interface CascaderRef {
   focus: () => void;

From c3225c072024a4cca519dd87efce6336f9c140fa Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Wed, 28 Jun 2023 09:46:20 +0800
Subject: [PATCH 03/27] fix: error reported when the name of Form.List is 0
 (#43199)

* fix: error reported when the name of Form.List is 0

* chore: add test case
---
 components/form/FormList.tsx            |  9 +++-
 components/form/__tests__/list.test.tsx | 66 +++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx
index eaff6f5520..55160ca9ea 100644
--- a/components/form/FormList.tsx
+++ b/components/form/FormList.tsx
@@ -1,8 +1,8 @@
 import { List } from 'rc-field-form';
 import type { StoreValue, ValidatorRule } from 'rc-field-form/lib/interface';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';
 import { FormItemPrefixContext } from './context';
 
 export interface FormListFieldData {
@@ -35,7 +35,12 @@ const FormList: React.FC<FormListProps> = ({
   children,
   ...props
 }) => {
-  warning(!!props.name, 'Form.List', 'Miss `name` prop.');
+  warning(
+    typeof props.name === 'number' ||
+      (Array.isArray(props.name) ? !!props.name.length : !!props.name),
+    'Form.List',
+    'Miss `name` prop.',
+  );
 
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('form', customizePrefixCls);
diff --git a/components/form/__tests__/list.test.tsx b/components/form/__tests__/list.test.tsx
index 84ad7b5d67..1a2ca95660 100644
--- a/components/form/__tests__/list.test.tsx
+++ b/components/form/__tests__/list.test.tsx
@@ -262,4 +262,70 @@ describe('Form.List', () => {
 
     errorSpy.mockRestore();
   });
+
+  it('no warning when name is 0', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <Form>
+        <Form.List name={0}>
+          {(fields) =>
+            fields.map((field) => (
+              <Form.Item {...field} key={field.key}>
+                <Input />
+              </Form.Item>
+            ))
+          }
+        </Form.List>
+      </Form>,
+    );
+
+    expect(errorSpy).not.toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
+
+  it('warning when name is empty array', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <Form>
+        <Form.List name={[]}>
+          {(fields) =>
+            fields.map((field) => (
+              <Form.Item {...field} key={field.key}>
+                <Input />
+              </Form.Item>
+            ))
+          }
+        </Form.List>
+      </Form>,
+    );
+
+    expect(errorSpy).toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
+
+  it('warning when name is null', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <Form>
+        <Form.List name={null!!}>
+          {(fields) =>
+            fields.map((field) => (
+              <Form.Item {...field} key={field.key}>
+                <Input />
+              </Form.Item>
+            ))
+          }
+        </Form.List>
+      </Form>,
+    );
+
+    expect(errorSpy).toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
 });

From 1df65eeef3910605e6e0376648ee2d6c391b43cf Mon Sep 17 00:00:00 2001
From: daisy <47104575+linxianxi@users.noreply.github.com>
Date: Wed, 28 Jun 2023 10:34:25 +0800
Subject: [PATCH 04/27] =?UTF-8?q?docs:=20update=20DatePicker=E3=80=81TimeP?=
 =?UTF-8?q?icker=20cellRender=20(#43226)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/date-picker/index.en-US.md | 4 ++--
 components/date-picker/index.zh-CN.md | 4 ++--
 components/time-picker/index.en-US.md | 1 +
 components/time-picker/index.zh-CN.md | 1 +
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 4b71f5eb4a..7a83397476 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -83,7 +83,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | className | The picker className | string | - |  |
 | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
-| cellRender | Custom rendering function for picker cells | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - |  |
 | format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
@@ -187,7 +187,7 @@ Added in `4.1.0`.
 | --- | --- | --- | --- | --- |
 | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] |  |
 | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
-| cellRender | Custom rendering function for picker cells | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 7977e5c2b1..ebd1c63fdd 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -84,7 +84,7 @@ import locale from 'antd/locale/zh_CN';
 | className | 选择器 className | string | - |  |
 | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
-| cellRender | 自定义单元格的内容 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - |  |
 | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
@@ -188,7 +188,7 @@ import locale from 'antd/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] |  |
 | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
-| cellRender | 自定义单元格的内容。 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index 80fa4cd1e1..8e12f977f1 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -50,6 +50,7 @@ dayjs.extend(customParseFormat)
 | allowClear | Whether allow clearing text | boolean | true |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
+| cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | className | The className of picker | string | - |  |
 | clearIcon | The custom clear icon | ReactNode | - |  |
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index e0d01aca9b..eba10140d6 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -50,6 +50,7 @@ dayjs.extend(customParseFormat)
 | allowClear | 是否展示清除按钮 | boolean | true |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
+| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | className | 选择器类名 | string | - |  |
 | clearIcon | 自定义的清除图标 | ReactNode | - |  |

From 435fc6dcfedb30663ef393a9ce7e4f35c986e416 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 28 Jun 2023 11:34:57 +0800
Subject: [PATCH 05/27] chore(deps): update dependency file-system-cache to
 v2.4.1 (#43238)

* chore(deps): update dependency file-system-cache to v2.4.1

* Apply suggestions from code review

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1569bd9a3..b0a0009562 100644
--- a/package.json
+++ b/package.json
@@ -299,7 +299,7 @@
     "vanilla-jsoneditor": "^0.17.1",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1",
-    "file-system-cache": "2.3.0"
+    "file-system-cache": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

From 41fe4ced89d65de09ae9d33126a496119ba80766 Mon Sep 17 00:00:00 2001
From: Lennox Omondi <omondilenox@outlook.com>
Date: Wed, 28 Jun 2023 06:37:14 +0300
Subject: [PATCH 06/27] docs: Fix typo in App Component english version
 (#43235)

Typo fix for App documentation
---
 components/app/index.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md
index e7cd528e8f..bf245c6237 100644
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@@ -13,7 +13,7 @@ Application wrapper for some global usages.
 ## When To Use
 
 - Provide reset styles based on `.ant-app` element.
-- You could use static methods of `message/notification/Modal` form `useApp` without put `contextHolder` mannully.
+- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually.
 
 ## Examples
 

From 6cbf3e102be3138391ac4b79d4b11786620dc935 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 28 Jun 2023 13:54:49 +0800
Subject: [PATCH 07/27] chore(dep): remove file-system-cache (#43242)

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b0a0009562..143ced3f66 100644
--- a/package.json
+++ b/package.json
@@ -298,8 +298,7 @@
     "typescript": "~5.1.3",
     "vanilla-jsoneditor": "^0.17.1",
     "webpack-bundle-analyzer": "^4.1.0",
-    "xhr-mock": "^2.4.1",
-    "file-system-cache": "^2.4.1"
+    "xhr-mock": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

From 91be823272207ca8e7708fb37361919637ea4422 Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Wed, 28 Jun 2023 19:23:00 +0800
Subject: [PATCH 08/27] fix(Transfer): Dropdown is hidden & `showSizeChanger`
 not work (#41906)

* fix: Page size dropdown is hidden

* fix: SizeChange not work

* chore: add test case

---------

Co-authored-by: MadCcc <1075746765@qq.com>
---
 components/transfer/ListBody.tsx             | 61 +++++++++++---------
 components/transfer/__tests__/index.test.tsx | 39 +++++++++++++
 components/transfer/list.tsx                 |  1 -
 components/transfer/style/index.ts           |  8 ++-
 4 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx
index e57c60c075..5708422f12 100644
--- a/components/transfer/ListBody.tsx
+++ b/components/transfer/ListBody.tsx
@@ -1,14 +1,17 @@
 import classNames from 'classnames';
 import * as React from 'react';
+
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { KeyWiseTransferItem } from '.';
-import type { PaginationType } from './interface';
-import type { RenderedItem, TransferListProps } from './list';
 import Pagination from '../pagination';
 import ListItem from './ListItem';
+import type { PaginationType } from './interface';
+import type { RenderedItem, TransferListProps } from './list';
 
 export const OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'] as const;
-export type OmitProp = typeof OmitProps[number];
+export type OmitProp = (typeof OmitProps)[number];
 type PartialTransferListProps<RecordType> = Omit<TransferListProps<RecordType>, OmitProp>;
+type ExistPagination = Exclude<PaginationType, boolean>;
 
 export interface TransferListBodyProps<RecordType> extends PartialTransferListProps<RecordType> {
   filteredItems: RecordType[];
@@ -16,25 +19,15 @@ export interface TransferListBodyProps<RecordType> extends PartialTransferListPr
   selectedKeys: string[];
 }
 
-const parsePagination = (pagination?: PaginationType) => {
-  if (!pagination) {
-    return null;
-  }
-
+const parsePagination = (pagination?: ExistPagination) => {
   const defaultPagination: PaginationType = {
-    pageSize: 10,
     simple: true,
     showSizeChanger: false,
     showLessItems: false,
   };
 
-  if (typeof pagination === 'object') {
-    return { ...defaultPagination, ...pagination };
-  }
-
-  return defaultPagination;
+  return { ...defaultPagination, ...pagination };
 };
-
 export interface ListBodyRef<RecordType extends KeyWiseTransferItem> {
   items?: RenderedItem<RecordType>[];
 }
@@ -57,16 +50,28 @@ const TransferListBody: React.ForwardRefRenderFunction<
     onItemSelect,
     onItemRemove,
   } = props;
-
   const [current, setCurrent] = React.useState<number>(1);
 
+  const mergedPagination = React.useMemo(() => {
+    if (!pagination) {
+      return null;
+    }
+
+    const convertPagination = typeof pagination === 'object' ? pagination : {};
+
+    return parsePagination(convertPagination);
+  }, [pagination]);
+
+  const [pageSize, setPageSize] = useMergedState<number>(10, {
+    value: mergedPagination?.pageSize,
+  });
+
   React.useEffect(() => {
-    const mergedPagination = parsePagination(pagination);
     if (mergedPagination) {
-      const maxPageCount = Math.ceil(filteredRenderItems.length / mergedPagination.pageSize!);
+      const maxPageCount = Math.ceil(filteredRenderItems.length / pageSize!);
       setCurrent(Math.min(current, maxPageCount));
     }
-  }, [filteredRenderItems, pagination]);
+  }, [filteredRenderItems, mergedPagination, pageSize]);
 
   const onClick = (item: RecordType) => {
     onItemSelect?.(item.key, !selectedKeys.includes(item.key));
@@ -80,33 +85,33 @@ const TransferListBody: React.ForwardRefRenderFunction<
     setCurrent(cur);
   };
 
+  const onSizeChange = (cur: number, size: number) => {
+    setCurrent(cur);
+    setPageSize(size);
+  };
+
   const memoizedItems = React.useMemo<RenderedItem<RecordType>[]>(() => {
-    const mergedPagination = parsePagination(pagination);
     const displayItems = mergedPagination
-      ? filteredRenderItems.slice(
-          (current - 1) * mergedPagination.pageSize!,
-          current * mergedPagination.pageSize!,
-        )
+      ? filteredRenderItems.slice((current - 1) * pageSize!, current * pageSize!)
       : filteredRenderItems;
     return displayItems;
-  }, [current, filteredRenderItems, pagination]);
+  }, [current, filteredRenderItems, mergedPagination, pageSize]);
 
   React.useImperativeHandle(ref, () => ({ items: memoizedItems }));
 
-  const mergedPagination = parsePagination(pagination);
-
   const paginationNode: React.ReactNode = mergedPagination ? (
     <Pagination
       size="small"
       disabled={globalDisabled}
       simple={mergedPagination.simple}
-      pageSize={mergedPagination.pageSize}
+      pageSize={pageSize}
       showLessItems={mergedPagination.showLessItems}
       showSizeChanger={mergedPagination.showSizeChanger}
       className={`${prefixCls}-pagination`}
       total={filteredRenderItems.length}
       current={current}
       onChange={onPageChange}
+      onShowSizeChange={onSizeChange}
     />
   ) : null;
 
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
index 6920c8bb83..764df524d2 100644
--- a/components/transfer/__tests__/index.test.tsx
+++ b/components/transfer/__tests__/index.test.tsx
@@ -73,6 +73,19 @@ const searchTransferProps = {
   targetKeys: ['3', '4'],
 };
 
+const generateData = (n = 20) => {
+  const data = [];
+  for (let i = 0; i < n; i++) {
+    data.push({
+      key: `${i}`,
+      title: `content${i}`,
+      description: `description of content${i}`,
+      chosen: false,
+    });
+  }
+  return data;
+};
+
 describe('Transfer', () => {
   mountTest(Transfer);
   rtlTest(Transfer);
@@ -595,6 +608,32 @@ describe('Transfer', () => {
       );
       await waitFor(() => expect(getAllByTitle('1/1')).toHaveLength(2));
     });
+
+    it('should support change pageSize', () => {
+      const dataSource = generateData();
+      const { container } = render(
+        <Transfer dataSource={dataSource} pagination={{ showSizeChanger: true, simple: false }} />,
+      );
+
+      fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
+      fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
+      expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20);
+    });
+
+    it('should be used first when pagination has pagesize', () => {
+      const dataSource = generateData(30);
+
+      const { container } = render(
+        <Transfer
+          dataSource={dataSource}
+          pagination={{ showSizeChanger: true, simple: false, pageSize: 20 }}
+        />,
+      );
+
+      fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
+      fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]);
+      expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20);
+    });
   });
 
   it('remove by click icon', () => {
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index e10facd00b..7661e5b808 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -110,7 +110,6 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
   } = props;
 
   const [filterValue, setFilterValue] = useState<string>('');
-
   const listBodyRef = useRef<ListBodyRef<RecordType>>({});
 
   const internalHandleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts
index 5e050aed1e..96f18573ad 100644
--- a/components/transfer/style/index.ts
+++ b/components/transfer/style/index.ts
@@ -101,6 +101,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
     marginXS,
     paddingSM,
     lineType,
+    antCls,
     iconCls,
     motionDurationSlow,
     controlItemBgHover,
@@ -174,8 +175,9 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
       display: 'flex',
       flex: 'auto',
       flexDirection: 'column',
-      overflow: 'hidden',
       fontSize: token.fontSize,
+      // https://blog.csdn.net/qq449245884/article/details/107373672/
+      minHeight: 0,
 
       '&-search-wrapper': {
         position: 'relative',
@@ -262,6 +264,10 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
       padding: `${token.paddingXS}px 0`,
       textAlign: 'end',
       borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
+
+      [`${antCls}-pagination-options`]: {
+        paddingInlineEnd: token.paddingXS,
+      },
     },
 
     '&-body-not-found': {

From 4a4d276d25c8f83938aed4b5d22917187c782c17 Mon Sep 17 00:00:00 2001
From: thinkasany <117748716+thinkasany@users.noreply.github.com>
Date: Thu, 29 Jun 2023 01:16:11 +0800
Subject: [PATCH 09/27] type: correct type & remove useless type (#43256)

---
 components/button/button.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/button/button.tsx b/components/button/button.tsx
index 90b0f990f6..c3072af7e4 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -76,8 +76,6 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
   __ANT_BUTTON: boolean;
 };
 
-type Loading = number | boolean;
-
 type LoadingConfigType = {
   loading: boolean;
   delay: number;
@@ -137,7 +135,7 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const loadingOrDelay = useMemo<LoadingConfigType>(() => getLoadingConfig(loading), [loading]);
 
-  const [innerLoading, setLoading] = useState<Loading>(loadingOrDelay.loading);
+  const [innerLoading, setLoading] = useState<boolean>(loadingOrDelay.loading);
 
   const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);
 

From 90a381df2aa8fa0b20b071b9a7c79378ee9dbb6b Mon Sep 17 00:00:00 2001
From: thinkasany <117748716+thinkasany@users.noreply.github.com>
Date: Thu, 29 Jun 2023 10:47:38 +0800
Subject: [PATCH 10/27] type: optimization copyIdRef type (#43257)

---
 components/typography/Base/index.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index 9c712fc529..56cef15b47 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -11,17 +11,17 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
+import { isStyleSupport } from '../../_util/styleChecker';
+import TransButton from '../../_util/transButton';
 import { ConfigContext } from '../../config-provider';
 import useLocale from '../../locale/useLocale';
 import type { TooltipProps } from '../../tooltip';
 import Tooltip from '../../tooltip';
-import { isStyleSupport } from '../../_util/styleChecker';
-import TransButton from '../../_util/transButton';
 import Editable from '../Editable';
-import useMergedConfig from '../hooks/useMergedConfig';
-import useUpdatedEffect from '../hooks/useUpdatedEffect';
 import type { TypographyProps } from '../Typography';
 import Typography from '../Typography';
+import useMergedConfig from '../hooks/useMergedConfig';
+import useUpdatedEffect from '../hooks/useUpdatedEffect';
 import Ellipsis from './Ellipsis';
 import EllipsisTooltip from './EllipsisTooltip';
 
@@ -193,7 +193,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   // ========================== Copyable ==========================
   const [enableCopy, copyConfig] = useMergedConfig<CopyConfig>(copyable);
   const [copied, setCopied] = React.useState(false);
-  const copyIdRef = React.useRef<number>();
+  const copyIdRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const copyOptions: Pick<CopyConfig, 'format'> = {};
   if (copyConfig.format) {
@@ -201,7 +201,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   }
 
   const cleanCopyId = () => {
-    window.clearTimeout(copyIdRef.current!);
+    if (copyIdRef.current) {
+      clearTimeout(copyIdRef.current);
+    }
   };
 
   const onCopyClick = (e?: React.MouseEvent<HTMLDivElement>) => {
@@ -214,7 +216,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
 
     // Trigger tips update
     cleanCopyId();
-    copyIdRef.current = window.setTimeout(() => {
+    copyIdRef.current = setTimeout(() => {
       setCopied(false);
     }, 3000);
 

From 00f4ed3dc91c1ee4c89b4a011cb66c9d45075175 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Thu, 29 Jun 2023 13:03:52 +0800
Subject: [PATCH 11/27] type: params type support generic (#43211)

* type: type optimization

* test: add test case
---
 components/breadcrumb/Breadcrumb.tsx          | 20 +++++++------------
 components/breadcrumb/BreadcrumbItem.tsx      | 10 +++++++---
 .../breadcrumb/__tests__/Breadcrumb.test.tsx  | 15 ++++++++++++++
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index b291aca37f..1f3689b6a4 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -46,9 +46,9 @@ export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
 export type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
-export interface BreadcrumbProps {
+export interface BreadcrumbProps<T extends Record<PropertyKey, any> = any> {
   prefixCls?: string;
-  params?: any;
+  params?: T;
   separator?: React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
@@ -60,19 +60,13 @@ export interface BreadcrumbProps {
 
   items?: ItemType[];
 
-  itemRender?: (
-    route: ItemType,
-    params: any,
-    routes: ItemType[],
-    paths: string[],
-  ) => React.ReactNode;
+  itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => React.ReactNode;
 }
 
-const getPath = (params: any, path?: string) => {
+const getPath = <T extends Record<PropertyKey, any> = any>(params: T, path?: string) => {
   if (path === undefined) {
     return path;
   }
-
   let mergedPath = (path || '').replace(/^\//, '');
   Object.keys(params).forEach((key) => {
     mergedPath = mergedPath.replace(`:${key}`, params[key]!);
@@ -80,7 +74,7 @@ const getPath = (params: any, path?: string) => {
   return mergedPath;
 };
 
-const Breadcrumb = (props: BreadcrumbProps) => {
+const Breadcrumb = <T extends Record<PropertyKey, any> = any>(props: BreadcrumbProps<T>) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',
@@ -113,7 +107,7 @@ const Breadcrumb = (props: BreadcrumbProps) => {
     // generated by route
     const paths: string[] = [];
 
-    const itemRenderRoutes: any = items || legacyRoutes;
+    const itemRenderRoutes = items || legacyRoutes;
 
     crumbs = mergedItems.map((item, index) => {
       const {
@@ -168,7 +162,7 @@ const Breadcrumb = (props: BreadcrumbProps) => {
           onClick={onClick}
           prefixCls={prefixCls}
         >
-          {mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths, href)}
+          {mergedItemRender(item, params, itemRenderRoutes!, paths, href)}
         </InternalBreadcrumbItem>
       );
     });
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 0cb432e1b8..820d409ba0 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -37,7 +37,7 @@ export interface BreadcrumbItemProps extends SeparatorType {
   overlay?: DropdownProps['overlay'];
 }
 
-export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => {
+export const InternalBreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) => {
   const { prefixCls, separator = '/', children, menu, overlay, dropdownProps, href } = props;
 
   // Warning for deprecated usage
@@ -103,11 +103,15 @@ export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => {
   return null;
 };
 
-const BreadcrumbItem = (props: BreadcrumbItemProps) => {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
+  /** @internal */
+  __ANT_BREADCRUMB_ITEM: boolean;
+};
+
+const BreadcrumbItem: CompoundedComponent = (props) => {
   const { prefixCls: customizePrefixCls, children, href, ...restProps } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-
   return (
     <InternalBreadcrumbItem {...restProps} prefixCls={prefixCls}>
       {renderItem(prefixCls, restProps as ItemType, children, href)}
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
index eb00b0f6ed..ccebb91521 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -384,4 +384,19 @@ describe('Breadcrumb', () => {
     );
     expect(document.querySelector('.ant-dropdown')).toBeTruthy();
   });
+
+  it('Breadcrumb params type test', () => {
+    interface Params {
+      key1?: number;
+      key2?: string;
+    }
+    expect(
+      <Breadcrumb<Params>
+        params={{
+          key1: 1,
+          key2: 'test',
+        }}
+      />,
+    ).toBeTruthy();
+  });
 });

From 24e0347a550149a3172e564e51c5491e606b2729 Mon Sep 17 00:00:00 2001
From: kang <kang95630@gmail.com>
Date: Thu, 29 Jun 2023 18:52:00 +0800
Subject: [PATCH 12/27] docs: transition docs lose content (#43273)

---
 docs/spec/transition.en-US.md | 14 +++++++-------
 docs/spec/transition.zh-CN.md | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/spec/transition.en-US.md b/docs/spec/transition.en-US.md
index 00847dfa8c..d3ad0d31ac 100644
--- a/docs/spec/transition.en-US.md
+++ b/docs/spec/transition.en-US.md
@@ -16,19 +16,19 @@ Our Gray Matter are wired to react to dynamic things like movement,shape change
 ## Maintain Context While Changing Views
 
 <video class="transition-video-player" alt="example of Slide In and Slide Out
-" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" />
+" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4"></video>
 
 Slide In and Slide Out: Create an illusion of virtual space.
 
 <br>
 
-<video class="transition-video-player" alt="example of Carousel" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" />
+<video class="transition-video-player" alt="example of Carousel" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4"></video>
 
 Carousel: Carousels are great for extending virtual space.
 
 <br>
 
-<video class="transition-video-player" alt="example of Accordion" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" />
+<video class="transition-video-player" alt="example of Accordion" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4"></video>
 
 Accordion: Accordion helps maintain context while switching views.
 
@@ -38,25 +38,25 @@ Accordion: Accordion helps maintain context while switching views.
 
 ## Explain What Just Happened
 
-<video class="transition-video-player" alt="example of Adding an Object" description="When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow." src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />
+<video class="transition-video-player" alt="example of Adding an Object" description="When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow." src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4"></video>
 
 Adding an Object: Add an object in the table or chart.
 
 <br>
 
-<video class="transition-video-player" alt="example of Deleting Objects" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" />
+<video class="transition-video-player" alt="example of Deleting Objects" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4"></video>
 
 Deleting an Object: Delete an object in the table or chart.
 
 <br>
 
-<video class="transition-video-player" alt="example of Modifying an object" description="Status No.1: The user modifies the value of Detail. <br>Status No.2: After the user click the save button, a yellow fill is displayed in the grid of Detail, which indicates the change of the object. <br>Status No.3: The fill fades in several seconds and returned to normal." src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />
+<video class="transition-video-player" alt="example of Modifying an object" description="Status No.1: The user modifies the value of Detail. <br>Status No.2: After the user click the save button, a yellow fill is displayed in the grid of Detail, which indicates the change of the object. <br>Status No.3: The fill fades in several seconds and returned to normal." src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4"></video>
 
 Modifying an Object: Modify an object in the table or chart.
 
 <br>
 
-<video class="transition-video-player" alt="example of Calling out an Object" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" />
+<video class="transition-video-player" alt="example of Calling out an Object" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4"></video>
 
 Calling out an Object: Click the page element and call out a new object.
 
diff --git a/docs/spec/transition.zh-CN.md b/docs/spec/transition.zh-CN.md
index 9ce98793ef..ce652e41df 100644
--- a/docs/spec/transition.zh-CN.md
+++ b/docs/spec/transition.zh-CN.md
@@ -15,19 +15,19 @@ title: 巧用过渡
 
 ## 在视图变化时保持上下文
 
-<video class="transition-video-player" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" />
+<video class="transition-video-player" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4"></video>
 
 滑入与滑出：可以有效构建虚拟空间。
 
 <br>
 
-<video class="transition-video-player" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" />
+<video class="transition-video-player" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4"></video>
 
 传送带：可极大地扩展虚拟空间。
 
 <br>
 
-<video class="transition-video-player" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" />
+<video class="transition-video-player" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4"></video>
 
 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
 
@@ -37,25 +37,25 @@ title: 巧用过渡
 
 ## 解释刚刚发生了什么
 
-<video class="transition-video-player" alt="对象增加示例" description="新增一条对象时，该行「高亮」告知用户这是新增项；几秒后「高亮」消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />
+<video class="transition-video-player" alt="对象增加示例" description="新增一条对象时，该行「高亮」告知用户这是新增项；几秒后「高亮」消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4"></video>
 
 对象增加：在列表/表格中，新增了一个对象。
 
 <br>
 
-<video class="transition-video-player" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" />
+<video class="transition-video-player" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4"></video>
 
 对象删除：在列表/表格中，删除了一个对象。
 
 <br>
 
-<video class="transition-video-player" alt="对象更改示例" description="状态一：用户更改了「详情」中的值；<br>状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />
+<video class="transition-video-player" alt="对象更改示例" description="状态一：用户更改了「详情」中的值；<br>状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4"></video>
 
 对象更改：在列表/表格中，更改了一个对象。
 
 <br>
 
-<video class="transition-video-player" alt="对象呼出示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" />
+<video class="transition-video-player" alt="对象呼出示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4"></video>
 
 对象呼出：点击页面中元素，呼出一个新对象。
 

From e985f8e84581dfdf2fe0c811c24c621842d9d1a7 Mon Sep 17 00:00:00 2001
From: Rainey <xuebing_orz@icloud.com>
Date: Thu, 29 Jun 2023 19:27:30 +0800
Subject: [PATCH 13/27] fix: mergedAppConfig dependency exception (#43269)

Signed-off-by: Rainey <xuebing_orz@icloud.com>
---
 components/app/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/app/index.tsx b/components/app/index.tsx
index 1ece36064a..56df12b953 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -42,7 +42,7 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
       message: { ...appConfig.message, ...message },
       notification: { ...appConfig.notification, ...notification },
     }),
-    [message, notification, appConfig.message, appConfig.message],
+    [message, notification, appConfig.message, appConfig.notification],
   );
 
   const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.message);

From 78714e01c4685019bf412aeb9acc5bc88e0284da Mon Sep 17 00:00:00 2001
From: Zhou Fang <linkfang@outlook.com>
Date: Thu, 29 Jun 2023 11:57:39 -0400
Subject: [PATCH 14/27] demo: translate chinese to english (#43234)

* Updated language in layout-can-wrap.tsx

* Updated language in draggable.tsx

* Updated language in drag-debug.tsx

* Updated language in tree/demo/draggable.tsx

* Updated jest snapshots for form

---------

Co-authored-by: Zhou Fang <zhfaxb@syntronic.com>
---
 .../form/__tests__/__snapshots__/demo-extend.test.ts.snap | 8 ++++----
 .../form/__tests__/__snapshots__/demo.test.tsx.snap       | 8 ++++----
 components/form/demo/layout-can-wrap.tsx                  | 4 ++--
 components/tag/demo/draggable.tsx                         | 4 ++--
 components/tree/demo/drag-debug.tsx                       | 6 +++---
 components/tree/demo/draggable.tsx                        | 6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2491e6a522..15e28e5f15 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -7591,9 +7591,9 @@ exports[`renders components/form/demo/layout-can-wrap.tsx extend context correct
         <label
           class="ant-form-item-required ant-form-item-no-colon"
           for="wrap_username"
-          title="正常标签文案"
+          title="Normal label"
         >
-          正常标签文案
+          Normal label
         </label>
       </div>
       <div
@@ -7631,9 +7631,9 @@ exports[`renders components/form/demo/layout-can-wrap.tsx extend context correct
         <label
           class="ant-form-item-required ant-form-item-no-colon"
           for="wrap_password"
-          title="超长标签文案超长标签文案"
+          title="A super long label text"
         >
-          超长标签文案超长标签文案
+          A super long label text
         </label>
       </div>
       <div
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 66e073c921..0a0a2d5cfc 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4844,9 +4844,9 @@ exports[`renders components/form/demo/layout-can-wrap.tsx correctly 1`] = `
         <label
           class="ant-form-item-required ant-form-item-no-colon"
           for="wrap_username"
-          title="正常标签文案"
+          title="Normal label"
         >
-          正常标签文案
+          Normal label
         </label>
       </div>
       <div
@@ -4884,9 +4884,9 @@ exports[`renders components/form/demo/layout-can-wrap.tsx correctly 1`] = `
         <label
           class="ant-form-item-required ant-form-item-no-colon"
           for="wrap_password"
-          title="超长标签文案超长标签文案"
+          title="A super long label text"
         >
-          超长标签文案超长标签文案
+          A super long label text
         </label>
       </div>
       <div
diff --git a/components/form/demo/layout-can-wrap.tsx b/components/form/demo/layout-can-wrap.tsx
index d41cb0686f..11d332ba3b 100644
--- a/components/form/demo/layout-can-wrap.tsx
+++ b/components/form/demo/layout-can-wrap.tsx
@@ -11,11 +11,11 @@ const App: React.FC = () => (
     colon={false}
     style={{ maxWidth: 600 }}
   >
-    <Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
+    <Form.Item label="Normal label" name="username" rules={[{ required: true }]}>
       <Input />
     </Form.Item>
 
-    <Form.Item label="超长标签文案超长标签文案" name="password" rules={[{ required: true }]}>
+    <Form.Item label="A super long label text" name="password" rules={[{ required: true }]}>
       <Input />
     </Form.Item>
 
diff --git a/components/tag/demo/draggable.tsx b/components/tag/demo/draggable.tsx
index 9e8820b96c..559cb14842 100644
--- a/components/tag/demo/draggable.tsx
+++ b/components/tag/demo/draggable.tsx
@@ -25,14 +25,14 @@ const DraggableTag: FC<DraggableTagProps> = (props) => {
 
   const commonStyle = {
     cursor: 'move',
-    transition: 'unset', // 防止拖拽完毕之后元素抖动
+    transition: 'unset', // Prevent element from shaking after drag
   };
 
   const style = transform
     ? {
         ...commonStyle,
         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        transition: isDragging ? 'unset' : transition, // 处理拖拽中的元素不跟手的问题
+        transition: isDragging ? 'unset' : transition, // Improve performance/visual effect when dragging
       }
     : commonStyle;
 
diff --git a/components/tree/demo/drag-debug.tsx b/components/tree/demo/drag-debug.tsx
index 3442009846..581b42928b 100644
--- a/components/tree/demo/drag-debug.tsx
+++ b/components/tree/demo/drag-debug.tsx
@@ -40,7 +40,7 @@ const App: React.FC = () => {
 
   const onDragEnter: TreeProps['onDragEnter'] = (info) => {
     console.log(info);
-    // expandedKeys 需要受控时设置
+    // expandedKeys, set it when controlled is needed
     setExpandedKeys(info.expandedKeys);
   };
 
@@ -79,7 +79,7 @@ const App: React.FC = () => {
       // Drop on the content
       loop(data, dropKey, (item) => {
         item.children = item.children || [];
-        // where to insert 示例添加到尾部，可以是随意位置
+        // where to insert. New item was inserted to the end of the array in this example, but can be anywhere
         item.children.push(dragObj);
       });
     } else if (
@@ -89,7 +89,7 @@ const App: React.FC = () => {
     ) {
       loop(data, dropKey, (item) => {
         item.children = item.children || [];
-        // where to insert 示例添加到头部，可以是随意位置
+        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
         item.children.unshift(dragObj);
       });
     } else {
diff --git a/components/tree/demo/draggable.tsx b/components/tree/demo/draggable.tsx
index 6c4bb62049..0f8b8d8249 100644
--- a/components/tree/demo/draggable.tsx
+++ b/components/tree/demo/draggable.tsx
@@ -36,7 +36,7 @@ const App: React.FC = () => {
 
   const onDragEnter: TreeProps['onDragEnter'] = (info) => {
     console.log(info);
-    // expandedKeys 需要受控时设置
+    // expandedKeys, set it when controlled is needed
     // setExpandedKeys(info.expandedKeys)
   };
 
@@ -74,7 +74,7 @@ const App: React.FC = () => {
       // Drop on the content
       loop(data, dropKey, (item) => {
         item.children = item.children || [];
-        // where to insert 示例添加到头部，可以是随意位置
+        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
         item.children.unshift(dragObj);
       });
     } else if (
@@ -84,7 +84,7 @@ const App: React.FC = () => {
     ) {
       loop(data, dropKey, (item) => {
         item.children = item.children || [];
-        // where to insert 示例添加到头部，可以是随意位置
+        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
         item.children.unshift(dragObj);
         // in previous version, we use item.children.push(dragObj) to insert the
         // item to the tail of the children

From a39abf7c26d62b5dbc959e89cb29ef3dc0b8a36c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 30 Jun 2023 11:32:09 +0800
Subject: [PATCH 15/27] fix: Form should not trigger unnescessary
 onFieldsChange (#43290)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 143ced3f66..4943f7bf1e 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "rc-dialog": "~9.1.0",
     "rc-drawer": "~6.2.0",
     "rc-dropdown": "~4.1.0",
-    "rc-field-form": "~1.32.0",
+    "rc-field-form": "~1.34.0",
     "rc-image": "~5.17.1",
     "rc-input": "~1.0.4",
     "rc-input-number": "~7.4.0",

From 02646cdf176a49149530bf729528e2a2119f3b6a Mon Sep 17 00:00:00 2001
From: Quincy Qiu <39936160+qiuqfang@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:53:20 +0800
Subject: [PATCH 16/27] docs: Auto-modify theme editing content (#43287)

---
 .dumi/pages/theme-editor/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx
index 5d11f141ba..e0df502b38 100644
--- a/.dumi/pages/theme-editor/index.tsx
+++ b/.dumi/pages/theme-editor/index.tsx
@@ -183,6 +183,10 @@ const CustomTheme = () => {
           style={{ height: 'calc(100vh - 64px - 56px)' }}
           onThemeChange={(newTheme) => {
             setTheme(newTheme.config);
+            setThemeConfigContent({
+              json: newTheme.config,
+              text: undefined,
+            });
           }}
           locale={lang === 'cn' ? zhCN : enUS}
         />

From cb338a2c614ae83d53db2eadec13f2d3c6ae9530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com>
Date: Fri, 30 Jun 2023 14:19:06 +0800
Subject: [PATCH 17/27] fix: Button disabled style with link or href case
 (#43091)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Button disabled style with link or href case

* chore: update

* fix: update link disable logic

* test: update snapshot

* chore: update

* chore: update code

Co-authored-by: wxh16144 <wxh16144@users.noreply.github.com>

* Update components/button/style/index.ts

Co-authored-by: Wuxh <wxh16144@qq.com>

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
Co-authored-by: wuxh <wxh1220@gmail.com>
Co-authored-by: wxh16144 <wxh16144@users.noreply.github.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: Wuxh <wxh16144@qq.com>
---
 components/button/button.tsx     |  7 +++----
 components/button/style/index.ts | 32 ++++++++++++++++++--------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/button/button.tsx b/components/button/button.tsx
index c3072af7e4..868b60186e 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -216,8 +216,6 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const linkButtonRestProps = omit(rest as ButtonProps & { navigate: any }, ['navigate']);
 
-  const hrefAndDisabled = linkButtonRestProps.href !== undefined && mergedDisabled;
-
   const classes = classNames(
     prefixCls,
     hashId,
@@ -232,7 +230,6 @@ const InternalButton: React.ForwardRefRenderFunction<
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-disabled`]: hrefAndDisabled,
     },
     compactItemClassnames,
     className,
@@ -261,7 +258,9 @@ const InternalButton: React.ForwardRefRenderFunction<
     return wrapSSR(
       <a
         {...linkButtonRestProps}
-        className={classes}
+        className={classNames(classes, {
+          [`${prefixCls}-disabled`]: mergedDisabled,
+        })}
         style={fullStyle}
         onClick={handleClick}
         ref={buttonRef as React.Ref<HTMLAnchorElement>}
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 23df848cad..3737efe86c 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -115,8 +115,12 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
   };
 };
 
-const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
-  '&:not(:disabled)': {
+const genHoverActiveButtonStyle = (
+  btnCls: string,
+  hoverStyle: CSSObject,
+  activeStyle: CSSObject,
+): CSSObject => ({
+  [`&:not(:disabled):not(${btnCls}-disabled)`]: {
     '&:hover': hoverStyle,
     '&:active': activeStyle,
   },
@@ -161,6 +165,7 @@ const genGhostButtonStyle = (
     boxShadow: 'none',
 
     ...genHoverActiveButtonStyle(
+      btnCls,
       {
         backgroundColor: 'transparent',
         ...hoverStyle,
@@ -180,7 +185,7 @@ const genGhostButtonStyle = (
 });
 
 const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  '&:disabled': {
+  [`&:disabled, &${token.componentCls}-disabled`]: {
     ...genDisabledStyle(token),
   },
 });
@@ -190,7 +195,7 @@ const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 });
 
 const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  '&:disabled': {
+  [`&:disabled, &${token.componentCls}-disabled`]: {
     cursor: 'not-allowed',
     color: token.colorTextDisabled,
   },
@@ -206,6 +211,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorPrimaryHover,
       borderColor: token.colorPrimaryHover,
@@ -229,6 +235,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     borderColor: token.colorError,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
         borderColor: token.colorErrorBorderHover,
@@ -260,6 +267,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorTextLightSolid,
       backgroundColor: token.colorPrimaryHover,
@@ -291,6 +299,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         backgroundColor: token.colorErrorHover,
       },
@@ -329,6 +338,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   color: token.colorLink,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorLinkHover,
     },
@@ -343,6 +353,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
     color: token.colorError,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
       },
@@ -358,6 +369,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 // Type: Text
 const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorText,
       backgroundColor: token.colorBgTextHover,
@@ -375,6 +387,7 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 
     ...genPureDisabledButtonStyle(token),
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
         backgroundColor: token.colorErrorBg,
@@ -387,14 +400,6 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   },
 });
 
-// Href and Disabled
-const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  ...genDisabledStyle(token),
-  [`&${token.componentCls}:hover`]: {
-    ...genDisabledStyle(token),
-  },
-});
-
 const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token;
 
@@ -404,7 +409,6 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
     [`${componentCls}-dashed`]: genDashedButtonStyle(token),
     [`${componentCls}-link`]: genLinkButtonStyle(token),
     [`${componentCls}-text`]: genTextButtonStyle(token),
-    [`${componentCls}-disabled`]: genDisabledButtonStyle(token),
   };
 };
 
@@ -528,7 +532,7 @@ export default genComponentStyleHook('Button', (token) => {
     // Block
     genBlockButtonStyle(buttonToken),
 
-    // Group (type, ghost, danger, disabled, loading)
+    // Group (type, ghost, danger, loading)
     genTypeButtonStyle(buttonToken),
 
     // Button Group

From d9d44195a6f99301a826b3fd8b6aa8c722ae42ea Mon Sep 17 00:00:00 2001
From: LHH <63722633+dayzKo1@users.noreply.github.com>
Date: Fri, 30 Jun 2023 17:49:00 +0800
Subject: [PATCH 18/27] docs: fix dayjs updateLocale usage (#43250)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix：dayjs中没有updateLocale方法，直接使用local("zh-cn")

codesandbox中的示例也报错了。。找不到updateLocale方法

* Apply suggestions from code review

Signed-off-by: afc163 <afc163@gmail.com>

* Update index.en-US.md

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 components/date-picker/index.en-US.md | 3 ++-
 components/date-picker/index.zh-CN.md | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 7a83397476..e8360aaff0 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -248,8 +248,9 @@ Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-
 ```js
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import 'dayjs/plugin/updateLocale';
+import updateLocale from 'dayjs/plugin/updateLocale';
 
+dayjs.extend(updateLocale);
 dayjs.updateLocale('zh-cn', {
   weekStart: 0,
 });
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index ebd1c63fdd..0d5eda09a1 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -243,8 +243,10 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```js
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import 'dayjs/plugin/updateLocale';
 
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
 dayjs.updateLocale('zh-cn', {
   weekStart: 0,
 });

From ab036297b35936c544c561efe4dddf7c149be4cd Mon Sep 17 00:00:00 2001
From: daisy <47104575+linxianxi@users.noreply.github.com>
Date: Fri, 30 Jun 2023 17:49:25 +0800
Subject: [PATCH 19/27] demo: fix table drag demo click event not working
 (#43291)

---
 components/table/demo/drag-sorting.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/table/demo/drag-sorting.tsx b/components/table/demo/drag-sorting.tsx
index f6d9269759..e5e11ce1d1 100644
--- a/components/table/demo/drag-sorting.tsx
+++ b/components/table/demo/drag-sorting.tsx
@@ -1,9 +1,9 @@
 import type { DragEndEvent } from '@dnd-kit/core';
-import { DndContext } from '@dnd-kit/core';
+import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
-  arrayMove,
   SortableContext,
+  arrayMove,
   useSortable,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
@@ -77,6 +77,15 @@ const App: React.FC = () => {
     },
   ]);
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        // https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints
+        distance: 1,
+      },
+    }),
+  );
+
   const onDragEnd = ({ active, over }: DragEndEvent) => {
     if (active.id !== over?.id) {
       setDataSource((prev) => {
@@ -88,7 +97,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
+    <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
         // rowKey array
         items={dataSource.map((i) => i.key)}

From 5c0f632235e21c68c044fe1b82a53ad102ca1a41 Mon Sep 17 00:00:00 2001
From: dong <67093787+tinyfind@users.noreply.github.com>
Date: Fri, 30 Jun 2023 19:16:24 +0800
Subject: [PATCH 20/27] fix: fix Select clear icon position with feedback
 (#43302)

Co-authored-by: zhiyuandong.dzy <zhiyuandong.dzy@digital-engine.com>
---
 components/select/style/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
index 202be12803..45bb9c94ba 100644
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@@ -235,7 +235,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
     // ========================= Feedback ==========================
     [`${componentCls}-has-feedback`]: {
       [`${componentCls}-clear`]: {
-        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS,
+        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXS,
       },
     },
   };

From 6ead5ae5ef0f5526d295c84d209abd5421f5362e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 1 Jul 2023 01:29:54 +0800
Subject: [PATCH 21/27] demo: update badge demo (#43307)

---
 .../__tests__/__snapshots__/demo-extend.test.ts.snap     | 6 +-----
 .../badge/__tests__/__snapshots__/demo.test.ts.snap      | 6 +-----
 components/badge/demo/ribbon.tsx                         | 9 ++-------
 3 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index e5231453e9..03cfd35a1b 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1976,11 +1976,7 @@ exports[`renders components/badge/demo/ribbon.tsx extend context correctly 1`] =
         <span
           class="ant-ribbon-text"
         >
-          <div>
-            Hippies
-            <br />
-            Happy
-          </div>
+          Hippies
         </span>
         <div
           class="ant-ribbon-corner"
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
index 095efe11d3..52a4a358e9 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -1977,11 +1977,7 @@ exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
         <span
           class="ant-ribbon-text"
         >
-          <div>
-            Hippies
-            <br />
-            Happy
-          </div>
+          Hippies
         </span>
         <div
           class="ant-ribbon-corner"
diff --git a/components/badge/demo/ribbon.tsx b/components/badge/demo/ribbon.tsx
index 4770cd9bfa..a58e16f09e 100644
--- a/components/badge/demo/ribbon.tsx
+++ b/components/badge/demo/ribbon.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Badge, Card, Space } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
   <Space direction="vertical" size="middle" style={{ width: '100%' }}>
@@ -8,12 +8,7 @@ const App: React.FC = () => (
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-    <Badge.Ribbon text={
-        <div>
-          Hippies <br />
-          Happy
-        </div>
-      } color="pink">
+    <Badge.Ribbon text="Hippies" color="pink">
       <Card title="Pushes open the window" size="small">
         and raises the spyglass.
       </Card>

From 1d2f874150c2a3db43de7773066e15c4f20ee116 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 1 Jul 2023 01:30:19 +0800
Subject: [PATCH 22/27] style: Badge color should be respected (#43304)

* style: Badge color should be respected

* test: update snapshot

* style: fix Badge color
---
 .../__snapshots__/demo-extend.test.ts.snap    | 1030 ++++++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap | 1030 ++++++++++-------
 .../badge/demo/colorful-with-count-debug.tsx  |   47 +-
 components/badge/style/index.ts               |    5 +-
 4 files changed, 1291 insertions(+), 821 deletions(-)

diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index 03cfd35a1b..88077d5007 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -627,531 +627,759 @@ Array [
 `;
 
 exports[`renders components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap: wrap; margin-bottom: -16px;"
->
+Array [
   <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -16px;"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        pink
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          pink
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        red
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          red
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        yellow
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          yellow
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        orange
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          orange
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        cyan
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          cyan
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        green
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          green
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        blue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
+          blue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge"
       >
-        purple
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
-        data-show="true"
-        title="44"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          purple
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          geekblue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          magenta
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge"
       >
-        geekblue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
-        data-show="true"
-        title="44"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          volcano
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          gold
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          lime
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+  </div>,
   <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -16px;"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        magenta
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-pink"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-red"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-yellow"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        volcano
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-orange"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-cyan"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-green"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        gold
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-blue"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-purple"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-geekblue"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        lime
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-magenta"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-volcano"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-gold"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-</div>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-lime"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/badge/demo/dot.tsx extend context correctly 1`] = `
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
index 52a4a358e9..1189cbb6a0 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -628,531 +628,759 @@ Array [
 `;
 
 exports[`renders components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap:wrap;margin-bottom:-16px"
->
+Array [
   <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-16px"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        pink
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          pink
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        red
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          red
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        yellow
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          yellow
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        orange
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          orange
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        cyan
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          cyan
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        green
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          green
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        blue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
+          blue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge"
       >
-        purple
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
-        data-show="true"
-        title="44"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          purple
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          geekblue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          magenta
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge"
       >
-        geekblue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
-        data-show="true"
-        title="44"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          volcano
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          gold
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          lime
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+  </div>,
   <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-16px"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        magenta
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-pink"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-red"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-yellow"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        volcano
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-orange"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-cyan"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-green"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        gold
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-blue"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-purple"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-geekblue"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
-        lime
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
-        data-show="true"
-        title="44"
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-magenta"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-volcano"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-gold"
+        />
+        <span
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-</div>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-lime"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
diff --git a/components/badge/demo/colorful-with-count-debug.tsx b/components/badge/demo/colorful-with-count-debug.tsx
index 5d0084337d..c659056ece 100644
--- a/components/badge/demo/colorful-with-count-debug.tsx
+++ b/components/badge/demo/colorful-with-count-debug.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Badge, Space } from 'antd';
+import React from 'react';
 
 const colors = [
   'pink',
@@ -17,24 +17,35 @@ const colors = [
   'lime',
 ];
 
+const AvatarItem = ({ color }: { color: string }) => (
+  <div
+    style={{
+      width: 90,
+      height: 90,
+      lineHeight: '90px',
+      background: '#ccc',
+      textAlign: 'center',
+    }}
+  >
+    {color}
+  </div>
+);
+
 const App: React.FC = () => (
-  <Space wrap size={['large', 'middle']}>
-    {colors.map((color) => (
-      <Badge color={color} count={44} key={color}>
-        <div
-          style={{
-            width: 90,
-            height: 90,
-            lineHeight: '90px',
-            background: '#ccc',
-            textAlign: 'center',
-          }}
-        >
-          {color}
-        </div>
-      </Badge>
-    ))}
-  </Space>
+  <>
+    <Space wrap size={['large', 'middle']}>
+      {colors.map((color) => (
+        <Badge color={color} count={44} key={color}>
+          <AvatarItem color={color} />
+        </Badge>
+      ))}
+    </Space>
+    <Space wrap size={['large', 'middle']}>
+      {colors.map((color) => (
+        <Badge status="processing" color={color} text="loading" key={color} />
+      ))}
+    </Space>
+  </>
 );
 
 export default App;
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index f474ee2da9..3c1a276039 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -74,8 +74,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
   const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
 
   const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
-    [`${componentCls}-color-${colorKey}`]: {
+    [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
       background: darkColor,
+      [`&:not(${componentCls}-count)`]: {
+        color: darkColor,
+      },
     },
   }));
 

From e2907c8ac27457c12b8a366299a4af9c3280bd99 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 3 Jul 2023 09:55:42 +0800
Subject: [PATCH 23/27] performance: add key for <i /> (#43317)

* performance: add key for <i />

* Update index.tsx

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

---------

Signed-off-by: lijianan <574980606@qq.com>
---
 components/spin/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 92f9bc8442..216024e36b 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -61,10 +61,10 @@ function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactN
 
   return (
     <span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
-      <i className={`${prefixCls}-dot-item`} />
-      <i className={`${prefixCls}-dot-item`} />
-      <i className={`${prefixCls}-dot-item`} />
-      <i className={`${prefixCls}-dot-item`} />
+      <i className={`${prefixCls}-dot-item`} key={1} />
+      <i className={`${prefixCls}-dot-item`} key={2} />
+      <i className={`${prefixCls}-dot-item`} key={3} />
+      <i className={`${prefixCls}-dot-item`} key={4} />
     </span>
   );
 }

From d5f5998a73b3357e4951ce1d50b97cfe48ff8fc1 Mon Sep 17 00:00:00 2001
From: xrkffgg <xrkffgg@gmail.com>
Date: Mon, 3 Jul 2023 11:37:03 +0800
Subject: [PATCH 24/27] docs: add changelog 5.6.4 (#43320)

* docs: add changelog 5.6.4

* docs: update
---
 CHANGELOG.en-US.md | 19 +++++++++++++++++++
 CHANGELOG.zh-CN.md | 19 +++++++++++++++++++
 package.json       |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 29372905d1..69aa3d8b8b 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,25 @@ timeline: true
 
 ---
 
+## 5.6.4
+
+`2023-07-03`
+
+- Form
+  - 🐞 Fix `onFieldsChange` event will still be triggered incorrectly when the field is not configured with `rules` when the Form is submitted. [#43290](https://github.com/ant-design/ant-design/pull/43290)
+  - 🐞 Fix the problem that the warning message that `name` is empty is falsely reported when the `name` of Form.List is 0. [#43199](https://github.com/ant-design/ant-design/pull/43199) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix the Badge `color` attribute does not take effect. [#43304](https://github.com/ant-design/ant-design/pull/43304)
+- 🐞 Fix the position of Select clear icon when FormItem sets `hasFeedback`. [#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind)
+- 🐞 Fix Transfer paging drop-down button is hidden and `showSizeChanger` method is invalid. [#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix the invalid modification of `colorText` and `fontSize` of Popconfirm component. [#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix the problem that deleting files after Upload configures `maxCount` will not trigger `onChange`. [#43193](https://github.com/ant-design/ant-design/pull/43193)
+- 💄 Fix Button disabled style error when it has `link` or `href` attribute. [#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai)
+- TypeScript
+  - 🤖 Optimize Breadcrumb `params` type and support generics. [#43211](https://github.com/ant-design/ant-design/pull/43211)
+  - 🤖 Optimize Breadcrumb `params` type and support generics. [#43257](https://github.com/ant-design/ant-design/pull/43257) [@thinkasany](https://github.com/thinkasany)
+  - 🤖 Remove redundant number type from Button `loading`. [#43256](https://github.com/ant-design/ant-design/pull/43256) [@thinkasany](https://github.com/thinkasany)
+  - 🤖 Transparently pass Cascader `optionType` generic. [#43231](https://github.com/ant-design/ant-design/pull/43231) [@ZWkang](https://github.com/ZWkang)
+
 ## 5.6.3
 
 `2023-06-25`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7f4268fb35..7b1bd9219f 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,25 @@ timeline: true
 
 ---
 
+## 5.6.4
+
+`2023-07-03`
+
+- Form
+  - 🐞 修复 Form 在提交时，字段没有配置 `rules` 时仍会错误触发 `onFieldsChange` 事件的问题。[#43290](https://github.com/ant-design/ant-design/pull/43290)
+  - 🐞 修复 Form.List 的 `name` 为 0 时误报 `name` 为空的警告信息的问题。[#43199](https://github.com/ant-design/ant-design/pull/43199) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Badge `color` 属性不生效的问题。[#43304](https://github.com/ant-design/ant-design/pull/43304)
+- 🐞 修复 Select 组件的消除图标在 FormItem 设置 `hasFeedback` 时的位置问题。[#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind)
+- 🐞 修复 Transfer 分页下拉按钮被隐藏以及 `showSizeChanger` 方法无效。[#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Popconfirm 组件 `colorText` 和  `fontSize` 修改无效的问题。[#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Upload 配置 `maxCount` 后删除文件不会触发 `onChange` 的问题。[#43193](https://github.com/ant-design/ant-design/pull/43193)
+- 💄 修复 Button 在有 `link` 或 `href` 属性时禁用样式错误。[#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai)
+- TypeScript
+  - 🤖 优化 Breadcrumb `params` 类型，支持泛型。[#43211](https://github.com/ant-design/ant-design/pull/43211)
+  - 🤖 优化 Typography `copyIdRef` 类型。[#43257](https://github.com/ant-design/ant-design/pull/43257) [@thinkasany](https://github.com/thinkasany)
+  - 🤖 移除 Button `loading` 多余 number 类型。[#43256](https://github.com/ant-design/ant-design/pull/43256) [@thinkasany](https://github.com/thinkasany)
+  - 🤖 透传 Cascader `optionType` 泛型。[#43231](https://github.com/ant-design/ant-design/pull/43231) [@ZWkang](https://github.com/ZWkang)
+
 ## 5.6.3
 
 `2023-06-25`
diff --git a/package.json b/package.json
index 4943f7bf1e..e91126b8bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.6.3",
+  "version": "5.6.4",
   "packageManager": "^npm@9.0.0",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",

From c583d3217b42f7f1ccf83572fe90b678812ccad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=A3=E9=87=8C=E5=A5=BD=E8=84=8F=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5?= <453491931@qq.com>
Date: Mon, 3 Jul 2023 15:50:30 +0800
Subject: [PATCH 25/27] Update data-format.zh-CN.md (#43324)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 那里好脏不可以 <gaosheng@kuaishou.com>
---
 docs/spec/data-format.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/spec/data-format.zh-CN.md b/docs/spec/data-format.zh-CN.md
index d7fecf891c..7456a57cd8 100644
--- a/docs/spec/data-format.zh-CN.md
+++ b/docs/spec/data-format.zh-CN.md
@@ -66,7 +66,7 @@ title: 数据格式
 <img class="preview-img bad" alt="不推荐示例" description="“千”不能以单位的形式展示。" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iuEARoq_-o0AAAAAAAAAAABkARQnAQ">
 </ImagePreview>
 
-**大额计量：** 如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。
+**大额计量：** 如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。
 
 ### 日期时间
 

From b46c2d062b6aba01acee0d60aa3351528a7dfc33 Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Mon, 3 Jul 2023 17:12:13 +0800
Subject: [PATCH 26/27] style(progress): support animation in rtl direction
 (#43316)

---
 components/progress/style/index.tsx | 41 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx
index 2a5275d3ef..b68ae667c0 100644
--- a/components/progress/style/index.tsx
+++ b/components/progress/style/index.tsx
@@ -1,8 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
@@ -16,20 +16,23 @@ interface ProgressToken extends FullToken<'Progress'> {
   progressActiveMotionDuration: string;
 }
 
-const antProgressActive = new Keyframes('antProgressActive', {
-  '0%': {
-    transform: 'translateX(-100%) scaleX(0)',
-    opacity: 0.1,
-  },
-  '20%': {
-    transform: 'translateX(-100%) scaleX(0)',
-    opacity: 0.5,
-  },
-  to: {
-    transform: 'translateX(0) scaleX(1)',
-    opacity: 0,
-  },
-});
+const genAntProgressActive = (isRtl?: boolean) => {
+  const direction = isRtl ? '100%' : '-100%';
+  return new Keyframes(`antProgress${isRtl ? 'RTL' : 'LTR'}Active`, {
+    '0%': {
+      transform: `translateX(${direction}) scaleX(0)`,
+      opacity: 0.1,
+    },
+    '20%': {
+      transform: `translateX(${direction}) scaleX(0)`,
+      opacity: 0.5,
+    },
+    to: {
+      transform: 'translateX(0) scaleX(1)',
+      opacity: 0,
+    },
+  });
+};
 
 const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
   const { componentCls: progressCls, iconCls: iconPrefixCls } = token;
@@ -116,7 +119,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
           backgroundColor: token.colorBgContainer,
           borderRadius: token.progressLineRadius,
           opacity: 0,
-          animationName: antProgressActive,
+          animationName: genAntProgressActive(),
           animationDuration: token.progressActiveMotionDuration,
           animationTimingFunction: token.motionEaseOutQuint,
           animationIterationCount: 'infinite',
@@ -124,6 +127,12 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
         },
       },
 
+      [`&${progressCls}-rtl${progressCls}-status-active`]: {
+        [`${progressCls}-bg::before`]: {
+          animationName: genAntProgressActive(true),
+        },
+      },
+
       [`&${progressCls}-status-exception`]: {
         [`${progressCls}-bg`]: {
           backgroundColor: token.colorError,

From 873afe1e0b0d0a64b7590440fdbe527d5ba0666f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 3 Jul 2023 21:22:22 +0800
Subject: [PATCH 27/27] docs: update faq about strictNullChecks (#43332)

* docs: update faq about strictNullChecks

* docs: update faq about strictNullChecks
---
 docs/react/faq.en-US.md | 31 +++++++++++++++++++++++++++++++
 docs/react/faq.zh-CN.md | 31 +++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
index 67feb46644..865845e137 100644
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@@ -234,3 +234,34 @@ Here are some typical wrong examples:
 ## Do you guys have any channel or website for submitting monetary donations, like through PayPal or Alipay?
 
 [https://opencollective.com/ant-design](https://opencollective.com/ant-design)
+
+## Use Form's `setFieldsValue` method to report an error if the object type contains `null`
+
+When we try to set the form value using the `setFieldsValue` method in the form instance of the form component, if the passed object contains the type null, such as:
+
+```tsx
+// This is not real world code, just for explain
+import { Form } from 'antd';
+
+type Test = {
+  value: string[] | null;
+};
+
+export default () => {
+  const [form] = Form.useForm<Test>();
+
+  form.setFieldsValue({
+    value: null, // Error: Type "null" cannot be assigned to type "string[] | undefined".
+  });
+};
+```
+
+If you encounter the above error, please check the current project `tsconfig.json` contains the following configuration:
+
+```json
+{
+  "strictNullChecks": true
+}
+```
+
+The above problem occurs if `strictNullChecks` is set to `true`, If you can determine the project don't need this configuration (see [strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks) to judge whether need the configuration). You can try changing to `false` to turn off the control strict check. However, if you do need to enable this feature, you can avoid this situation by using other types instead of `null` when designing types
diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
index 631bbe82ba..35973d24f7 100644
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@@ -256,3 +256,34 @@ import { ConfigProvider } from 'antd';
 ## 你们有接受捐助的渠道吗，比如支付宝或者微信支付？
 
 [https://opencollective.com/ant-design](https://opencollective.com/ant-design)
+
+## 使用表单组件的 `setFieldsValue` 方法如果对象类型中含有 `null` 时 TS 类型报错
+
+当我们尝试使用表单组件的表单实例当中的 `setFieldsValue` 方法设置表单值时，如果在传入的对象中包含有 `null` 类型，如：
+
+```tsx
+// This is not real world code, just for explain
+import { Form } from 'antd';
+
+type Test = {
+  value: string[] | null;
+};
+
+export default () => {
+  const [form] = Form.useForm<Test>();
+
+  form.setFieldsValue({
+    value: null, // Error: 不能将类型“null”分配给类型“string[] | undefined”。
+  });
+};
+```
+
+如果你遇到上述报错，请检查当前项目的 `tsconfig.json` 中是否包含如下配置：
+
+```json
+{
+  "strictNullChecks": true
+}
+```
+
+如果 `strictNullChecks` 的值被设置为 `true` 就会出现上述问题，如果你确定项目中可以不需要这个检测配置（查看[strictNullChecks](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks)判断是否需要该配置），可以尝试改为 `false` 关闭控制严格检查功能。但如果你确实需要开启这个功能，那么，你可以在设计类型时，使用其他类型替代 `null` 以避免出现这种情况。