From d5ef5f3f2c0f45a82ec48e0cd4b72bdbba1bda78 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 2 Oct 2024 14:19:10 +0800
Subject: [PATCH 01/37] site: audio icon is not aligned of site (#51094)

---
 .dumi/theme/builtins/Audio/index.tsx | 43 +++++++++++++++++++++++++---
 docs/react/introduce.en-US.md        |  2 +-
 docs/react/introduce.zh-CN.md        |  2 +-
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/.dumi/theme/builtins/Audio/index.tsx b/.dumi/theme/builtins/Audio/index.tsx
index a1ae83fd5dbb..288bd14cfdc5 100644
--- a/.dumi/theme/builtins/Audio/index.tsx
+++ b/.dumi/theme/builtins/Audio/index.tsx
@@ -1,13 +1,48 @@
 import React from 'react';
 import { SoundOutlined } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
 
-const Audio: React.FC<React.PropsWithChildren<{ domId: string }>> = ({ domId, children }) => {
+const useStyle = createStyles(({ css, token }) => {
+  const { paddingXXS, fontSizeXL, motionDurationSlow, colorLink, colorLinkHover, colorLinkActive } =
+    token;
+  return {
+    playBtn: css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      column-gap: ${paddingXXS}px;
+      margin: 0;
+    `,
+    icon: css`
+      font-size: ${fontSizeXL}px;
+      color: ${colorLink};
+      transition: all ${motionDurationSlow};
+      &:hover {
+        color: ${colorLinkHover};
+      }
+      &:active {
+        color: ${colorLinkActive};
+      }
+    `,
+  };
+});
+
+interface AudioProps {
+  id?: string;
+}
+
+const AudioControl: React.FC<React.PropsWithChildren<AudioProps>> = ({ id, children }) => {
+  const { styles } = useStyle();
+  const onClick: React.MouseEventHandler<HTMLAnchorElement> = () => {
+    const audio = document.querySelector<HTMLAudioElement>(`#${id}`);
+    audio?.play();
+  };
   return (
-    <a onClick={() => document.querySelector<HTMLAudioElement>(`#${domId}`)?.play()}>
+    <a className={styles.playBtn} onClick={onClick}>
       {children}
-      <SoundOutlined style={{ fontSize: 20, color: 'black' }} />
+      <SoundOutlined className={styles.icon} />
     </a>
   );
 };
 
-export default Audio;
+export default AudioControl;
diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md
index 7b63d980e768..f3d94e73738b 100644
--- a/docs/react/introduce.en-US.md
+++ b/docs/react/introduce.en-US.md
@@ -7,7 +7,7 @@ title: Ant Design of React
   <source src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*ChCdRJ0w8SUAAAAAAAAAAAAADgCCAQ" type="audio/mpeg">
 </audio>
 
-Following the Ant Design specification, we developed a React UI library `antd` (<Audio domId="antd-audio">Pronunciation </Audio>) that contains a set of high quality components and demos for building rich, interactive user interfaces.
+Following the Ant Design specification, we developed a React UI library `antd` (<Audio id="antd-audio">Pronunciation</Audio>) that contains a set of high quality components and demos for building rich, interactive user interfaces.
 
 <div class="pic-plus">
   <img width="150" draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md
index 19b98e0ef167..0504895b9583 100644
--- a/docs/react/introduce.zh-CN.md
+++ b/docs/react/introduce.zh-CN.md
@@ -7,7 +7,7 @@ title: Ant Design of React
   <source src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*ChCdRJ0w8SUAAAAAAAAAAAAADgCCAQ" type="audio/mpeg">
 </audio>
 
-`antd`（<Audio domId="antd-audio">如何发音？</Audio>）是基于 Ant Design 设计体系的 React UI 组件库，适合企业级中后台产品与前台桌面网站。
+`antd`（<Audio id="antd-audio">如何发音？</Audio>）是基于 Ant Design 设计体系的 React UI 组件库，适合企业级中后台产品与前台桌面网站。
 
 <div class="pic-plus">
   <img width="150" draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/>

From e8b0fc4925ecb51a4b2caf1ba252afb92d290265 Mon Sep 17 00:00:00 2001
From: kiner-tang <1127031143@qq.com>
Date: Wed, 2 Oct 2024 17:46:22 +0800
Subject: [PATCH 02/37] fix(Splitter): fix the issue about Splitter had
 unexpected gaps in Flex (#51096)

---
 components/splitter/Splitter.tsx | 113 +++++++++++++++----------------
 1 file changed, 55 insertions(+), 58 deletions(-)

diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index 42fcb83f4626..c2bc04755be3 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -146,65 +146,62 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   const mergedStyle: React.CSSProperties = { ...splitter?.style, ...style };
 
   return wrapCSSVar(
-    <>
-      <ResizeObserver onResize={onContainerResize}>
-        <div style={mergedStyle} className={containerClassName}>
-          {items.map((item, idx) => {
-            // Panel
-            const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
-
-            // Split Bar
-            let splitBar: React.ReactElement | null = null;
-
-            const resizableInfo = resizableInfos[idx];
-            if (resizableInfo) {
-              const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
-              const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
-
-              const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
-              const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
-
-              splitBar = (
-                <SplitBar
-                  index={idx}
-                  active={movingIndex === idx}
-                  prefixCls={prefixCls}
-                  vertical={isVertical}
-                  resizable={resizableInfo.resizable}
-                  ariaNow={stackSizes[idx] * 100}
-                  ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
-                  ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
-                  startCollapsible={resizableInfo.startCollapsible}
-                  endCollapsible={resizableInfo.endCollapsible}
-                  onOffsetStart={onInternalResizeStart}
-                  onOffsetUpdate={(index, offsetX, offsetY) => {
-                    let offset = isVertical ? offsetY : offsetX;
-                    if (reverse) {
-                      offset = -offset;
-                    }
-                    onInternalResizeUpdate(index, offset);
-                  }}
-                  onOffsetEnd={onInternalResizeEnd}
-                  onCollapse={onInternalCollapse}
-                />
-              );
-            }
-
-            return (
-              <React.Fragment key={`split-panel-${idx}`}>
-                {panel}
-                {splitBar}
-              </React.Fragment>
+    <ResizeObserver onResize={onContainerResize}>
+      <div style={mergedStyle} className={containerClassName}>
+        {items.map((item, idx) => {
+          // Panel
+          const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
+
+          // Split Bar
+          let splitBar: React.ReactElement | null = null;
+
+          const resizableInfo = resizableInfos[idx];
+          if (resizableInfo) {
+            const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
+            const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
+
+            const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
+            const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
+
+            splitBar = (
+              <SplitBar
+                index={idx}
+                active={movingIndex === idx}
+                prefixCls={prefixCls}
+                vertical={isVertical}
+                resizable={resizableInfo.resizable}
+                ariaNow={stackSizes[idx] * 100}
+                ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
+                ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
+                startCollapsible={resizableInfo.startCollapsible}
+                endCollapsible={resizableInfo.endCollapsible}
+                onOffsetStart={onInternalResizeStart}
+                onOffsetUpdate={(index, offsetX, offsetY) => {
+                  let offset = isVertical ? offsetY : offsetX;
+                  if (reverse) {
+                    offset = -offset;
+                  }
+                  onInternalResizeUpdate(index, offset);
+                }}
+                onOffsetEnd={onInternalResizeEnd}
+                onCollapse={onInternalCollapse}
+              />
             );
-          })}
-        </div>
-      </ResizeObserver>
-
-      {/* Fake mask for cursor */}
-      {typeof movingIndex === 'number' && (
-        <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
-      )}
-    </>,
+          }
+
+          return (
+            <React.Fragment key={`split-panel-${idx}`}>
+              {panel}
+              {splitBar}
+            </React.Fragment>
+          );
+        })}
+        {/* Fake mask for cursor */}
+        {typeof movingIndex === 'number' && (
+          <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
+        )}
+      </div>
+    </ResizeObserver>,
   );
 };
 

From 34cf399e1048da1028b8b3a9e7aa397478f24335 Mon Sep 17 00:00:00 2001
From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com>
Date: Thu, 3 Oct 2024 08:17:40 +0530
Subject: [PATCH 03/37] chore: Update webpack.config.js (#51098)

---
 webpack.config.js | 109 +++++++++++++++++++++++-----------------------
 1 file changed, 54 insertions(+), 55 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 751dd59609c4..84bf777ae4d9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,86 +7,85 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const DuplicatePackageCheckerPlugin = require('@madccc/duplicate-package-checker-webpack-plugin');
 const path = require('path');
 
-function addLocales(webpackConfig) {
+function addLocales(config) {
+  const newConfig = { ...config }; // Avoid mutating the original config
   let packageName = 'antd-with-locales';
-  if (webpackConfig.entry['antd.min']) {
+  if (newConfig.entry['antd.min']) {
     packageName += '.min';
   }
-  webpackConfig.entry[packageName] = './index-with-locales.js';
-  webpackConfig.output.filename = '[name].js';
+  newConfig.entry[packageName] = './index-with-locales.js';
+  newConfig.output.filename = '[name].js';
+  return newConfig;
 }
 
 function externalDayjs(config) {
-  config.externals.dayjs = {
+  const newConfig = { ...config }; // Shallow copy for safety
+  newConfig.externals.dayjs = {
     root: 'dayjs',
     commonjs2: 'dayjs',
     commonjs: 'dayjs',
     amd: 'dayjs',
   };
+  return newConfig;
 }
 
 function externalCssinjs(config) {
-  config.resolve = config.resolve || {};
-  config.resolve.alias = config.resolve.alias || {};
+  const newConfig = { ...config }; // Shallow copy for safety
+  newConfig.resolve = newConfig.resolve || {};
+  newConfig.resolve.alias = newConfig.resolve.alias || {};
+  newConfig.resolve.alias['@ant-design/cssinjs'] = path.resolve(__dirname, 'alias/cssinjs');
+  return newConfig;
+}
+
+function addPluginsForProduction(config) {
+  const newConfig = { ...config }; // Shallow copy for safety
+  if (!process.env.CI || process.env.ANALYZER) {
+    newConfig.plugins.push(
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        openAnalyzer: false,
+        reportFilename: '../report.html',
+      })
+    );
+  }
+  if (newConfig.mode === 'production' && !process.env.PRODUCTION_ONLY) {
+    newConfig.plugins.push(
+      new DuplicatePackageCheckerPlugin({
+        verbose: true,
+        emitError: true,
+      })
+    );
+  }
+
+  newConfig.plugins.push(
+    codecovWebpackPlugin({
+      enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+      bundleName: 'antd.min',
+      uploadToken: process.env.CODECOV_TOKEN,
+    }),
+    new CircularDependencyPlugin({
+      failOnError: true,
+    })
+  );
 
-  config.resolve.alias['@ant-design/cssinjs'] = path.resolve(__dirname, 'alias/cssinjs');
+  return newConfig;
 }
 
 let webpackConfig = getWebpackConfig(false);
 
-// Used for `size-limit` ci which only need to check min files
 if (process.env.PRODUCTION_ONLY) {
-  // eslint-disable-next-line no-console
   console.log('🍐 Build production only');
   webpackConfig = webpackConfig.filter((config) => config.mode === 'production');
 }
 
-// RUN_ENV: https://github.com/ant-design/antd-tools/blob/14ee166fc1f4ab5e87da45ee3b0643a8325f1bc3/lib/gulpfile.js#L48
 if (process.env.RUN_ENV === 'PRODUCTION') {
-  webpackConfig.forEach((config) => {
-    addLocales(config);
-    externalDayjs(config);
-    externalCssinjs(config);
-    // Reduce non-minified dist files size
-    config.optimization.usedExports = true;
-
-    if (!process.env.CI || process.env.ANALYZER) {
-      config.plugins.push(
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'static',
-          openAnalyzer: false,
-          reportFilename: '../report.html',
-        }),
-      );
-    }
-
-    if (config.mode !== 'production') {
-      return;
-    }
-
-    if (!process.env.PRODUCTION_ONLY) {
-      config.plugins.push(
-        new DuplicatePackageCheckerPlugin({
-          verbose: true,
-          emitError: true,
-        }),
-      );
-    }
-
-    config.plugins.push(
-      codecovWebpackPlugin({
-        enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
-        bundleName: 'antd.min',
-        uploadToken: process.env.CODECOV_TOKEN,
-      }),
-    );
-
-    config.plugins.push(
-      new CircularDependencyPlugin({
-        // add errors to webpack instead of warnings
-        failOnError: true,
-      }),
-    );
+  webpackConfig = webpackConfig.map((config) => {
+    let newConfig = addLocales(config);
+    newConfig = externalDayjs(newConfig);
+    newConfig = externalCssinjs(newConfig);
+    newConfig.optimization.usedExports = true;
+    newConfig = addPluginsForProduction(newConfig);
+    return newConfig;
   });
 }
 

From 1a9fd440ee63b5f41c206bf6c335b5d8574b022a Mon Sep 17 00:00:00 2001
From: mshobana <51772793+mshobana@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:55:52 +0530
Subject: [PATCH 04/37] docs: clear description of Collapsible property of
 Collapse (#51102)

Previously the description was not all understandable until I see the examples.

Signed-off-by: mshobana <51772793+mshobana@users.noreply.github.com>
---
 components/collapse/index.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
index 9f8e4ded64ff..726f2e59bade 100644
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@@ -81,7 +81,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
 | activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel |  |
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
-| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
+| collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
 | destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |

From b81ae1d5dd458d2265d6921f669c32a39d0f14ff Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 3 Oct 2024 15:04:19 +0800
Subject: [PATCH 05/37] docs: add codesandbox sample for findDOMNode is
 deprecated (#51101)

---
 components/popconfirm/index.en-US.md | 5 ++++-
 components/popconfirm/index.zh-CN.md | 5 ++++-
 components/popover/index.en-US.md    | 5 ++++-
 components/popover/index.zh-CN.md    | 5 ++++-
 components/tooltip/index.en-US.md    | 5 ++++-
 components/tooltip/index.zh-CN.md    | 5 ++++-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
index 5d0ed35b2198..01e7872336dd 100644
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -57,10 +57,13 @@ Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
 
 ## FAQ
 
-### Why does the warning findDOMNode is deprecated some times appear in strict mode?
+### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode?
 
 This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
 
+- `findDOMNode is deprecated` reproduce: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ## Note
 
 Please ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index 7b06eaa7b7a3..53eb07ae8c24 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -58,10 +58,13 @@ demo:
 
 ## FAQ
 
-### 为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告？
+### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
 
 这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
 
+- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ## 注意
 
 请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
index 5e64a474a1ae..5ab830070b76 100644
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@@ -51,10 +51,13 @@ Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseL
 
 ## FAQ
 
-### Why does the warning findDOMNode is deprecated some times appear in strict mode?
+### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode?
 
 This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
 
+- `findDOMNode is deprecated` reproduce: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ### Why sometime not work on HOC?
 
 Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events.
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index c78eafb5f10a..20612a90d39e 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -52,10 +52,13 @@ demo:
 
 ## FAQ
 
-### 为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告？
+### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
 
 这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
 
+- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ### 为何有时候 HOC 组件无法生效？
 
 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index b25ee810b1f4..6964f7b1e264 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -68,10 +68,13 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 
 ## FAQ
 
-### Why does the warning findDOMNode is deprecated some times appear in strict mode?
+### Why does the warning `findDOMNode is deprecated` sometimes appear in strict mode?
 
 This is due to the implementation of `rc-trigger`. `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
 
+- `findDOMNode is deprecated` reproduce: <https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- Using `forwardRef` to fix: <https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ### Why sometime not work on HOC?
 
 Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onPointerLeave`, `onFocus`, `onClick` events.
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index ef94468f3c3b..5c4d0487c7ec 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -70,10 +70,13 @@ demo:
 
 ## FAQ
 
-### 为何在严格模式中有时候会出现 findDOMNode is deprecated 这个警告？
+### 为何在严格模式中有时候会出现 `findDOMNode is deprecated` 这个警告？
 
 这是由于 `rc-trigger` 的实现方式导致的，`rc-trigger` 强制要求 children 能够接受 ref，否则就会 fallback 到 findDOMNode，所以 children 需要是原生 html 标签，如果不是，则需要使用 `React.forwardRef` 把 `ref` 透传到原生 html 标签。
 
+- `findDOMNode is deprecated` 重现：<https://codesandbox.io/p/sandbox/finddomnode-c5hy96>
+- 使用 `forwardRef` 消除警告：<https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs>
+
 ### 为何有时候 HOC 组件无法生效？
 
 请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onPointerEnter`、`onPointerLeave`、`onFocus`、`onClick` 事件。

From 1a8b2526060aea06e29272c06b5b2fa964b40046 Mon Sep 17 00:00:00 2001
From: Zt448143356 <48010552+Zt448143356@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:27:21 +0800
Subject: [PATCH 06/37] docs: fix notification import statement (#51105)

Co-authored-by: chijing.zt <chijing.zt@alibaba-inc.com>
---
 .dumi/theme/builtins/ComponentMeta/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
index 23a6effc7f38..9d70d5abf437 100644
--- a/.dumi/theme/builtins/ComponentMeta/index.tsx
+++ b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -123,7 +123,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
   }, [component, source]);
 
   const transformComponentName = (componentName: string) => {
-    if (componentName === 'Notifiction' || componentName === 'Message') {
+    if (componentName === 'Notification' || componentName === 'Message') {
       return componentName.toLowerCase();
     }
     return componentName;

From e17d7c9a85eb32e823eb60e3f719bbaf4a210350 Mon Sep 17 00:00:00 2001
From: kiner-tang <1127031143@qq.com>
Date: Fri, 4 Oct 2024 11:57:15 +0800
Subject: [PATCH 07/37] fix: fix the issue about throw a warning when Splitter
 nested in a hidden tab panel (#51109)

---
 components/splitter/Splitter.tsx              |   9 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 126 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 101 ++++++++++++++
 components/splitter/__tests__/index.test.tsx  |  21 +++
 components/splitter/demo/nested-in-tabs.md    |   7 +
 components/splitter/demo/nested-in-tabs.tsx   |  54 ++++++++
 components/splitter/index.en-US.md            |   1 +
 components/splitter/index.zh-CN.md            |   1 +
 8 files changed, 319 insertions(+), 1 deletion(-)
 create mode 100644 components/splitter/demo/nested-in-tabs.md
 create mode 100644 components/splitter/demo/nested-in-tabs.tsx

diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index c2bc04755be3..c0ac425e3172 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -71,7 +71,14 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   const [containerSize, setContainerSize] = useState<number>(100);
 
   const onContainerResize: GetProp<typeof ResizeObserver, 'onResize'> = (size) => {
-    setContainerSize(isVertical ? size.offsetHeight : size.offsetWidth);
+    const { offsetWidth, offsetHeight } = size;
+    const containerSize = isVertical ? offsetHeight : offsetWidth;
+    // Skip when container has no size, Such as nested in a hidden tab panel
+    // to fix: https://github.com/ant-design/ant-design/issues/51106
+    if (containerSize === 0) {
+      return;
+    }
+    setContainerSize(containerSize);
   };
 
   // ========================= Size =========================
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
index d03b0062f019..a3bfd50747fe 100644
--- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -810,6 +810,132 @@ exports[`renders components/splitter/demo/multiple.tsx extend context correctly
 
 exports[`renders components/splitter/demo/multiple.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform: translate(0px, 0px);"
+      >
+        <div
+          class="ant-tabs-tab ant-tabs-tab-active"
+          data-node-key="1"
+        >
+          <div
+            aria-controls="rc-tabs-test-panel-1"
+            aria-selected="true"
+            class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-1"
+            role="tab"
+            tabindex="0"
+          >
+            General
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+          data-node-key="2"
+        >
+          <div
+            aria-controls="rc-tabs-test-panel-2"
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            id="rc-tabs-test-tab-2"
+            role="tab"
+            tabindex="0"
+          >
+            Splitter Tab
+          </div>
+        </div>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="rc-tabs-test-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="rc-tabs-test-more"
+        style="visibility: hidden; order: 1;"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+      <div
+        class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tabs-dropdown-placement-bottomLeft"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <ul
+          aria-label="expanded dropdown"
+          class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
+          data-menu-list="true"
+          id="rc-tabs-test-more-popup"
+          role="listbox"
+          tabindex="-1"
+        />
+        <div
+          aria-hidden="true"
+          style="display: none;"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-1"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        id="rc-tabs-test-panel-1"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/splitter/demo/size.tsx extend context correctly 1`] = `
 <div
   class="ant-splitter ant-splitter-horizontal"
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
index e0018a844eda..303fc44256bc 100644
--- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
@@ -826,6 +826,107 @@ exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
+      >
+        <div
+          class="ant-tabs-tab ant-tabs-tab-active"
+          data-node-key="1"
+        >
+          <div
+            aria-selected="true"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            General
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+          data-node-key="2"
+        >
+          <div
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Splitter Tab
+          </div>
+        </div>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/splitter/demo/size.tsx correctly 1`] = `
 <div
   class="ant-splitter ant-splitter-horizontal"
diff --git a/components/splitter/__tests__/index.test.tsx b/components/splitter/__tests__/index.test.tsx
index 42f7d8635ccc..0a0c18b1f6b1 100644
--- a/components/splitter/__tests__/index.test.tsx
+++ b/components/splitter/__tests__/index.test.tsx
@@ -270,6 +270,27 @@ describe('Splitter', () => {
       expect(onResize).toHaveBeenCalledWith([50, 0, 50]);
       expect(onResizeEnd).toHaveBeenCalledWith([50, 0, 50]);
     });
+
+    it("aria-valuemin/aria-valuemax should not set NaN When container's width be setting zero", async () => {
+      containerSize = 0;
+      const App: React.FC = () => {
+        return <SplitterDemo items={[{}, {}, {}]} />;
+      };
+      const { container } = render(<App />);
+      mockDrag(container.querySelectorAll<HTMLDivElement>('.ant-splitter-bar-dragger')[1], -100);
+      triggerResize(container.querySelector('.ant-splitter')!);
+      await act(async () => {
+        await waitFakeTimer();
+      });
+
+      expect(errSpy).not.toHaveBeenCalled();
+      expect(container.querySelector('[aria-valuemin]')?.getAttribute('aria-valuemin')).not.toBe(
+        'NaN',
+      );
+      expect(container.querySelector('[aria-valuemax]')?.getAttribute('aria-valuemax')).not.toBe(
+        'NaN',
+      );
+    });
   });
 
   // ============================= Collapsible =============================
diff --git a/components/splitter/demo/nested-in-tabs.md b/components/splitter/demo/nested-in-tabs.md
new file mode 100644
index 000000000000..db5e0b2b948d
--- /dev/null
+++ b/components/splitter/demo/nested-in-tabs.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+嵌套在标签页中。
+
+## en-US
+
+Nested in tabs.
diff --git a/components/splitter/demo/nested-in-tabs.tsx b/components/splitter/demo/nested-in-tabs.tsx
new file mode 100644
index 000000000000..c048714756c8
--- /dev/null
+++ b/components/splitter/demo/nested-in-tabs.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Flex, Splitter, Tabs, Typography } from 'antd';
+
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
+  <Flex justify="center" align="center" style={{ height: '100%' }}>
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
+    </Typography.Title>
+  </Flex>
+);
+
+const App: React.FC = () => {
+  const SplitterContent = (
+    <Splitter
+      style={{
+        height: 200,
+        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+      }}
+    >
+      <Splitter.Panel collapsible>
+        <Desc text={1} />
+      </Splitter.Panel>
+      <Splitter.Panel
+        collapsible={{
+          start: true,
+        }}
+      >
+        <Desc text={2} />
+      </Splitter.Panel>
+      <Splitter.Panel>
+        <Desc text={3} />
+      </Splitter.Panel>
+    </Splitter>
+  );
+  return (
+    <Tabs
+      defaultActiveKey="1"
+      items={[
+        {
+          key: '1',
+          label: 'General',
+          children: 'Content of Tab Pane 1',
+        },
+        {
+          key: '2',
+          label: 'Splitter Tab',
+          children: SplitterContent,
+        },
+      ]}
+    />
+  );
+};
+
+export default App;
diff --git a/components/splitter/index.en-US.md b/components/splitter/index.en-US.md
index 2a1206ce0922..a006539b0276 100644
--- a/components/splitter/index.en-US.md
+++ b/components/splitter/index.en-US.md
@@ -23,6 +23,7 @@ Can be used to separate areas horizontally or vertically. When you need to freel
 <code src="./demo/collapsible.tsx">Collapsible</code>
 <code src="./demo/multiple.tsx">Multiple panels</code>
 <code src="./demo/group.tsx">Complex combination</code>
+<code src="./demo/nested-in-tabs.tsx" debug>Nested in tabs</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
 
 ## API
diff --git a/components/splitter/index.zh-CN.md b/components/splitter/index.zh-CN.md
index 8a5e7c97a959..3f79bfc14d76 100644
--- a/components/splitter/index.zh-CN.md
+++ b/components/splitter/index.zh-CN.md
@@ -26,6 +26,7 @@ tag: 5.21.0
 <code src="./demo/collapsible.tsx">可折叠</code>
 <code src="./demo/multiple.tsx">多面板</code>
 <code src="./demo/group.tsx">复杂组合</code>
+<code src="./demo/nested-in-tabs.tsx" debug>标签页中嵌套</code>
 <code src="./demo/debug.tsx" debug>调试</code>
 
 ## API

From 1e6e8d8673ea5c024e0019d5029ea51eda664910 Mon Sep 17 00:00:00 2001
From: kiner-tang <1127031143@qq.com>
Date: Mon, 7 Oct 2024 10:04:44 +0800
Subject: [PATCH 08/37] docs: remove deprecated props from document (#51138)

---
 components/calendar/index.en-US.md | 10 +---------
 components/calendar/index.zh-CN.md | 10 +---------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index a5e88b28094f..03b35c6eb0d0 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -34,17 +34,11 @@ Common props ref：[Common props](/docs/react/common-props)
 // import 'dayjs/locale/zh-cn';
 // dayjs.locale('zh-cn');
 
-<Calendar
-  dateCellRender={dateCellRender}
-  monthCellRender={monthCellRender}
-  onPanelChange={onPanelChange}
-  onSelect={onSelect}
-/>
+<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
 ```
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - |  |
 | cellRender | Customize cell content | 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 |
 | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - |  |
 | fullCellRender | Customize cell content | 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 |
@@ -54,8 +48,6 @@ Common props ref：[Common props](/docs/react/common-props)
 | headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
-| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - |  |
-| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - |  |
 | validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value | The current selected date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback for when date changes | function(date: Dayjs) | - |  |
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index d48f3ec1a9a7..c243a5410315 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -35,17 +35,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 // import 'dayjs/locale/zh-cn';
 // dayjs.locale('zh-cn');
 
-<Calendar
-  dateCellRender={dateCellRender}
-  monthCellRender={monthCellRender}
-  onPanelChange={onPanelChange}
-  onSelect={onSelect}
-/>
+<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
 ```
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格，>= 5.4.0 请用 `cellRender` | function(date: Dayjs): 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 |
 | dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格，>= 5.4.0 请用 `fullCellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
 | fullCellRender | 自定义单元格的内容 | 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 |
@@ -55,8 +49,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式 | `month` \| `year` | `month` |  |
-| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格，>= 5.4.0 请用 `cellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
-| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格，>= 5.4.0 请用 `fullCellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
 | validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value | 展示日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 日期变化回调 | function(date: Dayjs) | - |  |

From eee46a440ea6306c07bede4419ada4c1d7b56555 Mon Sep 17 00:00:00 2001
From: NathanLao <75557717+nathanlao@users.noreply.github.com>
Date: Sun, 6 Oct 2024 20:45:42 -0700
Subject: [PATCH 09/37] fix: sorter columnkey should be null (#51114)

---
 .../table/__tests__/Table.sorter.test.tsx     | 60 +++++++++++++++++--
 components/table/hooks/useSorter.tsx          | 17 +++---
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx
index 3d173ad3f41d..db0796922252 100644
--- a/components/table/__tests__/Table.sorter.test.tsx
+++ b/components/table/__tests__/Table.sorter.test.tsx
@@ -306,8 +306,55 @@ describe('Table.sorter', () => {
     const sorter3 = handleChange.mock.calls[2][2];
     expect(sorter3.column).toBe(undefined);
     expect(sorter3.order).toBe(undefined);
-    expect(sorter3.field).toBe('name');
-    expect(sorter3.columnKey).toBe('name');
+    expect(sorter3.field).toBe(undefined);
+    expect(sorter3.columnKey).toBe(undefined);
+  });
+
+  it('should not retain sorter value when page changes after cancelling sort', () => {
+    const handleChange = jest.fn();
+    const { container } = render(
+      createTable({
+        onChange: handleChange,
+        pagination: { pageSize: 2 },
+      }),
+    );
+
+    // ascending sort
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    let sorter = handleChange.mock.calls[0][2];
+    expect(sorter.column.dataIndex).toBe('name');
+    expect(sorter.order).toBe('ascend');
+    expect(sorter.field).toBe('name');
+    expect(sorter.columnKey).toBe('name');
+
+    // descending sort
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(handleChange).toHaveBeenCalledTimes(2);
+    sorter = handleChange.mock.calls[1][2];
+    expect(sorter.column.dataIndex).toBe('name');
+    expect(sorter.order).toBe('descend');
+    expect(sorter.field).toBe('name');
+    expect(sorter.columnKey).toBe('name');
+
+    // cancel sort
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(handleChange).toHaveBeenCalledTimes(3);
+    sorter = handleChange.mock.calls[2][2];
+    expect(sorter.column).toBe(undefined);
+    expect(sorter.order).toBe(undefined);
+    expect(sorter.field).toBe(undefined);
+    expect(sorter.columnKey).toBe(undefined);
+
+    // change page
+    fireEvent.click(container.querySelector('.ant-pagination-item-2')!);
+    expect(handleChange).toHaveBeenCalledTimes(4);
+    sorter = handleChange.mock.calls[3][2];
+
+    expect(sorter.column).toBe(undefined);
+    expect(sorter.order).toBe(undefined);
+    expect(sorter.field).toBe(undefined);
+    expect(sorter.columnKey).toBe(undefined);
   });
 
   it('hover header show sorter tooltip', () => {
@@ -1141,7 +1188,10 @@ describe('Table.sorter', () => {
       <Table columns={groupColumns} {...dataProp} onChange={onChange} />,
     );
 
-    function clickToMatchExpect(index: number, sorter: { field: string; order: SortOrder }) {
+    function clickToMatchExpect(
+      index: number,
+      sorter: { field: string | undefined; order: SortOrder },
+    ) {
       fireEvent.click(container.querySelectorAll('.ant-table-column-sorters')[index]);
 
       expect(onChange).toHaveBeenCalledWith(
@@ -1157,12 +1207,12 @@ describe('Table.sorter', () => {
     // First
     clickToMatchExpect(0, { field: 'math', order: 'ascend' });
     clickToMatchExpect(0, { field: 'math', order: 'descend' });
-    clickToMatchExpect(0, { field: 'math', order: undefined as unknown as SortOrder });
+    clickToMatchExpect(0, { field: undefined, order: undefined as unknown as SortOrder });
 
     // Last
     clickToMatchExpect(1, { field: 'english', order: 'ascend' });
     clickToMatchExpect(1, { field: 'english', order: 'descend' });
-    clickToMatchExpect(1, { field: 'english', order: undefined as unknown as SortOrder });
+    clickToMatchExpect(1, { field: undefined, order: undefined as unknown as SortOrder });
   });
 
   // https://github.com/ant-design/ant-design/issues/37024
diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
index 0a33d0b036ef..36ba3b5b018c 100644
--- a/components/table/hooks/useSorter.tsx
+++ b/components/table/hooks/useSorter.tsx
@@ -281,9 +281,9 @@ const injectSorter = <RecordType extends AnyObject = AnyObject>(
 };
 
 const stateToInfo = <RecordType extends AnyObject = AnyObject>(
-  sorterStates: SortState<RecordType>,
+  sorterState: SortState<RecordType>,
 ): SorterResult<RecordType> => {
-  const { column, sortOrder } = sorterStates;
+  const { column, sortOrder } = sorterState;
   return {
     column,
     order: sortOrder,
@@ -295,25 +295,28 @@ const stateToInfo = <RecordType extends AnyObject = AnyObject>(
 const generateSorterInfo = <RecordType extends AnyObject = AnyObject>(
   sorterStates: SortState<RecordType>[],
 ): SorterResult<RecordType> | SorterResult<RecordType>[] => {
-  const list = sorterStates
+  const activeSorters = sorterStates
     .filter(({ sortOrder }) => sortOrder)
     .map<SorterResult<RecordType>>(stateToInfo);
 
   // =========== Legacy compatible support ===========
   // https://github.com/ant-design/ant-design/pull/19226
-  if (list.length === 0 && sorterStates.length) {
+  if (activeSorters.length === 0 && sorterStates.length) {
     const lastIndex = sorterStates.length - 1;
     return {
       ...stateToInfo(sorterStates[lastIndex]),
       column: undefined,
+      order: undefined,
+      field: undefined,
+      columnKey: undefined,
     };
   }
 
-  if (list.length <= 1) {
-    return list[0] || {};
+  if (activeSorters.length <= 1) {
+    return activeSorters[0] || {};
   }
 
-  return list;
+  return activeSorters;
 };
 
 export const getSortData = <RecordType extends AnyObject = AnyObject>(

From 169661367d842b550ae07e3ea7ac609cdf983b17 Mon Sep 17 00:00:00 2001
From: Cameron-Asdf <cameron.theissen@gmail.com>
Date: Mon, 7 Oct 2024 05:47:50 +0200
Subject: [PATCH 10/37] style: Make tall dropdowns have scroll bar (#51112)

---
 components/dropdown/style/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts
index 13f3ad10cef2..7058246e32bd 100644
--- a/components/dropdown/style/index.ts
+++ b/components/dropdown/style/index.ts
@@ -96,6 +96,12 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
           content: '""',
         },
 
+        // Makes vertical dropdowns have a scrollbar once they become taller than the viewport.
+        '&-menu-vertical': {
+          maxHeight: '100vh',
+          overflowY: 'auto',
+        },
+
         [`&-trigger${antCls}-btn`]: {
           [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
             fontSize: fontSizeIcon,

From e1302006990145b46c15c44472e503aab33d3373 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Oct 2024 13:18:47 +0800
Subject: [PATCH 11/37] chore(deps-dev): bump @inquirer/prompts from 6.0.1 to
 7.0.0 in the dev-dependencies group (#51141)

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

diff --git a/package.json b/package.json
index 3abd193d2175..688b8885ebe8 100644
--- a/package.json
+++ b/package.json
@@ -173,7 +173,7 @@
     "@emotion/server": "^11.11.0",
     "@eslint-react/eslint-plugin": "^1.13.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@inquirer/prompts": "^6.0.1",
+    "@inquirer/prompts": "^7.0.0",
     "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
     "@microflash/rehype-figure": "^2.1.1",
     "@npmcli/run-script": "^9.0.0",

From c55a675c6903317c1ef5b0c7b664aeb57349fe9b Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Tue, 8 Oct 2024 15:32:17 +0800
Subject: [PATCH 12/37] chore: update slider patch to fix warning (#51150)

* chore: update slider patch

* update snap
---
 .../form/__tests__/__snapshots__/demo-extend.test.ts.snap      | 1 +
 components/form/__tests__/__snapshots__/demo.test.tsx.snap     | 1 +
 .../watermark/__tests__/__snapshots__/demo-extend.test.ts.snap | 3 +++
 components/watermark/__tests__/__snapshots__/demo.test.ts.snap | 3 +++
 package.json                                                   | 2 +-
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index de14eb317ae4..f7c73c6f9a79 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -22005,6 +22005,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
           >
             <div
               class="ant-slider ant-slider-horizontal ant-slider-with-marks"
+              id="validate_other_slider"
             >
               <div
                 class="ant-slider-rail"
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index b8a050535301..3e1d042a09fb 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -9428,6 +9428,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
           >
             <div
               class="ant-slider ant-slider-horizontal ant-slider-with-marks"
+              id="validate_other_slider"
             >
               <div
                 class="ant-slider-rail"
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6c7772127f86..caa9f51bdf12 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -534,6 +534,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="fontSize"
               >
                 <div
                   class="ant-slider-rail"
@@ -609,6 +610,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="zIndex"
               >
                 <div
                   class="ant-slider-rail"
@@ -684,6 +686,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="rotate"
               >
                 <div
                   class="ant-slider-rail"
diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
index 9a8224c9456e..9906f0442b8b 100644
--- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -158,6 +158,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="fontSize"
               >
                 <div
                   class="ant-slider-rail"
@@ -214,6 +215,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="zIndex"
               >
                 <div
                   class="ant-slider-rail"
@@ -270,6 +272,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
             >
               <div
                 class="ant-slider ant-slider-horizontal"
+                id="rotate"
               >
                 <div
                   class="ant-slider-rail"
diff --git a/package.json b/package.json
index 688b8885ebe8..8d80ac9de678 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
     "rc-resize-observer": "^1.4.0",
     "rc-segmented": "~2.5.0",
     "rc-select": "~14.15.2",
-    "rc-slider": "~11.1.6",
+    "rc-slider": "~11.1.7",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.47.5",

From 42a3770e7d85e851792181984dd7ba65e442bc84 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 8 Oct 2024 15:52:23 +0800
Subject: [PATCH 13/37] site: fix display of refs (#51153)

* site: fix display of refs

* fix

* fix
---
 .../ComponentChangelog/ComponentChangelog.tsx | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
index 5f84e5b22955..2c9ac4ab1b70 100644
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -155,6 +155,19 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
   return <span>{parsedChangelog}</span>;
 };
 
+const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
+  const { styles } = useStyle();
+  return (
+    <>
+      {refs?.map((ref) => (
+        <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
+          #{ref.match(/^.*\/(\d+)$/)?.[1]}
+        </a>
+      ))}
+    </>
+  );
+};
+
 const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
   const elements: React.ReactNode[] = [];
   const { styles } = useStyle();
@@ -167,11 +180,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
       elements.push(
         <li key={i}>
           <ParseChangelog changelog={changelog} />
-          {refs?.map((ref) => (
-            <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
-              #{ref.match(/^.*\/(\d+)$/)?.[1]}
-            </a>
-          ))}
+          <RefLinks refs={refs} />
           <br />
           <img
             src={imgElement?.getAttribute('src') || ''}
@@ -185,6 +194,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
       elements.push(
         <li key={i}>
           <ParseChangelog changelog={changelog} />
+          <RefLinks refs={refs} />
         </li>,
       );
     }

From f83c588b551f6336c3aec9b2afb1027dbe0c3af9 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 8 Oct 2024 17:56:12 +0800
Subject: [PATCH 14/37] type(slider): improve eventName type (#51156)

---
 components/slider/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 39a3d2ad5c89..8ba94422585c 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -267,7 +267,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       const nodeProps = node.props;
 
       function proxyEvent(
-        eventName: string,
+        eventName: keyof React.DOMAttributes<HTMLElement>,
         event: React.SyntheticEvent,
         triggerRestPropsEvent?: boolean,
       ) {

From 15e1f152e364fb5f4ff427a2ae478a415f1022e6 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: Wed, 9 Oct 2024 11:12:20 +0800
Subject: [PATCH 15/37] fix: ColorPicker gradient slider not draggable (#51161)

* fix: fill should trigger same color

* test: add test case

* chore: add desc

* chore: force CI

* chore: force CI
---
 .../color-picker/__tests__/gradient.test.tsx  | 34 +++++++++++++++++++
 .../components/PanelPicker/index.tsx          |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/components/color-picker/__tests__/gradient.test.tsx b/components/color-picker/__tests__/gradient.test.tsx
index 0007a14d27ba..7e490468c534 100644
--- a/components/color-picker/__tests__/gradient.test.tsx
+++ b/components/color-picker/__tests__/gradient.test.tsx
@@ -306,4 +306,38 @@ describe('ColorPicker.gradient', () => {
 
     expect(container.querySelector('.ant-color-picker-gradient-slider')).toBeTruthy();
   });
+
+  // This test case may easily break by jsdom update
+  // https://github.com/ant-design/ant-design/issues/51159
+  it('change color 2 should not be color 1', () => {
+    const { container } = render(
+      <ColorPicker
+        mode={['gradient']}
+        open
+        defaultValue={[
+          {
+            color: '#FF0000',
+            percent: 0,
+          },
+          {
+            color: '#0000FF',
+            percent: 100,
+          },
+        ]}
+      />,
+    );
+
+    // Select second one
+    const handle2 = container.querySelector<HTMLElement>('.ant-slider-handle-2')!;
+    doDrag(container, 0, 0, handle2, true);
+
+    // Drag in the color panel
+    const panelHandle = container.querySelector('.ant-color-picker-saturation')!;
+    const mouseDown = createEvent.mouseDown(panelHandle);
+    fireEvent(panelHandle, mouseDown);
+
+    expect(handle2).not.toHaveStyle({
+      backgroundColor: 'rgb(255,0,0)',
+    });
+  });
 });
diff --git a/components/color-picker/components/PanelPicker/index.tsx b/components/color-picker/components/PanelPicker/index.tsx
index 006ad598c30c..504395f64e23 100644
--- a/components/color-picker/components/PanelPicker/index.tsx
+++ b/components/color-picker/components/PanelPicker/index.tsx
@@ -137,7 +137,7 @@ const PanelPicker: FC = () => {
     info?: Info,
   ) => {
     const nextColor = fillColor(colorValue, info);
-    setPickerColor(nextColor);
+    setPickerColor(nextColor.isGradient() ? nextColor.getColors()[activeIndex].color : nextColor);
     onChange(nextColor, fromPicker);
   };
 

From fd154893205f8ade1ba20f97a05319480ce6a80a Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Wed, 9 Oct 2024 15:54:05 +0800
Subject: [PATCH 16/37] docs: changelog 5.21.3 (#51147)

* docs: changelog 5.21.3

* docs: fix changelog format

* chore: update version

* Update CHANGELOG.en-US.md

Signed-off-by: MadCcc <1075746765@qq.com>

* Apply suggestions from code review

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

* chore: update docs

* docs: update changelog

* docs: update changelog

* docs: update changelog

* Update CHANGELOG.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: MadCcc <1075746765@qq.com>

* Apply suggestions from code review

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: MadCcc <1075746765@qq.com>

* docs: update changelog

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 CHANGELOG.en-US.md | 17 +++++++++++++++++
 CHANGELOG.zh-CN.md | 17 +++++++++++++++++
 package.json       |  2 +-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ea994dd9012b..cb06197187c8 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -16,6 +16,23 @@ tag: vVERSION
 
 ---
 
+## 5.21.3
+
+`2024-10-09`
+
+- 💄 Added a scroll bar to Dropdown when having many items. [#51112](https://github.com/ant-design/ant-design/pull/51112) [@Cameron-Asdf](https://github.com/Cameron-Asdf)
+- Slider [#51150](https://github.com/ant-design/ant-design/pull/51150) [@yoyo837](https://github.com/yoyo837)
+  - 🐞 Fix Slider issue where the `id` prop is not supported.
+  - 🐞 Fix Slider to address the issue causing `useLayoutEffect does nothing on the server` warning when `extractStyle` is invoked.
+- 🐞 Fix ColorPicker with gradient mode, sometimes handle color will be force sync back to first handle color issue. [#51161](https://github.com/ant-design/ant-design/pull/51161) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Table `onChange` function receiving incorrect sorter value. [#51114](https://github.com/ant-design/ant-design/pull/51114) [@nathanlao](https://github.com/nathanlao)
+- Splitter
+  - 🐞 Fix the issue about throw a warning when Splitter nested in a hidden tab panel. [#51109](https://github.com/ant-design/ant-design/pull/51109) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 Fix the issue about Splitter had unexpected gaps in Flex. [#51096](https://github.com/ant-design/ant-design/pull/51096) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 MISC: Restore `react` and `react-dom` peerDependencies. [#51079](https://github.com/ant-design/ant-design/pull/51079) [@chentsulin](https://github.com/chentsulin)
+- TypeScript
+  - 🤖 Improve type of Slider `eventName`. [#51156](https://github.com/ant-design/ant-design/pull/51156) [@thinkasany](https://github.com/thinkasany)
+
 ## 5.21.2
 
 `2024-10-01`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index c0d3c6b7704d..01d3131f8639 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,23 @@ tag: vVERSION
 
 ---
 
+## 5.21.3
+
+`2024-10-09`
+
+- 💄 优化 Dropdown 列表较长时的滚动条样式。[#51112](https://github.com/ant-design/ant-design/pull/51112) [@Cameron-Asdf](https://github.com/Cameron-Asdf)
+- Slider [#51150](https://github.com/ant-design/ant-design/pull/51150) [@yoyo837](https://github.com/yoyo837)
+  - 🐞 修复 Slider 不支持 `id` 属性的问题。
+  - 🐞 修复 Slider 导致 `extractStyle` 时抛出 `useLayoutEffect does nothing on the server` 警告信息的问题。
+- 🐞 修复 ColorPicker 渐变色时，部分节点颜色拖拽会被强制重置为第一个节点颜色的问题。[#51161](https://github.com/ant-design/ant-design/pull/51161) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Table 组件在切换页面时 `onChange` 函数接收到错误的 sorter 值的问题。[#51114](https://github.com/ant-design/ant-design/pull/51114) [@nathanlao](https://github.com/nathanlao)
+- Splitter
+  - 🐞 修复 Splitter 嵌套在一个隐藏的 Tabs 面板中时抛出警告的问题。[#51109](https://github.com/ant-design/ant-design/pull/51109) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 修复 Splitter 组件在 Flex 组件下时出现异常间距的问题。[#51096](https://github.com/ant-design/ant-design/pull/51096) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 杂项：重新将 `react` 和 `react-dom` 添加进 peerDependencies。[#51079](https://github.com/ant-design/ant-design/pull/51079) [@chentsulin](https://github.com/chentsulin)
+- TypeScript
+  - 🤖 优化 Slider `eventName` 类型。[#51156](https://github.com/ant-design/ant-design/pull/51156) [@thinkasany](https://github.com/thinkasany)
+
 ## 5.21.2
 
 `2024-10-01`
diff --git a/package.json b/package.json
index 8d80ac9de678..02fa143a62df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.21.2",
+  "version": "5.21.3",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {

From 32080befa4e6bb68de2aa1b873ee9a9be7b46e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=A1=E1=B4=8F=C9=B4=E1=B4=8B=CA=8F=E1=B4=9C=C9=B4?=
 =?UTF-8?q?=C9=A2=20=E1=B4=8D=C9=AA=C9=B4?= <mwk0725@gmail.com>
Date: Wed, 9 Oct 2024 17:12:04 +0900
Subject: [PATCH 17/37] docs: remove duplicated backticks (#51168)

---
 docs/blog/suspense.en-US.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/blog/suspense.en-US.md b/docs/blog/suspense.en-US.md
index 75e09f35bf6e..2e4e1294e23a 100644
--- a/docs/blog/suspense.en-US.md
+++ b/docs/blog/suspense.en-US.md
@@ -54,8 +54,6 @@ These code can run perfectly in React 17, and also run very well in React 18's S
 
 The StrictMode of React 18 is different from [React 17](https://17.reactjs.org/docs/strict-mode.html) in that it will be called multiple times in each phase to ensure that developers clean up the Effect:
 
-````tsx
-
 ```tsx
 const My = () => {
   console.log('render');
@@ -85,7 +83,7 @@ const My = () => {
 // - effect
 // - effect cleanup
 // - effect
-````
+```
 
 With above sample, we can know that `counter` in StrictMode will be accumulated, but the final value will be correct (that is, each component will only be counted once):
 

From 38197269b43b83855b855e2fc91fd76d4156cd3c Mon Sep 17 00:00:00 2001
From: SanghyunLee <118160647+idealHyun@users.noreply.github.com>
Date: Wed, 9 Oct 2024 18:51:36 +0900
Subject: [PATCH 18/37] docs: fixed the typo by changing 'three' to 'third'
 (#51172)

---
 docs/blog/extract-ssr.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/blog/extract-ssr.en-US.md b/docs/blog/extract-ssr.en-US.md
index dfd56e6e6d08..678b763126b7 100644
--- a/docs/blog/extract-ssr.en-US.md
+++ b/docs/blog/extract-ssr.en-US.md
@@ -95,7 +95,7 @@ renderToString(
 const styleText = extractStyle(cache);
 ```
 
-Of course, this is a little cumbersome for developers. So we extracted a three-party package to achieve this requirement:
+Of course, this is a little cumbersome for developers. So we extracted a third-party package to achieve this requirement:
 
 ```tsx
 import { extractStyle } from '@ant-design/static-style-extract';

From 9a4e554abe10d4615179d29457029b8654afac91 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: Wed, 9 Oct 2024 19:20:30 +0800
Subject: [PATCH 19/37] fix: mix usage should not scroll (#51169)

---
 components/splitter/style/index.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts
index c558d268c41a..221d0b1b2dcd 100644
--- a/components/splitter/style/index.ts
+++ b/components/splitter/style/index.ts
@@ -309,9 +309,15 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
         padding: '0 1px',
         scrollbarWidth: 'thin',
         boxSizing: 'border-box',
-      },
-      [`${splitPanelCls}-hidden`]: {
-        padding: 0,
+
+        '&-hidden': {
+          padding: 0,
+          overflow: 'hidden',
+        },
+
+        [`&:has(${componentCls}:only-child)`]: {
+          overflow: 'hidden',
+        },
       },
 
       ...genRtlStyle(token),

From a3902d378dedc234faae7cca414be8b21a821e3e Mon Sep 17 00:00:00 2001
From: KxxDD <rlaehd62@gmail.com>
Date: Thu, 10 Oct 2024 10:52:03 +0900
Subject: [PATCH 20/37] docs: fixed typo by adding 'developers' and 'they'
 (#51176)

---
 docs/blog/happy-work.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/blog/happy-work.en-US.md b/docs/blog/happy-work.en-US.md
index 5e0321f20b53..e3c7b25beb71 100644
--- a/docs/blog/happy-work.en-US.md
+++ b/docs/blog/happy-work.en-US.md
@@ -31,7 +31,7 @@ There is a special design interaction in Ant Design, which is the click wave eff
 - <img alt="Radio" height="70" src="https://github.com/react-component/picker/assets/5378891/9f4edaa8-26f7-468c-bcf3-1ce80163bf0e" />
 - <img alt="Switch" height="84" src="https://github.com/react-component/picker/assets/5378891/16abcee6-32d0-4075-bc4c-440d8aade067" />
 
-In the past major versions, this wave effect could not be modified. If want to turn it off, developers even need to do some "magic code" to achieve it. So when the designer proposed a happy work theme, as a developer, we think this is a good time to make some changes.
+In the past major versions, this wave effect could not be modified. If developers want to turn it off, they even need to do some "magic code" to achieve it. So when the designer proposed a happy work theme, as a developer, we think this is a good time to make some changes.
 
 ### Wave component
 

From 7236216823f0b58e6409ad133eba8bfea53dd90c Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 10 Oct 2024 12:03:47 +0800
Subject: [PATCH 21/37] site: add version title href (#51180)

---
 .../ComponentChangelog/ComponentChangelog.tsx     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
index 2c9ac4ab1b70..fe781731b866 100644
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -1,6 +1,6 @@
 import React, { cloneElement, isValidElement } from 'react';
 import { BugOutlined } from '@ant-design/icons';
-import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
+import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography, Button } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
 import semver from 'semver';
@@ -83,6 +83,10 @@ const useStyle = createStyles(({ token, css }) => ({
     margin-bottom: 1em;
   `,
   versionTitle: css`
+    height: 28px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
     margin: 0 !important;
   `,
   versionTag: css`
@@ -245,7 +249,12 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
         children: (
           <Typography>
             <Flex className={styles.versionWrap} justify="flex-start" align="center" gap="middle">
-              <Typography.Title className={styles.versionTitle} level={4}>
+              <Button
+                color="default"
+                className={styles.versionTitle}
+                variant="link"
+                href={`/changelog${lang === 'cn' ? '-cn' : ''}/#${version.replace(/\./g, '').replace(/\s.*/g, '-')}`}
+              >
                 {version}
                 {bugVersionInfo.match && (
                   <Popover
@@ -273,7 +282,7 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
                     <BugOutlined className={styles.bug} />
                   </Popover>
                 )}
-              </Typography.Title>
+              </Button>
               <Tag className={styles.versionTag} bordered={false} color="blue">
                 {changelogList[0]?.releaseDate}
               </Tag>

From f2445a89ee8877637653525722ab9344c2dd34a3 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Oct 2024 13:38:45 +0800
Subject: [PATCH 22/37] docs: tweak demo toggle button style (#51184)

---
 .dumi/theme/builtins/DemoWrapper/index.tsx | 51 ++++++++++------------
 .dumi/theme/common/styles/Demo.tsx         | 25 +++++------
 2 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx
index 8b125ab3fa39..85726b881b32 100644
--- a/.dumi/theme/builtins/DemoWrapper/index.tsx
+++ b/.dumi/theme/builtins/DemoWrapper/index.tsx
@@ -1,13 +1,6 @@
 import React, { useContext } from 'react';
-import {
-  BugFilled,
-  BugOutlined,
-  CodeFilled,
-  CodeOutlined,
-  ExperimentFilled,
-  ExperimentOutlined,
-} from '@ant-design/icons';
-import { ConfigProvider, Tooltip } from 'antd';
+import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
+import { ConfigProvider, Tooltip, Button } from 'antd';
 import classNames from 'classnames';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
 
@@ -33,10 +26,6 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
   const [expandAll, setExpandAll] = useLayoutState(false);
   const [enableCssVar, setEnableCssVar] = useLayoutState(true);
 
-  const expandTriggerClass = classNames('code-box-expand-trigger', {
-    'code-box-expand-trigger-active': expandAll,
-  });
-
   const handleVisibleToggle = () => {
     setShowDebug?.(!showDebug);
   };
@@ -84,29 +73,35 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             <FormattedMessage id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`} />
           }
         >
-          {expandAll ? (
-            <CodeFilled className={expandTriggerClass} onClick={handleExpandToggle} />
-          ) : (
-            <CodeOutlined className={expandTriggerClass} onClick={handleExpandToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<CodeOutlined />}
+            onClick={handleExpandToggle}
+            className={expandAll ? 'icon-enabled' : ''}
+          />
         </Tooltip>
         <Tooltip
           title={
             <FormattedMessage id={`app.component.examples.${showDebug ? 'hide' : 'visible'}`} />
           }
         >
-          {showDebug ? (
-            <BugFilled className={expandTriggerClass} onClick={handleVisibleToggle} />
-          ) : (
-            <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<BugOutlined />}
+            onClick={handleVisibleToggle}
+            className={showDebug ? 'icon-enabled' : ''}
+          />
         </Tooltip>
         <Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}>
-          {enableCssVar ? (
-            <ExperimentFilled className={expandTriggerClass} onClick={handleCssVarToggle} />
-          ) : (
-            <ExperimentOutlined className={expandTriggerClass} onClick={handleCssVarToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<ExperimentOutlined />}
+            onClick={handleCssVarToggle}
+            className={enableCssVar ? 'icon-enabled' : ''}
+          />
         </Tooltip>
       </span>
       <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
index 7287bda65555..d9d21ef6edfd 100644
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@@ -71,18 +71,6 @@ const GlobalDemoStyles: React.FC = () => {
             border: 1px solid ${token.colorPrimary};
           }
 
-          &-expand-trigger {
-            position: relative;
-            color: #3b4357;
-            font-size: ${token.fontSizeXL}px;
-            cursor: pointer;
-            opacity: 0.75;
-            transition: all ${token.motionDurationSlow};
-            &:hover {
-              opacity: 1;
-            }
-          }
-
           &-title {
             position: absolute;
             top: -14px;
@@ -358,7 +346,18 @@ const GlobalDemoStyles: React.FC = () => {
           inset-inline-end: 0;
           display: flex;
           align-items: center;
-          column-gap: ${token.marginSM}px;
+          column-gap: ${token.marginXS}px;
+
+          ${antCls}-btn {
+            opacity: 0.6;
+            &.icon-enabled {
+             background: ${token.colorFillSecondary};
+             opacity: 1;
+            ${iconCls} {
+              color: ${token.colorTextBase};
+              font-weight: bold;
+            }
+          }
         }
 
         ${antCls}-row-rtl {

From 1df8726ff75873049e5a3609f2d0a6995fbcc32b Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Fri, 11 Oct 2024 21:07:20 +0800
Subject: [PATCH 23/37] site: show DocAnchor for en changedoc (#51185)

---
 CHANGELOG.en-US.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index cb06197187c8..bfd1e041d600 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,7 +1,6 @@
 ---
 order: 6
 title: Changelog
-toc: false
 timeline: true
 tag: vVERSION
 ---

From d74500b34c5abb12f0cb76c07c287a406409477f Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Sat, 12 Oct 2024 10:53:22 +0800
Subject: [PATCH 24/37] type(switch): improve eventHandler type (#51165)

---
 components/switch/index.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 6d9ef3253818..abae39b80153 100755
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import RcSwitch from 'rc-switch';
+import type { SwitchChangeEventHandler, SwitchClickEventHandler } from 'rc-switch';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import Wave from '../_util/wave';
@@ -11,11 +12,7 @@ import useSize from '../config-provider/hooks/useSize';
 import useStyle from './style';
 
 export type SwitchSize = 'small' | 'default';
-export type SwitchChangeEventHandler = (
-  checked: boolean,
-  event: React.MouseEvent<HTMLButtonElement>,
-) => void;
-export type SwitchClickEventHandler = SwitchChangeEventHandler;
+export type { SwitchChangeEventHandler, SwitchClickEventHandler };
 
 export interface SwitchProps {
   prefixCls?: string;
@@ -110,11 +107,10 @@ const InternalSwitch = React.forwardRef<HTMLButtonElement, SwitchProps>((props,
 
   return wrapCSSVar(
     <Wave component="Switch">
-      {/* @ts-ignore */}
       <RcSwitch
         {...restProps}
         checked={checked}
-        onChange={changeHandler as any}
+        onChange={changeHandler}
         prefixCls={prefixCls}
         className={classes}
         style={mergedStyle}

From b8478e7e8298c1bccac4c4058dc59d37c7594282 Mon Sep 17 00:00:00 2001
From: Meowu <474384902@qq.com>
Date: Sat, 12 Oct 2024 11:35:37 +0800
Subject: [PATCH 25/37] fix(Tree): align switcher icon of tree component.
 (#51181)

---
 components/tree/style/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts
index af4091265f15..b9c29003c30d 100644
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@@ -245,6 +245,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
         cursor: 'pointer',
         userSelect: 'none',
         transition: `all ${token.motionDurationSlow}`,
+        marginInlineEnd: token
+          .calc(token.calc(titleHeight).sub(token.controlInteractiveSize))
+          .div(2)
+          .equal(),
 
         '&-noop': {
           cursor: 'unset',

From 3e4135b0c031387ae2179e8f3180f7abf42cac73 Mon Sep 17 00:00:00 2001
From: BKou <71936924+bmmmmmmmmm@users.noreply.github.com>
Date: Sat, 12 Oct 2024 15:45:27 +0800
Subject: [PATCH 26/37] docs: the default value of textAlign in watermark-cn
 (#51212)

Co-authored-by: aojunhao123 <aojunhao123@users.noreply.github.com>
---
 components/watermark/index.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
index fd9442ac3c57..110f7c6a1020 100644
--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@@ -56,7 +56,7 @@ tag: 5.1.0
 | fontWeight | 字体粗细 | `normal` \| `light` \| `weight` \| number | normal |  |
 | fontFamily | 字体类型 | string | sans-serif |  |
 | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal |  |
-| textAlign | 指定文本对齐方向  | [CanvasTextAlign](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) | 5.10.0 |
+| textAlign | 指定文本对齐方向  | [CanvasTextAlign](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) | `center` | 5.10.0 |
 
 ## 主题变量（Design Token）
 

From 3ff8b4b44b19166ec8c696c4645163d34da2997f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2024 17:12:19 +0800
Subject: [PATCH 27/37] ifx: upgrade @ant-design/cssinjs-utils (#51214)

Signed-off-by: afc163 <afc163@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 02fa143a62df..bcf87456eaa6 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
   "dependencies": {
     "@ant-design/colors": "^7.1.0",
     "@ant-design/cssinjs": "^1.21.1",
-    "@ant-design/cssinjs-utils": "^1.1.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
     "@ant-design/icons": "^5.5.1",
     "@ant-design/react-slick": "~1.1.2",
     "@babel/runtime": "^7.25.6",

From a15d9a3e4be233d5921969786b81c0051a007ecc Mon Sep 17 00:00:00 2001
From: ice <49827327+coding-ice@users.noreply.github.com>
Date: Sun, 13 Oct 2024 13:15:46 +0800
Subject: [PATCH 28/37] style(button): modify the text suspension bgColor
 (#51187)

---
 components/button/style/token.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/style/token.ts b/components/button/style/token.ts
index f570dc1e872f..3a88d8a58b42 100644
--- a/components/button/style/token.ts
+++ b/components/button/style/token.ts
@@ -283,7 +283,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     textTextColor: token.colorText,
     textTextHoverColor: token.colorText,
     textTextActiveColor: token.colorText,
-    textHoverBg: token.colorBgTextHover,
+    textHoverBg: token.colorFillTertiary,
     defaultColor: token.colorText,
     defaultBg: token.colorBgContainer,
     defaultBorderColor: token.colorBorder,

From f75d0cae7f31e550d700941562f69d804363463d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 13 Oct 2024 20:45:19 +0800
Subject: [PATCH 29/37] docs: use codesandbox as default reproduce link
 (#51219)

---
 .../builtins/Previewer/CodePreviewer.tsx      | 44 +++++++++----------
 .github/workflows/issue-labeled.yml           |  4 +-
 .lintstagedrc.json                            |  2 +-
 README-zh_CN.md                               |  2 +-
 README.md                                     |  2 +-
 5 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index 2e9100e49da4..79724a2eaf19 100644
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -108,7 +108,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
-  const { showDebug, codeType } = useContext(DemoContext);
+  const { codeType } = useContext(DemoContext);
 
   const { pkg } = useSiteData();
   const location = useLocation();
@@ -420,6 +420,26 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 </a>
               </Tooltip>
             )}
+            <form
+              className="code-box-code-action"
+              action="https://codesandbox.io/api/v1/sandboxes/define"
+              method="POST"
+              target="_blank"
+              ref={codeSandboxIconRef}
+              onClick={() => {
+                track({ type: 'codesandbox', demo: asset.id });
+                codeSandboxIconRef.current?.submit();
+              }}
+            >
+              <input
+                type="hidden"
+                name="parameters"
+                value={compress(JSON.stringify(codesanboxPrefillConfig))}
+              />
+              <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
+                <CodeSandboxIcon className="code-box-codesandbox" />
+              </Tooltip>
+            </form>
             {showRiddleButton ? (
               <form
                 className="code-box-code-action"
@@ -472,28 +492,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 <CodePenIcon className="code-box-codepen" />
               </Tooltip>
             </form>
-            {showDebug && (
-              <form
-                className="code-box-code-action"
-                action="https://codesandbox.io/api/v1/sandboxes/define"
-                method="POST"
-                target="_blank"
-                ref={codeSandboxIconRef}
-                onClick={() => {
-                  track({ type: 'codesandbox', demo: asset.id });
-                  codeSandboxIconRef.current?.submit();
-                }}
-              >
-                <input
-                  type="hidden"
-                  name="parameters"
-                  value={compress(JSON.stringify(codesanboxPrefillConfig))}
-                />
-                <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
-                  <CodeSandboxIcon className="code-box-codesandbox" />
-                </Tooltip>
-              </form>
-            )}
             <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
               <a
                 className="code-box-code-action"
diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml
index f2ad11a39d16..a2b8a1efde5b 100644
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@@ -38,9 +38,9 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
-            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/repro) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
+            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/reproduce) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
 
-            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/repro) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/reproduce) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
 
             > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
 
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index c13937fccc0b..20c73c0b3599 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,4 +1,4 @@
 {
-  "*.{ts,tsx,js,jsx,css,mjs,json}": ["biome check --write --no-errors-on-unmatched"],
+  "*.{ts,tsx,js,jsx,css,mjs,json}": ["biome check --write --no-errors-on-unmatched", "eslint"],
   "*.{md,yml}": ["prettier --ignore-unknown --write"]
 }
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 97d781cd7300..4fd827408d78 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -131,7 +131,7 @@ export default App;
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [常见问题](https://ant.design/docs/react/faq-cn)
-- [Stackblitz 在线演示](https://u.ant.design/reproduce)，用于报告 bug
+- [在线演示](https://u.ant.design/reproduce)，用于报告 bug
 - [定制主题](https://ant.design/docs/react/customize-theme-cn)
 - [国际化](https://ant.design/docs/react/i18n-cn)
 - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
diff --git a/README.md b/README.md
index 398db81828b7..90b313c47d38 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ export default () => (
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://ant.design/docs/react/faq)
-- [Stackblitz Demo](https://u.ant.design/reproduce) for bug reports
+- [Online Playground](https://u.ant.design/reproduce) for bug reports
 - [Customize Theme](https://ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 

From 46c29020a437cc3340627ea6a09e0004e7dafdc7 Mon Sep 17 00:00:00 2001
From: qingting <3411958+iqingting@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:25:45 +0800
Subject: [PATCH 30/37] fix(input.search): ensure borderColor inherits from
 theme token (#51226)

---
 components/input/style/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 065c2580b3d3..a1585c51a801 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -650,8 +650,6 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
     [searchPrefixCls]: {
       [componentCls]: {
         '&:hover, &:focus': {
-          borderColor: token.colorPrimaryHover,
-
           [`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
             borderInlineStartColor: token.colorPrimaryHover,
           },

From cfe77ef6ffd0d27dad7a64133ee6eae3703a7616 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: Mon, 14 Oct 2024 17:47:00 +0800
Subject: [PATCH 31/37] docs: 5.21.4 changelog (#51233)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: 5.21.4 changelog

* docs: fix typo

* Update CHANGELOG.zh-CN.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

* Update CHANGELOG.en-US.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

---------

Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>
Co-authored-by: thinkasany <480968828@qq.com>
---
 CHANGELOG.en-US.md | 10 ++++++++++
 CHANGELOG.zh-CN.md | 10 ++++++++++
 package.json       |  2 +-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index bfd1e041d600..e6fcfb5d15a1 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,16 @@ tag: vVERSION
 
 ---
 
+## 5.21.4
+
+`2024-10-14`
+
+- 🐞 Fixed Input.Search not applying the `hoverBorderColor/activeBorderColor` token for hover/active states. [#51226](https://github.com/ant-design/ant-design/pull/51226) [@iqingting](https://github.com/iqingting)
+- 🐞 Fix Tree icon align issue. [#51181](https://github.com/ant-design/ant-design/pull/51181) [@Meowu](https://github.com/Meowu)
+- 🐞 Fix Splitter occasionally shows unnecessary scrollbars in nested combinations. [#51169](https://github.com/ant-design/ant-design/pull/51169) [@zombieJ](https://github.com/zombieJ)
+- 💄 Modify Design Token `textHoverBg` hover background to `colorFillTertiary`. [#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
+- TypeScript
+  - 🤖 Improve type of Switch `eventHandler`. [#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
 ## 5.21.3
 
 `2024-10-09`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 01d3131f8639..9d43a7343bdf 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,16 @@ tag: vVERSION
 
 ---
 
+## 5.21.4
+
+`2024-10-14`
+
+- 🐞 修复 Input.Search 无法使用 Input Token `hoverBorderColor/activeBorderColor` 修改边框颜色的问题。[#51226](https://github.com/ant-design/ant-design/pull/51226) [@iqingting](https://github.com/iqingting)
+- 🐞 修复 Tree 的图标不对齐的问题。[#51181](https://github.com/ant-design/ant-design/pull/51181) [@Meowu](https://github.com/Meowu)
+- 🐞 修复 Splitter 在嵌套组合时，偶尔会出现多余滚动条的问题。[#51169](https://github.com/ant-design/ant-design/pull/51169) [@zombieJ](https://github.com/zombieJ)
+- 💄 修改 Design Token 的 `textHoverBg` 悬浮状态下的背景色为 `colorFillTertiary`。[#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
+- TypeScript
+  - 🤖 优化 Switch `eventHandler` 类型。[#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
 ## 5.21.3
 
 `2024-10-09`
diff --git a/package.json b/package.json
index bcf87456eaa6..788f01d09274 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.21.3",
+  "version": "5.21.4",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {

From cf686226545ed7db2e71b70cfe7e17b7c9cf92e9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Oct 2024 18:11:31 +0800
Subject: [PATCH 32/37] docs: improve homepage banner card style (#51221)

---
 .dumi/pages/index/components/BannerRecommends.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx
index d80d886f9178..8c6dfc16c2bd 100644
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -36,6 +36,7 @@ const useStyle = createStyles(({ token, css, cx }) => {
     cardItem: css`
       &:hover {
         box-shadow: ${token.boxShadowCard};
+        border-color: transparent;
       }
     `,
     sliderItem: css`

From fcea6b6691f8f1d5448ae291d06553389ad3f9e6 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Tue, 15 Oct 2024 09:51:19 +0800
Subject: [PATCH 33/37] fix: Splitter token rename (#51223)

Co-authored-by: afc163 <afc163@gmail.com>
---
 components/splitter/style/index.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts
index 221d0b1b2dcd..06a96d6b3f50 100644
--- a/components/splitter/style/index.ts
+++ b/components/splitter/style/index.ts
@@ -6,12 +6,18 @@ import { genStyleHooks } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
-   * @desc 可改变大小标识 元素大小
-   * @descEN Height of content area
+   * @desc 拖拽标识元素大小
+   * @descEN Drag and drop the identity element size
+   * @deprecated Please use `splitBarDraggableSize` instead.
    */
   resizeSpinnerSize: number;
   /**
    * @desc 拖拽标识元素大小
+   * @descEN Drag and drop the identity element size
+   */
+  splitBarDraggableSize: number;
+  /**
+   * @desc 拖拽元素大小
    * @descEN Drag the element size
    */
   splitBarSize: number;
@@ -71,7 +77,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
   const {
     componentCls,
     colorFill,
-    resizeSpinnerSize,
+    splitBarDraggableSize,
     splitBarSize,
     splitTriggerSize,
     controlItemBgHover,
@@ -223,7 +229,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
             },
 
             '&:after': {
-              height: resizeSpinnerSize,
+              height: splitBarDraggableSize,
               width: splitBarSize,
             },
           },
@@ -278,7 +284,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
             },
 
             '&:after': {
-              width: resizeSpinnerSize,
+              width: splitBarDraggableSize,
               height: splitBarSize,
             },
           },
@@ -329,11 +335,14 @@ export const prepareComponentToken: GetDefaultToken<'Splitter'> = (token) => {
   const splitBarSize = token.splitBarSize || 2;
   const splitTriggerSize = token.splitTriggerSize || 6;
 
+  // https://github.com/ant-design/ant-design/pull/51223
   const resizeSpinnerSize = token.resizeSpinnerSize || 20;
+  const splitBarDraggableSize = token.splitBarDraggableSize ?? resizeSpinnerSize;
 
   return {
     splitBarSize,
     splitTriggerSize,
+    splitBarDraggableSize,
     resizeSpinnerSize,
   };
 };

From f60b71749ccdb8aab198703b51b92774bb4c824c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 15 Oct 2024 09:51:49 +0800
Subject: [PATCH 34/37] chore: Rename pr-check-ci.yml to pr-auto-merge.yml
 (#51235)

---
 .github/workflows/{pr-check-ci.yml => pr-auto-merge.yml} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/workflows/{pr-check-ci.yml => pr-auto-merge.yml} (100%)

diff --git a/.github/workflows/pr-check-ci.yml b/.github/workflows/pr-auto-merge.yml
similarity index 100%
rename from .github/workflows/pr-check-ci.yml
rename to .github/workflows/pr-auto-merge.yml

From 0ec7bad5cbfbf4cc2daf63808276ea2bdfb314f0 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 15 Oct 2024 11:32:29 +0800
Subject: [PATCH 35/37] fix(Typography): Link can be selected by the user
 (#51243)

---
 components/typography/style/mixins.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts
index 75433d491572..74c4932f53ae 100644
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -60,6 +60,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
   return {
     'a&, a': {
       ...operationUnit(token),
+      userSelect: 'text',
 
       [`&[disabled], &${componentCls}-disabled`]: {
         color: token.colorTextDisabled,

From ae99ce895103d796112fa0735b1221def9c03157 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 15 Oct 2024 11:46:44 +0800
Subject: [PATCH 36/37] docs: improve changedoc (#51244)

---
 CHANGELOG.en-US.md | 2 +-
 CHANGELOG.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index e6fcfb5d15a1..58a865973c32 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -22,7 +22,7 @@ tag: vVERSION
 - 🐞 Fixed Input.Search not applying the `hoverBorderColor/activeBorderColor` token for hover/active states. [#51226](https://github.com/ant-design/ant-design/pull/51226) [@iqingting](https://github.com/iqingting)
 - 🐞 Fix Tree icon align issue. [#51181](https://github.com/ant-design/ant-design/pull/51181) [@Meowu](https://github.com/Meowu)
 - 🐞 Fix Splitter occasionally shows unnecessary scrollbars in nested combinations. [#51169](https://github.com/ant-design/ant-design/pull/51169) [@zombieJ](https://github.com/zombieJ)
-- 💄 Modify Design Token `textHoverBg` hover background to `colorFillTertiary`. [#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
+- 💄 Modify Button `textHoverBg` hover background to `colorFillTertiary`. [#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
 - TypeScript
   - 🤖 Improve type of Switch `eventHandler`. [#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
 ## 5.21.3
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 9d43a7343bdf..2cecb29841e5 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -22,7 +22,7 @@ tag: vVERSION
 - 🐞 修复 Input.Search 无法使用 Input Token `hoverBorderColor/activeBorderColor` 修改边框颜色的问题。[#51226](https://github.com/ant-design/ant-design/pull/51226) [@iqingting](https://github.com/iqingting)
 - 🐞 修复 Tree 的图标不对齐的问题。[#51181](https://github.com/ant-design/ant-design/pull/51181) [@Meowu](https://github.com/Meowu)
 - 🐞 修复 Splitter 在嵌套组合时，偶尔会出现多余滚动条的问题。[#51169](https://github.com/ant-design/ant-design/pull/51169) [@zombieJ](https://github.com/zombieJ)
-- 💄 修改 Design Token 的 `textHoverBg` 悬浮状态下的背景色为 `colorFillTertiary`。[#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
+- 💄 修改 Button `textHoverBg` 在悬浮状态下的背景色为 `colorFillTertiary`。[#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
 - TypeScript
   - 🤖 优化 Switch `eventHandler` 类型。[#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
 ## 5.21.3

From 7e5c67e69f643a8d2f0e75691ad574f6f352a579 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 15 Oct 2024 13:51:42 +0800
Subject: [PATCH 37/37] chore: update snapshot

---
 components/table/__tests__/__snapshots__/empty.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/__tests__/__snapshots__/empty.test.tsx.snap b/components/table/__tests__/__snapshots__/empty.test.tsx.snap
index 3a0695734098..a5f52d2f3e54 100644
--- a/components/table/__tests__/__snapshots__/empty.test.tsx.snap
+++ b/components/table/__tests__/__snapshots__/empty.test.tsx.snap
@@ -356,7 +356,7 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
       class="ant-spin-container"
     >
       <div
-        class="ant-table ant-table-empty ant-table-ping-right ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
+        class="ant-table ant-table-empty ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
       >
         <div
           class="ant-table-container"