Merge branch 'master' into task/add-file-metadata

2025-01-22 08:53:29 +08:00 · 2024-12-14 20:28:35 -04:00 · 2024-12-14 20:28:35 -04:00 · 45e3251d89
commit 45e3251d89
parent c2b9c76e50 5da9dde184
491 changed files with 48528 additions and 28534 deletions
--- a/.dumi/global.css
+++ b/.dumi/global.css
@ -16,5 +16,5 @@

 html {
  scrollbar-width: thin;
-  scrollbar-color: unset;
+  scrollbar-color: #eaeaea transparent;
 }
--- 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`
--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.dumi/pages/index/components/ComponentsList.tsx
@ -257,7 +257,7 @@ const ComponentsList: React.FC = () => {
            style={{ width: 400 }}
            message="Ant Design 5.0"
            description={locale.sampleContent}
-            closable
+            closable={{ closeIcon: true, disabled: true }}
          />
        ),
      },
--- a/.dumi/theme/builtins/Antd.tsx
+++ b/.dumi/theme/builtins/Antd.tsx
@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as all from 'antd';
+
+interface AntdProps {
+  component: keyof typeof all;
+}
+
+function Antd(props: AntdProps) {
+  const { component, ...restProps } = props;
+  const Component = (all[component] ?? React.Fragment) as React.ComponentType;
+
+  return <Component {...restProps} />;
+}
+
+export default Antd;
--- 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;
--- a/.dumi/theme/builtins/ComponentMeta/index.tsx
+++ b/.dumi/theme/builtins/ComponentMeta/index.tsx
@ -1,12 +1,13 @@
 import React from 'react';
-import { EditOutlined, GithubOutlined } from '@ant-design/icons';
+import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
-import { Descriptions, theme, Tooltip, Typography } from 'antd';
+import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';

 import useLocale from '../../../hooks/useLocale';
+import ComponentChangelog from '../../common/ComponentChangelog';

 const locales = {
  cn: {
@ -16,6 +17,7 @@ const locales = {
    source: '源码',
    docs: '文档',
    edit: '编辑此页',
+    changelog: '更新日志',
    version: '版本',
  },
  en: {
@ -25,6 +27,7 @@ const locales = {
    source: 'Source',
    docs: 'Docs',
    edit: 'Edit this page',
+    changelog: 'Changelog',
    version: 'Version',
  },
 };
@ -43,7 +46,7 @@ const useStyle = createStyles(({ token }) => ({
    align-items: center;
    column-gap: ${token.paddingXXS}px;
    border-radius: ${token.borderRadiusSM}px;
-    padding-inline: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXXS}px !important;
    transition: all ${token.motionDurationSlow} !important;
    font-family: ${token.codeFamily};
    color: ${token.colorTextSecondary} !important;
@ -70,6 +73,9 @@ const useStyle = createStyles(({ token }) => ({
  semicolon: css`
    color: ${token.colorText};
  `,
+  icon: css`
+    margin-inline-end: ${token.marginXXS}px;
+  `,
 }));

 export interface ComponentMetaProps {
@ -117,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;
@ -171,7 +177,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
            label: locale.source,
            children: (
              <Typography.Link className={styles.code} href={filledSource} target="_blank">
-                <GithubOutlined style={{ marginInlineEnd: 4 }} />
+                <GithubOutlined className={styles.icon} />
                <span>{abbrSource}</span>
              </Typography.Link>
            ),
@ -179,14 +185,22 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
          filename && {
            label: locale.docs,
            children: (
-              <Typography.Link
-                className={styles.code}
-                href={`${branchUrl}${filename}`}
-                target="_blank"
-              >
-                <EditOutlined style={{ marginInlineEnd: 4 }} />
-                <span>{locale.edit}</span>
-              </Typography.Link>
+              <Flex justify="flex-start" align="center" gap="middle">
+                <Typography.Link
+                  className={styles.code}
+                  href={`${branchUrl}${filename}`}
+                  target="_blank"
+                >
+                  <EditOutlined className={styles.icon} />
+                  <span>{locale.edit}</span>
+                </Typography.Link>
+                <ComponentChangelog>
+                  <Typography.Link className={styles.code}>
+                    <HistoryOutlined className={styles.icon} />
+                    <span>{locale.changelog}</span>
+                  </Typography.Link>
+                </ComponentChangelog>
+              </Flex>
            ),
          },
          isVersionNumber(version) && {
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@ -243,7 +243,7 @@ const Overview: React.FC = () => {
                        {cardContent}
                      </a>
                    ) : (
-                      <Link to={url} prefetch key={component.title}>
+                      <Link to={url} key={component.title}>
                        {cardContent}
                      </Link>
                    );
--- a/.dumi/theme/builtins/DemoWrapper/index.tsx
+++ b/.dumi/theme/builtins/DemoWrapper/index.tsx
@ -1,15 +1,9 @@
-import React, { useContext } from 'react';
-import {
-  BugFilled,
-  BugOutlined,
-  CodeFilled,
-  CodeOutlined,
-  ExperimentFilled,
-  ExperimentOutlined,
-} from '@ant-design/icons';
-import { ConfigProvider, Tooltip } from 'antd';
+import React, { Suspense, useContext } from 'react';
+import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
+import { ConfigProvider, Tooltip, Button } from 'antd';
 import classNames from 'classnames';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
+import { css, Global } from '@emotion/react';

 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocale from '../../../hooks/useLocale';
@ -33,10 +27,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);
  };
@ -78,39 +68,54 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
        'demo-wrapper-show-debug': showDebug,
      })}
    >
+      <Global
+        styles={css`
+          :root {
+            --antd-site-api-deprecated-display: ${showDebug ? 'table-row' : 'none'};
+          }
+        `}
+      />
      <span className="all-code-box-controls">
        <Tooltip
          title={
            <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 }}>
-        <DumiDemoGrid items={demos} />
+        <Suspense>
+          <DumiDemoGrid items={demos} />
+        </Suspense>
      </ConfigProvider>
    </div>
  );
--- a/.dumi/theme/builtins/IconSearch/IconSearch.tsx
+++ b/.dumi/theme/builtins/IconSearch/IconSearch.tsx
@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
-import type { SegmentedProps } from 'antd';
 import { Affix, Empty, Input, Segmented } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
+import type { SegmentedOptions } from 'antd/es/segmented';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';

@ -28,26 +28,6 @@ const useStyle = createStyles(({ token, css }) => ({
  `,
 }));

-const options = (
-  formatMessage: (values: Record<string, string>) => React.ReactNode,
-): SegmentedProps['options'] => [
-  {
-    value: ThemeType.Outlined,
-    icon: <Icon component={OutlinedIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.outlined' }),
-  },
-  {
-    value: ThemeType.Filled,
-    icon: <Icon component={FilledIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.filled' }),
-  },
-  {
-    value: ThemeType.TwoTone,
-    icon: <Icon component={TwoToneIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.two-tone' }),
-  },
-];
-
 interface IconSearchState {
  theme: ThemeType;
  searchKey: string;
@ -124,14 +104,35 @@ const IconSearch: React.FC = () => {
    backgroundColor: colorBgContainer,
  };

+  const memoizedOptions = React.useMemo<SegmentedOptions<ThemeType>>(
+    () => [
+      {
+        value: ThemeType.Outlined,
+        icon: <Icon component={OutlinedIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.outlined' }),
+      },
+      {
+        value: ThemeType.Filled,
+        icon: <Icon component={FilledIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.filled' }),
+      },
+      {
+        value: ThemeType.TwoTone,
+        icon: <Icon component={TwoToneIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.two-tone' }),
+      },
+    ],
+    [intl],
+  );
+
  return (
    <div className="markdown">
      <Affix offsetTop={anchorTop} onChange={setSearchBarAffixed}>
        <div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
-          <Segmented
+          <Segmented<ThemeType>
            size="large"
            value={displayState.theme}
-            options={options(intl.formatMessage)}
+            options={memoizedOptions}
            onChange={handleChangeTheme}
          />
          <Input.Search
--- 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"
--- a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@ -41,6 +41,10 @@ const useStyle = createStyles(({ token, css }) => ({
  `,
  copyTip: css`
    color: ${token.colorTextTertiary};
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
  `,
  copiedTip: css`
    .anticon {
--- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
+++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
-import { FormattedMessage } from 'dumi';
 import type { Color } from 'antd/es/color-picker';
+import { FormattedMessage } from 'dumi';

 import useLocale from '../../../hooks/useLocale';
 import ColorPatterns from './ColorPatterns';
@ -34,7 +34,7 @@ const ColorPaletteTool: React.FC = () => {
    setPrimaryColorInstance(color);
  };

-  const handleChangeBackgroundColor = (_, hex: string) => {
+  const handleChangeBackgroundColor = (_: Color, hex: string) => {
    setBackgroundColor(hex);
  };

--- a/.dumi/theme/common/Color/Palette.tsx
+++ b/.dumi/theme/common/Color/Palette.tsx
@ -5,6 +5,9 @@ import CopyToClipboard from 'react-copy-to-clipboard';

 const rgbToHex = (rgbString: string): string => {
  const rgb = rgbString.match(/\d+/g);
+  if (!rgb) {
+    return '';
+  }
  let r = parseInt(rgb[0], 10).toString(16);
  let g = parseInt(rgb[1], 10).toString(16);
  let b = parseInt(rgb[2], 10).toString(16);
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@ -1,6 +1,6 @@
-import React from 'react';
-import { BugOutlined, HistoryOutlined } from '@ant-design/icons';
-import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd';
+import React, { cloneElement, isValidElement } from 'react';
+import { BugOutlined } from '@ant-design/icons';
+import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
 import semver from 'semver';
@ -8,6 +8,7 @@ import semver from 'semver';
 import deprecatedVersions from '../../../../BUG_VERSIONS.json';
 import useFetch from '../../../hooks/useFetch';
 import useLocale from '../../../hooks/useLocale';
+import useLocation from '../../../hooks/useLocation';
 import Link from '../Link';

 interface MatchDeprecatedResult {
@ -19,6 +20,7 @@ interface ChangelogInfo {
  version: string;
  changelog: string;
  refs: string[];
+  releaseDate: string;
 }

 function matchDeprecated(v: string): MatchDeprecatedResult {
@ -33,6 +35,11 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }

 const useStyle = createStyles(({ token, css }) => ({
+  listWrap: css`
+    > li {
+      line-height: 2;
+    }
+  `,
  linkRef: css`
    margin-inline-start: ${token.marginXS}px;
  `,
@ -69,15 +76,30 @@ const useStyle = createStyles(({ token, css }) => ({
    position: 'relative',
    [`> ${token.antCls}-drawer-body`]: {
      scrollbarWidth: 'thin',
-      scrollbarColor: 'unset',
+      scrollbarGutter: 'stable',
    },
  },
+  versionWrap: css`
+    margin-bottom: 1em;
+  `,
+  versionTitle: css`
+    height: 28px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0 !important;
+  `,
+  versionTag: css`
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    &:last-child {
+      margin-inline-end: 0;
+    }
+  `,
 }));

-export interface ComponentChangelogProps {
-  pathname: string;
-}
-
 const locales = {
  cn: {
    full: '查看完整日志',
@ -102,22 +124,31 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
    const nodes: React.ReactNode[] = [];

    let isQuota = false;
+    let isBold = false;
    let lastStr = '';

    for (let i = 0; i < changelog.length; i += 1) {
      const char = changelog[i];
+      const isDoubleAsterisk = char === '*' && changelog[i + 1] === '*';

-      if (char !== '`') {
+      if (char !== '`' && !isDoubleAsterisk) {
        lastStr += char;
      } else {
        let node: React.ReactNode = lastStr;
        if (isQuota) {
          node = <code>{node}</code>;
+        } else if (isBold) {
+          node = <strong>{node}</strong>;
        }

        nodes.push(node);
        lastStr = '';
-        isQuota = !isQuota;
+        if (char === '`') {
+          isQuota = !isQuota;
+        } else if (isDoubleAsterisk) {
+          isBold = !isBold;
+          i += 1; // Skip the next '*'
+        }
      }
    }

@ -126,33 +157,36 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
    return nodes;
  }, [changelog]);

+  return <span>{parsedChangelog}</span>;
+};
+
+const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
+  const { styles } = useStyle();
  return (
    <>
-      {/* Changelog */}
-      <span>{parsedChangelog}</span>
+      {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[]; styles: any }> = ({
-  changelogList,
-  styles,
-}) => {
-  const elements = [];
-  for (let i = 0; i < changelogList.length; i += 1) {
+const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
+  const elements: React.ReactNode[] = [];
+  const { styles } = useStyle();
+  const len = changelogList.length;
+  for (let i = 0; i < len; i += 1) {
    const { refs, changelog } = changelogList[i];
    // Check if the next line is an image link and append it to the current line
-    if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
+    if (i + 1 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
      const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
-      const imgElement = imgDom.querySelector('img');
+      const imgElement = imgDom.querySelector<HTMLImageElement>('img');
      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') || ''}
@ -166,11 +200,12 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: an
      elements.push(
        <li key={i}>
          <ParseChangelog changelog={changelog} />
+          <RefLinks refs={refs} />
        </li>,
      );
    }
  }
-  return <ul>{elements}</ul>;
+  return <ul className={styles.listWrap}>{elements}</ul>;
 };

 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
@ -189,10 +224,11 @@ const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[]
  }, [data, componentPath]);
 };

-const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
-  const { pathname = '' } = props;
+const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
+  const { children } = props;
  const [locale, lang] = useLocale(locales);
  const [show, setShow] = React.useState(false);
+  const { pathname } = useLocation();

  const { styles } = useStyle();

@ -214,36 +250,46 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
      return {
        children: (
          <Typography>
-            <Typography.Title level={4}>
-              {version}
-              {bugVersionInfo.match && (
-                <Popover
-                  destroyTooltipOnHide
-                  placement="right"
-                  title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
-                  content={
-                    <ul className={styles.bugReasonList}>
-                      {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
-                        <li key={`reason-${index}`}>
-                          <a type="link" target="_blank" rel="noreferrer" href={reason}>
-                            <BugOutlined />
-                            {reason
-                              ?.replace(/#.*$/, '')
-                              ?.replace(
-                                /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
-                                '#',
-                              )}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  }
-                >
-                  <BugOutlined className={styles.bug} />
-                </Popover>
-              )}
-            </Typography.Title>
-            <RenderChangelogList changelogList={changelogList} styles={styles} />
+            <Flex className={styles.versionWrap} justify="flex-start" align="center" gap="middle">
+              <Button
+                color="default"
+                className={styles.versionTitle}
+                variant="link"
+                href={`/changelog${lang === 'cn' ? '-cn' : ''}/#${version.replace(/\./g, '').replace(/\s.*/g, '-')}`}
+              >
+                {version}
+                {bugVersionInfo.match && (
+                  <Popover
+                    destroyTooltipOnHide
+                    placement="right"
+                    title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
+                    content={
+                      <ul className={styles.bugReasonList}>
+                        {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
+                          <li key={`reason-${index}`}>
+                            <a type="link" target="_blank" rel="noreferrer" href={reason}>
+                              <BugOutlined />
+                              {reason
+                                ?.replace(/#.*$/, '')
+                                ?.replace(
+                                  /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
+                                  '#',
+                                )}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    }
+                  >
+                    <BugOutlined className={styles.bug} />
+                  </Popover>
+                )}
+              </Button>
+              <Tag className={styles.versionTag} bordered={false} color="blue">
+                {changelogList[0]?.releaseDate}
+              </Tag>
+            </Flex>
+            <RenderChangelogList changelogList={changelogList} />
          </Typography>
        ),
      };
@ -253,15 +299,16 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
  const screens = Grid.useBreakpoint();
  const width = screens.md ? '48vw' : '90vw';

-  if (!list || !list.length) {
+  if (!pathname.startsWith('/components/') || !list || !list.length) {
    return null;
  }

  return (
    <>
-      <Button icon={<HistoryOutlined />} onClick={() => setShow(true)}>
-        {locale.changelog}
-      </Button>
+      {isValidElement(children) &&
+        cloneElement(children as React.ReactElement, {
+          onClick: () => setShow(true),
+        })}
      <Drawer
        destroyOnClose
        className={styles.drawerContent}
--- a/.dumi/theme/common/ComponentChangelog/index.tsx
+++ b/.dumi/theme/common/ComponentChangelog/index.tsx
@ -1,10 +1,11 @@
 import React from 'react';

-import type { ComponentChangelogProps } from './ComponentChangelog';
 import ComponentChangelog from './ComponentChangelog';

-export default (props: ComponentChangelogProps) => (
+const ChangeLog: React.FC<Readonly<React.PropsWithChildren>> = ({ children }) => (
  <React.Suspense fallback={null}>
-    <ComponentChangelog {...props} />
+    <ComponentChangelog>{children}</ComponentChangelog>
  </React.Suspense>
 );
+
+export default ChangeLog;
--- a/.dumi/theme/common/JSONEditor/index.tsx
+++ b/.dumi/theme/common/JSONEditor/index.tsx
@ -1,16 +1,20 @@
 import React, { useEffect, useRef } from 'react';
-import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
-import { JSONEditor, Mode } from 'vanilla-jsoneditor';
+import type { JsonEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import { createJSONEditor, Mode } from 'vanilla-jsoneditor';

 const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
-  const editorRef = useRef<JSONEditor>(null);
+  const editorRef = useRef<JsonEditor>();
  const container = useRef<HTMLDivElement>(null);

  useEffect(() => {
-    editorRef.current = new JSONEditor({
-      target: container.current,
-      props: { mode: Mode.text },
-    });
+    if (container.current) {
+      editorRef.current = createJSONEditor({
+        target: container.current,
+        props: {
+          mode: Mode.text,
+        },
+      });
+    }
    return () => {
      editorRef.current?.destroy();
    };
--- a/.dumi/theme/common/Link.tsx
+++ b/.dumi/theme/common/Link.tsx
@ -1,7 +1,6 @@
 import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
-import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
-import nprogress from 'nprogress';
+import React, { useMemo, forwardRef } from 'react';
+import { Link as DumiLink, useLocation, useAppData, useNavigate } from 'dumi';

 export interface LinkProps {
  to: string | { pathname?: string; search?: string; hash?: string };
@ -9,64 +8,49 @@ export interface LinkProps {
  className?: string;
  onClick?: MouseEventHandler;
  component?: React.ComponentType<any>;
+  children?: React.ReactNode;
 }

-nprogress.configure({ showSpinner: false });
-
-const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, component, ...rest } = props;
-  const [isPending, startTransition] = useTransition();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  const href = React.useMemo<string>(() => {
-    if (typeof to === 'object') {
-      return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
-    }
-    return to;
-  }, [to]);
-
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    props.onClick?.(e);
-    if (!href?.startsWith('http')) {
-      // Should support open in new tab
-      if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
-        e.preventDefault();
-        startTransition(() => {
-          if (href) {
-            navigate(href);
-          }
-        });
+const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
+  ({ component, children, to, ...rest }, ref) => {
+    const { pathname } = useLocation();
+    const { preloadRoute } = useAppData();
+    const navigate = useNavigate();
+    const href = useMemo<string>(() => {
+      if (typeof to === 'object') {
+        return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
      }
+      return to;
+    }, [to]);
+    const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      rest.onClick?.(e);
+      if (!href?.startsWith('http')) {
+        // Should support open in new tab
+        if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
+          e.preventDefault();
+          navigate(href);
+        }
+      }
+    };
+    if (component) {
+      return React.createElement(
+        component,
+        {
+          ...rest,
+          ref,
+          href,
+          onClick,
+          onMouseEnter: () => preloadRoute?.(href),
+        },
+        children,
+      );
    }
-  };
-
-  useLayoutEffect(() => {
-    if (isPending) {
-      nprogress.start();
-    } else {
-      nprogress.done();
-    }
-  }, [isPending]);
-
-  if (component) {
-    return React.createElement(
-      component,
-      {
-        ...rest,
-        ref,
-        onClick: handleClick,
-        href,
-      },
-      children,
+    return (
+      <DumiLink ref={ref} {...rest} to={href} prefetch>
+        {children}
+      </DumiLink>
    );
-  }
-
-  return (
-    <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
-      {children}
-    </DumiLink>
-  );
-});
+  },
+);

 export default Link;
--- a/.dumi/theme/common/LiveCode.tsx
+++ b/.dumi/theme/common/LiveCode.tsx
@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
          background: ${colorBgContainer};
          &-scroll-container {
            scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
          }
        }
        .dumi-default-source-code > pre,
--- 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 {
+          &.icon-enabled {
+            background-color: ${token.colorFillSecondary};
+            opacity: 1;
+            ${iconCls} {
+              color: ${token.colorTextBase};
+              font-weight: bold;
+            }
+          }
        }

        ${antCls}-row-rtl {
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => {
          border-radius: ${token.borderRadius}px;
          > pre.prism-code {
            scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
            padding: ${token.paddingSM}px ${token.paddingMD}px;
            font-size: ${token.fontSize}px;
            line-height: 2;
@ -272,7 +272,7 @@ const GlobalStyle: React.FC = () => {
        .markdown .dumi-default-table {
          &-content {
            scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
          }
          table {
            margin: 0;
@ -373,6 +373,24 @@ const GlobalStyle: React.FC = () => {
              }
            }
          }
+
+            /*
+              Api 表中某些属性用 del 标记，表示已废弃（但仍期望给开发者一个过渡期)用 css 标记出来。仅此而已。
+              有更多看法？移步讨论区: https://github.com/ant-design/ant-design/discussions/51298
+            */
+            tr:has(td:first-child > del) {
+              color: ${token.colorWarning} !important;
+              background-color: ${token.colorWarningBg} !important;
+              display: var(--antd-site-api-deprecated-display, none);
+
+              del {
+                color: ${token.colorWarning};
+              }
+
+              &:hover del {
+                text-decoration: none;
+              }
+            }
        }

        .grid-demo,
--- a/.dumi/theme/slots/Content/Contributors.tsx
+++ b/.dumi/theme/slots/Content/Contributors.tsx
@ -8,9 +8,6 @@ import SiteContext from '../SiteContext';
 import ContributorAvatar from './ContributorAvatar';

 const useStyle = createStyles(({ token, css }) => ({
-  contributorsList: css`
-    margin-top: 120px !important;
-  `,
  listMobile: css`
    margin: 1em 0 !important;
  `,
@ -50,7 +47,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
  }

  return (
-    <div className={classNames(styles.contributorsList, { [styles.listMobile]: isMobile })}>
+    <div className={classNames({ [styles.listMobile]: isMobile })}>
      <div className={styles.title}>{formatMessage({ id: 'app.content.contributors' })}</div>
      <ContributorsList
        cache
--- a/.dumi/theme/slots/Content/DocAnchor.tsx
+++ b/.dumi/theme/slots/Content/DocAnchor.tsx
@ -10,7 +10,7 @@ export const useStyle = createStyles(({ token, css }) => {
  return {
    anchorToc: css`
      scrollbar-width: thin;
-      scrollbar-color: unset;
+      scrollbar-gutter: stable;
      ${antCls}-anchor {
        ${antCls}-anchor-link-title {
          font-size: ${token.fontSizeSM}px;
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -18,7 +18,6 @@ const DocAnchor = React.lazy(() => import('./DocAnchor'));
 const DocMeta = React.lazy(() => import('./DocMeta'));
 const Footer = React.lazy(() => import('../Footer'));
 const PrevAndNext = React.lazy(() => import('../../common/PrevAndNext'));
-const ComponentChangelog = React.lazy(() => import('../../common/ComponentChangelog'));
 const EditButton = React.lazy(() => import('../../common/EditButton'));

 const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
@ -70,11 +69,6 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                  )}
                </Space>
              </Typography.Title>
-              {pathname.startsWith('/components/') && (
-                <InViewSuspense fallback={null}>
-                  <ComponentChangelog pathname={pathname} />
-                </InViewSuspense>
-              )}
            </Flex>
          ) : null}
          <InViewSuspense fallback={null}>
@ -100,9 +94,11 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
              juejinLink={meta.frontmatter.juejin_url}
            />
          </InViewSuspense>
-          <InViewSuspense fallback={<div style={{ height: 50, marginTop: 120 }} />}>
-            <Contributors filename={meta.frontmatter.filename} />
-          </InViewSuspense>
+          <div style={{ marginTop: 120 }}>
+            <InViewSuspense fallback={<div style={{ height: 50 }} />}>
+              <Contributors filename={meta.frontmatter.filename} />
+            </InViewSuspense>
+          </div>
        </article>
        <InViewSuspense fallback={null}>
          <PrevAndNext rtl={isRTL} />
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@ -101,6 +101,11 @@ const Footer: React.FC = () => {
    const col1 = {
      title: <FormattedMessage id="app.footer.resources" />,
      items: [
+        {
+          title: 'Ant Design X',
+          url: isZhCN ? 'https://ant-design-x.antgroup.com' : 'https://x.ant.design',
+          openExternal: true,
+        },
        {
          title: 'Ant Design Charts',
          url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design',
@ -112,7 +117,7 @@ const Footer: React.FC = () => {
          openExternal: true,
        },
        {
-          title: 'Ant Design Pro Components',
+          title: 'Pro Components',
          url: 'https://procomponents.ant.design',
          openExternal: true,
        },
@ -126,6 +131,11 @@ const Footer: React.FC = () => {
          url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design',
          openExternal: true,
        },
+        {
+          title: 'Ant Design Web3',
+          url: isZhCN ? 'https://web3.antdigital.dev' : 'https://web3.ant.design',
+          openExternal: true,
+        },
        {
          title: 'Ant Design Landing',
          description: <FormattedMessage id="app.footer.landing" />,
@ -156,12 +166,6 @@ const Footer: React.FC = () => {
          url: 'https://qiankun.umijs.org',
          openExternal: true,
        },
-        {
-          title: 'ahooks',
-          description: <FormattedMessage id="app.footer.hooks" />,
-          url: 'https://github.com/alibaba/hooks',
-          openExternal: true,
-        },
        {
          title: 'Ant Motion',
          description: <FormattedMessage id="app.footer.motion" />,
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -93,13 +93,14 @@ const useStyle = createStyles(({ token, css }) => {
        .dumi-default-search-popover {
          inset-inline-start: ${token.paddingSM}px;
          inset-inline-end: unset;
+          z-index: 1;
          &::before {
            inset-inline-start: 100px;
            inset-inline-end: unset;
          }
          & > section {
            scrollbar-width: thin;
-            scrollbar-color: unset;
+            scrollbar-gutter: stable;
          }
        }
      }
@ -142,7 +143,7 @@ const useStyle = createStyles(({ token, css }) => {
      .rc-virtual-list {
        .rc-virtual-list-holder {
          scrollbar-width: thin;
-          scrollbar-color: unset;
+          scrollbar-gutter: stable;
        }
      }
    `,
--- a/.dumi/theme/slots/Sidebar/index.tsx
+++ b/.dumi/theme/slots/Sidebar/index.tsx
@ -8,13 +8,14 @@ import useMenu from '../../../hooks/useMenu';
 import SiteContext from '../SiteContext';

 const useStyle = createStyles(({ token, css }) => {
-  const { antCls, fontFamily, colorSplit } = token;
+  const { antCls, fontFamily, colorSplit, marginXXL, paddingXXS } = token;

  return {
    asideContainer: css`
      min-height: 100%;
-      padding-bottom: 48px;
+      padding-bottom: ${marginXXL}px !important;
      font-family: Avenir, ${fontFamily}, sans-serif;
+      padding: 0 ${paddingXXS}px;

      &${antCls}-menu-inline {
        ${antCls}-menu-submenu-title h4,
@ -91,18 +92,13 @@ const useStyle = createStyles(({ token, css }) => {
    `,
    mainMenu: css`
      z-index: 1;
-        position: sticky;
-        top: ${token.headerHeight + token.contentMarginTop}px;
-        width: 100%;
-        height: 100%;
-        max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
-        overflow: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: unset;
-
-        .ant-menu {
-          padding: 0 4px;
-        }
+      position: sticky;
+      top: ${token.headerHeight + token.contentMarginTop}px;
+      width: 100%;
+      max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
+      overflow: hidden;
+      scrollbar-width: thin;
+      scrollbar-gutter: stable;

      &:hover {
        overflow-y: auto;
--- a/.dumirc.ts
+++ b/.dumirc.ts
@ -9,7 +9,11 @@ import { version } from './package.json';

 export default defineConfig({
  plugins: ['dumi-plugin-color-chunk'],
+
+  // For <Link prefetch />
+  routePrefetch: {},
  manifest: {},
+
  conventionRoutes: {
    // to avoid generate routes for .dumi/pages/index/components/xx
    exclude: [/index\/components\//],
--- a/.github/workflows/auto-unassign.yml
+++ b/.github/workflows/auto-unassign.yml
@ -0,0 +1,79 @@
+name: Auto Unassign
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # Run at 00:00 every day
+
+permissions:
+  issues: write # Need write permission to modify issue assignees
+
+jobs:
+  unassign_job:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Unassign inactive issues
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const daysBeforeUnassign = 14; 
+            let page = 1;
+            const perPage = 100;
+
+            while (true) {
+              const { data: issues } = await github.rest.issues.listForRepo({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                assignee: '*', // Filter assigned issues
+                per_page: perPage,
+                page: page,
+              });
+
+              if (issues.length === 0) {
+                break;
+              }
+
+              const now = new Date();
+
+              for (const issue of issues) {
+                if (issue.pull_request) continue;
+
+                const updatedAt = new Date(issue.updated_at);
+                const daysInactive = (now - updatedAt) / (1000 * 60 * 60 * 24);
+
+                const { data: timeline } = await github.rest.issues.listEventsForTimeline({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issue.number,
+                });
+
+                const hasLinkedPR = timeline.some(event => 
+                  event.event === 'cross-referenced' && event.source?.issue?.pull_request || // PR referenced this issue
+                  event.event === 'connected' || // PR connected via keywords
+                  event.event === 'referenced' && event.commit_id // Connected via commit
+                );
+
+                if (daysInactive >= daysBeforeUnassign && !hasLinkedPR) {
+                  const assigneesMentions = issue.assignees
+                    .map(user => `@${user.login}`)
+                    .join(' ');
+                    
+                  // Remove assignees
+                  await github.rest.issues.removeAssignees({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    issue_number: issue.number,
+                    assignees: issue.assignees.map(user => user.login),
+                  });
+
+                  await github.rest.issues.createComment({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    issue_number: issue.number,
+                    body: `${assigneesMentions} Assignees have been automatically removed since no PR was linked to this issue within 14 days. Please contact maintainers for reassignment if you wish to continue working on this issue.`,
+                  });
+                }
+              }
+
+              page += 1;
+            }
--- 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)

--- a/.github/workflows/issue-schedule.yml
+++ b/.github/workflows/issue-schedule.yml
@ -69,7 +69,7 @@ jobs:

            const actionTitle = process.env.actionTitle + `(${issueList.length})`;

-            const markdownList = `<h2>${actionTitle}</h2>\n\n`
+            const markdownList = `## ${actionTitle}\n\n`
            + issueList.map(issue => `- [${issue.title}](${issue.html_url}) ${fromNow(issue.created_at)}`).join('\n')
            + `\n\n > 🫵🏻 快去帮忙处理吧，社区需要你的帮助！`;

--- a/.github/workflows/pr-auto-merge.yml
+++ b/.github/workflows/pr-auto-merge.yml
--- a/.github/workflows/preview-deploy.yml
+++ b/.github/workflows/preview-deploy.yml
@ -61,7 +61,7 @@ jobs:
    steps:
      # We need get PR id first
      - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -81,7 +81,7 @@ jobs:
      # Download site artifact
      - name: download site artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -11,9 +11,14 @@ permissions:
  contents: write

 jobs:
-  build-and-deploy:
+  build-site:
    runs-on: ubuntu-latest
    if: (startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)) || github.event_name == 'workflow_dispatch'
+
+    # https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-defining-outputs-for-a-job
+    outputs:
+      formatted_version: ${{ steps.shared-formatted_version.outputs.VERSION }}
+
    steps:
      - name: checkout
        uses: actions/checkout@v4
@ -33,15 +38,42 @@ jobs:
          ANALYZER: 1
          NODE_OPTIONS: --max_old_space_size=4096

-      - name: Get version
-        id: publish-version
+      - name: move report.html to _site
+        run: |
+          if [ -f report.html ]; then
+            mv report.html _site && echo "report.html moved to _site"
+          fi
+
+      - name: upload site artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: real-site
+          path: _site/
+          retention-days: 1 # Not need to keep for too long
+
+      - name: Format version
+        if: ${{ always() }}
+        id: shared-formatted_version
        run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT

+  deploy-to-pages:
+    runs-on: ubuntu-latest
+    needs: build-site
+    steps:
+      - uses: oven-sh/setup-bun@v2
+
+      - name: download site artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: real-site
+          path: _site
+
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site
+          exclude_files: ./_site/report.html # 👈 这个功能是 beta, 但即便不排除，也不 care
          force_orphan: true

      # Since force_orphan will not trigger Sync to Gitee, we need to force run it here
@ -55,14 +87,37 @@ jobs:

      - name: Deploy to Surge (with TAG)
        run: |
-          export DEPLOY_DOMAIN=ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh
-          cp report.html ./_site
-          npx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
+          export DEPLOY_DOMAIN=ant-design-${{ needs.build-site.outputs.formatted_version }}.surge.sh
+          bunx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}

      - name: Create Commit Comment
        uses: peter-evans/commit-comment@v3
        with:
          body: |
-            - Documentation site for this release: https://ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh
-            - Webpack bundle analyzer report page: https://ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh/report.html
+            - Documentation site for this release: https://ant-design-${{ needs.build-site.outputs.formatted_version }}.surge.sh
+            - Webpack bundle analyzer report page: https://ant-design-${{ needs.build-site.outputs.formatted_version }}.surge.sh/report.html

+  # https://github.com/ant-design/ant-design/pull/49213/files#r1625446496
+  upload-to-release:
+    runs-on: ubuntu-latest
+    # 仅在 tag 的时候工作，因为我们要将内容发布到以 tag 为版本号的 release 里
+    if: startsWith(github.ref, 'refs/tags/')
+    needs: build-site
+    steps:
+      - name: download site artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: real-site
+          path: _site
+
+      - name: Tarball site
+        run: |
+          cd ./_site
+          tar -czf ../website.tar.gz --transform 's|^|antd-${{ needs.build-site.outputs.formatted_version }}-website/|' .
+          cd ..
+
+      - name: Upload to Release
+        uses: softprops/action-gh-release@7b4da11513bf3f43f9999e90eabced41ab8bb048 # v2.2.0
+        with:
+          fail_on_unmatched_files: true
+          files: website.tar.gz
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -133,7 +133,7 @@ jobs:
          bunx nyc report --reporter text -t coverage --report-dir coverage
          rm -rf persist-coverage
      - name: Upload coverage to codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
        with:
          # use own token to upload coverage reports
          token: ${{ secrets.CODECOV_TOKEN }}
@ -171,6 +171,7 @@ jobs:
        run: bun run dist
        env:
          NODE_OPTIONS: --max_old_space_size=4096
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
          CI: 1

      - name: check build files
--- a/.github/workflows/visual-regression-diff-approver.yml
+++ b/.github/workflows/visual-regression-diff-approver.yml
@ -58,7 +58,13 @@ jobs:
            if (comment.body.includes('VISUAL_DIFF_FAILED')) {
              hasDiffFailed = true;
            }
-            if (comment.body.includes('- [x] Visual diff is acceptable')) {
+
+            // https://regex101.com/r/kLjudz/1
+            const RE = /(?<=\>\s\[!IMPORTANT\].*?- \[ \])/s;
+            if (
+              comment.body.includes('- [x] Visual diff is acceptable') &&
+              comment.body.match(RE) == null /** 检查 IMPORTANT 是否存在未勾选的 */
+            ) {
              hasMemberApprove = true;
            }
          }
@ -71,15 +77,26 @@ jobs:
          const mergedStatus = diffPassed ? 'success' : hasDiffFailed ? 'failure' : 'pending';
          console.log('Status:', mergedStatus);

-          await github.rest.repos.createCommitStatus({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            sha: prHeadSha,
-            state: mergedStatus,
-            context: 'Visual Regression Diff Wait Approve',
-            description: diffPassed ? 'Visual diff is acceptable' : 'Visual diff is not pass',
+          const { data: currentStatuses } = await github.rest.repos.listCommitStatusesForRef({
+           owner: context.repo.owner,
+           repo: context.repo.repo,
+           ref: prHeadSha,
          });

+          const currentStatus = currentStatuses.find(status => status.context === 'Visual Regression Diff Wait Approve');
+          if (currentStatus && currentStatus.state === mergedStatus) {
+            console.log('Status has not changed, no need to update:', currentStatus.state);
+          } else {
+            await github.rest.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: prHeadSha,
+              state: mergedStatus,
+              context: 'Visual Regression Diff Wait Approve',
+              description: diffPassed ? 'Visual diff is acceptable' : 'Visual diff is not pass',
+            });
+          }
+
          if (hasDiffSuccess || (hasDiffFailed && hasMemberApprove)) {
            return 'success';
          } else if (hasDiffFailed) {
--- a/.github/workflows/visual-regression-diff-finish.yml
+++ b/.github/workflows/visual-regression-diff-finish.yml
@ -68,7 +68,7 @@ jobs:

      # We need get persist-index first
      - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -90,7 +90,7 @@ jobs:
      - name: download report artifact
        id: download_report
        if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/visual-regression-persist-finish.yml
+++ b/.github/workflows/visual-regression-persist-finish.yml
@ -65,7 +65,7 @@ jobs:

      # We need get persist key first
      - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -79,7 +79,7 @@ jobs:

      - name: Download Visual-Regression Artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v6
+        uses: dawidd6/action-download-artifact@v7
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- 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"]
 }
--- a/BUG_VERSIONS.json
+++ b/BUG_VERSIONS.json
@ -61,5 +61,18 @@
  "5.21.0": [
    "https://github.com/ant-design/ant-design/issues/50960",
    "https://github.com/ant-design/ant-design/issues/50969"
+  ],
+  "5.21.6": [
+    "https://github.com/ant-design/ant-design/issues/51420",
+    "https://github.com/ant-design/ant-design/issues/51430"
+  ],
+  "5.22.0": [
+    "https://github.com/ant-design/ant-design/issues/51601",
+    "https://github.com/ant-design/ant-design/issues/51420",
+    "https://github.com/ant-design/ant-design/issues/51430"
+  ],
+  "5.22.1": [
+    "https://github.com/ant-design/ant-design/issues/51420",
+    "https://github.com/ant-design/ant-design/issues/51430"
  ]
 }
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -1,7 +1,6 @@
 ---
 order: 6
 title: Changelog
-toc: false
 timeline: true
 tag: vVERSION
 ---
@ -16,6 +15,188 @@ tag: vVERSION

 ---

+## 5.22.5
+
+`2024-12-15`
+
+- 🛠 Refactor Wave/Menu/Form `ref` check logic to resolve React 19 `ref` conflict (Note, this is not finally support React 19 but we will resolve step by step in future version). [#51952](https://github.com/ant-design/ant-design/pull/51952) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Dropdown cannot accept ReactNode as `children`. [#50174](https://github.com/ant-design/ant-design/pull/50174) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fix Carousel cannot display correctly in Modal without icon. [#51988](https://github.com/ant-design/ant-design/pull/51988) [@quan060798](https://github.com/quan060798)
+- 🐞 Fix Select label overflow issue. [#52011](https://github.com/ant-design/ant-design/pull/52011) [@OysterD3](https://github.com/OysterD3)
+- 🐞 Fix Form `setFieldValue` not reset field validation. [#51993](https://github.com/ant-design/ant-design/pull/51993) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Pagination with setting `showSizeChanger.showSearch` not working. [#51962](https://github.com/ant-design/ant-design/pull/51962) [@zombieJ](https://github.com/zombieJ)
+- 🇰🇷 Improve Korean locales for DatePicker. [#51983](https://github.com/ant-design/ant-design/pull/51983) [@DevLeti](https://github.com/DevLeti)
+- 🤖 Export `CheckboxChangeEvent` from antd. [#52008](https://github.com/ant-design/ant-design/pull/52008) [@SpecLad](https://github.com/SpecLad)
+
+## 5.22.4
+
+`2024-12-09`
+
+- Transfer
+  - 🐞 Fix the background overflow when Transfer selects the last item on the current page. [#51884](https://github.com/ant-design/ant-design/pull/51884) [@ayangweb](https://github.com/ayangweb)
+  - 🐞 Fix Transfer toggle button being enabled when all items are disabled. [#51784](https://github.com/ant-design/ant-design/pull/51784) [@WwwHhhYran](https://github.com/WwwHhhYran)
+- 🐞 Fix the arrow would be outside the container when the Tooltip content was too small. [#51904](https://github.com/ant-design/ant-design/pull/51904)
+- 🐞 Fix where clicking the Radio or Checkbox under Upload would trigger the popup window twice. [#51874](https://github.com/ant-design/ant-design/pull/51874)
+- 💄 Fix Menu icon alignment when using `collapsedIconSize`. [#51863](https://github.com/ant-design/ant-design/pull/51863) [@Gnomeek](https://github.com/Gnomeek)
+- 💄 Fix incorrect styling of Tabs component when `type="editable-card"`. [#51935](https://github.com/ant-design/ant-design/pull/51935) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 Fix insufficient trigger style priority in Layout.Sider component in `zero-width` mode. [#51936](https://github.com/ant-design/ant-design/pull/51936) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 MISC: Fix the icon styles were created repeatedly. [#51897](https://github.com/ant-design/ant-design/pull/51897) [@YumoImer](https://github.com/YumoImer)
+- 💄 MISC: Inline styles refactored to cssinjs. [#51843](https://github.com/ant-design/ant-design/pull/51843)
+
+## 5.22.3
+
+`2024-12-02`
+
+- 🐞 Fix Select clear button may has incorrect position within Form.item. [#51649](https://github.com/ant-design/ant-design/pull/51649) [@dislido](https://github.com/dislido)
+- 🐞 Fix InputNumber `handleVisible` token not work as expected. [#51728](https://github.com/ant-design/ant-design/pull/51728) [@dengfuping](https://github.com/dengfuping)
+- 🐞 Fix ColorPicker error when pass `ReactNode` to `label` field of `presets` property. [#51808](https://github.com/ant-design/ant-design/pull/51808) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Menu `inlineCollapsed` property not works bug within Layout. [#51775](https://github.com/ant-design/ant-design/pull/51775) [@coderz-w](https://github.com/coderz-w)
+- 🐞 Fix Table `onHeaderCell` provided part `style` can not override. [#51793](https://github.com/ant-design/ant-design/pull/51793) [@Wxh16144](https://github.com/Wxh16144)
+- ⌨️ Improve Collapse accessibility. [#51836](https://github.com/ant-design/ant-design/pull/51836) [@aojunhao123](https://github.com/aojunhao123)
+- TypeScript
+  - 🤖 Add Table argument type for `clearFilters` function property. [#51754](https://github.com/ant-design/ant-design/pull/51754) [@fubd](https://github.com/fubd)
+  - 🤖 Fix Form.List with nest field will miss value with remove when set Form `preserve` to `false`. [#51796](https://github.com/ant-design/ant-design/pull/51796) [@zombieJ](https://github.com/zombieJ)
+
+## 5.22.2
+
+`2024-11-21`
+
+- 🐞 Fix Input.OTP focus from advancing when previous input is empty. [#51664](https://github.com/ant-design/ant-design/pull/51664) [@thecodesalim](https://github.com/thecodesalim)
+- 🐞 Adjust Modal function call not to scroll the confirm button when it get auto focused. [#51647](https://github.com/ant-design/ant-design/pull/51647) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Form `rules` with same error content will cause React render warning. [#51636](https://github.com/ant-design/ant-design/pull/51636) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Refactor Button `focus` logic trigger with `useEffect` to resolve some async load case not get `autoFocus`. [#51624](https://github.com/ant-design/ant-design/pull/51624) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Button custom icon not center-aligned. [#51652](https://github.com/ant-design/ant-design/pull/51652) [@afc163](https://github.com/afc163)
+- 🐞 Fix Table `getCheckboxProps` event handlers being overridden by internal selection logic. [#51661](https://github.com/ant-design/ant-design/pull/51661) [@Zyf665](https://github.com/Zyf665)
+- 🐞 Fix Tree that `onCheck` and `onSelect` were not properly triggered. [#51448](https://github.com/ant-design/ant-design/pull/51448) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix vertical alignment of clear icon in Input component. [#51700](https://github.com/ant-design/ant-design/pull/51700) [@jynxio](https://github.com/jynxio)
+- 🐞 Fix Select with `prefix` style issue with color, line break, status error. [#51694](https://github.com/ant-design/ant-design/pull/51694) [@zombieJ](https://github.com/zombieJ)
+- 🌐 Localization
+  - 🇷🇺 Add support for Russian translation. [#51619](https://github.com/ant-design/ant-design/pull/51619) [@avvakumovid](https://github.com/avvakumovid)
+  - 🇮🇹 Add support for Italian translation in TimePicker. [#51685](https://github.com/ant-design/ant-design/pull/51685) [@LorenzoCardinali](https://github.com/LorenzoCardinali)
+
+## 5.22.1
+
+`2024-11-13`
+
+- 🛠 Adjust DatePicker.RangePicker to not allow switching to the next field by clicking the input when `needConfirm` and the user has not submitted the date. [#51591](https://github.com/ant-design/ant-design/pull/51591) [@zombieJ](https://github.com/zombieJ)
+- 🛠 Lock Input.OTP `ctrl + z` operation to avoid data not correct. [#51609](https://github.com/ant-design/ant-design/pull/51609) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Select `tags` or `multiple` mode display issue. [#51605](https://github.com/ant-design/ant-design/pull/51605) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Badge `count` motion missing in Safari. [#51598](https://github.com/ant-design/ant-design/pull/51598) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Tabs with `centered` the tabs can not fully display. [#51571](https://github.com/ant-design/ant-design/pull/51571) [@DDDDD12138](https://github.com/DDDDD12138)
+- 🐞 Fix Transfer with controlled `dataSource` & `selectedKeys` sometime miss sync checked state. [#51523](https://github.com/ant-design/ant-design/pull/51523) [@IsKaros](https://github.com/IsKaros)
+- 🐞 Revert Button `display` `inline-flex` back to `inline-block` to resolve Icon align issue. [#51588](https://github.com/ant-design/ant-design/pull/51588) [@Wxh16144](https://github.com/Wxh16144)
+
+## 5.22.0
+
+`2024-11-12`
+
+- Form
+  - 🆕 Form.Item supports hiding labels. [#51524](https://github.com/ant-design/ant-design/pull/51524) [@crazyair](https://github.com/crazyair)
+  - 🐞 Form removes the div used to expand the error height, wraps errorDom and extraDom with a div, and sets a minimum height for the div. [#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
+  - 🐞 Fix the problem that `onValuesChange` is still triggered when the Form field triggers change but the value does not change. [#51437](https://github.com/ant-design/ant-design/pull/51437) [@crazyair](https://github.com/crazyair)
+  - 🆕 Form supports the focus property in scrollToFirstError when form validation fails. [#51231](https://github.com/ant-design/ant-design/pull/51231) [@nathanlao](https://github.com/nathanlao)
+- Table
+  - 🆕 Table column filter drop-down box supports `filterDropdownProps`. [#51297](https://github.com/ant-design/ant-design/pull/51297) [@Wxh16144](https://github.com/Wxh16144)
+  - 🆕 Table `expandedRowClassName` supports string . [#51067](https://github.com/ant-design/ant-design/pull/51067) [@li-jia-nan](https://github.com/li-jia-nan)
+- Tree
+  - 💄 Fix the problem of missing padding style for selected nodes in Tree. [#51492](https://github.com/ant-design/ant-design/pull/51492) [@zombieJ](https://github.com/zombieJ)
+  - 🆕 Tree component Token adds `nodeHoverColor` and `nodeSelectedColor` support. [#51367](https://github.com/ant-design/ant-design/pull/51367) [@zmbxy](https://github.com/zmbxy)
+  - 🆕 Tree adds `indentSize` token for custom indent width. [#51010](https://github.com/ant-design/ant-design/pull/51010) [@afc163](https://github.com/afc163)
+- DatePicker
+  - 🆕 DatePicker supports prefix attribute. [#51335](https://github.com/ant-design/ant-design/pull/51335) [@guoyunhe](https://github.com/guoyunhe)
+  - 💄 Fixed the issue of DatePicker.RangePicker flashing when the mouse moves between cells. [#51533](https://github.com/ant-design/ant-design/pull/51533) [@afc163](https://github.com/afc163)
+- Input.OTP
+  - 🆕 In the `Input.OTP` component, add `onInput` event to get the value of each user input. At the same time, the relevant documentation has been updated. [#51289](https://github.com/ant-design/ant-design/pull/51289) [@aojunhao123](https://github.com/aojunhao123)
+  - 🐞 Fixed the problem that Input.OTP cannot specify `inputMode`. [#51271](https://github.com/ant-design/ant-design/pull/51271) [@alan-rudzinski](https://github.com/alan-rudzinski)
+- 🆕 ColorPicker supports `disabledFormat`. [#51539](https://github.com/ant-design/ant-design/pull/51539) [@su-muzhi](https://github.com/su-muzhi)
+- 🆕 Add `cursor` configuration item to the `focus` method of InputNumber component to control the cursor position. [#51444](https://github.com/ant-design/ant-design/pull/51444) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Cascader adds `disabled` attribute to disable all first-level directory items of the component. [#51272](https://github.com/ant-design/ant-design/pull/51272) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Descriptions supports single-line spreading. [#51365](https://github.com/ant-design/ant-design/pull/51365) [@crazyair](https://github.com/crazyair)
+- 🆕 Select/TreeSelect/Cascader components add `prefix` property to support custom prefix. [#51186](https://github.com/ant-design/ant-design/pull/51186) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix the problem that the preview image class name is lost when setting `ImageProps.preview.rootClassName` in Image. [#51538](https://github.com/ant-design/ant-design/pull/51538) [@dislido](https://github.com/dislido)
+- 🐞 Fixed the issue that the last item in the TimePicker panel column cannot be scrolled to the top. [#51481](https://github.com/ant-design/ant-design/pull/51481) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix TreeSelect dropdown height not enough. [#51567](https://github.com/ant-design/ant-design/pull/51567) [@afc163](https://github.com/afc163)
+- 🐞 Fixed the issue that Typography is not updated immediately when the ConfigProvider language is switched. [#51453](https://github.com/ant-design/ant-design/pull/51453) [@thinkasany](https://github.com/thinkasany)
+- 🐞 Fixed the issue that Upload `itemRender` calling `action.preview` will cause a crash. [#51419](https://github.com/ant-design/ant-design/pull/51419) [@yoyo837](https://github.com/yoyo837)
+- 🐞 Fixed Splitter pseudo-element symbol issue. [#51536](https://github.com/ant-design/ant-design/pull/51536) [@dislido](https://github.com/dislido)
+- 💄 Optimize Collapse accessibility attribute and mouse hover style. [#51400](https://github.com/ant-design/ant-design/pull/51400) [@afc163](https://github.com/afc163)
+- 💄 Fix styling issue of Menu title content. [#51425](https://github.com/ant-design/ant-design/pull/51425) [@coding-ice](https://github.com/coding-ice)
+- 🇵🇹 Fix translation in Portuguese (pt_PT) localization file for better accuracy and consistency. [#51501](https://github.com/ant-design/ant-design/pull/51501) [@alexandre-p-marques-alb](https://github.com/alexandre-p-marques-alb)
+- 🇺🇿 Optimize uz_UZ internationalization. [#51407](https://github.com/ant-design/ant-design/pull/51407) [@Zukhrik](https://github.com/Zukhrik)
+- TypeScript
+  - 🤖 Upload exports type DraggerProps. [#51546](https://github.com/ant-design/ant-design/pull/51546) [@DBvc](https://github.com/DBvc)
+  - 🤖 Add defaultValue property to TimePicker.RangePicker example. [#51413](https://github.com/ant-design/ant-design/pull/51413) [@nathanlao](https://github.com/nathanlao)
+  - 🤖 Message Optimize the top type in message.config. [#51468](https://github.com/ant-design/ant-design/pull/51468) [@Fog3211](https://github.com/Fog3211)
+  - 🤖 Optimize the TS definition of Tree and TreeSelect. [#51251](https://github.com/ant-design/ant-design/pull/51251) [@afc163](https://github.com/afc163)
+
+## 5.21.6
+
+`2024-10-28`
+
+- 🐞 Fix Tree.DirectoryTree interactive area not being a whole row. [#51210](https://github.com/ant-design/ant-design/pull/51210)
+- 🐞 Fix the Button icon was not vertically centered. [#51381](https://github.com/ant-design/ant-design/pull/51381)
+- 🐞 Fix the pointer style not set to `not-allowed` in the `disabled` state when `variant` of the Input was set to `borderless`. [#51387](https://github.com/ant-design/ant-design/pull/51387) [@ustcfury](https://github.com/ustcfury)
+- Splitter
+  - 💄 Improve the pre-rendered style of Splitter under SSR. [#51378](https://github.com/ant-design/ant-design/pull/51378)
+  - 💄 Increased the click area of the Splitter collapse button to improve usability. [#51383](https://github.com/ant-design/ant-design/pull/51383) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 Improve Checkbox `indeterminate` to enhance accessibility experience. [#51350](https://github.com/ant-design/ant-design/pull/51350) [@SpaNb4](https://github.com/SpaNb4)
+- 💄 Improve the `title` of the Empty preset svg image to improve accessibility experience. [#51368](https://github.com/ant-design/ant-design/pull/51368)
+
+## 5.21.5
+
+`2024-10-21`
+
+- 🐞 Fix Cascader filter limitation not working when `limit` set to `false`. [#51263](https://github.com/ant-design/ant-design/pull/51263) [@dongbanban](https://github.com/dongbanban)
+- 🐞 Fix DatePicker disabled items cannot response mouse events bug. [#51294](https://github.com/ant-design/ant-design/pull/51294) [@ajenkins-mparticle](https://github.com/ajenkins-mparticle)
+- 🐞 Fix FloatButton menu problem what is difficult to click. [#51208](https://github.com/ant-design/ant-design/pull/51208) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 Fix QRCode `onRefresh` property not working properly. [#51315](https://github.com/ant-design/ant-design/pull/51315) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Typography links cannot be selected by user. [#51243](https://github.com/ant-design/ant-design/pull/51243) [@thinkasany](https://github.com/thinkasany)
+- 💄 Fix Badge incorrect token of texts. [#51252](https://github.com/ant-design/ant-design/pull/51252) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 Fix Layout lost styles of collapse button. [#51313](https://github.com/ant-design/ant-design/pull/51313) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Improve Button event handler declaration. [#42037](https://github.com/ant-design/ant-design/pull/42037) [@SohaibRaza](https://github.com/SohaibRaza)
+- 🛠 Improve Splitter style token semantic name. [#51223](https://github.com/ant-design/ant-design/pull/51223) [@wanpan11](https://github.com/wanpan11)
+
+## 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 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
+
+`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`
+
+- 🐞 Revert [#49221](https://github.com/ant-design/ant-design/pull/49221) to fix Typography `copyable` icon align issue. [#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163)
+- 🐞 Fix Tabs flicker when browser zoom is enabled. [#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163)
+- 🐞 Fix Select incorrect `activeBorderColor` token when variant is filled. [#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fixed Input.Search alignment issue between the input field and search button at different zoom levels. [#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao)
+- 💄 MISC: Tweak outline width of focus style from `4px` to `3px`. [#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163)
+- Splitter
+  - 🐞 Fixed the issue with Splitter dragging abnormally on touch screen devices. [#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee)
+  - 💄 Fixed Splitter.Panel style is invalid error. [#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11)
+- ⚡️ Remove TransButton in Table/Transfer/Typography. [#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163)
+
 ## 5.21.1

 `2024-09-25`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,188 @@ tag: vVERSION

 ---

+## 5.22.5
+
+`2024-12-15`
+
+- 🛠 重构 Wave/Menu/Form `ref` 检查逻辑以解决 React 19 `ref` 部分冲突（注：该更新不会完全解决 React 19 兼容问题，后续将会持续更新）。[#51952](https://github.com/ant-design/ant-design/pull/51952) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Dropdown `children` 不支持传入 ReactNode 的问题。[#50174](https://github.com/ant-design/ant-design/pull/50174) [@coding-ice](https://github.com/coding-ice)
+- 🐞 修复 Carousel 某些情况下在 Modal 中无法正确展示的问题。[#51988](https://github.com/ant-design/ant-design/pull/51988) [@quan060798](https://github.com/quan060798)
+- 🐞 修复 Select 选中文本溢出的问题 。[#52011](https://github.com/ant-design/ant-design/pull/52011) [@OysterD3](https://github.com/OysterD3)
+- 🐞 修复 Form `setFieldValue` 没有重置字段校验信息的问题。[#51993](https://github.com/ant-design/ant-design/pull/51993) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Pagination 配置 `showSizeChanger.showSearch` 无效的问题。[#51962](https://github.com/ant-design/ant-design/pull/51962) [@zombieJ](https://github.com/zombieJ)
+- 🇰🇷 优化 DatePicker 韩语本地化文案。[#51983](https://github.com/ant-design/ant-design/pull/51983) [@DevLeti](https://github.com/DevLeti)
+- 🤖 从 antd 里导出 `CheckboxChangeEvent` 类型。[#52008](https://github.com/ant-design/ant-design/pull/52008) [@SpecLad](https://github.com/SpecLad)
+
+## 5.22.4
+
+`2024-12-09`
+
+- Transfer
+  - 🐞 修复 Transfer 选中当前页最后一项时背景溢出的问题。[#51884](https://github.com/ant-design/ant-design/pull/51884) [@ayangweb](https://github.com/ayangweb)
+  - 🐞 修正 Transfer 切换按钮当所有 item 禁用时依然可用的问题。[#51784](https://github.com/ant-design/ant-design/pull/51784) [@WwwHhhYran](https://github.com/WwwHhhYran)
+- 🐞 修复 Tooltip 内容过少时，箭头会在容器外的问题。[#51904](https://github.com/ant-design/ant-design/pull/51904)
+- 🐞 修复点击 Upload 下的 Radio 或 Checkbox 会触发两次弹窗的问题。[#51874](https://github.com/ant-design/ant-design/pull/51874)
+- 💄 修复 Menu 在使用 `collapsedIconSize` 时图标对齐的问题。[#51863](https://github.com/ant-design/ant-design/pull/51863) [@Gnomeek](https://github.com/Gnomeek)
+- 💄 修复 Tabs 组件在 `type="editable-card"` 时样式不正确的问题。[#51935](https://github.com/ant-design/ant-design/pull/51935) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 修复 Layout.Sider 组件在 `zero-width` 模式下触发器样式优先级不足的问题。[#51936](https://github.com/ant-design/ant-design/pull/51936) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 MISC: 修复 icon 样式被重复创建的问题。[#51897](https://github.com/ant-design/ant-design/pull/51897) [@YumoImer](https://github.com/YumoImer)
+- 💄 MISC: 行内样式重构为 cssinjs。[#51843](https://github.com/ant-design/ant-design/pull/51843)
+
+## 5.22.3
+
+`2024-12-02`
+
+- 🐞 修复 Select 清除按钮在 Form.Item 中位置可能错误的问题。[#51649](https://github.com/ant-design/ant-design/pull/51649) [@dislido](https://github.com/dislido)
+- 🐞 修复 InputNumber `handleVisible` token 不生效的问题。[#51728](https://github.com/ant-design/ant-design/pull/51728) [@dengfuping](https://github.com/dengfuping)
+- 🐞 修复 ColorPicker 的 `presets` 属性中的 `label` 字段传入 `ReactNode` 会报错的问题。[#51808](https://github.com/ant-design/ant-design/pull/51808) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Menu 的 `inlineCollapsed` 属性在 Layout 中不生效的问题。[#51775](https://github.com/ant-design/ant-design/pull/51775) [@coderz-w](https://github.com/coderz-w)
+- 🐞 修复 Table `onHeaderCell` 提供的 `style` 无法被覆盖的问题。[#51793](https://github.com/ant-design/ant-design/pull/51793) [@Wxh16144](https://github.com/Wxh16144)
+- ⌨️ 优化 Collapse 组件的可访问性。[#51836](https://github.com/ant-design/ant-design/pull/51836) [@aojunhao123](https://github.com/aojunhao123)
+- TypeScript
+  - 🤖 增加 Table 属性中 `clearFilters` 函数的入参类型。[#51754](https://github.com/ant-design/ant-design/pull/51754) [@fubd](https://github.com/fubd)
+  - 🤖 修复 Form 设置 `preserve` 为 `false` 时，Form.List 中嵌套的字段卸载会丢失值的问题。[#51796](https://github.com/ant-design/ant-design/pull/51796) [@zombieJ](https://github.com/zombieJ)
+
+## 5.22.2
+
+`2024-11-21`
+
+- 🐞 修复 Input.OTP 组件在有非法输入时仍会切换到下一个输入框的问题。[#51664](https://github.com/ant-design/ant-design/pull/51664) [@thecodesalim](https://github.com/thecodesalim)
+- 🐞 调整 Modal 确认函数，使其在弹出后聚焦确认按钮时不要滚动窗体。[#51647](https://github.com/ant-design/ant-design/pull/51647) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Form `rules` 生成多条相同错误时会报 React 渲染错误的问题。[#51636](https://github.com/ant-design/ant-design/pull/51636) [@zombieJ](https://github.com/zombieJ)
+- 🐞 调整 Button 使用 `useEffect` 来触发 `autoFocus` 逻辑，以解决一些异步渲染场景下 Button 无法自动聚焦的问题。[#51624](https://github.com/ant-design/ant-design/pull/51624) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Button 中使用自定义三方图标库时图标未居中的问题。[#51652](https://github.com/ant-design/ant-design/pull/51652) [@afc163](https://github.com/afc163)
+- 🐞 修复 Table 组件 `getCheckboxProps` 中的事件处理器被内部选择逻辑覆盖的问题。[#51661](https://github.com/ant-design/ant-design/pull/51661) [@Zyf665](https://github.com/Zyf665)
+- 🐞 修复 Tree 组件的 `onCheck` 和 `onSelect` 事件没有被正确触发的问题。[#51448](https://github.com/ant-design/ant-design/pull/51448) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Input 组件的清除按钮未能垂直居中的问题。[#51700](https://github.com/ant-design/ant-design/pull/51700) [@jynxio](https://github.com/jynxio)
+- 🐞 修复 Select 组件的 `prefix` 组合导致的颜色、折行、状态等一系列样式问题。[#51694](https://github.com/ant-design/ant-design/pull/51694) [@zombieJ](https://github.com/zombieJ)
+- 🌐 本地化
+  - 🇷🇺 添加了俄语翻译支持。[#51619](https://github.com/ant-design/ant-design/pull/51619) [@avvakumovid](https://github.com/avvakumovid)
+  - 🇮🇹 为 TimePicker 添加了意大利语翻译。[#51685](https://github.com/ant-design/ant-design/pull/51685) [@LorenzoCardinali](https://github.com/LorenzoCardinali)
+
+## 5.22.1
+
+`2024-11-13`
+
+- 🛠 调整 DatePicker.RangePicker 当 `needConfirm` 切用户未提交日期时，不允许通过点击输入框切换到下一个字段。[#51591](https://github.com/ant-design/ant-design/pull/51591) [@zombieJ](https://github.com/zombieJ)
+- 🛠 禁用 Input.OTP `ctrl + z` 操作以防止数据变化非预期的问题。[#51609](https://github.com/ant-design/ant-design/pull/51609) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Select 标签模式下展示异常的问题。[#51605](https://github.com/ant-design/ant-design/pull/51605) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Badge `count` 在 Safari 下动画丢失的问题。[#51598](https://github.com/ant-design/ant-design/pull/51598) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Tabs `centered` 下标签展示不全的问题。[#51571](https://github.com/ant-design/ant-design/pull/51571) [@DDDDD12138](https://github.com/DDDDD12138)
+- 🐞 修复 Transfer 受控 `dataSource` 和 `selectedKeys` 时，偶尔会出现勾选不正确的问题。[#51523](https://github.com/ant-design/ant-design/pull/51523) [@IsKaros](https://github.com/IsKaros)
+- 🐞 回滚 Button `display` 的 `inline-flex` 为 `inline-block` 以解决 Icon 位置偏移的问题。[#51588](https://github.com/ant-design/ant-design/pull/51588) [@Wxh16144](https://github.com/Wxh16144)
+
+## 5.22.0
+
+`2024-11-12`
+
+- Form
+  - 🆕 Form.Item 支持隐藏 label。[#51524](https://github.com/ant-design/ant-design/pull/51524) [@crazyair](https://github.com/crazyair)
+  - 🐞 Form  移除了用于撑开 error 高度的 div，将 errorDom 和 extraDom 用一个 div 包裹，并为该 div 设置了最小高度。[#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
+  - 🐞 修复 Form 在字段触发 change 但是值没有变化时，`onValuesChange` 仍然会触发的问题。[#51437](https://github.com/ant-design/ant-design/pull/51437) [@crazyair](https://github.com/crazyair)
+  - 🆕 Form 支持在表单验证失败时，scrollToFirstError 中的 focus 属性。[#51231](https://github.com/ant-design/ant-design/pull/51231) [@nathanlao](https://github.com/nathanlao)
+- Table
+  - 🆕 Table 列过滤下拉框支持 `filterDropdownProps`。[#51297](https://github.com/ant-design/ant-design/pull/51297) [@Wxh16144](https://github.com/Wxh16144)
+  - 🆕 Table `expandedRowClassName` 支持 string 。[#51067](https://github.com/ant-design/ant-design/pull/51067) [@li-jia-nan](https://github.com/li-jia-nan)
+- Tree
+  - 💄 修复 Tree 选中节点丢失 padding 样式的问题。[#51492](https://github.com/ant-design/ant-design/pull/51492) [@zombieJ](https://github.com/zombieJ)
+  - 🆕 Tree 组件 Token 增加 `nodeHoverColor` 和 `nodeSelectedColor` 支持。[#51367](https://github.com/ant-design/ant-design/pull/51367) [@zmbxy](https://github.com/zmbxy)
+  - 🆕 Tree 新增 `indentSize` token 用于自定义缩进宽度。[#51010](https://github.com/ant-design/ant-design/pull/51010) [@afc163](https://github.com/afc163)
+- DatePicker
+  - 🆕 DatePicker 支持 `prefix` 属性。[#51335](https://github.com/ant-design/ant-design/pull/51335) [@guoyunhe](https://github.com/guoyunhe)
+  - 💄 修复 DatePicker.RangePicker 当鼠标移动到单元格之间时出现闪烁样式的问题。[#51533](https://github.com/ant-design/ant-design/pull/51533) [@afc163](https://github.com/afc163)
+- Input.OTP
+  - 🆕 Input.OTP 组件新增 `onInput` 事件用于获取用户每一次输入的值。[#51289](https://github.com/ant-design/ant-design/pull/51289) [@aojunhao123](https://github.com/aojunhao123)
+  - 🐞 修复 Input.OTP 无法指定 `inputMode` 的问题。[#51271](https://github.com/ant-design/ant-design/pull/51271) [@alan-rudzinski](https://github.com/alan-rudzinski)
+- 🆕 ColorPicker 支持 `disabledFormat` 属性以禁用格式切换器。[#51539](https://github.com/ant-design/ant-design/pull/51539) [@su-muzhi](https://github.com/su-muzhi)
+- 🆕 为 InputNumber 组件的 `focus` 方法增加 `cursor` 配置项以控制光标位置。[#51444](https://github.com/ant-design/ant-design/pull/51444) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Cascader 新增 `disabled` 属性以禁用组件的所有一级目录项。[#51272](https://github.com/ant-design/ant-design/pull/51272) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Descriptions 支持单行铺满。[#51365](https://github.com/ant-design/ant-design/pull/51365) [@crazyair](https://github.com/crazyair)
+- 🆕 Select/TreeSelect/Cascader 组件增加 `prefix` 属性以支持自定义前缀。[#51186](https://github.com/ant-design/ant-design/pull/51186) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Image 设置 `ImageProps.preview.rootClassName` 导致预览图类名丢失。[#51538](https://github.com/ant-design/ant-design/pull/51538) [@dislido](https://github.com/dislido)
+- 🐞 修复 TimePicker 面板列的最后一项无法滚动到最上面的问题。[#51481](https://github.com/ant-design/ant-design/pull/51481) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 TreeSelect 弹层高度不够的问题。[#51567](https://github.com/ant-design/ant-design/pull/51567) [@afc163](https://github.com/afc163)
+- 🐞 修复 Typography 在 ConfigProvider 语言切换时候没有立即更新。[#51453](https://github.com/ant-design/ant-design/pull/51453) [@thinkasany](https://github.com/thinkasany)
+- 🐞 修复 Upload `itemRender` 调用 `action.preview` 会导致崩溃的问题。[#51419](https://github.com/ant-design/ant-design/pull/51419) [@yoyo837](https://github.com/yoyo837)
+- 🐞 修复 Splitter 伪元素符号问题。[#51536](https://github.com/ant-design/ant-design/pull/51536) [@dislido](https://github.com/dislido)
+- 💄 优化 Collapse 可访问性属性和鼠标 hover 样式。[#51400](https://github.com/ant-design/ant-design/pull/51400) [@afc163](https://github.com/afc163)
+- 💄 修复 Menu title 内容的样式问题。[#51425](https://github.com/ant-design/ant-design/pull/51425) [@coding-ice](https://github.com/coding-ice)
+- 🇵🇹 修正葡萄牙语 (pt_PT) 本地化文件中的翻译，以提高准确性和一致性。[#51501](https://github.com/ant-design/ant-design/pull/51501) [@alexandre-p-marques-alb](https://github.com/alexandre-p-marques-alb)
+- 🇺🇿 优化 uz_UZ 国际化。[#51407](https://github.com/ant-design/ant-design/pull/51407) [@Zukhrik](https://github.com/Zukhrik)
+- TypeScript
+  - 🤖 Upload 导出类型 DraggerProps。[#51546](https://github.com/ant-design/ant-design/pull/51546) [@DBvc](https://github.com/DBvc)
+  - 🤖 将 defaultValue 属性添加到 TimePicker.RangePicker 示例中。[#51413](https://github.com/ant-design/ant-design/pull/51413) [@nathanlao](https://github.com/nathanlao)
+  - 🤖 Message 优化 message.config 中的 top 类型。[#51468](https://github.com/ant-design/ant-design/pull/51468) [@Fog3211](https://github.com/Fog3211)
+  - 🤖 优化 Tree 和 TreeSelect 的 TS 定义。[#51251](https://github.com/ant-design/ant-design/pull/51251) [@afc163](https://github.com/afc163)
+
+## 5.21.6
+
+`2024-10-28`
+
+- 🐞 修复 Tree.DirectoryTree 交互区域不是整行的问题。[#51210](https://github.com/ant-design/ant-design/pull/51210)
+- 🐞 修复 Button 图标未垂直居中的问题。[#51381](https://github.com/ant-design/ant-design/pull/51381)
+- 🐞 修复 Input 组件 `variant` 设置 `borderless` 时，`disabled` 状态下指针样式未设置 `not-allowed` 的问题。[#51387](https://github.com/ant-design/ant-design/pull/51387) [@ustcfury](https://github.com/ustcfury)
+- Splitter
+  - 💄 优化 Splitter 在 SSR 下预渲染的样式。[#51378](https://github.com/ant-design/ant-design/pull/51378)
+  - 💄 增大 Splitter 折叠按钮点击区域，提高可用性。[#51383](https://github.com/ant-design/ant-design/pull/51383) [@aojunhao123](https://github.com/aojunhao123)
+- 💄 优化 Checkbox `indeterminate` 提升无障碍体验。[#51350](https://github.com/ant-design/ant-design/pull/51350) [@SpaNb4](https://github.com/SpaNb4)
+- 💄 优化 Empty 预设 svg 图片的 `title` 提升无障碍体验。[#51368](https://github.com/ant-design/ant-design/pull/51368)
+
+## 5.21.5
+
+`2024-10-21`
+
+- 🐞 修复 Cascader `limit` 属性设置 `false` 不生效的问题。[#51263](https://github.com/ant-design/ant-design/pull/51263) [@dongbanban](https://github.com/dongbanban)
+- 🐞 修复 DatePicker 的禁用日期项无法响应鼠标事件的问题。[#51294](https://github.com/ant-design/ant-design/pull/51294) [@ajenkins-mparticle](https://github.com/ajenkins-mparticle)
+- 🐞 修复 FloatButton 悬浮菜单难以点击的问题。[#51208](https://github.com/ant-design/ant-design/pull/51208) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 修复 QRCode `onRefresh` 属性不生效的问题。[#51315](https://github.com/ant-design/ant-design/pull/51315) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Typography 中的超链接无法被用户选中的问题。[#51243](https://github.com/ant-design/ant-design/pull/51243) [@thinkasany](https://github.com/thinkasany)
+- 💄 修复 Badge 文本样式 token 不正确的问题。[#51252](https://github.com/ant-design/ant-design/pull/51252) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 修复 Layout 折叠按钮样式缺失的问题。[#51313](https://github.com/ant-design/ant-design/pull/51313) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 优化 Button 事件处理器实现。[#42037](https://github.com/ant-design/ant-design/pull/42037) [@SohaibRaza](https://github.com/SohaibRaza)
+- 🛠 优化 Splitter 样式 token 的命名语义。[#51223](https://github.com/ant-design/ant-design/pull/51223) [@wanpan11](https://github.com/wanpan11)
+
+## 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)
+- 💄 修改 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
+
+`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`
+
+- 🐞 回滚 [#49221](https://github.com/ant-design/ant-design/pull/49221) 以修复 Typography `copyable` 图标位置偏上的问题。[#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163)
+- 🐞 修复 Tabs 在浏览器缩放时无限闪烁的问题。[#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163)
+- 🐞 修复了 Input.Search 组件中在不同缩放级别下输入框和按钮的对齐问题。[#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao)
+- 🐞 修复 Select `variant="filled"` 时 `activeBorderColor` token 失效的问题。[#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice)
+- 💄 MISC: 调整 focus 时的 outline 边框宽度，从 `4px` 调整到 `3px`。[#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163)
+- Splitter
+  - 🐞 修复 Splitter 在触屏设备上拖拽异常的问题。[#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee)
+  - 💄 修复 Splitter.Panel 无法隐藏的问题。[#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11)
+- 📦 移除 Table/Transfer/Typography 内的 TransButton 实现以降低打包体积。[#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163)
+
 ## 5.21.1

 `2024-09-25`
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -18,8 +18,8 @@

 [![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout) [![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/backers-217/checkout)

-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
+[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/antd
 [github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
 [github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
 [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
@ -65,7 +65,7 @@
 - 支持服务端渲染。
 - [Electron](https://www.electronjs.org/)

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Electron |
 | --- | --- | --- | --- | --- |
 | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

@ -115,23 +115,22 @@ export default App;

 - [首页](https://ant.design/)
 - [所有组件](https://ant.design/components/overview-cn)
- [Ant Design Pro](http://pro.ant.design/)
 - [更新日志](CHANGELOG.zh-CN.md)
- [React 底层基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
- [小程序组件](http://mini.ant.design)
- [页面级组件](https://procomponents.ant.design)
- [Ant Design 图表](https://charts.ant.design)
- [Ant Design 图标](https://github.com/ant-design/ant-design-icons)
- [Ant Design 色彩](https://github.com/ant-design/ant-design-colors)
- [首页模板集](https://landing.ant.design)
+- [React 底层基础组件](https://react-component.github.io/)
+- [🆕 Ant Design X](https://x.ant.design/index-cn)
+- [Ant Design Pro](https://pro.ant.design/)
+- [Pro Components](https://procomponents.ant.design)
+- [Ant Design Mobile](https://mobile.ant.design)
+- [Ant Design Mini](https://mini.ant.design)
+- [Ant Design Charts](https://charts.ant.design)
+- [Ant Design Web3](https://web3.ant.design)
 - [动效](https://motion.ant.design)
- [脚手架市场](http://scaffold.ant.design)
+- [脚手架市场](https://scaffold.ant.design)
 - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
 - [开发者说明](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)
@ -153,7 +152,7 @@ $ npm start

 打开浏览器访问 http://127.0.0.1:8001 ，更多[本地开发文档](https://github.com/ant-design/ant-design/wiki/Development)。

-## 🤝 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+## 🤝 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)

 <table>
 <tr>
@ -188,7 +187,7 @@ $ npm start

 请参考[贡献指南](https://ant.design/docs/react/contributing-cn).

-> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](https://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

 [![赞助链接](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)

@ -201,7 +200,7 @@ $ npm start
 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。

 1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
-2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
+2. [Stack Overflow](https://stackoverflow.com/questions/tagged/antd)（英文）
 3. [Segment Fault](https://segmentfault.com/t/antd)（中文）

 ## Issue 赞助
--- a/README.md
+++ b/README.md
@ -18,8 +18,8 @@ An enterprise-class UI design language and React UI library.

 [![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout) [![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/backers-217/checkout)

-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
+[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/antd
 [github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
 [github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
 [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
@ -63,7 +63,7 @@ An enterprise-class UI design language and React UI library.
 - Server-side Rendering
 - [Electron](https://www.electronjs.org/)

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Electron |
 | --- | --- | --- | --- | --- |
 | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

@ -98,22 +98,22 @@ export default () => (

 - [Home page](https://ant.design/)
 - [Components Overview](https://ant.design/components/overview)
- [Ant Design Pro](http://pro.ant.design/)
 - [Change Log](CHANGELOG.en-US.md)
- [rc-components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Mini Program UI](http://mini.ant.design)
- [Ant Design Pro Components](https://procomponents.ant.design)
+- [rc-components](https://react-component.github.io/)
+- [🆕 Ant Design X](https://x.ant.design/index-cn)
+- [Ant Design Pro](https://pro.ant.design/)
+- [Pro Components](https://procomponents.ant.design)
+- [Ant Design Mobile](https://mobile.ant.design)
+- [Ant Design Mini](https://mini.ant.design)
 - [Ant Design Charts](https://charts.ant.design)
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
+- [Ant Design Web3](https://web3.ant.design)
 - [Landing Pages](https://landing.ant.design)
- [Motion](https://motion.ant.design)
- [Scaffold Market](http://scaffold.ant.design)
+- [Ant Motion](https://motion.ant.design)
+- [Scaffold Market](https://scaffold.ant.design)
 - [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)

@ -134,7 +134,7 @@ $ npm start

 Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).

-## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)

 <table>
 <tr>
--- a/biome.json
+++ b/biome.json
@ -65,6 +65,11 @@
      }
    }
  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
  "overrides": [
    {
      "include": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],
--- a/components/_util/ActionButton.tsx
+++ b/components/_util/ActionButton.tsx
@ -52,7 +52,9 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
    let timeoutId: ReturnType<typeof setTimeout> | null = null;
    if (autoFocus) {
      timeoutId = setTimeout(() => {
-        buttonRef.current?.focus();
+        buttonRef.current?.focus({
+          preventScroll: true,
+        });
      });
    }
    return () => {
--- a/components/_util/tests/transButton.test.tsx
+++ b/components/_util/tests/transButton.test.tsx
@ -1,11 +0,0 @@
-import React from 'react';
-
-import { render } from '../../../tests/utils';
-import TransButton from '../transButton';
-
-describe('transButton component', () => {
-  it('disabled should update style', () => {
-    const { container } = render(<TransButton disabled />);
-    expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
-  });
-});
--- a/components/_util/tests/util.test.tsx
+++ b/components/_util/tests/util.test.tsx
@ -1,10 +1,6 @@
-import React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
-import TransButton from '../transButton';

 describe('Test utils function', () => {
  describe('throttle', () => {
@ -45,29 +41,6 @@ describe('Test utils function', () => {
    });
  });

-  describe('TransButton', () => {
-    it('can be focus/blur', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      render(<TransButton ref={ref}>TransButton</TransButton>);
-      expect(typeof ref.current?.focus).toBe('function');
-      expect(typeof ref.current?.blur).toBe('function');
-    });
-
-    it('should trigger onClick when press enter', () => {
-      const onClick = jest.fn();
-
-      const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
-
-      // callback should trigger
-      fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-
-      // callback should not trigger
-      fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
  describe('style', () => {
    it('isStyleSupport', () => {
      expect(isStyleSupport('color')).toBe(true);
--- a/components/_util/isPrimitive.ts
+++ b/components/_util/isPrimitive.ts
@ -0,0 +1,3 @@
+const isPrimitive = (value: unknown) => (typeof value !== 'object' && typeof value !== 'function') || value === null;
+
+export default isPrimitive;
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@ -1,73 +0,0 @@
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- *
- * This helps accessibility reader to tread as a interactive button to operation.
- */
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  noStyle?: boolean;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-}
-
-const inlineStyle: React.CSSProperties = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-flex',
-};
-
-const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-
-  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    const { onClick } = props;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-
-  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
-
-  let mergedStyle: React.CSSProperties = {};
-
-  if (!noStyle) {
-    mergedStyle = {
-      ...inlineStyle,
-    };
-  }
-
-  if (disabled) {
-    mergedStyle.pointerEvents = 'none';
-  }
-
-  mergedStyle = {
-    ...mergedStyle,
-    ...style,
-  };
-
-  return (
-    <div
-      role="button"
-      tabIndex={tabIndex}
-      ref={ref}
-      {...restProps}
-      onKeyDown={onKeyDown}
-      onKeyUp={onKeyUp}
-      style={mergedStyle}
-    />
-  );
-});
-
-export default TransButton;
--- a/components/_util/wave/WaveEffect.tsx
+++ b/components/_util/wave/WaveEffect.tsx
@ -140,6 +140,13 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
 const showWaveEffect: ShowWaveEffect = (target, info) => {
  const { component } = info;

+  // Skip if not support `render` since `rc-util` render not support React 19
+  // TODO: remove this check in v6
+  /* istanbul ignore next */
+  if (!render) {
+    return;
+  }
+
  // Skip for unchecked checkbox
  if (component === 'Checkbox' && !target.querySelector<HTMLInputElement>('input')?.checked) {
    return;
--- a/components/_util/wave/index.ts
+++ b/components/_util/wave/index.ts
@ -1,7 +1,7 @@
 import React, { useContext, useRef } from 'react';
 import classNames from 'classnames';
 import isVisible from 'rc-util/lib/Dom/isVisible';
-import { composeRef, supportRef } from 'rc-util/lib/ref';
+import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref';

 import type { ConfigConsumerProps } from '../../config-provider';
 import { ConfigContext } from '../../config-provider';
@ -64,7 +64,7 @@ const Wave: React.FC<WaveProps> = (props) => {
    return children ?? null;
  }

-  const ref = supportRef(children) ? composeRef((children as any).ref, containerRef) : containerRef;
+  const ref = supportRef(children) ? composeRef(getNodeRef(children), containerRef) : containerRef;

  return cloneElement(children, { ref });
 };
--- a/components/_util/wave/useWave.ts
+++ b/components/_util/wave/useWave.ts
@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import raf from 'rc-util/lib/raf';

 import { ConfigContext } from '../../config-provider';
--- a/components/affix/tests/Affix.test.tsx
+++ b/components/affix/tests/Affix.test.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';

 import Affix from '..';
-import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render, triggerResize, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
--- a/components/affix/tests/snapshots/demo.test.tsx.snap
+++ b/components/affix/tests/snapshots/demo.test.tsx.snap
@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `

 exports[`renders components/affix/demo/target.tsx correctly 1`] = `
 <div
-  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset"
+  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-gutter:stable"
 >
  <div
    style="width:100%;height:1000px"
--- a/components/affix/tests/a11y.test.ts
+++ b/components/affix/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('affix demo a11y', () => {
+  accessibilityDemoTest('affix');
+});
--- a/components/affix/demo/target.tsx
+++ b/components/affix/demo/target.tsx
@ -7,7 +7,7 @@ const containerStyle: React.CSSProperties = {
  overflow: 'auto',
  boxShadow: '0 0 0 1px #1677ff',
  scrollbarWidth: 'thin',
-  scrollbarColor: 'unset',
+  scrollbarGutter: 'stable',
 };

 const style: React.CSSProperties = {
--- a/components/alert/tests/a11y.test.ts
+++ b/components/alert/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('alert demo a11y', () => {
+  accessibilityDemoTest('alert', { disabledRules: ['button-name'] });
+});
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { resetWarned } from 'rc-util/lib/warning';

 import Alert from '..';
-import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import scrollIntoView from 'scroll-into-view-if-needed';

 import getScroll from '../_util/getScroll';
--- a/components/anchor/tests/a11y.test.ts
+++ b/components/anchor/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('anchor demo a11y', () => {
+  accessibilityDemoTest('anchor');
+});
--- a/components/app/tests/a11y.test.ts
+++ b/components/app/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('app demo a11y', () => {
+  accessibilityDemoTest('app');
+});
--- a/components/app/tests/index.test.tsx
+++ b/components/app/tests/index.test.tsx
@ -202,10 +202,12 @@ describe('App', () => {

      expect(container.querySelector('.anticon')).toBeTruthy();
      const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      // Self-contained .anticon style
+      const regex = /(?:^|\})\s*\.anticon\s*{[^}]*}/;
      expect(
        dynamicStyles.some((style) => {
          const { innerHTML } = style;
-          return innerHTML.startsWith('.anticon');
+          return regex.test(innerHTML);
        }),
      ).toBeTruthy();
    });
--- a/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
--- a/components/auto-complete/tests/snapshots/demo.test.tsx.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.tsx.snap
--- a/components/auto-complete/tests/snapshots/index.test.tsx.snap
+++ b/components/auto-complete/tests/snapshots/index.test.tsx.snap
@ -8,25 +8,29 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
    class="ant-select-selector"
  >
    <span
-      class="ant-select-selection-search"
+      class="ant-select-selection-wrap"
    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="ant-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        role="combobox"
-        type="search"
-        value=""
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
      />
    </span>
-    <span
-      class="ant-select-selection-placeholder"
-    />
  </div>
 </div>
 `;
--- a/components/avatar/tests/a11y.test.ts
+++ b/components/avatar/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('avatar demo a11y', () => {
+  accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] });
+});
--- a/components/avatar/group.tsx
+++ b/components/avatar/group.tsx
@ -102,7 +102,10 @@ const Group: React.FC<GroupProps> = (props) => {
  );

  const childrenWithProps = toArray(children).map((child, index) =>
-    cloneElement(child, { key: `avatar-key-${index}` }),
+    cloneElement(child, {
+      // eslint-disable-next-line react/no-array-index-key
+      key: `avatar-key-${index}`,
+    }),
  );

  const mergeCount = max?.count || maxCount;
--- a/components/back-top/tests/a11y.test.ts
+++ b/components/back-top/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('back-top demo a11y', () => {
+  accessibilityDemoTest('back-top');
+});
--- a/components/badge/SingleNumber.tsx
+++ b/components/badge/SingleNumber.tsx
@ -79,23 +79,29 @@ const SingleNumber: React.FC<Readonly<SingleNumberProps>> = (props) => {
      unitNumberList.push(index);
    }

+    const unit = prevCount < count ? 1 : -1;
+
    // Fill with number unit nodes
    const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue);
-    unitNodes = unitNumberList.map((n, index) => {
+
+    // Cut list
+    const cutUnitNumberList =
+      unit < 0 ? unitNumberList.slice(0, prevIndex + 1) : unitNumberList.slice(prevIndex);
+
+    unitNodes = cutUnitNumberList.map((n, index) => {
      const singleUnit = n % 10;
      return (
        <UnitNumber
          {...props}
          key={n}
          value={singleUnit}
-          offset={index - prevIndex}
+          offset={unit < 0 ? index - prevIndex : index}
          current={index === prevIndex}
        />
      );
    });

    // Calculate container offset value
-    const unit = prevCount < count ? 1 : -1;
    offsetStyle = {
      transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`,
    };
--- a/components/badge/tests/snapshots/index.test.tsx.snap
+++ b/components/badge/tests/snapshots/index.test.tsx.snap
@ -305,60 +305,6 @@ exports[`Badge should render when count is changed 1`] = `
      >
        <span
          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -900%; left: 0px;"
-        >
-          0
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -800%; left: 0px;"
-        >
-          1
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -700%; left: 0px;"
-        >
-          2
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -600%; left: 0px;"
-        >
-          3
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -500%; left: 0px;"
-        >
-          4
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -400%; left: 0px;"
-        >
-          5
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -300%; left: 0px;"
-        >
-          6
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -200%; left: 0px;"
-        >
-          7
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -100%; left: 0px;"
-        >
-          8
-        </span>
-        <span
-          class="ant-scroll-number-only-unit current"
        >
          9
        </span>
@ -400,60 +346,6 @@ exports[`Badge should render when count is changed 2`] = `
      >
        <span
          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -900%; left: 0px;"
-        >
-          1
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -800%; left: 0px;"
-        >
-          2
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -700%; left: 0px;"
-        >
-          3
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -600%; left: 0px;"
-        >
-          4
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -500%; left: 0px;"
-        >
-          5
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -400%; left: 0px;"
-        >
-          6
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -300%; left: 0px;"
-        >
-          7
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -200%; left: 0px;"
-        >
-          8
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: -100%; left: 0px;"
-        >
-          9
-        </span>
-        <span
-          class="ant-scroll-number-only-unit current"
        >
          0
        </span>
@ -495,7 +387,6 @@ exports[`Badge should render when count is changed 3`] = `
      >
        <span
          class="ant-scroll-number-only-unit current"
-          style=""
        >
          1
        </span>
@ -579,60 +470,6 @@ exports[`Badge should render when count is changed 6`] = `
        >
          0
        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 100%; left: 0px;"
-        >
-          1
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 200%; left: 0px;"
-        >
-          2
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 300%; left: 0px;"
-        >
-          3
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 400%; left: 0px;"
-        >
-          4
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 500%; left: 0px;"
-        >
-          5
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 600%; left: 0px;"
-        >
-          6
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 700%; left: 0px;"
-        >
-          7
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 800%; left: 0px;"
-        >
-          8
-        </span>
-        <span
-          class="ant-scroll-number-only-unit"
-          style="position: absolute; top: 900%; left: 0px;"
-        >
-          9
-        </span>
      </span>
    </bdi>
  </sup>
--- a/components/badge/tests/a11y.test.ts
+++ b/components/badge/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('badge demo a11y', () => {
+  accessibilityDemoTest('badge', { disabledRules: ['button-name'] });
+});
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@ -377,7 +377,7 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeT

  const badgeFontHeight = fontHeight;
  const badgeShadowSize = lineWidth;
-  const badgeTextColor = token.colorBgContainer;
+  const badgeTextColor = token.colorTextLightSolid;
  const badgeColor = token.colorError;
  const badgeColorHover = token.colorErrorHover;

--- a/components/badge/style/ribbon.ts
+++ b/components/badge/style/ribbon.ts
@ -34,7 +34,7 @@ const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
      backgroundColor: token.colorPrimary,
      borderRadius: token.borderRadiusSM,
      [`${ribbonPrefixCls}-text`]: {
-        color: token.colorTextLightSolid,
+        color: token.badgeTextColor,
      },
      [`${ribbonPrefixCls}-corner`]: {
        position: 'absolute',
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -26,7 +26,7 @@ export interface BreadcrumbItemType {
   */
  path?: string;
  title?: React.ReactNode;
-  /* @deprecated Please use `title` instead */
+  /** @deprecated Please use `title` instead */
  breadcrumbName?: string;
  menu?: BreadcrumbItemProps['menu'];
  /** @deprecated Please use `menu` instead */
@ -199,6 +199,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
      const isLastItem = index === childrenLength - 1;
      return cloneElement(element, {
        separator: isLastItem ? '' : separator,
+        // eslint-disable-next-line react/no-array-index-key
        key: index,
      });
    });
--- a/components/breadcrumb/tests/Breadcrumb.test.tsx
+++ b/components/breadcrumb/tests/Breadcrumb.test.tsx
@ -1,7 +1,7 @@
 import React from 'react';

 import { resetWarned } from '../../_util/warning';
-import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render } from '../../../tests/utils';
--- a/components/breadcrumb/tests/snapshots/router.test.tsx.snap
+++ b/components/breadcrumb/tests/snapshots/router.test.tsx.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`react router react router 3 1`] = `
+exports[`react router react router legacy 1`] = `
 <nav
  class="ant-breadcrumb"
 >
--- a/components/breadcrumb/tests/a11y.test.ts
+++ b/components/breadcrumb/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('breadcrumb demo a11y', () => {
+  accessibilityDemoTest('breadcrumb');
+});
--- a/components/breadcrumb/tests/router.test.tsx
+++ b/components/breadcrumb/tests/router.test.tsx
@ -1,29 +1,10 @@
-import React, { useMemo } from 'react';
-import type { RouterProps } from 'react-router-dom';
-import { Link, MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import React from 'react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import type { Location as ReactRouterLocation } from 'react-router-dom';

-import { fireEvent, render } from '../../../tests/utils';
+import { render } from '../../../tests/utils';
 import Breadcrumb from '../index';

-const Apps: React.FC = () => (
-  <ul className="app-list">
-    <li>
-      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
-    </li>
-    <li>
-      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
-    </li>
-  </ul>
-);
-
-const breadcrumbNameMap = {
-  '/apps': 'Application List',
-  '/apps/1': 'Application1',
-  '/apps/2': 'Application2',
-  '/apps/1/detail': 'Detail',
-  '/apps/2/detail': 'Detail',
-};
-
 describe('react router', () => {
  beforeAll(() => {
    jest.useFakeTimers();
@ -33,63 +14,37 @@ describe('react router', () => {
    jest.useRealTimers();
  });

-  it('react router 6', () => {
-    const Home: React.FC = () => {
-      const location = useLocation();
-      const navigate = useNavigate();
-      const pathSnippets = location.pathname.split('/').filter((i) => i);
-      const extraBreadcrumbItems = pathSnippets.map((_, index) => {
-        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
-        return (
-          <Breadcrumb.Item key={url}>
-            <Link to={url}>{breadcrumbNameMap[url as keyof typeof breadcrumbNameMap]}</Link>
-          </Breadcrumb.Item>
-        );
-      });
-      const breadcrumbItems = [
-        <Breadcrumb.Item key="home">
-          <Link to="/">Home</Link>
-        </Breadcrumb.Item>,
-      ].concat(extraBreadcrumbItems);
-      const componentProps = useMemo<RouterProps>(
-        () => ({ component: Apps }) as unknown as RouterProps,
-        [],
-      );
-      const renderProps = useMemo<RouterProps>(
-        () => ({ render: () => <span>Home Page</span> }) as unknown as RouterProps,
-        [],
-      );
-      return (
-        <div className="demo">
-          <div className="demo-nav">
-            <a onClick={() => navigate('/')}>Home</a>
-            <a onClick={() => navigate('/apps')}>Application List</a>
-          </div>
-          <Routes>
-            <Route path="/apps" {...componentProps} />
-            <Route {...renderProps} />
-          </Routes>
-          <Breadcrumb>{breadcrumbItems}</Breadcrumb>
-        </div>
-      );
+  it('memoizes the current location', () => {
+    let location1: ReactRouterLocation | undefined;
+    const CaptureLocation1: React.FC = () => {
+      location1 = useLocation();
+      return null;
    };
-    const { container } = render(
-      <MemoryRouter initialEntries={['/']} initialIndex={0}>
-        <Home />
+    const { container: container1 } = render(
+      <MemoryRouter>
+        <CaptureLocation1 />
      </MemoryRouter>,
    );
-    expect(container.querySelectorAll('.ant-breadcrumb-link').length).toBe(1);
-    expect(container.querySelectorAll('.ant-breadcrumb-link')[0].textContent).toBe('Home');
+    expect(container1).toBeTruthy();
+    expect(location1).toBeDefined();

-    fireEvent.click(container.querySelectorAll('.demo-nav a')[1]);
-
-    expect(container.querySelectorAll('.ant-breadcrumb-link').length).toBe(2);
-    expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe(
-      'Application List',
+    let location2: ReactRouterLocation | undefined;
+    const CaptureLocation2: React.FC = () => {
+      location2 = useLocation();
+      return null;
+    };
+    const { container: container2 } = render(
+      <MemoryRouter>
+        <CaptureLocation2 />
+      </MemoryRouter>,
    );
+    expect(container2).toBeTruthy();
+    expect(location2).toBeDefined();
+
+    expect(location1).toEqual(location2);
  });

-  it('react router 3', () => {
+  it('react router legacy', () => {
    const routes = [
      {
        name: 'home',
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -1117,6 +1117,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
@ -1170,6 +1171,78 @@ Array [
        </span>
      </button>
    </div>
+    <div
+      class="ant-flex ant-flex-gap-small"
+      style="transform: scale(3); transform-origin: left top;"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="minus-square"
+            class="anticon anticon-minus-square"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="minus-square"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+              />
+              <path
+                d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background: red; width: 12px; height: 12px;"
+          />
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background: green; width: 16px; height: 16px;"
+          />
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background: blue; width: 14px; height: 16px;"
+          />
+        </span>
+      </button>
+    </div>
  </div>,
 ]
 `;
@ -1771,6 +1844,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
      href="https://www.google.com"
      tabindex="0"
+      target="_blank"
    >
      <span
        class="ant-btn-icon"
@ -2199,6 +2273,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-icon-end"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -1022,6 +1022,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
@ -1075,6 +1076,78 @@ Array [
        </span>
      </button>
    </div>
+    <div
+      class="ant-flex ant-flex-gap-small"
+      style="transform:scale(3);transform-origin:left top"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="minus-square"
+            class="anticon anticon-minus-square"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="minus-square"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+              />
+              <path
+                d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background:red;width:12px;height:12px"
+          />
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background:green;width:16px;height:16px"
+          />
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <div
+            style="background:blue;width:14px;height:16px"
+          />
+        </span>
+      </button>
+    </div>
  </div>,
 ]
 `;
@ -1594,6 +1667,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
      href="https://www.google.com"
      tabindex="0"
+      target="_blank"
    >
      <span
        class="ant-btn-icon"
@ -1944,6 +2018,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-icon-end"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
--- a/components/button/tests/a11y.test.ts
+++ b/components/button/tests/a11y.test.ts
@ -0,0 +1,5 @@
+import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
+
+describe('button demo a11y', () => {
+  accessibilityDemoTest('button');
+});
--- a/components/button/tests/index.test.tsx
+++ b/components/button/tests/index.test.tsx
@ -474,4 +474,10 @@ describe('Button', () => {
      '--ant-button-solid-text-color': '#000',
    });
  });
+
+  it('autoFocus should work', () => {
+    const { container } = render(<Button autoFocus>button</Button>);
+
+    expect(container.querySelector('button')).toBe(document.activeElement);
+  });
 });
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -1,7 +1,7 @@
-import React, { Children, createRef, useContext, useEffect, useMemo, useState } from 'react';
+import React, { Children, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import { composeRef } from 'rc-util/lib/ref';
+import { useComposeRef } from 'rc-util/lib/ref';

 import { devUseWarning } from '../_util/warning';
 import Wave from '../_util/wave';
@ -22,7 +22,7 @@ import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonH
 import IconWrapper from './IconWrapper';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
-import CompactCmp from './style/compactCmp';
+import Compact from './style/compact';

 export type LegacyButtonType = ButtonType | 'danger';

@ -119,6 +119,7 @@ const InternalCompoundedButton = React.forwardRef<
    classNames: customClassNames,
    style: customStyle = {},
    autoInsertSpace,
+    autoFocus,
    ...rest
  } = props;

@ -162,13 +163,15 @@ const InternalCompoundedButton = React.forwardRef<

  const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);

-  const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
+  const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>();

-  const buttonRef = composeRef(ref, internalRef);
+  const mergedRef = useComposeRef(ref, buttonRef);

  const needInserted =
    Children.count(children) === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant);

+  // ========================= Effect =========================
+  // Loading
  useEffect(() => {
    let delayTimer: ReturnType<typeof setTimeout> | null = null;
    if (loadingOrDelay.delay > 0) {
@ -190,12 +193,13 @@ const InternalCompoundedButton = React.forwardRef<
    return cleanupTimer;
  }, [loadingOrDelay]);

+  // Two chinese characters check
  useEffect(() => {
    // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !(buttonRef as any).current || !mergedInsertSpace) {
+    if (!buttonRef.current || !mergedInsertSpace) {
      return;
    }
-    const buttonText = (buttonRef as any).current.textContent;
+    const buttonText = buttonRef.current.textContent || '';
    if (needInserted && isTwoCNChar(buttonText)) {
      if (!hasTwoCNChar) {
        setHasTwoCNChar(true);
@ -203,18 +207,29 @@ const InternalCompoundedButton = React.forwardRef<
    } else if (hasTwoCNChar) {
      setHasTwoCNChar(false);
    }
-  }, [buttonRef]);
+  });

-  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
-    const { onClick } = props;
-    // FIXME: https://github.com/ant-design/ant-design/issues/30207
-    if (innerLoading || mergedDisabled) {
-      e.preventDefault();
-      return;
+  // Auto focus
+  useEffect(() => {
+    if (autoFocus && buttonRef.current) {
+      buttonRef.current.focus();
    }
-    (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
-  };
+  }, []);

+  // ========================= Events =========================
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
+      // FIXME: https://github.com/ant-design/ant-design/issues/30207
+      if (innerLoading || mergedDisabled) {
+        e.preventDefault();
+        return;
+      }
+      props.onClick?.(e);
+    },
+    [props.onClick, innerLoading, mergedDisabled],
+  );
+
+  // ========================== Warn ==========================
  if (process.env.NODE_ENV !== 'production') {
    const warning = devUseWarning('Button');

@ -231,18 +246,20 @@ const InternalCompoundedButton = React.forwardRef<
    );
  }

+  // ========================== Size ==========================
  const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);

  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };

  const sizeFullName = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);

-  const sizeCls = sizeFullName ? sizeClassNameMap[sizeFullName] || '' : '';
+  const sizeCls = sizeFullName ? (sizeClassNameMap[sizeFullName] ?? '') : '';

  const iconType = innerLoading ? 'loading' : icon;

  const linkButtonRestProps = omit(rest as ButtonProps & { navigate: any }, ['navigate']);

+  // ========================= Render =========================
  const classes = classNames(
    prefixCls,
    hashId,
@ -299,7 +316,7 @@ const InternalCompoundedButton = React.forwardRef<
        href={mergedDisabled ? undefined : linkButtonRestProps.href}
        style={fullStyle}
        onClick={handleClick}
-        ref={buttonRef as React.Ref<HTMLAnchorElement>}
+        ref={mergedRef as React.Ref<HTMLAnchorElement>}
        tabIndex={mergedDisabled ? -1 : 0}
      >
        {iconNode}
@ -316,12 +333,11 @@ const InternalCompoundedButton = React.forwardRef<
      style={fullStyle}
      onClick={handleClick}
      disabled={mergedDisabled}
-      ref={buttonRef as React.Ref<HTMLButtonElement>}
+      ref={mergedRef as React.Ref<HTMLButtonElement>}
    >
      {iconNode}
      {kids}
-      {/* Styles: compact */}
-      {!!compactItemClassnames && <CompactCmp key="compact" prefixCls={prefixCls} />}
+      {compactItemClassnames && <Compact prefixCls={prefixCls} />}
    </button>
  );

--- a/components/button/buttonHelpers.tsx
+++ b/components/button/buttonHelpers.tsx
@ -15,7 +15,7 @@ export function convertLegacyProps(
  return { type };
 }

-export function isString(str: any): str is string {
+export function isString(str: unknown): str is string {
  return typeof str === 'string';
 }

--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@ -1,10 +1,17 @@
 import React from 'react';
-import { SearchOutlined } from '@ant-design/icons';
+import { MinusSquareOutlined, SearchOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
 import type { ConfigProviderProps } from 'antd';

 type SizeType = ConfigProviderProps['componentSize'];

+/**12px 图标 */
+const Icon12Size = () => <div style={{ background: 'red', width: 12, height: 12 }} />;
+/**16px 图标 */
+const Icon16Size = () => <div style={{ background: 'green', width: 16, height: 16 }} />;
+/**不规则宽高  */
+const IconIrregularSize = () => <div style={{ background: 'blue', width: 14, height: 16 }} />;
+
 const App: React.FC = () => {
  const [size, setSize] = React.useState<SizeType>('large');
  return (
@ -45,12 +52,25 @@ const App: React.FC = () => {
            <Button type="dashed" icon={<SearchOutlined />}>
              Search
            </Button>
-            <Button icon={<SearchOutlined />} href="https://www.google.com" />
+            <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />
            <Button>
              <SearchOutlined />
              Search
            </Button>
          </Flex>
+          <Flex
+            gap="small"
+            style={{
+              // https://github.com/ant-design/ant-design/issues/51380 // 视觉回归测试
+              transform: 'scale(3)',
+              transformOrigin: 'left top',
+            }}
+          >
+            <Button icon={<MinusSquareOutlined />} />
+            <Button icon={<Icon12Size />} />
+            <Button icon={<Icon16Size />} />
+            <Button icon={<IconIrregularSize />} />
+          </Flex>
        </Flex>
      </ConfigProvider>
    </>
--- a/components/button/demo/icon-position.tsx
+++ b/components/button/demo/icon-position.tsx
@ -47,7 +47,12 @@ const App: React.FC = () => {
          <Button type="dashed" icon={<SearchOutlined />} iconPosition={position}>
            Search
          </Button>
-          <Button icon={<SearchOutlined />} href="https://www.google.com" iconPosition={position} />
+          <Button
+            icon={<SearchOutlined />}
+            href="https://www.google.com"
+            target="_blank"
+            iconPosition={position}
+          />
          <Button type="primary" loading iconPosition={position}>
            Loading
          </Button>
--- a/components/button/demo/icon.tsx
+++ b/components/button/demo/icon.tsx
@ -30,7 +30,7 @@ const App: React.FC = () => (
      <Button type="dashed" icon={<SearchOutlined />}>
        Search
      </Button>
-      <Button icon={<SearchOutlined />} href="https://www.google.com" />
+      <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />
    </Flex>
  </Flex>
 );
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -56,11 +56,11 @@ And 4 other properties additionally.

 Common props ref：[Common props](/docs/react/common-props)

-Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
+Different button styles generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
+| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 |
@ -72,7 +72,7 @@ Different button styles can be generated by setting Button properties. The recom
 | icon | Set the icon component of button | ReactNode | - |  |
 | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
-| shape | Can be set button shape | `default` \| `circle` \| `round` | `default` |  |
+| shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
--- a/components/button/style/compact.ts
+++ b/components/button/style/compact.ts
@ -0,0 +1,50 @@
+// Style as inline component
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { genCompactItemStyle } from '../../style/compact-item';
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import type { GenerateStyle } from '../../theme/internal';
+import { genSubStyleComponent } from '../../theme/internal';
+import type { ButtonToken } from './token';
+import { prepareComponentToken, prepareToken } from './token';
+
+const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
+  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
+  const insetOffset = calc(lineWidth).mul(-1).equal();
+  const getCompactBorderStyle = (vertical?: boolean) =>
+    ({
+      [`${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`]:
+        {
+          '& + &::before': {
+            position: 'absolute',
+            top: vertical ? insetOffset : 0,
+            insetInlineStart: vertical ? 0 : insetOffset,
+            backgroundColor: colorPrimaryHover,
+            content: '""',
+            width: vertical ? '100%' : lineWidth,
+            height: vertical ? lineWidth : '100%',
+          },
+        },
+    }) as CSSObject;
+  // Special styles for Primary Button
+  return {
+    ...getCompactBorderStyle(),
+    ...getCompactBorderStyle(true),
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(
+  ['Button', 'compact'],
+  (token) => {
+    const buttonToken = prepareToken(token);
+
+    return [
+      // Space Compact
+      genCompactItemStyle(buttonToken),
+      genCompactItemVerticalStyle(buttonToken),
+      genButtonCompactStyle(buttonToken),
+    ];
+  },
+  prepareComponentToken,
+);
--- a/components/button/style/compactCmp.ts
+++ b/components/button/style/compactCmp.ts
@ -1,72 +0,0 @@
-// Style as inline component
-import { unit } from '@ant-design/cssinjs';
-
-import { genCompactItemStyle } from '../../style/compact-item';
-import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
-import type { GenerateStyle } from '../../theme/internal';
-import { genSubStyleComponent } from '../../theme/internal';
-import type { ButtonToken } from './token';
-import { prepareComponentToken, prepareToken } from './token';
-
-const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { componentCls, calc } = token;
-
-  return {
-    [componentCls]: {
-      // Special styles for Primary Button
-      [`&-compact-item${componentCls}-primary`]: {
-        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
-          {
-            position: 'relative',
-
-            '&:before': {
-              position: 'absolute',
-              top: calc(token.lineWidth).mul(-1).equal(),
-              insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-              display: 'inline-block',
-              width: token.lineWidth,
-              height: `calc(100% + ${unit(token.lineWidth)} * 2)`,
-              backgroundColor: token.colorPrimaryHover,
-              content: '""',
-            },
-          },
-      },
-      // Special styles for Primary Button
-      '&-compact-vertical-item': {
-        [`&${componentCls}-primary`]: {
-          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
-            {
-              position: 'relative',
-
-              '&:before': {
-                position: 'absolute',
-                top: calc(token.lineWidth).mul(-1).equal(),
-                insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-                display: 'inline-block',
-                width: `calc(100% + ${unit(token.lineWidth)} * 2)`,
-                height: token.lineWidth,
-                backgroundColor: token.colorPrimaryHover,
-                content: '""',
-              },
-            },
-        },
-      },
-    },
-  };
-};
-
-// ============================== Export ==============================
-export default genSubStyleComponent(
-  ['Button', 'compact'],
-  (token) => {
-    const buttonToken = prepareToken(token);
-
-    return [
-      // Space Compact
-      genCompactItemStyle(buttonToken),
-      genCompactItemVerticalStyle(buttonToken),
-      genButtonCompactStyle(buttonToken),
-    ];
-  },
-  prepareComponentToken,
-);
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -38,12 +38,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
        pointerEvents: 'none',
      },

-      '> span': {
-        display: 'inline-block',
-      },
-
-      [`${componentCls}-icon`]: {
-        lineHeight: 1,
+      [`> span, ${componentCls}-icon`]: {
+        display: 'inline-flex',
      },

      '> a': {
@ -529,10 +525,11 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
    buttonPaddingHorizontal,
    iconCls,
    buttonPaddingVertical,
+    motionDurationSlow,
+    motionEaseInOut,
+    buttonIconOnlyFontSize,
+    opacityLoading,
  } = token;
-
-  const iconOnlyCls = `${componentCls}-icon-only`;
-
  return [
    {
      [prefixCls]: {
@ -542,7 +539,7 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
        padding: `${unit(buttonPaddingVertical!)} ${unit(buttonPaddingHorizontal!)}`,
        borderRadius,

-        [`&${iconOnlyCls}`]: {
+        [`&${componentCls}-icon-only`]: {
          width: controlHeight,
          paddingInline: 0,

@ -556,22 +553,21 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
          },

          [iconCls]: {
-            fontSize: token.buttonIconOnlyFontSize,
+            fontSize: buttonIconOnlyFontSize,
          },
        },

        // Loading
        [`&${componentCls}-loading`]: {
-          opacity: token.opacityLoading,
+          opacity: opacityLoading,
          cursor: 'default',
        },

        [`${componentCls}-loading-icon`]: {
-          transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+          transition: `width ${motionDurationSlow} ${motionEaseInOut}, opacity ${motionDurationSlow} ${motionEaseInOut}`,
        },
      },
    },
-
    // Shape - patch prefixCls again to override solid border radius style
    {
      [`${componentCls}${componentCls}-circle${prefixCls}`]: genCircleButtonStyle(token),
--- 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,
--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
@ -14,30 +14,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2016"
-        >
-          2016
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2016"
+          >
+            2016
+          </span>
        </span>
      </div>
      <div
@ -460,30 +464,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Nov"
-        >
-          Nov
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Nov"
+          >
+            Nov
+          </span>
        </span>
      </div>
      <div
@ -1599,30 +1607,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <div
@ -2045,30 +2057,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <div
@ -3183,30 +3199,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <div
@ -3629,30 +3649,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <div
@ -4761,30 +4785,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <div
@ -5207,30 +5235,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <div
@ -6408,30 +6440,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
              class="ant-select-selector"
            >
              <span
-                class="ant-select-selection-search"
+                class="ant-select-selection-wrap"
              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="2016"
-              >
-                2016
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="rc_select_TEST_OR_SSR"
+                    readonly=""
+                    role="combobox"
+                    style="opacity: 0;"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="2016"
+                >
+                  2016
+                </span>
              </span>
            </div>
            <div
@ -6879,30 +6915,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
              class="ant-select-selector"
            >
              <span
-                class="ant-select-selection-search"
+                class="ant-select-selection-wrap"
              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="Nov"
-              >
-                Nov
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    id="rc_select_TEST_OR_SSR"
+                    readonly=""
+                    role="combobox"
+                    style="opacity: 0;"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="Nov"
+                >
+                  Nov
+                </span>
              </span>
            </div>
            <div
@ -7979,30 +8019,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2016"
-        >
-          2016
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2016"
+          >
+            2016
+          </span>
        </span>
      </div>
      <div
@ -8425,30 +8469,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Nov"
-        >
-          Nov
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Nov"
+          >
+            Nov
+          </span>
        </span>
      </div>
      <div
@ -9974,30 +10022,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2017"
-          >
-            2017
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2017"
+            >
+              2017
+            </span>
          </span>
        </div>
        <div
@ -10420,30 +10472,34 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Jan"
-          >
-            Jan
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Jan"
+            >
+              Jan
+            </span>
          </span>
        </div>
        <div
--- a/components/calendar/tests/snapshots/demo.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo.test.ts.snap
@ -14,29 +14,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="undefined_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="undefined_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            readonly=""
-            role="combobox"
-            style="opacity:0"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2016"
-        >
-          2016
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2016"
+          >
+            2016
+          </span>
        </span>
      </div>
      <span
@ -73,29 +77,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="undefined_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="undefined_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            readonly=""
-            role="combobox"
-            style="opacity:0"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Nov"
-        >
-          Nov
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Nov"
+          >
+            Nov
+          </span>
        </span>
      </div>
      <span
@ -959,29 +967,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <span
@ -1018,29 +1030,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <span
@ -1903,29 +1919,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <span
@ -1962,29 +1982,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <span
@ -2843,29 +2867,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2016"
-          >
-            2016
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
          </span>
        </div>
        <span
@ -2902,29 +2930,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Nov"
-          >
-            Nov
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
          </span>
        </div>
        <span
@ -3850,29 +3882,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
              class="ant-select-selector"
            >
              <span
-                class="ant-select-selection-search"
+                class="ant-select-selection-wrap"
              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="2016"
-              >
-                2016
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="2016"
+                >
+                  2016
+                </span>
              </span>
            </div>
            <span
@ -3914,29 +3950,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
              class="ant-select-selector"
            >
              <span
-                class="ant-select-selection-search"
+                class="ant-select-selection-wrap"
              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
-                  autocomplete="off"
-                  class="ant-select-selection-search-input"
-                  readonly=""
-                  role="combobox"
-                  style="opacity:0"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="ant-select-selection-item"
-                title="Nov"
-              >
-                Nov
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <input
+                    aria-autocomplete="list"
+                    aria-controls="undefined_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="undefined_list"
+                    autocomplete="off"
+                    class="ant-select-selection-search-input"
+                    readonly=""
+                    role="combobox"
+                    style="opacity:0"
+                    type="search"
+                    unselectable="on"
+                    value=""
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-item"
+                  title="Nov"
+                >
+                  Nov
+                </span>
              </span>
            </div>
            <span
@ -4757,29 +4797,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="undefined_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="undefined_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            readonly=""
-            role="combobox"
-            style="opacity:0"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2016"
-        >
-          2016
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2016"
+          >
+            2016
+          </span>
        </span>
      </div>
      <span
@ -4816,29 +4860,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="undefined_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="undefined_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            readonly=""
-            role="combobox"
-            style="opacity:0"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Nov"
-        >
-          Nov
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Nov"
+          >
+            Nov
+          </span>
        </span>
      </div>
      <span
@ -6112,29 +6160,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="2017"
-          >
-            2017
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2017"
+            >
+              2017
+            </span>
          </span>
        </div>
        <span
@ -6171,29 +6223,33 @@ Array [
          class="ant-select-selector"
        >
          <span
-            class="ant-select-selection-search"
+            class="ant-select-selection-wrap"
          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="undefined_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-owns="undefined_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              readonly=""
-              role="combobox"
-              style="opacity:0"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="Jan"
-          >
-            Jan
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Jan"
+            >
+              Jan
+            </span>
          </span>
        </div>
        <span
--- a/components/calendar/tests/snapshots/index.test.tsx.snap
+++ b/components/calendar/tests/snapshots/index.test.tsx.snap
@ -14,30 +14,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2019"
-        >
-          2019
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2019"
+          >
+            2019
+          </span>
        </span>
      </div>
      <span
@ -74,30 +78,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Jan"
-        >
-          Jan
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Jan"
+          >
+            Jan
+          </span>
        </span>
      </div>
      <span
@ -958,30 +966,34 @@ exports[`Calendar Calendar should support locale 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2018年"
-        >
-          2018年
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2018年"
+          >
+            2018年
+          </span>
        </span>
      </div>
      <span
@ -1018,30 +1030,34 @@ exports[`Calendar Calendar should support locale 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="10月"
-        >
-          10月
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10月"
+          >
+            10月
+          </span>
        </span>
      </div>
      <span
@ -1902,30 +1918,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2000"
-        >
-          2000
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2000"
+          >
+            2000
+          </span>
        </span>
      </div>
      <span
@ -1962,30 +1982,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Sep"
-        >
-          Sep
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Sep"
+          >
+            Sep
+          </span>
        </span>
      </div>
      <span
@ -2846,30 +2870,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="2000"
-        >
-          2000
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="2000"
+          >
+            2000
+          </span>
        </span>
      </div>
      <span
@ -2906,30 +2934,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
        class="ant-select-selector"
      >
        <span
-          class="ant-select-selection-search"
+          class="ant-select-selection-wrap"
        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="rc_select_TEST_OR_SSR_list"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="rc_select_TEST_OR_SSR_list"
-            autocomplete="off"
-            class="ant-select-selection-search-input"
-            id="rc_select_TEST_OR_SSR"
-            readonly=""
-            role="combobox"
-            style="opacity: 0;"
-            type="search"
-            unselectable="on"
-            value=""
-          />
-        </span>
-        <span
-          class="ant-select-selection-item"
-          title="Jan"
-        >
-          Jan
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="Jan"
+          >
+            Jan
+          </span>
        </span>
      </div>
      <span
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -34,28 +34,20 @@ 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 |
+| cellRender | Customize cell content | function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, 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 |
+| fullCellRender | Customize cell content | function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | true |  |
 | 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) | - |  |
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -35,28 +35,20 @@ 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 |
+| cellRender | 自定义单元格的内容 | function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, 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 |
+| fullCellRender | 自定义单元格的内容 | function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | defaultValue | 默认展示的日期 | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
 | 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) | - |  |
--- a/components/cascader/Panel.tsx
+++ b/components/cascader/Panel.tsx
@ -6,6 +6,7 @@ import type { PickType } from 'rc-cascader/lib/Panel';

 import type { CascaderProps, DefaultOptionType } from '.';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
 import useCheckable from './hooks/useCheckable';
@ -40,8 +41,12 @@ function CascaderPanel<
    notFoundContent,
    direction,
    expandIcon,
+    disabled: customDisabled,
  } = props;

+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled ?? disabled;
+
  const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = useBase(
    customizePrefixCls,
    direction,
@ -76,6 +81,7 @@ function CascaderPanel<
      direction={mergedDirection}
      expandIcon={mergedExpandIcon}
      loadingIcon={loadingIcon}
+      disabled={mergedDisabled}
    />,
  );
 }
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
--- a/components/cascader/tests/snapshots/demo.test.tsx.snap
+++ b/components/cascader/tests/snapshots/demo.test.tsx.snap
--- a/Show More
+++ b/Show More