docs: changelog 5.4.2 (#41756)

* docs: changelog 5.4.2

* chore: add bug verision

.circleci/config.yml

@@ -7,7 +7,7 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.19.1-browsers
+      - image: cimg/node:16.20.0-browsers
     steps:
       - checkout
       - run:

.dumi/hooks/useLayoutState.ts

@@ -0,0 +1,17 @@
+import { startTransition, useState } from 'react';
+
+const useLayoutState = <S>(
+  ...args: Parameters<typeof useState<S>>
+): ReturnType<typeof useState<S>> => {
+  const [state, setState] = useState<S>(...args);
+
+  const setLayoutState: typeof setState = (...setStateArgs) => {
+    startTransition(() => {
+      setState(...setStateArgs);
+    });
+  };
+
+  return [state, setLayoutState];
+};
+
+export default useLayoutState;

.dumi/hooks/useLocale.ts

@@ -9,6 +9,6 @@ export default function useLocale<Key extends string>(
   localeMap?: LocaleMap<Key>,
 ): [Record<Key, string>, 'cn' | 'en'] {
   const { id } = useDumiLocale();
-  const localeType = id === 'zh-CN' ? 'cn' : ('en' as const);
-  return [localeMap?.[localeType]!, localeType];
+  const localeType = id === 'zh-CN' ? 'cn' : 'en';
+  return [localeMap?.[localeType], localeType];
 }

.dumi/pages/index/components/ComponentsList.tsx

@@ -147,15 +147,15 @@ export default function ComponentsList() {
         node: (
           <Space direction="vertical">
             <Space>
-              <Progress type="circle" trailColor="#e6f4ff" percent={60} width={14} />
+              <Progress type="circle" trailColor="#e6f4ff" percent={60} size={14} />
               {locale.inProgress}
             </Space>
             <Space>
-              <Progress type="circle" percent={100} width={14} />
+              <Progress type="circle" percent={100} size={14} />
               {locale.success}
             </Space>
             <Space>
-              <Progress type="circle" status="exception" percent={88} width={14} />
+              <Progress type="circle" status="exception" percent={88} size={14} />
               {locale.taskFailed}
             </Space>
           </Space>

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -115,7 +115,12 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                 }
               }}
             >
-              <input type="radio" name={picker ? 'picker' : 'color'} tabIndex={picker ? -1 : 0} />
+              <input
+                type="radio"
+                name={picker ? 'picker' : 'color'}
+                tabIndex={picker ? -1 : 0}
+                onClick={(e) => e.stopPropagation()}
+              />
             </label>
           );
 
@@ -128,7 +133,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                   <DebouncedColorPanel color={value || ''} onChange={(c) => onChange?.(c)} />
                 }
                 trigger="click"
-                showArrow={false}
+                arrow={false}
               >
                 {colorNode}
               </Popover>

.dumi/remarkAntd.ts

@@ -0,0 +1,12 @@
+import { unistUtilVisit } from 'dumi';
+
+export default function remarkMeta() {
+  return (tree, vFile) => {
+    // read frontmatter
+    unistUtilVisit.visit(tree, 'yaml', (node) => {
+      if (!/(^|[\n\r])description:/.test(node.value)) {
+        vFile.data.frontmatter.__autoDescription = true;
+      }
+    });
+  };
+}

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -99,7 +99,13 @@ const Overview: React.FC = () => {
   const { search: urlSearch } = useLocation();
   const { locale, formatMessage } = useIntl();
 
-  const [search, setSearch] = useState<string>('');
+  const [search, setSearch] = useState<string>(() => {
+    const params = new URLSearchParams(urlSearch);
+    if (params.has('s')) {
+      return params.get('s');
+    }
+    return '';
+  });
 
   const sectionRef = useRef<HTMLElement>(null);
 

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -0,0 +1,135 @@
+/* eslint import/no-unresolved: 0 */
+import { ConfigProvider, Table } from 'antd';
+import { getDesignToken } from 'antd-token-previewer';
+import tokenMeta from 'antd/es/version/token-meta.json';
+import tokenData from 'antd/es/version/token.json';
+import React from 'react';
+import useLocale from '../../../hooks/useLocale';
+import useSiteToken from '../../../hooks/useSiteToken';
+import { useColumns } from '../TokenTable';
+
+const defaultToken = getDesignToken();
+
+const locales = {
+  cn: {
+    token: 'Token 名称',
+    description: '描述',
+    type: '类型',
+    value: '默认值',
+  },
+  en: {
+    token: 'Token Name',
+    description: 'Description',
+    type: 'Type',
+    value: 'Default Value',
+  },
+};
+
+interface SubTokenTableProps {
+  defaultOpen?: boolean;
+  title: string;
+  tokens: string[];
+}
+
+function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
+  const [, lang] = useLocale(locales);
+  const { token } = useSiteToken();
+  const columns = useColumns();
+
+  if (!tokens.length) {
+    return null;
+  }
+
+  const data = tokens
+    .sort((token1, token2) => {
+      const hasColor1 = token1.toLowerCase().includes('color');
+      const hasColor2 = token2.toLowerCase().includes('color');
+
+      if (hasColor1 && !hasColor2) {
+        return -1;
+      }
+
+      if (!hasColor1 && hasColor2) {
+        return 1;
+      }
+
+      return token1 < token2 ? -1 : 1;
+    })
+    .map((name) => {
+      const meta = tokenMeta[name];
+
+      if (!meta) {
+        return null;
+      }
+
+      return {
+        name,
+        desc: lang === 'cn' ? meta.desc : meta.descEn,
+        type: meta.type,
+        value: (defaultToken as any)[name],
+      };
+    })
+    .filter((info) => info);
+
+  return (
+    // Reuse `.markdown` style
+    <details className="markdown" open={defaultOpen || process.env.NODE_ENV !== 'production'}>
+      <summary>
+        <h3 style={{ display: 'inline' }}>{title}</h3>
+      </summary>
+      <ConfigProvider
+        theme={{
+          token: {
+            borderRadius: 0,
+          },
+        }}
+      >
+        <Table
+          size="middle"
+          columns={columns}
+          bordered
+          dataSource={data}
+          style={{ marginBottom: token.margin }}
+          pagination={false}
+        />
+      </ConfigProvider>
+    </details>
+  );
+}
+
+export interface ComponentTokenTableProps {
+  component: string;
+}
+
+function ComponentTokenTable({ component }: ComponentTokenTableProps) {
+  const [mergedGlobalTokens] = React.useMemo(() => {
+    const globalTokenSet = new Set<string>();
+    let componentTokens: Record<string, string> = {};
+
+    component.split(',').forEach((comp) => {
+      const { global: globalTokens = [], component: singleComponentTokens = [] } =
+        tokenData[comp] || {};
+
+      globalTokens.forEach((token: string) => {
+        globalTokenSet.add(token);
+      });
+
+      componentTokens = {
+        ...componentTokens,
+        ...singleComponentTokens,
+      };
+    });
+
+    return [Array.from(globalTokenSet), componentTokens];
+  }, [component]);
+
+  return (
+    <>
+      {/* Component Token 先不展示 */}
+      {/* <SubTokenTable title="Component Token" tokens={mergedComponentTokens} defaultOpen /> */}
+      <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />
+    </>
+  );
+}
+
+export default React.memo(ComponentTokenTable);

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -8,26 +8,26 @@ import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
 import { Alert, Badge, Space, Tooltip } from 'antd';
 import classNames from 'classnames';
+import { FormattedMessage, useSiteData } from 'dumi';
+import toReactElement from 'jsonml-to-react-element';
+import JsonML from 'jsonml.js/lib/utils';
 import LZString from 'lz-string';
+import Prism from 'prismjs';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import type { IPreviewerProps } from 'dumi';
-import { FormattedMessage } from 'dumi';
-import Prism from 'prismjs';
-import JsonML from 'jsonml.js/lib/utils';
-import toReactElement from 'jsonml-to-react-element';
-import { ping } from '../../utils';
-import ClientOnly from '../../common/ClientOnly';
+import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
-import EditButton from '../../common/EditButton';
+import ClientOnly from '../../common/ClientOnly';
 import CodePenIcon from '../../common/CodePenIcon';
 import CodePreview from '../../common/CodePreview';
 import CodeSandboxIcon from '../../common/CodeSandboxIcon';
-import RiddleIcon from '../../common/RiddleIcon';
+import EditButton from '../../common/EditButton';
 import ExternalLinkIcon from '../../common/ExternalLinkIcon';
+import RiddleIcon from '../../common/RiddleIcon';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
-import useLocation from '../../../hooks/useLocation';
+import { ping } from '../../utils';
+import type { AntdPreviewerProps } from '.';
 
 const { ErrorBoundary } = Alert;
 
@@ -88,7 +88,7 @@ function useShowRiddleButton() {
   return showRiddleButton;
 }
 
-const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
+const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const {
     asset,
     expand,
@@ -97,15 +97,17 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     children,
     title,
     description,
-    debug,
+    originDebug,
     jsx,
     style,
     compact,
     background,
-    filePath,
+    filename,
     version,
+    clientOnly,
   } = props;
 
+  const { pkg } = useSiteData();
   const location = useLocation();
 
   const entryCode = asset.dependencies['index.tsx'].value;
@@ -168,6 +170,8 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     setCodeExpand(expand);
   }, [expand]);
 
+  const mergedChildren = !iframe && clientOnly ? <ClientOnly>{children}</ClientOnly> : children;
+
   if (!liveDemo.current) {
     liveDemo.current = iframe ? (
       <BrowserFrame>
@@ -179,13 +183,13 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
         />
       </BrowserFrame>
     ) : (
-      children
+      mergedChildren
     );
   }
 
   const codeBoxClass = classNames('code-box', {
     expand: codeExpand,
-    'code-box-debug': debug,
+    'code-box-debug': originDebug,
   });
 
   const localizedTitle = title;
@@ -209,17 +213,17 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
       </html>
     `;
 
-  const tsconfig = `
-    {
-      "compilerOptions": {
-        "jsx": "react-jsx",
-        "target": "esnext",
-        "module": "esnext",
-        "esModuleInterop": true,
-        "moduleResolution": "node",
-      }
-    }
-  `;
+  const tsconfig = {
+    compilerOptions: {
+      target: 'esnext',
+      module: 'esnext',
+      esModuleInterop: true,
+      moduleResolution: 'node',
+      jsx: 'react',
+      jsxFactory: 'React.createElement',
+      jsxFragmentFactory: 'React.Fragment',
+    },
+  };
 
   const suffix = codeType === 'tsx' ? 'tsx' : 'js';
 
@@ -235,7 +239,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
       }
       return acc;
     },
-    { antd: version },
+    { antd: pkg.version },
   );
 
   dependencies['@ant-design/icons'] = 'latest';
@@ -273,7 +277,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
       'react@18/umd/react.development.js',
       'react-dom@18/umd/react-dom.development.js',
       'dayjs@1/dayjs.min.js',
-      `antd@${version}/dist/antd-with-locales.js`,
+      `antd@${pkg.version}/dist/antd-with-locales.js`,
       `@ant-design/icons/dist/index.umd.js`,
       'react-router-dom/dist/umd/react-router-dom.production.min.js',
       'react-router/dist/umd/react-router.production.min.js',
@@ -329,10 +333,10 @@ createRoot(document.getElementById('container')).render(<Demo />);
       ...dependencies,
       react: '^18.0.0',
       'react-dom': '^18.0.0',
-      'react-scripts': '^4.0.0',
+      'react-scripts': '^5.0.0',
     },
     devDependencies: {
-      typescript: '^4.0.5',
+      typescript: '^5.0.2',
     },
     scripts: {
       start: 'react-scripts start',
@@ -367,8 +371,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
       'index.html': html,
     },
   };
+
   if (suffix === 'tsx') {
-    stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
+    stackblitzPrefillConfig.files['tsconfig.json'] = JSON.stringify(tsconfig, null, 2);
   }
 
   const backgroundGrey = theme.includes('dark') ? '#303030' : '#f0f2f5';
@@ -389,12 +394,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
       </section>
       <section className="code-box-meta markdown">
         <div className="code-box-title">
-          <Tooltip title={debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
+          <Tooltip title={originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
             <a href={`#${asset.id}`} ref={anchorRef}>
               {localizedTitle}
             </a>
           </Tooltip>
-          <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filePath} />
+          <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filename} />
         </div>
         <div className="code-box-description">{introChildren}</div>
         <Space wrap size="middle" className="code-box-actions">

.dumi/theme/builtins/Previewer/DesignPreviewer.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
-import type { IPreviewerProps } from 'dumi';
 import { createStyles, css } from 'antd-style';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
 import { nodeToGroup } from 'html2sketch';
 import copy from 'copy-to-clipboard';
 import { App } from 'antd';
+import type { AntdPreviewerProps } from '.';
 
 const useStyle = createStyles(({ token }) => ({
   wrapper: css`
@@ -52,7 +52,7 @@ const useStyle = createStyles(({ token }) => ({
   `,
 }));
 
-const DesignPreviewer: FC<IPreviewerProps> = ({ children, title, description, tip, asset }) => {
+const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description, tip, asset }) => {
   const { styles } = useStyle();
   const demoRef = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = React.useState<boolean>(false);

.dumi/theme/builtins/Previewer/index.tsx

@@ -5,7 +5,11 @@ import { useTabMeta } from 'dumi';
 import CodePreviewer from './CodePreviewer';
 import DesignPreviewer from './DesignPreviewer';
 
-const Previewer: FC<IPreviewerProps> = ({ ...props }) => {
+export interface AntdPreviewerProps extends IPreviewerProps {
+  originDebug?: IPreviewerProps['debug'];
+}
+
+const Previewer: FC<AntdPreviewerProps> = ({ ...props }) => {
   const tab = useTabMeta();
 
   if (tab?.frontmatter.title === 'Design') {

.dumi/theme/builtins/TokenTable/index.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import * as React from 'react';
 /* eslint import/no-unresolved: 0 */
-import tokenMeta from 'antd/es/version/token-meta.json';
-import { getDesignToken } from 'antd-token-previewer';
-import { Table } from 'antd';
-import type { TableProps } from 'antd';
 import { css } from '@emotion/react';
+import type { TableProps } from 'antd';
+import { Table } from 'antd';
+import { getDesignToken } from 'antd-token-previewer';
+import tokenMeta from 'antd/es/version/token-meta.json';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import ColorChunk from '../ColorChunk';
@@ -55,10 +55,11 @@ const useStyle = () => {
   };
 };
 
-const TokenTable: FC<TokenTableProps> = ({ type }) => {
+export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefined> {
+  const [locale] = useLocale(locales);
   const styles = useStyle();
-  const [locale, lang] = useLocale(locales);
-  const columns: Exclude<TableProps<TokenData>['columns'], undefined> = [
+
+  return [
     {
       title: locale.token,
       key: 'name',
@@ -89,8 +90,13 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
       },
     },
   ];
+}
 
-  const data = useMemo<TokenData[]>(
+const TokenTable: FC<TokenTableProps> = ({ type }) => {
+  const [, lang] = useLocale(locales);
+  const columns = useColumns();
+
+  const data = React.useMemo<TokenData[]>(
     () =>
       Object.entries(tokenMeta)
         .filter(([, meta]) => meta.source === type)

.dumi/theme/common/BehaviorMap/index.tsx

@@ -1,8 +1,7 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
 import G6 from '@antv/g6';
 import { createStyles, css } from 'antd-style';
 import { useRouteMeta } from 'dumi';
+import React, { useEffect, useRef } from 'react';
 
 G6.registerNode('behavior-start-node', {
   draw: (cfg, group) => {
@@ -242,26 +241,26 @@ const useStyle = createStyles(() => ({
     display: flex;
     align-items: center;
     &::before {
-      content: '';
       display: block;
       width: 8px;
       height: 8px;
+      margin-right: 8px;
       background-color: #1677ff;
       border-radius: 50%;
-      margin-right: 8px;
+      content: '';
     }
   `,
   extension: css`
     display: flex;
     align-items: center;
     &::before {
-      content: '';
       display: block;
       width: 8px;
       height: 8px;
-      background-color: #A0A0A0;
-      border-radius: 50%;
       margin-right: 8px;
+      background-color: #a0a0a0;
+      border-radius: 50%;
+      content: '';
     }
   `,
 }));
@@ -270,7 +269,7 @@ export type BehaviorMapProps = {
   data: BehaviorMapItem;
 };
 
-const BehaviorMap: FC<BehaviorMapProps> = ({ data }) => {
+const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const ref = useRef<HTMLDivElement>(null);
   const { styles } = useStyle();
   const meta = useRouteMeta();

.dumi/theme/common/ClientOnly.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactElement, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export type ClientOnlyProps = {
   children: ReactNode;
@@ -8,7 +8,7 @@ export type ClientOnlyProps = {
 const ClientOnly: FC<ClientOnlyProps> = ({ children }) => {
   const [clientReady, setClientReady] = useState<boolean>(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setClientReady(true);
   }, []);
 

.dumi/theme/common/Color/ColorPalettes.tsx

@@ -1,5 +1,5 @@
+import classnames from 'classnames';
 import React from 'react';
-import cls from 'classnames';
 import Palette from './Palette';
 
 const colors = [
@@ -79,11 +79,8 @@ const colors = [
 
 const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => {
   const { dark } = props;
-  const colorCls = cls('color-palettes', {
-    'color-palettes-dark': !!dark,
-  });
   return (
-    <div className={colorCls}>
+    <div className={classnames('color-palettes', { 'color-palettes-dark': dark })}>
       {colors.map((color) => (
         <Palette key={color.name} color={color} dark={dark} showTitle />
       ))}

.dumi/theme/common/Color/Palette.tsx

@@ -1,8 +1,7 @@
-import type { FC } from 'react';
-import React, { useEffect } from 'react';
-import { message } from 'antd';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import { presetDarkPalettes } from '@ant-design/colors';
+import { message } from 'antd';
+import React, { useEffect } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
 
 const rgbToHex = (rgbString: string): string => {
   const rgb = rgbString.match(/\d+/g);
@@ -21,22 +20,20 @@ interface PaletteProps {
   dark?: boolean;
   color?: {
     name: string;
-    count: number;
+    count?: number;
     description?: string;
     english?: string;
     chinese?: string;
   };
 }
 
-const Palette: FC<PaletteProps> = ({
-  showTitle,
-  direction,
-  dark,
-  color: { name, count = 10, description, english, chinese } = {
-    name: 'gray',
-    count: 13,
-  },
-}) => {
+const Palette: React.FC<PaletteProps> = (props) => {
+  const {
+    showTitle,
+    direction,
+    dark,
+    color: { name, count = 10, description, english, chinese } = { name: 'gray', count: 13 },
+  } = props;
   const [hexColors, setHexColors] = React.useState<Record<PropertyKey, string>>({});
   const colorNodesRef = React.useRef<Record<PropertyKey, HTMLDivElement>>({});
 

.dumi/theme/common/styles/Demo.tsx

@@ -290,7 +290,7 @@ const GlobalDemoStyles: React.FC = () => {
             transition: transform 0.24s;
 
             &${iconCls}-check {
-              color: ${token['green-6']} !important;
+              color: ${token.green6} !important;
               font-weight: bold;
             }
           }
@@ -342,11 +342,11 @@ const GlobalDemoStyles: React.FC = () => {
           }
 
           &-debug {
-            border-color: ${token['purple-3']};
+            border-color: ${token.purple3};
           }
 
           &-debug &-title a {
-            color: ${token['purple-6']};
+            color: ${token.purple6};
           }
         }
 

.dumi/theme/common/styles/Markdown.tsx

@@ -340,7 +340,7 @@ export default () => {
 
               &:nth-child(3) {
                 width: 22%;
-                color: ${token['magenta-7']};
+                color: ${token.magenta7};
                 font-size: ${Math.max(token.fontSize - 1, 12)}px;
               }
 

.dumi/theme/layouts/GlobalLayout.tsx

@@ -5,15 +5,16 @@ import {
   parentSelectorLinter,
   StyleProvider,
 } from '@ant-design/cssinjs';
-import { ConfigProvider, theme as antdTheme, App } from 'antd';
+import { App, ConfigProvider, theme as antdTheme } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
-import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
+import useLayoutState from '../../hooks/useLayoutState';
 
 type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
 type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
@@ -40,7 +41,7 @@ const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [{ theme, direction, isMobile }, setSiteState] = React.useState<SiteState>({
+  const [{ theme, direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
     theme: ['light'],
@@ -85,11 +86,9 @@ const GlobalLayout: React.FC = () => {
     const _theme = searchParams.getAll('theme') as ThemeName[];
     const _direction = searchParams.get('direction') as DirectionType;
 
-    startTransition(() => {
-      setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
-      // Handle isMobile
-      updateMobileMode();
-    });
+    setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
+    // Handle isMobile
+    updateMobileMode();
 
     window.addEventListener('resize', updateMobileMode);
     return () => {

.dumi/theme/plugin.ts

@@ -1,7 +1,7 @@
-import fs from 'fs';
-import type { IApi, IRoute } from 'dumi';
 import { extractStyle } from '@ant-design/cssinjs';
+import type { IApi, IRoute } from 'dumi';
 import ReactTechStack from 'dumi/dist/techStacks/react';
+import fs from 'fs';
 import sylvanas from 'sylvanas';
 
 /**

.dumi/theme/slots/Content/index.tsx

@@ -57,10 +57,10 @@ const useStyle = () => {
       box-sizing: border-box;
 
       .toc-debug {
-        color: ${token['purple-6']};
+        color: ${token.purple6};
 
         &:hover {
-          color: ${token['purple-5']};
+          color: ${token.purple5};
         }
       }
 
@@ -105,6 +105,33 @@ type AnchorItem = {
   children?: AnchorItem[];
 };
 
+const AvatarPlaceholder = ({ num = 3 }: { num?: number }) => (
+  <>
+    {Array.from({ length: num }).map((_, i) => (
+      <Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
+    ))}
+  </>
+);
+
+const AuthorAvatar = ({ name, avatar }: { name: string; avatar: string }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  useLayoutEffect(() => {
+    const img = new Image();
+    img.src = avatar;
+    img.onload = () => setLoading(false);
+    img.onerror = () => setError(true);
+  }, []);
+
+  if (error) return null;
+  if (loading) return <Skeleton.Avatar size="small" active />;
+  return (
+    <Avatar size="small" src={avatar} alt={name}>
+      {name}
+    </Avatar>
+  );
+};
+
 const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
   const meta = useRouteMeta();
   const tab = useTabMeta();
@@ -150,13 +177,31 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   const isRTL = direction === 'rtl';
 
-  const avatarPlaceholder = (
-    <>
-      <Skeleton.Avatar size="small" active />
-      <Skeleton.Avatar size="small" active style={{ marginLeft: -8 }} />
-      <Skeleton.Avatar size="small" active style={{ marginLeft: -8 }} />
-    </>
-  );
+  // support custom author info in frontmatter
+  // e.g.
+  // ---
+  // author:
+  //   - name: qixian
+  //     avatar: https://avatars.githubusercontent.com/u/11746742?v=4
+  //   - name: yutingzhao1991
+  //     avatar: https://avatars.githubusercontent.com/u/5378891?v=4
+  // ---
+  const mergedAuthorInfos = useMemo(() => {
+    const { author } = meta.frontmatter;
+    if (!author) {
+      return [];
+    }
+    if (typeof author === 'string') {
+      return author.split(',').map((item) => ({
+        name: item,
+        avatar: `https://github.com/${item}.png`,
+      }));
+    }
+    if (Array.isArray(author)) {
+      return author;
+    }
+    return [];
+  }, [meta.frontmatter.author]);
 
   return (
     <DemoContext.Provider value={contextValue}>
@@ -204,33 +249,41 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
           ) : null}
           {/* 添加作者、时间等信息 */}
           {meta.frontmatter.date || meta.frontmatter.author ? (
-            <Typography.Paragraph style={{ opacity: 0.65 }}>
+            <Typography.Paragraph>
               <Space>
                 {meta.frontmatter.date && (
-                  <span>
+                  <span style={{ opacity: 0.65 }}>
                     <CalendarOutlined /> {DayJS(meta.frontmatter.date).format('YYYY-MM-DD')}
                   </span>
                 )}
-                {meta.frontmatter.author &&
-                  (meta.frontmatter.author as string)?.split(',')?.map((author) => (
-                    <Typography.Link href={`https://github.com/${author}`} key={author}>
-                      @{author}
-                    </Typography.Link>
-                  ))}
+                {mergedAuthorInfos.map((info) => (
+                  <a
+                    href={`https://github.com/${info.name}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    key={info.name}
+                  >
+                    <Space size={3}>
+                      <AuthorAvatar name={info.name} avatar={info.avatar} />
+                      <span style={{ opacity: 0.65 }}>@{info.name}</span>
+                    </Space>
+                  </a>
+                ))}
               </Space>
             </Typography.Paragraph>
           ) : null}
-          {meta.frontmatter.description !== meta.texts[0]?.value && meta.frontmatter.description}
+          {!meta.frontmatter.__autoDescription && meta.frontmatter.description}
           {children}
           {meta.frontmatter.filename && (
             <ContributorsList
               repo="ant-design"
               owner="ant-design"
               css={styles.contributorsList}
+              cache
               fileName={meta.frontmatter.filename}
               renderItem={(item, loading) =>
                 loading || !item ? (
-                  avatarPlaceholder
+                  <AvatarPlaceholder />
                 ) : (
                   <Tooltip
                     mouseEnterDelay={0.3}

.dumi/theme/slots/Header/Navigation.tsx

@@ -45,7 +45,7 @@ const useStyle = () => {
         border-bottom: none;
 
         & > ${antCls}-menu-item, & > ${antCls}-menu-submenu {
-          min-width: (40px + 12px * 2);
+          min-width: ${40 + 12 * 2}px;
           height: ${headerHeight}px;
           padding-right: 12px;
           padding-left: 12px;

.dumi/theme/slots/Header/index.tsx

@@ -2,10 +2,9 @@ import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { ClassNames, css } from '@emotion/react';
 import { Col, Modal, Popover, Row, Select } from 'antd';
 import classNames from 'classnames';
-import { useLocation } from 'dumi';
+import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import packageJson from '../../../../package.json';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import * as utils from '../../utils';
@@ -21,8 +20,6 @@ import SwitchBtn from './SwitchBtn';
 const RESPONSIVE_XS = 1120;
 const RESPONSIVE_SM = 1200;
 
-const antdVersion: string = packageJson.version;
-
 const useStyle = () => {
   const { token } = useSiteToken();
   const searchIconColor = '#ced4d9';
@@ -129,6 +126,8 @@ const Header: React.FC = () => {
   const [isClient, setIsClient] = React.useState(false);
   const [, lang] = useLocale();
 
+  const { pkg } = useSiteData();
+
   const themeConfig = getThemeConfig();
   const [headerState, setHeaderState] = useState<HeaderState>({
     menuVisible: false,
@@ -210,7 +209,11 @@ const Header: React.FC = () => {
         .replace(/\/$/, '');
       return;
     }
-    window.location.href = currentUrl.replace(window.location.origin, url);
+
+    // Mirror url must have `/`, we add this for compatible
+    const urlObj = new URL(currentUrl.replace(window.location.origin, url));
+    urlObj.pathname = `${urlObj.pathname.replace(/\/$/, '')}/`;
+    window.location.href = urlObj.href;
   }, []);
 
   const onLangChange = useCallback(() => {
@@ -240,7 +243,7 @@ const Header: React.FC = () => {
 
   const { menuVisible, windowWidth, searching } = headerState;
   const docVersions: Record<string, string> = {
-    [antdVersion]: antdVersion,
+    [pkg.version]: pkg.version,
     ...themeConfig?.docVersions,
   };
   const versionOptions = Object.keys(docVersions).map((version) => ({
@@ -287,7 +290,7 @@ const Header: React.FC = () => {
       key="version"
       className="version"
       size="small"
-      defaultValue={antdVersion}
+      defaultValue={pkg.version}
       onChange={handleVersionChange}
       dropdownStyle={getDropdownStyle}
       dropdownMatchSelectWidth={false}
@@ -358,7 +361,7 @@ const Header: React.FC = () => {
               content={menu}
               trigger="click"
               open={menuVisible}
-              arrowPointAtCenter
+              arrow={{ arrowPointAtCenter: true }}
               onOpenChange={onMenuVisibleChange}
             >
               <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />

.dumi/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../.dumi/tmp/tsconfig.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",

.dumirc.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'dumi';
 import path from 'path';
 import rehypeAntd from './.dumi/rehypeAntd';
+import remarkAntd from './.dumi/remarkAntd';
 import { version } from './package.json';
 
 export default defineConfig({
@@ -33,6 +34,7 @@ export default defineConfig({
     antd: require.resolve('./.dumi/theme/antd.js'),
   },
   extraRehypePlugins: [rehypeAntd],
+  extraRemarkPlugins: [remarkAntd],
   extraBabelPresets: ['@emotion/babel-preset-css-prop'],
   mfsu: false,
   metas: [{ name: 'theme-color', content: '#1677ff' }],

.github/PULL_REQUEST_TEMPLATE.md

@@ -61,3 +61,18 @@ Describe changes from the user side, and list all potential break changes or oth
 - [ ] Demo is updated/provided or not needed
 - [ ] TypeScript definition is updated/provided or not needed
 - [ ] Changelog is provided or not needed
+
+---
+
+<!--
+Below are template for copilot to generate CR message.
+Please DO NOT modify it.
+-->
+
+### 🚀 Summary
+
+copilot:summary
+
+### 🔍 Walkthrough
+
+copilot:walkthrough

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -61,3 +61,17 @@
 - [ ] 代码演示已提供或无须提供
 - [ ] TypeScript 定义已补充或无须补充
 - [ ] Changelog 已提供或无须提供
+
+---
+
+<!--
+以下为 copilot 自动生成的 CR 结果，请勿修改
+-->
+
+### 🚀 概述
+
+copilot:summary
+
+### 🔍 实现细节
+
+copilot:walkthrough

.github/workflows/chatgpt-cr.yml

@@ -0,0 +1,24 @@
+name: 🤖 ChatGPT Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.ref != 'feature' && github.event.pull_request.head.ref != 'master' && github.event.pull_request.head.ref != 'next' && github.event.pull_request.head.ref != 'master-merge-feature' && github.event.pull_request.head.ref != 'feature-merge-master' && github.event.pull_request.head.ref != 'next-merge-master' && github.event.pull_request.head.ref != 'next-merge-feature'
+    steps:
+      - uses: anc95/ChatGPT-CodeReview@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          # Optional
+          LANGUAGE: Chinese
+          MODEL:
+          top_p: 1
+          temperature: 1

.github/workflows/issues-similarity-analysis.yml

@@ -1,22 +0,0 @@
-name: Issues Similarity Analysis
-
-on:
-  issues:
-    types: [opened, edited]
-
-permissions:
-  contents: read
-
-jobs:
-  similarity-analysis:
-    permissions:
-      issues: write  # for actions-cool/issues-similarity-analysis to create issue comments
-    runs-on: ubuntu-latest
-    steps:
-      - name: analysis
-        uses: actions-cool/issues-similarity-analysis@v1
-        with:
-          filter-threshold: 0.5
-          title-excludes: ''
-          comment-title: '### You may look for issues:'
-          comment-body: '${index}. ${similarity} #${number}'

.github/workflows/mock-project-build.yml

@@ -0,0 +1,63 @@
+# Build a cron job to create a umi project which use antd and dumi, and then build it.
+name: Mock Project Build
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '*/30 * * * *'
+
+# Cancel prev CI if new commit come
+concurrency:
+  group: unique
+  cancel-in-progress: true
+
+jobs:
+  pr-check-ci:
+    runs-on: ubuntu-latest
+    name: Build Project
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: actions/cache@v3
+        with:
+          path: ~tmpProj/yarn.lock
+          key: primes-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: mock-proj-lock-file
+
+      - name: Run Script
+        run: bash ./scripts/ci-mock-project-build.sh
+
+      ##################################################################
+      ##                        Diff Lock File                        ##
+      ##################################################################
+      - name: Rename failed lock file
+        if: ${{ failure() }}
+        run: mv ~tmpProj/yarn.lock ~tmpProj/yarn.lock.failed
+
+      - name: Download success lock file as `success.lock`
+        if: ${{ failure() }}
+        uses: actions/cache/restore@v3
+        with:
+          path: ~tmpProj/yarn.lock
+          key: primes-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: mock-proj-lock-file
+
+      - name: ls tmpProj
+        if: ${{ failure() }}
+        run: ls ~tmpProj
+
+      - name: 🎨 Diff Report
+        if: ${{ failure() }}
+        run: npx diff-yarn-lock --source=~tmpProj/yarn.lock --target=~tmpProj/yarn.lock.failed
+
+      - uses: actions-cool/ci-notice@v1
+        if: ${{ failure() }}
+        with:
+          notice-types: 'dingding'
+          dingding-token: ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
+          notice-title: 'CI Mock Project Build Failed'

.github/workflows/sync-gitee.yml

@@ -10,6 +10,7 @@ on:
       - 3.x-stable
       - 4.x-stable
   create:
+  workflow_dispatch:
 
 permissions:
   contents: read

.github/workflows/verify-files-modify.yml

@@ -26,16 +26,3 @@ jobs:
             Hi @${{ github.event.pull_request.user.login }}. Thanks for your contribution. The path `.github/` or `scripts/` and `CHANGELOG` is only maintained by team members. This current PR will be closed and team members will help on this.
           close: true
           set-failed: false
-
-      - name: verify-less
-        uses: actions-cool/verify-files-modify@v1
-        with:
-          forbid-files: 'components/style/themes/default.less'
-          skip-verify-authority: 'admin'
-          comment-mark: 'less'
-          comment: |
-            🚨 Hi @${{ github.event.pull_request.user.login }}. Thanks for your contribution, as the `default.less` file is currently being upgraded, changes are not recommended.
-
-            🚨 你好，@${{ github.event.pull_request.user.login }}。感谢你的贡献，由于 `default.less` 文件近期处于升级状态，不建议进行更改。
-          close: false
-          set-failed: false

CHANGELOG.en-US.md

@@ -15,6 +15,165 @@ timeline: true
 
 ---
 
+## 5.4.2
+
+`2023-04-11`
+
+- 🐞 Fix unexpected deprecated warning in DatePicker. [#41753](https://github.com/ant-design/ant-design/pull/41753) [@kiner-tang](https://github.com/kiner-tang)
+- 🌐 Add missing translations for `de_DE`. [#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)
+- TypeScript
+  - 🤖 Optimize type of TimePicker `hourStep`. [1fc3675](https://github.com/ant-design/ant-design/commit/1fc3675) [@Wuxh](https://github.com/Wuxh)
+
+## 5.4.1
+
+`2023-04-11`
+
+- 💄 Optimize Select-like component popup logic. Now always try to display it in the visible area first to reduce the user's extra scrolling cost. [#41619](https://github.com/ant-design/ant-design/pull/41619)
+- 💄 Remove fixed height in Badge.Ribbon. [#41661](https://github.com/ant-design/ant-design/pull/41661) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 Fix Select width becomes 0px when search after select something. [#41722](https://github.com/ant-design/ant-design/pull/41722)
+- 🐞 Fix Empty style in small width container. [#41727](https://github.com/ant-design/ant-design/pull/41727)
+- 🐞 Improve Form.Item `noStyle` validation message reveal logic. [#41698](https://github.com/ant-design/ant-design/pull/41698) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Form.Item should not support `requiredMark`. [#41725](https://github.com/ant-design/ant-design/pull/41725) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Space should not affect font style and font family. [#40326](https://github.com/ant-design/ant-design/pull/40326)
+- 🐞 Fix the problem that the hover style of the Previous/Next button in Pagination simple mode is lost. [#41685](https://github.com/ant-design/ant-design/pull/41685)
+- 🐞 Fix Tree `switcherIcon` cannot be hidden. [#41708](https://github.com/ant-design/ant-design/pull/41708) [@acyza](https://github.com/acyza)
+- 🐞 Fix `List.Item.Meta` avatar and title are not aligned. [#41688](https://github.com/ant-design/ant-design/pull/41688) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Row justify setting `space-evenly` does not work. [#41679](https://github.com/ant-design/ant-design/pull/41679) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Button type to support custom data attributes. [#41650](https://github.com/ant-design/ant-design/pull/41650)
+- 🐞 Fix insufficient table column width [issue 40814](https://github.com/ant-design/ant-design/issues/40814). [#41626](https://github.com/ant-design/ant-design/pull/41626)
+- 🐞 Fix Mentions dropdown style. [#41660](https://github.com/ant-design/ant-design/pull/41660)
+- 🐞 Improve Form.Item on `require` judgment logic. [#41623](https://github.com/ant-design/ant-design/pull/41623) [@Wxh16144](https://github.com/Wxh16144)
+- Locales
+  - 🇹🇭 add Tour, Image, and QRCode Thai locale. [#41697](https://github.com/ant-design/ant-design/pull/41697) [@buildingwatsize](https://github.com/buildingwatsize)
+
+## 5.4.0
+
+`2023-04-03`
+
+- 🗑 Remove `antd/es/locale-provider` `antd/lib/locale-provider` directory since LocaleProvider was replaced by ConfigProvider and removed in 4.x version years before. [#41289](https://github.com/ant-design/ant-design/pull/41289) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 DatePicker/TimePicker/Calendar could change date-library to luxon now. [#41580](https://github.com/ant-design/ant-design/pull/41580) [@hihuz](https://github.com/hihuz)
+- 🆕 Add Form.Item.useStatus hook to get error messages. [#41554](https://github.com/ant-design/ant-design/pull/41554) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Input and Input.TextArea support `classNames` and `styles` props. [#41493](https://github.com/ant-design/ant-design/pull/41493)
+- 🆕 Tag add `bordered={false}` to support border-less style. [#41305](https://github.com/ant-design/ant-design/pull/41305) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 FloatButton support `badge` prop. [#41040](https://github.com/ant-design/ant-design/pull/41040) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Select add `title` property. [#41280](https://github.com/ant-design/ant-design/pull/41280)
+- 🆕 Image component supports `preview.rootClassName`. [#41265](https://github.com/ant-design/ant-design/pull/41265) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Modal added `afterOpenChange` prop. [#41253](https://github.com/ant-design/ant-design/pull/41253) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🆕 Form.useWatch could watch field change at preserve mode. [#41191](https://github.com/ant-design/ant-design/pull/41191) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Refactor some components by using `useMemo`. [#41533](https://github.com/ant-design/ant-design/pull/41533) [#41550](https://github.com/ant-design/ant-design/pull/41550) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 Refactor Checkbox with hooks and new types. [#41117](https://github.com/ant-design/ant-design/pull/41117)
+- 🛠 Refactor Input.TextArea that move count into `affixWrapper` element. [#41450](https://github.com/ant-design/ant-design/pull/41450)
+- 🆕 DatePicker/Calendar add `cellRender` for custom cells and deprecated properties `dateRender` and `monthCellRender` in DatePicker, deprecated properties `dateCellRender`、`monthCellRender`、`dateFullCellRender`、`monthFullCellRender` in Calendar. [#41584](https://github.com/ant-design/ant-design/pull/41584) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Tour double arrow problem. [#41578](https://github.com/ant-design/ant-design/pull/41578) [@acyza](https://github.com/acyza)
+- 🐞 Fix Checkbox with customize `controlHeight` token not align in center with text. [#41566](https://github.com/ant-design/ant-design/pull/41566)
+- 🐞 Fix Form.Item not rendering correctly in Modal when it has `help`. [#40519](https://github.com/ant-design/ant-design/pull/40519) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Form wrong UI status when using `hasFeedback`. [#41594](https://github.com/ant-design/ant-design/pull/41594) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Slider throws warning `[antd: Tooltip] forcePopupAlign is align to forceAlign instead`. [#41540](https://github.com/ant-design/ant-design/pull/41540) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 Fix checkable Table checking not working when click on the edge of checkbox. [#41519](https://github.com/ant-design/ant-design/pull/41519)
+- Locales
+  - 🇲🇲 Added Burmese locale. [#41366](https://github.com/ant-design/ant-design/pull/41366) [@enson0131](https://github.com/enson0131)
+  - 🇻🇳 Fix Vietnamese locale text. [#41320](https://github.com/ant-design/ant-design/pull/41320) [@trongtai37](https://github.com/trongtai37) [#41345](https://github.com/ant-design/ant-design/pull/41345) [@duypham90](https://github.com/duypham90)
+  - 🇩🇪 Update TimePicker german locale. [#41521](https://github.com/ant-design/ant-design/pull/41521) [@Yuiai01](https://github.com/Yuiai01)
+
+## 5.3.3
+
+`2023-03-28`
+
+- Menu
+  - 🐞 Fix Menu `items` not accept `key` issue. [#41434](https://github.com/ant-design/ant-design/pull/41434) [@Yuiai01](https://github.com/Yuiai01)
+  - 🐞 Fix submenu themes being overwritten when using `getPopupContainer` to select the main Menu. [#41465](https://github.com/ant-design/ant-design/pull/41465) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Table filter do not persist filter status when filter dropdown is visible. [#41445](https://github.com/ant-design/ant-design/pull/41445) [@ablakey](https://github.com/ablakey)
+- 🐞 Fix Modal using `useModal` is not transparent and prefers user settings. [#41422](https://github.com/ant-design/ant-design/pull/41422) [@luo3house](https://github.com/luo3house)
+- Form
+  - 🐞 Fix the problem that the Form validation state does not change in sequence. [#41412](https://github.com/ant-design/ant-design/pull/41412) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 Fix Form component layout exceptions when set props `layout="inline"`. [#41140](https://github.com/ant-design/ant-design/pull/41140) [@itkui](https://github.com/itkui)
+- 💄 Fix ConfigProvider `nonce` not working on CSS-in-JS style. [#41482](https://github.com/ant-design/ant-design/pull/41482)
+- 💄 Fix Pagination when `size=small`, pagination button active, previous page next page button hover and active styles are lost. [#41462](https://github.com/ant-design/ant-design/pull/41462) [#41458](https://github.com/ant-design/ant-design/pull/41458)
+- 💄 Fix the style problem that the bottom border of the Tabs component overlaps with other borders. [#41381](https://github.com/ant-design/ant-design/pull/41381)
+- 💄 Fix Dropdown.Button down icon size issue. [#41501](https://github.com/ant-design/ant-design/pull/41501)
+- TypeScript
+  - 🐞 Fix the incorrect type definition of Breadcrumb.Item `menu`. [#41373](https://github.com/ant-design/ant-design/pull/41373)
+  - 🤖 Optimize Grid Col type. [#41453](https://github.com/ant-design/ant-design/pull/41453) [@vaakian](https://github.com/vaakian)
+  - 🤖 Optimize Table `resetPagination` type. [#41415](https://github.com/ant-design/ant-design/pull/41415)
+  - 🤖 Optimize TreeSelect `InternalTreeSelect` type. [#41386](https://github.com/ant-design/ant-design/pull/41386) [@Andarist](https://github.com/Andarist)
+- Locales
+  - 🇮🇷 Improve DatePicker `fa_IR` translation. [#41455](https://github.com/ant-design/ant-design/pull/41455) [@ds1371dani](https://github.com/ds1371dani)
+  - 🇸🇪 Add the missing content of `sv_SE` language. [#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok)
+
+## 5.3.2
+
+`2023-03-20`
+
+- Anchor
+  - 💄 Fix Anchor redundant border style when it is set to horizontal direction. [#41336](https://github.com/ant-design/ant-design/pull/41336) [@gooyoung](https://github.com/gooyoung)
+  - 💄 Fix Anchor ink square style in `vertical` mode. [#41317](https://github.com/ant-design/ant-design/pull/41317) [@acyza](https://github.com/acyza)
+- 🐞 Fix Grid `offset` can not be overwritten problem under different device screen sizes. [#41309](https://github.com/ant-design/ant-design/pull/41309) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Breadcrumb `onClick` not working bug. [#41283](https://github.com/ant-design/ant-design/pull/41283) [@acyza](https://github.com/acyza)
+- 🐞 Fix Upload trigger Progress warning after upload. [#41234](https://github.com/ant-design/ant-design/pull/41234) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Table unexpected layout problem when dragging element to the right. [#41139](https://github.com/ant-design/ant-design/pull/41139) [@hoho2017](https://github.com/hoho2017)
+- 💄 Fix Tabs more icon color in dark mode. [#41313](https://github.com/ant-design/ant-design/pull/41313) [@PhosphorusP](https://github.com/PhosphorusP)
+- 💄 Fix Button focus outline style be covered by Dropdown.Button. [#41282](https://github.com/ant-design/ant-design/pull/41282) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 Fix Input.TextArea style problem when focusing. [#41228](https://github.com/ant-design/ant-design/pull/41228) [@MuxinFeng](https://github.com/MuxinFeng)
+
+- RTL
+  - 💄 Fix Input.TextArea RTL style when enable `showCount`. [#41319](https://github.com/ant-design/ant-design/pull/41319) [@ds1371dani](https://github.com/ds1371dani)
+- TypeScript
+  - 🤖 Export `CountdownProps` for Statistic. [#41341](https://github.com/ant-design/ant-design/pull/41341) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 Improve most alias token meta info. [#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)
+  - 🤖 Improve Badge `React.forwardRef` type definition. [#41189](https://github.com/ant-design/ant-design/pull/41189) [@li-jia-nan](https://github.com/li-jia-nan)
+
+## 5.3.1
+
+`2023-03-13`
+
+- 🐞 Update DatePicker deps to fix laggy in Safari and support align with `transform scale`. [#41090](https://github.com/ant-design/ant-design/pull/41090)
+- 🐞 Fix Menu collapse, Tooltip sometime show with unexpected. [#41081](https://github.com/ant-design/ant-design/issues/41081)
+- 🐞 Fix Modal.confirm has additional node which makes height not correct. [#41173](https://github.com/ant-design/ant-design/pull/41173) [@Svudec](https://github.com/Svudec)
+- 🐞 Fixed InputNumber `disabled` text color not correct. [#41167](https://github.com/ant-design/ant-design/pull/41167) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Anchor highlighting not working when dynamically updating `items`. [#40743](https://github.com/ant-design/ant-design/pull/40743) [@zqran](https://github.com/zqran)
+- 🛠 Update Mentions deps to support align with `transform scale`. [#41160](https://github.com/ant-design/ant-design/pull/41160) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 Fix Form with manually called `validateFields` not show success status when `hasFeedback` is on. [#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Cascader sub panel not close when hover to leaf node. [#41134](https://github.com/ant-design/ant-design/issues/41134)
+- 🐞 Fix Popconfirm using `Promise` to close will not exist `loading` state even when open again. [#41121](https://github.com/ant-design/ant-design/pull/41121)
+- 🐞 Fix Upload `onChange` sometime not sync when in React 18. [#41082](https://github.com/ant-design/ant-design/pull/41082) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛎 Update demo with Space.Compact instead of legacy one and patch warning info. [#41080](https://github.com/ant-design/ant-design/pull/41080) [@Yuiai01](https://github.com/Yuiai01)
+- 🌐 Update ko_KR、Added Amharic Language. [#41103](https://github.com/ant-design/ant-design/pull/41103) [@li-jia-nan](https://github.com/li-jia-nan)
+
+## 5.3.0
+
+`2023-03-06`
+
+- 🆕 Tooltip support `arrow.pointAtCenter` and deprecate `arrow.arrowPointAtCenter`. [#40989](https://github.com/ant-design/ant-design/pull/40989)
+- 🆕 Progress support custom `size`. [#40903](https://github.com/ant-design/ant-design/pull/40903) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Tour support custom `zIndex`. [#40982](https://github.com/ant-design/ant-design/pull/40982) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Table `onHeaderCell` support customize `colSpan` and `rowSpan`. [#40885](https://github.com/ant-design/ant-design/pull/40885)
+- 🆕 Image.Group support `onChange` callback. [#40857](https://github.com/ant-design/ant-design/pull/40857) [@kiner-tang](https://github.com/kiner-tang)
+- App
+  - 🆕 App support `style` props. [#40708](https://github.com/ant-design/ant-design/pull/40708) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🆕 App support `message` and `notification` options. [#40458](https://github.com/ant-design/ant-design/pull/40458) [@luo3house](https://github.com/luo3house)
+- 🆕 ConfigProvider support `useConfig` hook to get `size` and `disabled` in context. [#40215](https://github.com/ant-design/ant-design/pull/40215) [@xliez](https://github.com/xliez)
+- 🆕 Breadcrumb support `items` prop. [#40543](https://github.com/ant-design/ant-design/pull/40543) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Breadcrumb separators are unified into `li` elements. [#40887](https://github.com/ant-design/ant-design/pull/40887) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Tooltip support auto arrow position & adjust position if possible. `destroyTooltipOnHide.keepParent` is deprecated since it will be always auto destroy unnecessary container now. [#40632](https://github.com/ant-design/ant-design/pull/40632)
+- 🛠 Rename preset colors in token, .e.g `blue-1` to `blue1`, and deprecate tokens before. [#41071](https://github.com/ant-design/ant-design/pull/41071)
+- 💄 Message use `colorText` in style. [#41047](https://github.com/ant-design/ant-design/pull/41047) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 Fix Select, TreeSelect, Cascader popup align position not correct when parent has `transform: scale` style. [#41013](https://github.com/ant-design/ant-design/pull/41013)
+- 💄 Optimize `rowScope` style for Table. [#40304](https://github.com/ant-design/ant-design/pull/40304) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 Provide new AliasToken `lineWidthFocus` for `outline-width` of focused component. [#40840](https://github.com/ant-design/ant-design/pull/40840)
+- 💄 WeekPicker support hover style. [#40772](https://github.com/ant-design/ant-design/pull/40772)
+- 💄 Adjust Select, TreeSelect, Cascader always show the `arrow` by default when multiple. [#41028](https://github.com/ant-design/ant-design/pull/41028)
+- 🐞 Fix Form `Form.Item.useStatus` problem with sever-side-rendering. [#40977](https://github.com/ant-design/ant-design/pull/40977) [@AndyBoat](https://github.com/AndyBoat)
+- 🐞 Fix arrow shape in some components. [#40971](https://github.com/ant-design/ant-design/pull/40971)
+- 🐞 Fix Layout throw `React does not recognize the `suffixCls` prop on a DOM element` warning. [#40969](https://github.com/ant-design/ant-design/pull/40969)
+- 🐞 Fix Watermark that text will be displayed when the picture loads abnormally. [#40770](https://github.com/ant-design/ant-design/pull/40770) [@OriginRing](https://github.com/OriginRing)
+- 🐞 Image support flip function in preview mode. Fix Image `fallback` when used in ssr. [#40660](https://github.com/ant-design/ant-design/pull/40660)
+- 🐞 Fix Typography component is not centered in the Select component. [#40422](https://github.com/ant-design/ant-design/pull/40422) [@Yuiai01](https://github.com/Yuiai01)
+- 🌐 Update locale `vi_VN` adding Vietnamese translation for Form component validation. [#40992](https://github.com/ant-design/ant-design/pull/40992) [@lamvananh](https://github.com/lamvananh)
+- RTL
+  - 💄 FloatButton support `rtl` mode. [#40990](https://github.com/ant-design/ant-design/pull/40990) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 Fix Cascader that generics should not be necessary. [#40961](https://github.com/ant-design/ant-design/pull/40961) [@crazyair](https://github.com/crazyair)
+
 ## 5.2.3
 
 `2023-02-27`
@@ -24,13 +183,13 @@ timeline: true
 - 🐞 Fix ConfigProvider validation message template override Form configure template sometime. [#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144)
 - 🐞 Fixed Confirm Modal `onOk` event could be triggered twice when close. [#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins)
 - 🛠 Rewrote the `useLocale` method and exposed `localeCode` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)
-- 🐞 Fixed Segmented component items were unresponsive to mouse events. [#40894](https://github.com/ant-design/ant-design/pull/40894) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fixed Segmented component items were unresponsive to mouse events. [#40894](https://github.com/ant-design/ant-design/pull/40894)
 - 🛠 Refactored: replaced the LocaleReceiver component with `useLocale` and removed the LocaleReceiver component. [#40870](https://github.com/ant-design/ant-design/pull/40870) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 Fixed `getPopupContainer` property injected by ConfigProvider did not work. [#40871](https://github.com/ant-design/ant-design/pull/40871) [@RedJue](https://github.com/RedJue)
 - 🐞 Fixed where Descriptions did not accept `data-_` and `aria-_` attributes. [#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo)
 - 🛠 Changed the Separator's DOM element from `span` to `li`. [#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585)
 - 🐞 Fix token of `Layout.colorBgHeader` not work when single use Layout.Header directly. [#40933](https://github.com/ant-design/ant-design/pull/40933)
-- 💄 Changed the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839) [@MadCcc](https://github.com/MadCcc)
+- 💄 Changed the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839)
 - 🐞 Fixed the Badge color was displayed abnormally. [#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang)
 - 🐞 Fixed an issue with the Timeline item's `className`. [#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01)
 - 💄 Fixed the interaction style of the Rate component in the disabled state.[#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01)
@@ -65,7 +224,7 @@ timeline: true
 - 🐞 Fix Slider dot to trigger click and hover correctly. [#40679](https://github.com/ant-design/ant-design/pull/40679) [@LongHaoo](https://github.com/LongHaoo)
 - 🐞 Fix Tour that should support `0` as element. [#40631](https://github.com/ant-design/ant-design/pull/40631) [@li-jia-nan](https://github.com/li-jia-nan)
 - 💄 Fix DataPicker.RangePicker hover range style. [#40607](https://github.com/ant-design/ant-design/pull/40607) [@Yuiai01](https://github.com/Yuiai01)
-- 💄 Optimize Steps custom `icon` size. [#40672](https://github.com/ant-design/ant-design/pull/40672) [@MadCcc](https://github.com/MadCcc)
+- 💄 Optimize Steps custom `icon` size. [#40672](https://github.com/ant-design/ant-design/pull/40672)
 - TypeScript
   - 🤖 Update Upload to support generic types. [#40634](https://github.com/ant-design/ant-design/pull/40634) [@riyadelberkawy](https://github.com/riyadelberkawy)
 - 🌐 Localization
@@ -138,7 +297,7 @@ timeline: true
 `2023-01-31`
 
 - Input
-  - 🐞 Fix Input that unexpected cancel button is shown when `type="search"`. [#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 Fix Input that unexpected cancel button is shown when `type="search"`. [#40457](https://github.com/ant-design/ant-design/pull/40457)
   - 🐞 Fix Input suffix color does not update bug when component status changed. [#40344](https://github.com/ant-design/ant-design/pull/40344) [@Yuiai01](https://github.com/Yuiai01)
 - 🐞 Fix Switch text layout problem in Safari and Chrome <= 84 with compatible mode. [#40453](https://github.com/ant-design/ant-design/pull/40453) [@Ifeinstein](https://github.com/Ifeinstein)
 - 🐞 Fix Progress that throw error when `percent` is `null`. [#40378](https://github.com/ant-design/ant-design/pull/40378) [@li-jia-nan](https://github.com/li-jia-nan)
@@ -156,7 +315,7 @@ timeline: true
 
 `2023-01-20`
 
-- 🐞 Fix DatePicker animation timing function. [#40133](https://github.com/ant-design/ant-design/pull/40133) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix DatePicker animation timing function. [#40133](https://github.com/ant-design/ant-design/pull/40133)
 - Menu
   - 🐞 Fix Tooltip incorrectly shown when Menu collapsed. [#40328](https://github.com/ant-design/ant-design/pull/40328)
   - 🐞 Fix Menu split line style error. [#40268](https://github.com/ant-design/ant-design/pull/40268) [@Wxh16144](https://github.com/Wxh16144)
@@ -235,7 +394,7 @@ timeline: true
 - 🐞 Fix Slider missing Tooltip appear motion. [#39857](https://github.com/ant-design/ant-design/pull/39857)
 - 🐞 Fix QRCode missing expired style. [#39849](https://github.com/ant-design/ant-design/pull/39849) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 Fix Tree switcher's background display unexpected in dark theme. [#39838](https://github.com/ant-design/ant-design/pull/39838) [@kiner-tang](https://github.com/kiner-tang)
-- 🐞 Fix Menu slide bar style issue when `border` is reset by preset. [#39819](https://github.com/ant-design/ant-design/pull/39819) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Menu slide bar style issue when `border` is reset by preset. [#39819](https://github.com/ant-design/ant-design/pull/39819)
 - 🐞 Fix Checkbox not support Tooltip or Popover when it is `disabled`. [#39829](https://github.com/ant-design/ant-design/pull/39829)
 
 ## 5.1.1
@@ -337,8 +496,8 @@ timeline: true
 - 🐞 Fix Tabs active bar missing sometimes in windows Chrome. [#39352](https://github.com/ant-design/ant-design/pull/39352) [@heiyu4585](https://github.com/heiyu4585)
 - 🐞 Fix Divider `horizontal` align issue in flex layout. [#39339](https://github.com/ant-design/ant-design/pull/39339)
 - 🐞 Fix Popover width in rtl mode. [#39311](https://github.com/ant-design/ant-design/pull/39311)
-- 🐞 Fix Popconfirm padding style issue when `wireframe` is `true`. [#39313](https://github.com/ant-design/ant-design/pull/39313) [@MadCcc](https://github.com/MadCcc)
-- 💄 Fix Select search input with white space style issue. [#39299](https://github.com/ant-design/ant-design/pull/39299) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Popconfirm padding style issue when `wireframe` is `true`. [#39313](https://github.com/ant-design/ant-design/pull/39313)
+- 💄 Fix Select search input with white space style issue. [#39299](https://github.com/ant-design/ant-design/pull/39299)
 - 💄 Fix Tree missing selection style. [#39292](https://github.com/ant-design/ant-design/pull/39292)
 - 🐞 Fix FloatButton content not align when customize size. [#39282](https://github.com/ant-design/ant-design/pull/39282) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 Fix RangePicker cell hover style. [#39266](https://github.com/ant-design/ant-design/pull/39266)

CHANGELOG.zh-CN.md

@@ -15,6 +15,165 @@ timeline: true
 
 ---
 
+## 5.4.2
+
+`2023-04-11`
+
+- 🐞 修复 DatePicker 组件异常显示废弃警告的问题。[#41753](https://github.com/ant-design/ant-design/pull/41753) [@kiner-tang](https://github.com/kiner-tang)
+- 🌐 补充 `de_DE` 遗漏的国际化。[#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)
+- TypeScript
+  - 🤖 优化 TimePicker `hourStep` 的类型。[1fc3675](https://github.com/ant-design/ant-design/commit/1fc3675) [@Wuxh](https://github.com/Wuxh)
+
+## 5.4.1
+
+`2023-04-11`
+
+- 💄 优化类 Select 组件弹窗逻辑，现在总是会尝试优先在可视区域展示以减少用户额外滚动成本。[#41619](https://github.com/ant-design/ant-design/pull/41619)
+- 💄 去除 Badge.Ribbon 里固定的高度。[#41661](https://github.com/ant-design/ant-design/pull/41661) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 修复 Select 在搜索时宽度变为 `0px` 的问题。[#41722](https://github.com/ant-design/ant-design/pull/41722)
+- 🐞 修复 Empty 空数据组件在宽度不够的容器内样式错位的问题。[#41727](https://github.com/ant-design/ant-design/pull/41727)
+- 🐞 改进 Form.Item `noStyle` 验证消息显隐逻辑。[#41698](https://github.com/ant-design/ant-design/pull/41698) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修正 Form.Item 不应支持设置 `requiredMark` 的问题。[#41725](https://github.com/ant-design/ant-design/pull/41725) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Space 影响父元素字体大小和样式的问题。[#40326](https://github.com/ant-design/ant-design/pull/40326)
+- 🐞 修复 Pagination 简洁模式中的上一页下一页按钮 hover 样式丢失的问题。[#41685](https://github.com/ant-design/ant-design/pull/41685)
+- 🐞 修复 Tree `switcherIcon` 无法隐藏。[#41708](https://github.com/ant-design/ant-design/pull/41708) [@acyza](https://github.com/acyza)
+- 🐞 修复 `List.Item.Meta` 的 avatar 和 title 不对齐。[#41688](https://github.com/ant-design/ant-design/pull/41688) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Row 的 `justify` 设置为 `space-evenly` 无效。[#41679](https://github.com/ant-design/ant-design/pull/41679) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Button props 类型定义支持 data-\* 属性。[#41650](https://github.com/ant-design/ant-design/pull/41650)
+- 🐞 修复表格列宽不够的问题 [issue 40814](https://github.com/ant-design/ant-design/issues/40814)。[#41626](https://github.com/ant-design/ant-design/pull/41626)
+- 🐞 修复 Mentions 弹层样式。[#41660](https://github.com/ant-design/ant-design/pull/41660)
+- 🐞 改进 Form.Item 关于 `require` 的判断逻辑。[#41623](https://github.com/ant-design/ant-design/pull/41623) [@Wxh16144](https://github.com/Wxh16144)
+- 国际化
+  - 🇹🇭 添加 Tour、Image 和 QRCode 泰语语言环境。[#41697](https://github.com/ant-design/ant-design/pull/41697) [@buildingwatsize](https://github.com/buildingwatsize)
+
+## 5.4.0
+
+`2023-04-03`
+
+- 🗑 移除 `antd/es/locale-provider` `antd/lib/locale-provider` 目录，LocaleProvider 已在 4.x 版本移除，使用 ConfigProvider 作为替代。[#41289](https://github.com/ant-design/ant-design/pull/41289) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 DatePicker 等时间类组件可以定制 luxon 作为日期库。[#41580](https://github.com/ant-design/ant-design/pull/41580) [@hihuz](https://github.com/hihuz)
+- 🆕 新增 Form.Item.useStatus 以支持获取错误状态信息。[#41554](https://github.com/ant-design/ant-design/pull/41554) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Input 和 Input.TextArea 组件支持 `classNames` 和 `styles` 属性，用于更细粒度的样式自定义。[#41493](https://github.com/ant-design/ant-design/pull/41493)
+- 🆕 Tag 新增无边框模式。[#41305](https://github.com/ant-design/ant-design/pull/41305) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 FloatButton 支持用 `badge` 属性开启角标功能。[#41040](https://github.com/ant-design/ant-design/pull/41040) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Select 支持 `title` 属性以便覆盖一些自带的 title 提示。[#41280](https://github.com/ant-design/ant-design/pull/41280)
+- 🆕 Image 组件支持设置 `preview.rootClassName`。[#41265](https://github.com/ant-design/ant-design/pull/41265) [@Yuiai01](https://github.com/Yuiai01)
+- 🆕 Modal 组件支持 `afterOpenChange` 属性。[#41253](https://github.com/ant-design/ant-design/pull/41253) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🆕 Form.useWatch 新增 `preserve` 参数，支持在 Form.Item 未注册的情况下 `setFieldValue` 时触发监听。[#41191](https://github.com/ant-design/ant-design/pull/41191) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 使用 `useMemo` 重构部分组件代码。[#41533](https://github.com/ant-design/ant-design/pull/41533) [#41550](https://github.com/ant-design/ant-design/pull/41550) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛠 使用 React hooks 重构 Checkbox，并优化了 TS 定义。[#41117](https://github.com/ant-design/ant-design/pull/41117)
+- 🛠 重构 Input.TextArea 文字计数实现方式，移至 `affixWrapper` 元素中。[#41450](https://github.com/ant-design/ant-design/pull/41450)
+- 🆕 DatePicker/Calendar 组件新增 `cellRender` 用于自定义日期单元格，同时在 DatePicker 中废弃 `dateRender` 和 `monthRender` 等属性，在 Calendar 中废弃 `dateCellRender`、`monthCellRender`、`dateFullCellRender`、`monthFullCellRender` 等属性。[#41584](https://github.com/ant-design/ant-design/pull/41584) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Tour 出现两个箭头的问题。[#41578](https://github.com/ant-design/ant-design/pull/41578) [@acyza](https://github.com/acyza)
+- 🐞 修复 Checkbox 配置 `controlHeight` token 时勾选框与文字不对齐的问题。[#41566](https://github.com/ant-design/ant-design/pull/41566)
+- 🐞 修复 Form.Item 存在 `help` 值时在 Modal 中没有正确渲染元素。[#40519](https://github.com/ant-design/ant-design/pull/40519) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Form 使用 `hasFeedback` 时表单状态不对的问题。[#41594](https://github.com/ant-design/ant-design/pull/41594) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Slider 组件显示 `Warning: [antd: Tooltip] forcePopupAlign is align to forceAlign instead` 警告信息的问题。[#41540](https://github.com/ant-design/ant-design/pull/41540) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 修复可选择 Table 的勾选框在边缘点击的时候无法触发勾选的问题。[#41519](https://github.com/ant-design/ant-design/pull/41519)
+- 国际化
+  - 🇩🇪 更新 TimePicker 德语本地化文案。[#41521](https://github.com/ant-design/ant-design/pull/41521) [@Yuiai01](https://github.com/Yuiai01)
+  - 🇻🇳 修复越南语本地化文案。[#41320](https://github.com/ant-design/ant-design/pull/41320) [@trongtai37](https://github.com/trongtai37) [#41345](https://github.com/ant-design/ant-design/pull/41345) [@duypham90](https://github.com/duypham90)
+  - 🇲🇲 添加缅甸语本地化文案。[#41366](https://github.com/ant-design/ant-design/pull/41366) [@enson0131](https://github.com/enson0131)
+
+## 5.3.3
+
+`2023-03-28`
+
+- Menu
+  - 🐞 修复 Menu `items` 没有使用传入的 `key` 的问题。[#41434](https://github.com/ant-design/ant-design/pull/41434) [@Yuiai01](https://github.com/Yuiai01)
+  - 🐞 修复 Menu 使用 `getPopupContainer` 选择主菜单时子菜单主题被覆盖。[#41465](https://github.com/ant-design/ant-design/pull/41465) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Table 过滤器未保持状态当筛选下拉框展示时。[#41445](https://github.com/ant-design/ant-design/pull/41445) [@ablakey](https://github.com/ablakey)
+- 🐞 修复 Modal 使用 `useModal` 未透传并优先选择用户设定。[#41422](https://github.com/ant-design/ant-design/pull/41422) [@luo3house](https://github.com/luo3house)
+- Form
+  - 🐞 修复 Form 验证状态不按照顺序改变的问题。[#41412](https://github.com/ant-design/ant-design/pull/41412) [@kiner-tang](https://github.com/kiner-tang)
+  - 💄 修复 Form 组件 `layout="inline"` 时组件标题与表单项布局异常换行问题。[#41140](https://github.com/ant-design/ant-design/pull/41140) [@itkui](https://github.com/itkui)
+- 💄 修复 ConfigProvider `nonce` 对 CSS-in-JS 样式不生效的问题。[#41482](https://github.com/ant-design/ant-design/pull/41482)
+- 💄 修复 Pagination `size=small` 时，分页按钮 active、上一页下一页按钮 hover 和 active 样式丢失。[#41462](https://github.com/ant-design/ant-design/pull/41462) [#41458](https://github.com/ant-design/ant-design/pull/41458)
+- 💄 修复 Tabs 组件下边框与其他边框叠加的样式问题。[#41381](https://github.com/ant-design/ant-design/pull/41381)
+- 💄 修复 Dropdown.Button down 图标尺寸问题。[#41501](https://github.com/ant-design/ant-design/pull/41501)
+- TypeScript
+  - 🐞 修复 Breadcrumb.Item `menu` 类型定义不正确的问题。[#41373](https://github.com/ant-design/ant-design/pull/41373)
+  - 🤖 优化 Grid Col 类型提示。[#41453](https://github.com/ant-design/ant-design/pull/41453) [@vaakian](https://github.com/vaakian)
+  - 🤖 优化 Table `resetPagination` 类型提示。[#41415](https://github.com/ant-design/ant-design/pull/41415)
+  - 🤖 优化 TreeSelect `InternalTreeSelect` 类型提示。[#41386](https://github.com/ant-design/ant-design/pull/41386) [@Andarist](https://github.com/Andarist)
+- 国际化
+  - 🇮🇷 完善 DatePicker `fa_IR` 翻译。[#41455](https://github.com/ant-design/ant-design/pull/41455) [@ds1371dani](https://github.com/ds1371dani)
+  - 🇸🇪 完善 `sv_SE` 语言缺失内容。[#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok)
+
+## 5.3.2
+
+`2023-03-20`
+
+- Anchor
+  - 💄 修复 Anchor 组件设置为水平方向时多余的 border 样式。[#41336](https://github.com/ant-design/ant-design/pull/41336) [@gooyoung](https://github.com/gooyoung)
+  - 💄 修复 Anchor 处于 `vertical` 方向时 ink 小方块的样式。[#41317](https://github.com/ant-design/ant-design/pull/41317) [@acyza](https://github.com/acyza)
+- 🐞 修复 Grid 在不同设备屏幕下的 `offset` 设置不会被覆盖的问题。[#41309](https://github.com/ant-design/ant-design/pull/41309) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Breadcrumb `onClick` 不工作的问题。[#41283](https://github.com/ant-design/ant-design/pull/41283) [@acyza](https://github.com/acyza)
+- 🐞 修复 Upload 在上传完毕后 Progress 组件抛出警告的问题。[#41234](https://github.com/ant-design/ant-design/pull/41234) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Table 在拖动元素一直右移时布局错误的问题。[#41139](https://github.com/ant-design/ant-design/pull/41139) [@hoho2017](https://github.com/hoho2017)
+- 💄 修复 Tabs 在深色模式下更多图标的色值。[#41313](https://github.com/ant-design/ant-design/pull/41313) [@PhosphorusP](https://github.com/PhosphorusP)
+- 💄 修复 Button 下拉时聚焦轮廓被其他元素遮挡的问题。[#41282](https://github.com/ant-design/ant-design/pull/41282) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 修复 Input.TextArea 在 focus 状态下的样式问题。[#41228](https://github.com/ant-design/ant-design/pull/41228) [@MuxinFeng](https://github.com/MuxinFeng)
+
+- RTL
+  - 💄 修复 Input.TextArea 在启用 `showCount` 时 RTL 模式下位置不正确的问题。[#41319](https://github.com/ant-design/ant-design/pull/41319) [@ds1371dani](https://github.com/ds1371dani)
+- TypeScript
+  - 🤖 导出 Statistic 的 `CountdownProps` 类型。[#41341](https://github.com/ant-design/ant-design/pull/41341) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🤖 优化 token 的类型提示和说明。[#41297](https://github.com/ant-design/ant-design/pull/41297) [@arvinxx](https://github.com/arvinxx)
+  - 🤖 优化 Badge `React.forwardRef` 类型定义。[#41189](https://github.com/ant-design/ant-design/pull/41189) [@li-jia-nan](https://github.com/li-jia-nan)
+
+## 5.3.1
+
+`2023-03-13`
+
+- 🐞 更新 DatePicker 底层依赖，修复 Safari 下卡顿，支持 `transform scale` 下对齐。[#41090](https://github.com/ant-design/ant-design/pull/41090)
+- 🐞 修复 Menu 收缩时，Tooltip 有时会弹出的问题。[#41081](https://github.com/ant-design/ant-design/issues/41081)
+- 🐞 修复 Modal.confirm 窗体有额外节点导致高度不正确的问题。[#41173](https://github.com/ant-design/ant-design/pull/41173) [@Svudec](https://github.com/Svudec)
+- 🐞 修复 InputNumber `disabled` 时字体高亮不正确的问题。[#41167](https://github.com/ant-design/ant-design/pull/41167) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Anchor 动态添加 `items` 后高亮失效问题。[#40743](https://github.com/ant-design/ant-design/pull/40743) [@zqran](https://github.com/zqran)
+- 🛠 更新 Mentions 底层依赖，支持 `transform scale` 下对齐。[#41160](https://github.com/ant-design/ant-design/pull/41160) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 修复 Form 手工调用 `validateFields` 时，`hasFeedback` 对成功态不生效的问题。[#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Cascader 在悬浮至叶子节点时，展开面板没有关闭的问题。[#41134](https://github.com/ant-design/ant-design/issues/41134)
+- 🐞 修复 Popconfirm 使用 `Promise` 关闭时再次打开仍然是 `loading` 状态的问题。[#41121](https://github.com/ant-design/ant-design/pull/41121)
+- 🐞 修复 Upload 在 React 18 下 `onChange` 有时数据不正确的问题。[#41082](https://github.com/ant-design/ant-design/pull/41082) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🛎 补充官网中没有切换到 Space.Compact 的遗留示例，并且添加相应警告。[#41080](https://github.com/ant-design/ant-design/pull/41080) [@Yuiai01](https://github.com/Yuiai01)
+- 🌐 更新韩语国际化，添加国际化阿姆哈拉语。[#41103](https://github.com/ant-design/ant-design/pull/41103) [@li-jia-nan](https://github.com/li-jia-nan)
+
+## 5.3.0
+
+`2023-03-06`
+
+- 🆕 Tooltip 组件新增 `arrow.pointAtCenter`， 废弃 `arrow.arrowPointAtCenter`。[#40989](https://github.com/ant-design/ant-design/pull/40989)
+- 🆕 Progress 组件支持自定义 `size`。[#40903](https://github.com/ant-design/ant-design/pull/40903) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Tour 组件支持自定义 `zIndex`。[#40982](https://github.com/ant-design/ant-design/pull/40982) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Table `onHeaderCell` 支持自定义 `colSpan` 和 `rowSpan`。[#40885](https://github.com/ant-design/ant-design/pull/40885)
+- 🆕 Image.Group 支持 `onChange` 回调。[#40857](https://github.com/ant-design/ant-design/pull/40857) [@kiner-tang](https://github.com/kiner-tang)
+- App
+  - 🆕 App 支持自定义 `style`。[#40708](https://github.com/ant-design/ant-design/pull/40708) [@li-jia-nan](https://github.com/li-jia-nan)
+  - 🆕 App 提供预先配置 `message`、`notification` 的选项。[#40458](https://github.com/ant-design/ant-design/pull/40458) [@luo3house](https://github.com/luo3house)
+- 🆕 ConfigProvider 新增 `useConfig` 以获取上下文中的 `size` 和 `disabled`。[#40215](https://github.com/ant-design/ant-design/pull/40215) [@xliez](https://github.com/xliez)
+- 🆕 Breadcrumb 支持 `items` 数据驱动。[#40543](https://github.com/ant-design/ant-design/pull/40543) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Breadcrumb 分隔符统一为 `li` 元素。[#40887](https://github.com/ant-design/ant-design/pull/40887) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Tooltip 现在自动调整自身以及箭头位置以更好的展示。同时废弃 `destroyTooltipOnHide.keepParent`，现在总是会自动销毁不需要的容器。[#40632](https://github.com/ant-design/ant-design/pull/40632)
+- 🛠 重命名 token 中的预设颜色，如 `blue-1` 变为 `blue1`，废弃原有的 token。[#41071](https://github.com/ant-design/ant-design/pull/41071)
+- 💄 Message 组件使用 `colorText` 优化样式。[#41047](https://github.com/ant-design/ant-design/pull/41047) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 修复 Select, TreeSelect, Cascader 父元素存在 `transform: scale` 样式时的对齐问题。[#41013](https://github.com/ant-design/ant-design/pull/41013)
+- 💄 优化 Table 中 `rowScope` 的样式。[#40304](https://github.com/ant-design/ant-design/pull/40304) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 为组件聚焦时的 `outline` 提供新的 AliasToken `lineWidthFocus`。[#40840](https://github.com/ant-design/ant-design/pull/40840)
+- 💄 WeekPicker 支持鼠标悬浮样式。[#40772](https://github.com/ant-design/ant-design/pull/40772)
+- 💄 调整 Select, TreeSelect, Cascader 在多选时总是默认显示下拉箭头。[#41028](https://github.com/ant-design/ant-design/pull/41028)
+- 🐞 修复 Form 组件 `Form.Item.useStatus` 导致的服务端渲染问题。[#40977](https://github.com/ant-design/ant-design/pull/40977) [@AndyBoat](https://github.com/AndyBoat)
+- 🐞 修复部分组件箭头形状问题。[#40971](https://github.com/ant-design/ant-design/pull/40971)
+- 🐞 修复 Layout 报错 `React does not recognize the `suffixCls` prop on a DOM element` 的问题。[#40969](https://github.com/ant-design/ant-design/pull/40969)
+- 🐞 修复 Watermark 组件图片加载异常时的问题，默认展示文字。[#40770](https://github.com/ant-design/ant-design/pull/40770) [@OriginRing](https://github.com/OriginRing)
+- 🐞 Image 预览新增图片翻转功能。并修复 Image `fallback` 在 ssr 下失效的问题。[#40660](https://github.com/ant-design/ant-design/pull/40660)
+- 🐞 修复 Select 中使用 Typography 不居中的问题。[#40422](https://github.com/ant-design/ant-design/pull/40422) [@Yuiai01](https://github.com/Yuiai01)
+- 🌐 完善 Form 的 `vi_VN` 语言包。[#40992](https://github.com/ant-design/ant-design/pull/40992) [@lamvananh](https://github.com/lamvananh)
+- RTL
+  - 💄 修复 FloatButton 不支持 `rtl` 模式的问题。[#40990](https://github.com/ant-design/ant-design/pull/40990) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 修复 Cascader 泛型为非必传。[#40961](https://github.com/ant-design/ant-design/pull/40961) [@crazyair](https://github.com/crazyair)
+
 ## 5.2.3
 
 `2023-02-27`
@@ -24,12 +183,12 @@ timeline: true
 - 🐞 修复 ConfigProvider 组件表单校验消息生效顺序。[#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144)
 - 🐞 修复 Confirm Modal `onOk` 可能触发两次的问题。[#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins)
 - 🛠 重写 `useLocale` 方法，对外暴露 `localeCode`。[#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)
-- 🐞 修复 Segemented 组件子项不响应鼠标事件的问题。[#40894](https://github.com/ant-design/ant-design/pull/40894) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Segemented 组件子项不响应鼠标事件的问题。[#40894](https://github.com/ant-design/ant-design/pull/40894)
 - 🛠 重构：使用 `useLocale` 替换 LocaleReceiver 组件，并删除 LocaleReceiver 组件。[#40870](https://github.com/ant-design/ant-design/pull/40870) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 修复 ConfigProvider 注入的 `getPopupContainer` 属性 不生效的问题。[#40871](https://github.com/ant-design/ant-design/pull/40871) [@RedJue](https://github.com/RedJue)
 - 🐞 修复 Descriptions 不接受 `data-*` 和 `aria-*` 等属性的问题。[#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo)
 - 🛠 修改 Separator 的 dom 由 `span` 改为 `li`。[#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585)
-- 💄 修改组件聚焦下的 `outline` 为默认 `4px`。[#40839](https://github.com/ant-design/ant-design/pull/40839) [@MadCcc](https://github.com/MadCcc)
+- 💄 修改组件聚焦下的 `outline` 为默认 `4px`。[#40839](https://github.com/ant-design/ant-design/pull/40839)
 - 🐞 修复 Layout.Header 单独使用时，`Layout.colorBgHeader` token 配置不生效的问题。[#40933](https://github.com/ant-design/ant-design/pull/40933)
 - 🐞 修复 Badge 颜色显示异常问题。[#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang)
 - 🐞 修复 Timeline 的子项的 `className` 错误。[#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01)
@@ -65,7 +224,7 @@ timeline: true
 - 🐞 修复 Silder 中的标记点在边缘无法点击的问题。[#40679](https://github.com/ant-design/ant-design/pull/40679) [@LongHaoo](https://github.com/LongHaoo)
 - 🐞 修复 Tour 不支持 `0` 作为节点的问题。[#40631](https://github.com/ant-design/ant-design/pull/40631) [@li-jia-nan](https://github.com/li-jia-nan)
 - 💄 修复 DataPicker.RangePicker 的 hover 范围样式。[#40607](https://github.com/ant-design/ant-design/pull/40607) [@Yuiai01](https://github.com/Yuiai01)
-- 💄 优化 Steps 组件自定义 `icon` 的大小。[#40672](https://github.com/ant-design/ant-design/pull/40672) [@MadCcc](https://github.com/MadCcc)
+- 💄 优化 Steps 组件自定义 `icon` 的大小。[#40672](https://github.com/ant-design/ant-design/pull/40672)
 - TypeScript
   - 🤖 Upload 组件支持泛型。[#40634](https://github.com/ant-design/ant-design/pull/40634) [@riyadelberkawy](https://github.com/riyadelberkawy)
 - 🌐 国际化
@@ -138,7 +297,7 @@ timeline: true
 `2023-01-31`
 
 - Input
-  - 🐞 修复 Input 组件 `type="search"` 时未隐藏浏览器原生取消按钮的问题。[#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 修复 Input 组件 `type="search"` 时未隐藏浏览器原生取消按钮的问题。[#40457](https://github.com/ant-design/ant-design/pull/40457)
   - 🐞 修复 Input 的 suffix 颜色不随组件状态改变的问题。[#40344](https://github.com/ant-design/ant-design/pull/40344) [@Yuiai01](https://github.com/Yuiai01)
 - 🐞 修复 Switch 在 Safari 和 Chrome <= 84 兼容模式下文本的显示问题。[#40453](https://github.com/ant-design/ant-design/pull/40453) [@Ifeinstein](https://github.com/Ifeinstein)
 - 🐞 修复 Progress 的 `percent` 属性设置为 `null` 时报错的问题。[#40378](https://github.com/ant-design/ant-design/pull/40378) [@li-jia-nan](https://github.com/li-jia-nan)
@@ -156,7 +315,7 @@ timeline: true
 
 `2023-01-20`
 
-- 🐞 修复 DatePicker 等组件动画 timing function 错误的问题。[#40133](https://github.com/ant-design/ant-design/pull/40133) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 DatePicker 等组件动画 timing function 错误的问题。[#40133](https://github.com/ant-design/ant-design/pull/40133)
 - Menu
   - 🐞 修复 Menu 收缩时，Tooltip 偶尔会错误展示的问题。[#40328](https://github.com/ant-design/ant-design/pull/40328)
   - 🐞 修复 Menu 分割线样式错误。[#40268](https://github.com/ant-design/ant-design/pull/40268) [@Wxh16144](https://github.com/Wxh16144)
@@ -337,8 +496,8 @@ timeline: true
 - 🐞 修复 Tabs 在 windows Chrome 下高亮条有时候会丢失的问题。[#39352](https://github.com/ant-design/ant-design/pull/39352) [@heiyu4585](https://github.com/heiyu4585)
 - 🐞 修复 Divider `horizontal` 在 flex 布局下的对齐问题。[#39339](https://github.com/ant-design/ant-design/pull/39339)
 - 🐞 修复 Popover 在 rtl 模式下宽度异常的问题。[#39311](https://github.com/ant-design/ant-design/pull/39311)
-- 🐞 修复 Popconfirm 组件 token 配置线框化后边框坍缩的样式问题。[#39313](https://github.com/ant-design/ant-design/pull/39313) [@MadCcc](https://github.com/MadCcc)
-- 💄 修复 Select 组件搜索框会出现空白区域的样式问题。[#39299](https://github.com/ant-design/ant-design/pull/39299) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Popconfirm 组件 token 配置线框化后边框坍缩的样式问题。[#39313](https://github.com/ant-design/ant-design/pull/39313)
+- 💄 修复 Select 组件搜索框会出现空白区域的样式问题。[#39299](https://github.com/ant-design/ant-design/pull/39299)
 - 💄 修复 Tree 丢失选中样式的问题。[#39292](https://github.com/ant-design/ant-design/pull/39292)
 - 🐞 修复 FloatButton 自定义尺寸时，内容不居中的问题。[#39282](https://github.com/ant-design/ant-design/pull/39282) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 修复 RangePicker 日期 hover 样式。[#39266](https://github.com/ant-design/ant-design/pull/39266)

README-zh_CN.md

@@ -52,9 +52,9 @@
 - 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
 - 📦 开箱即用的高质量 React 组件。
 - 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
-- ⚙️ 全链路开发和设计工具体系。
+- ⚙️ 应用开发框架和设计工具配套。
 - 🌍 数十个国际化语言支持。
-- 🎨 深入每个细节的主题定制能力。
+- 🎨 基于 CSS-in-JS 的主题定制能力。
 
 ## 🖥 兼容环境
 

README.md

@@ -54,7 +54,7 @@ English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) |
 - 🛡 Written in TypeScript with predictable static types.
 - ⚙️ Whole package of design resources and development tools.
 - 🌍 Internationalization support for dozens of languages.
-- 🎨 Powerful theme customization in every detail.
+- 🎨 Powerful theme customization based on CSS-in-JS.
 
 ## 🖥 Environment Support
 

components/__tests__/__snapshots__/setup.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SetUp.Test diff of React 18 & React 17 1`] = `
+NodeList [
+  <div>
+  bamboo
+  little
+</div>,
+  <div />,
+]
+`;

components/__tests__/node.test.tsx

@@ -21,14 +21,14 @@ describe('node', () => {
   });
 
   // Find the component exist demo test file
-  const files = glob.sync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
+  const files = glob.globSync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
 
   files.forEach((componentTestFile) => {
     const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];
 
     // Test for ssr
     describe(componentName, () => {
-      const demoList = glob.sync(`./components/${componentName}/demo/*.tsx`);
+      const demoList = glob.globSync(`./components/${componentName}/demo/*.tsx`);
 
       // Use mock to get config
       require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require

components/__tests__/setup.test.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render } from '../../tests/utils';
+
+describe('SetUp.Test', () => {
+  it('diff of React 18 & React 17', () => {
+    const { container } = render(
+      <>
+        <div>{['bamboo', '', 'little']}</div>
+        <div>{['', '']}</div>
+      </>,
+    );
+    expect(container.childNodes).toMatchSnapshot();
+  });
+});

components/_util/ActionButton.tsx

@@ -62,6 +62,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     setLoading(true);
     returnValueOfOnOk!.then(
       (...args: any[]) => {
+        setLoading(false, true);
         onInternalClose(...args);
         clickedRef.current = false;
       },

components/_util/placements.ts

@@ -1,17 +1,6 @@
-import { placements } from 'rc-tooltip/lib/placements';
-import type { BuildInPlacements } from 'rc-trigger';
-
-const autoAdjustOverflowEnabled = {
-  adjustX: 1,
-  adjustY: 1,
-};
-
-const autoAdjustOverflowDisabled = {
-  adjustX: 0,
-  adjustY: 0,
-};
-
-const targetOffset = [0, 0];
+/* eslint-disable default-case */
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+import { getArrowOffset } from '../style/placementArrow';
 
 export interface AdjustOverflow {
   adjustX?: 0 | 1;
@@ -20,135 +9,218 @@ export interface AdjustOverflow {
 
 export interface PlacementsConfig {
   arrowWidth: number;
-  horizontalArrowShift?: number;
-  verticalArrowShift?: number;
   arrowPointAtCenter?: boolean;
   autoAdjustOverflow?: boolean | AdjustOverflow;
   offset: number;
+  borderRadius: number;
 }
 
-export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
-  if (typeof autoAdjustOverflow === 'boolean') {
-    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+export function getOverflowOptions(
+  placement: string,
+  arrowOffset: ReturnType<typeof getArrowOffset>,
+  arrowWidth: number,
+  autoAdjustOverflow?: boolean | AdjustOverflow,
+) {
+  if (autoAdjustOverflow === false) {
+    return {
+      adjustX: false,
+      adjustY: false,
+    };
   }
-  return {
-    ...autoAdjustOverflowDisabled,
-    ...autoAdjustOverflow,
+
+  const overflow =
+    autoAdjustOverflow && typeof autoAdjustOverflow === 'object' ? autoAdjustOverflow : {};
+
+  const baseOverflow: AlignType['overflow'] = {};
+
+  switch (placement) {
+    case 'top':
+    case 'bottom':
+      baseOverflow.shiftX = arrowOffset.dropdownArrowOffset * 2 + arrowWidth;
+      break;
+
+    case 'left':
+    case 'right':
+      baseOverflow.shiftY = arrowOffset.dropdownArrowOffsetVertical * 2 + arrowWidth;
+      break;
+  }
+
+  const mergedOverflow = {
+    ...baseOverflow,
+    ...overflow,
   };
+
+  // Support auto shift
+  if (!mergedOverflow.shiftX) {
+    mergedOverflow.adjustX = true;
+  }
+  if (!mergedOverflow.shiftY) {
+    mergedOverflow.adjustY = true;
+  }
+
+  return mergedOverflow;
 }
 
 type PlacementType = keyof BuildInPlacements;
 
-function getArrowOffset(type: PlacementType, arrowWidth: number, offset: number): number[] {
-  switch (type) {
-    case 'top':
-    case 'topLeft':
-    case 'topRight':
-      return [0, -(arrowWidth / 2 + offset)];
-    case 'bottom':
-    case 'bottomLeft':
-    case 'bottomRight':
-      return [0, arrowWidth / 2 + offset];
-    case 'left':
-    case 'leftTop':
-    case 'leftBottom':
-      return [-(arrowWidth / 2 + offset), 0];
-    case 'right':
-    case 'rightTop':
-    case 'rightBottom':
-      return [arrowWidth / 2 + offset, 0];
-    /* istanbul ignore next */
-    default:
-      return [0, 0];
-  }
-}
+const PlacementAlignMap: BuildInPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  leftTop: {
+    points: ['tr', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  rightTop: {
+    points: ['tl', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  rightBottom: {
+    points: ['bl', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+  leftBottom: {
+    points: ['br', 'bl'],
+  },
+};
 
-function vertexCalc(point1: number[], point2: number[]): number[] {
-  return [point1[0] + point2[0], point1[1] + point2[1]];
-}
+const ArrowCenterPlacementAlignMap: BuildInPlacements = {
+  topLeft: {
+    points: ['bl', 'tc'],
+  },
+  leftTop: {
+    points: ['tr', 'cl'],
+  },
+  topRight: {
+    points: ['br', 'tc'],
+  },
+  rightTop: {
+    points: ['tl', 'cr'],
+  },
+  bottomRight: {
+    points: ['tr', 'bc'],
+  },
+  rightBottom: {
+    points: ['bl', 'cr'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bc'],
+  },
+  leftBottom: {
+    points: ['br', 'cl'],
+  },
+};
+
+const DisableAutoArrowList: Set<keyof BuildInPlacements> = new Set([
+  'topLeft',
+  'topRight',
+  'bottomLeft',
+  'bottomRight',
+  'leftTop',
+  'leftBottom',
+  'rightTop',
+  'rightBottom',
+]);
 
 export default function getPlacements(config: PlacementsConfig) {
-  const {
-    arrowWidth,
-    horizontalArrowShift = 16,
-    verticalArrowShift = 8,
-    autoAdjustOverflow,
-    arrowPointAtCenter,
-    offset,
-  } = config;
+  const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius } = config;
   const halfArrowWidth = arrowWidth / 2;
 
-  const placementMap: BuildInPlacements = {
-    left: {
-      points: ['cr', 'cl'],
-      offset: [-offset, 0],
-    },
-    right: {
-      points: ['cl', 'cr'],
-      offset: [offset, 0],
-    },
-    top: {
-      points: ['bc', 'tc'],
-      offset: [0, -offset],
-    },
-    bottom: {
-      points: ['tc', 'bc'],
-      offset: [0, offset],
-    },
-    topLeft: {
-      points: ['bl', 'tc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), -offset],
-    },
-    leftTop: {
-      points: ['tr', 'cl'],
-      offset: [-offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    topRight: {
-      points: ['br', 'tc'],
-      offset: [horizontalArrowShift + halfArrowWidth, -offset],
-    },
-    rightTop: {
-      points: ['tl', 'cr'],
-      offset: [offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    bottomRight: {
-      points: ['tr', 'bc'],
-      offset: [horizontalArrowShift + halfArrowWidth, offset],
-    },
-    rightBottom: {
-      points: ['bl', 'cr'],
-      offset: [offset, verticalArrowShift + halfArrowWidth],
-    },
-    bottomLeft: {
-      points: ['tl', 'bc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), offset],
-    },
-    leftBottom: {
-      points: ['br', 'cl'],
-      offset: [-offset, verticalArrowShift + halfArrowWidth],
-    },
-  };
-  Object.keys(placementMap).forEach((key) => {
-    placementMap[key] = arrowPointAtCenter
-      ? {
-          ...placementMap[key],
-          offset: vertexCalc(
-            placementMap[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-          targetOffset,
-        }
-      : {
-          ...placements[key],
-          offset: vertexCalc(
-            placements[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-        };
+  const placementMap: BuildInPlacements = {};
 
-    placementMap[key].ignoreShake = true;
+  Object.keys(PlacementAlignMap).forEach((key: PlacementType) => {
+    const template =
+      (arrowPointAtCenter && ArrowCenterPlacementAlignMap[key]) || PlacementAlignMap[key];
+
+    const placementInfo = {
+      ...template,
+      offset: [0, 0],
+    };
+    placementMap[key] = placementInfo;
+
+    // Disable autoArrow since design is fixed position
+    if (DisableAutoArrowList.has(key)) {
+      placementInfo.autoArrow = false;
+    }
+
+    // Static offset
+    switch (key) {
+      case 'top':
+      case 'topLeft':
+      case 'topRight':
+        placementInfo.offset[1] = -halfArrowWidth - offset;
+        break;
+
+      case 'bottom':
+      case 'bottomLeft':
+      case 'bottomRight':
+        placementInfo.offset[1] = halfArrowWidth + offset;
+        break;
+
+      case 'left':
+      case 'leftTop':
+      case 'leftBottom':
+        placementInfo.offset[0] = -halfArrowWidth - offset;
+        break;
+
+      case 'right':
+      case 'rightTop':
+      case 'rightBottom':
+        placementInfo.offset[0] = halfArrowWidth + offset;
+        break;
+    }
+
+    // Dynamic offset
+    const arrowOffset = getArrowOffset({
+      contentRadius: borderRadius,
+      limitVerticalRadius: true,
+    });
+
+    if (arrowPointAtCenter) {
+      switch (key) {
+        case 'topLeft':
+        case 'bottomLeft':
+          placementInfo.offset[0] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'topRight':
+        case 'bottomRight':
+          placementInfo.offset[0] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+
+        case 'leftTop':
+        case 'rightTop':
+          placementInfo.offset[1] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'leftBottom':
+        case 'rightBottom':
+          placementInfo.offset[1] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+      }
+    }
+
+    // Overflow
+    placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
   });
+
   return placementMap;
 }

components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/affix/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/affix/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div>
     <div
@@ -34,9 +34,9 @@ Array [
 ]
 `;
 
-exports[`renders ./components/affix/demo/debug.tsx extend context correctly 1`] = `
+exports[`renders components/affix/demo/debug.tsx extend context correctly 1`] = `
 <div
-  style="height:10000px"
+  style="height: 10000px;"
 >
   <div>
     Top
@@ -46,7 +46,7 @@ exports[`renders ./components/affix/demo/debug.tsx extend context correctly 1`]
       class=""
     >
       <div
-        style="background:red"
+        style="background: red;"
       >
         <button
           class="ant-btn ant-btn-primary"
@@ -65,7 +65,7 @@ exports[`renders ./components/affix/demo/debug.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/affix/demo/on-change.tsx extend context correctly 1`] = `
+exports[`renders components/affix/demo/on-change.tsx extend context correctly 1`] = `
 <div>
   <div
     class=""
@@ -82,7 +82,7 @@ exports[`renders ./components/affix/demo/on-change.tsx extend context correctly
 </div>
 `;
 
-exports[`renders ./components/affix/demo/target.tsx extend context correctly 1`] = `
+exports[`renders components/affix/demo/target.tsx extend context correctly 1`] = `
 <div
   class="scrollable-container"
 >

components/affix/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/affix/demo/basic.tsx correctly 1`] = `
+exports[`renders components/affix/demo/basic.tsx correctly 1`] = `
 Array [
   <div>
     <div
@@ -34,7 +34,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/affix/demo/debug.tsx correctly 1`] = `
+exports[`renders components/affix/demo/debug.tsx correctly 1`] = `
 <div
   style="height:10000px"
 >
@@ -65,7 +65,7 @@ exports[`renders ./components/affix/demo/debug.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/affix/demo/on-change.tsx correctly 1`] = `
+exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
 <div>
   <div
     class=""
@@ -82,7 +82,7 @@ exports[`renders ./components/affix/demo/on-change.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/affix/demo/target.tsx correctly 1`] = `
+exports[`renders components/affix/demo/target.tsx correctly 1`] = `
 <div
   class="scrollable-container"
 >

components/affix/index.tsx

@@ -21,14 +21,14 @@ function getDefaultTarget() {
 
 // Affix
 export interface AffixProps {
-  /** 距离窗口顶部达到指定偏移量后触发 */
+  /** Triggered when the specified offset is reached from the top of the window */
   offsetTop?: number;
-  /** 距离窗口底部达到指定偏移量后触发 */
+  /** Triggered when the specified offset is reached from the bottom of the window */
   offsetBottom?: number;
   style?: React.CSSProperties;
-  /** 固定状态改变时触发的回调函数 */
+  /** Callback function triggered when fixed state changes */
   onChange?: (affixed?: boolean) => void;
-  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
+  /** Set the element that Affix needs to listen to its scroll event, the value is a function that returns the corresponding DOM element */
   target?: () => Window | HTMLElement | null;
   prefixCls?: string;
   className?: string;

components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success"
@@ -83,7 +83,7 @@ exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-error ant-alert-with-description"
@@ -139,7 +139,7 @@ exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
@@ -232,7 +232,7 @@ exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`]
         >
           <div
             class="ant-space-item"
-            style="margin-bottom:8px"
+            style="margin-bottom: 8px;"
           >
             <button
               class="ant-btn ant-btn-primary ant-btn-sm"
@@ -287,14 +287,14 @@ exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
@@ -333,7 +333,7 @@ exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-banner"
@@ -397,7 +397,7 @@ exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
@@ -456,7 +456,7 @@ exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-alert ant-alert-success ant-alert-no-icon"
   data-show="true"
@@ -474,14 +474,14 @@ exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/closable.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"
@@ -576,7 +576,7 @@ exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/alert/demo/close-text.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/close-text.tsx extend context correctly 1`] = `
 <div
   class="ant-alert ant-alert-info ant-alert-no-icon"
   data-show="true"
@@ -605,14 +605,14 @@ exports[`renders ./components/alert/demo/close-text.tsx extend context correctly
 </div>
 `;
 
-exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -632,7 +632,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success"
@@ -671,7 +671,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info"
@@ -710,7 +710,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning"
@@ -749,7 +749,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-error"
@@ -788,7 +788,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
@@ -832,7 +832,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
@@ -876,7 +876,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
@@ -964,14 +964,14 @@ exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctl
 </div>
 `;
 
-exports[`renders ./components/alert/demo/description.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/description.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
@@ -996,7 +996,7 @@ exports[`renders ./components/alert/demo/description.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
@@ -1021,7 +1021,7 @@ exports[`renders ./components/alert/demo/description.tsx extend context correctl
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
@@ -1071,7 +1071,7 @@ exports[`renders ./components/alert/demo/description.tsx extend context correctl
 </div>
 `;
 
-exports[`renders ./components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
@@ -1082,14 +1082,14 @@ exports[`renders ./components/alert/demo/error-boundary.tsx extend context corre
 </button>
 `;
 
-exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success"
@@ -1128,7 +1128,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info"
@@ -1167,7 +1167,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning"
@@ -1231,7 +1231,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-error"
@@ -1270,7 +1270,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-with-description"
@@ -1314,7 +1314,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info ant-alert-with-description"
@@ -1358,7 +1358,7 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-with-description"
@@ -1471,14 +1471,14 @@ exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -1523,7 +1523,7 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correc
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <p>
       click the close button to see the effect
@@ -1557,14 +1557,14 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correc
 </div>
 `;
 
-exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`] = `
+exports[`renders components/alert/demo/style.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-success ant-alert-no-icon"
@@ -1584,7 +1584,7 @@ exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-info ant-alert-no-icon"
@@ -1604,7 +1604,7 @@ exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
   >
     <div
       class="ant-alert ant-alert-warning ant-alert-no-icon"

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/alert/demo/action.tsx correctly 1`] = `
+exports[`renders components/alert/demo/action.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -287,7 +287,7 @@ exports[`renders ./components/alert/demo/action.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = `
+exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -456,7 +456,7 @@ exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
+exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-alert ant-alert-success ant-alert-no-icon"
   data-show="true"
@@ -474,7 +474,7 @@ exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = `
+exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -576,7 +576,7 @@ exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
+exports[`renders components/alert/demo/close-text.tsx correctly 1`] = `
 <div
   class="ant-alert ant-alert-info ant-alert-no-icon"
   data-show="true"
@@ -605,7 +605,7 @@ exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = `
+exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -964,7 +964,7 @@ exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/description.tsx correctly 1`] = `
+exports[`renders components/alert/demo/description.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -1071,7 +1071,7 @@ exports[`renders ./components/alert/demo/description.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
+exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
@@ -1082,7 +1082,7 @@ exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = `
 </button>
 `;
 
-exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = `
+exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -1471,7 +1471,7 @@ exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
+exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -1557,7 +1557,7 @@ exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/alert/demo/style.tsx correctly 1`] = `
+exports[`renders components/alert/demo/style.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"

components/alert/__tests__/index.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, act, screen } from '../../../tests/utils';
+import { act, render, screen } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@@ -105,6 +105,10 @@ describe('Alert', () => {
 
     await userEvent.hover(screen.getByRole('alert'));
 
+    act(() => {
+      jest.runAllTimers();
+    });
+
     expect(screen.getByRole('tooltip')).toBeInTheDocument();
   });
 
@@ -119,6 +123,10 @@ describe('Alert', () => {
     );
     await userEvent.click(screen.getByRole('alert'));
 
+    act(() => {
+      jest.runAllTimers();
+    });
+
     expect(screen.getByRole('tooltip')).toBeInTheDocument();
   });
 

components/alert/index.tsx

@@ -132,7 +132,7 @@ const Alert: CompoundedComponent = ({
     if (type !== undefined) {
       return type;
     }
-    // banner 模式默认为警告
+    // banner mode defaults to 'warning'
     return banner ? 'warning' : 'info';
   };
 
@@ -140,7 +140,7 @@ const Alert: CompoundedComponent = ({
   const isClosable = closeText ? true : closable;
   const type = getType();
 
-  // banner 模式默认有 Icon
+  // banner mode defaults to Icon
   const isShowIcon = banner && showIcon === undefined ? true : showIcon;
 
   const alertCls = classNames(

components/anchor/Anchor.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import * as React from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -155,35 +156,30 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
 
   const dependencyListItem: React.DependencyList[number] = JSON.stringify(links);
 
-  const registerLink = React.useCallback<AntAnchor['registerLink']>(
-    (link) => {
-      if (!links.includes(link)) {
-        setLinks((prev) => [...prev, link]);
-      }
-    },
-    [dependencyListItem],
-  );
+  const registerLink = useEvent<AntAnchor['registerLink']>((link) => {
+    if (!links.includes(link)) {
+      setLinks((prev) => [...prev, link]);
+    }
+  });
 
-  const unregisterLink = React.useCallback<AntAnchor['unregisterLink']>(
-    (link) => {
-      if (links.includes(link)) {
-        setLinks((prev) => prev.filter((i) => i !== link));
-      }
-    },
-    [dependencyListItem],
-  );
+  const unregisterLink = useEvent<AntAnchor['unregisterLink']>((link) => {
+    if (links.includes(link)) {
+      setLinks((prev) => prev.filter((i) => i !== link));
+    }
+  });
 
   const updateInk = () => {
     const linkNode = wrapperRef.current?.querySelector<HTMLElement>(
       `.${prefixCls}-link-title-active`,
     );
     if (linkNode && spanLinkNode.current) {
-      if (anchorDirection !== 'horizontal') {
-        spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
-        spanLinkNode.current.style.height = `${linkNode.clientHeight}px`;
-      } else {
-        spanLinkNode.current.style.left = `${linkNode.offsetLeft}px`;
-        spanLinkNode.current.style.width = `${linkNode.clientWidth}px`;
+      const { style: inkStyle } = spanLinkNode.current;
+      const horizontalAnchor = anchorDirection === 'horizontal';
+      inkStyle.top = horizontalAnchor ? '' : `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
+      inkStyle.height = horizontalAnchor ? '' : `${linkNode.clientHeight}px`;
+      inkStyle.left = horizontalAnchor ? `${linkNode.offsetLeft}px` : '';
+      inkStyle.width = horizontalAnchor ? `${linkNode.clientWidth}px` : '';
+      if (horizontalAnchor) {
         scrollIntoView(linkNode, {
           scrollMode: 'if-needed',
           block: 'nearest',

components/anchor/AnchorLink.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import type { ConfigConsumerProps } from '../config-provider';
-import { ConfigConsumer } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
 import type { AntAnchor } from './Anchor';
 import AnchorContext from './context';
@@ -30,7 +29,7 @@ const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
     return () => {
       unregisterLink?.(href);
     };
-  }, [href, registerLink, unregisterLink]);
+  }, [href]);
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     onClick?.(e, { title, href });
@@ -46,33 +45,33 @@ const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
     );
   }
 
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('anchor', customizePrefixCls);
+
+  const active = activeLink === href;
+
+  const wrapperClassName = classNames(`${prefixCls}-link`, className, {
+    [`${prefixCls}-link-active`]: active,
+  });
+
+  const titleClassName = classNames(`${prefixCls}-link-title`, {
+    [`${prefixCls}-link-title-active`]: active,
+  });
+
   return (
-    <ConfigConsumer>
-      {({ getPrefixCls }: ConfigConsumerProps) => {
-        const prefixCls = getPrefixCls('anchor', customizePrefixCls);
-        const active = activeLink === href;
-        const wrapperClassName = classNames(`${prefixCls}-link`, className, {
-          [`${prefixCls}-link-active`]: active,
-        });
-        const titleClassName = classNames(`${prefixCls}-link-title`, {
-          [`${prefixCls}-link-title-active`]: active,
-        });
-        return (
-          <div className={wrapperClassName}>
-            <a
-              className={titleClassName}
-              href={href}
-              title={typeof title === 'string' ? title : ''}
-              target={target}
-              onClick={handleClick}
-            >
-              {title}
-            </a>
-            {direction !== 'horizontal' ? children : null}
-          </div>
-        );
-      }}
-    </ConfigConsumer>
+    <div className={wrapperClassName}>
+      <a
+        className={titleClassName}
+        href={href}
+        title={typeof title === 'string' ? title : ''}
+        target={target}
+        onClick={handleClick}
+      >
+        {title}
+      </a>
+      {direction !== 'horizontal' ? children : null}
+    </div>
   );
 };
 

components/anchor/__tests__/Anchor.test.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { resetWarned } from 'rc-util/lib/warning';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import Anchor from '..';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import type { AnchorDirection } from '../Anchor';
 
 const { Link } = Anchor;
 
@@ -886,5 +887,54 @@ describe('Anchor Render', () => {
         'Warning: [antd: Anchor.Link] `Anchor.Link children` is not supported when `Anchor` direction is horizontal',
       );
     });
+    it('switch direction', async () => {
+      const Foo: React.FC = () => {
+        const [direction, setDirection] = useState<AnchorDirection>('vertical');
+        const toggle = () => {
+          setDirection(direction === 'vertical' ? 'horizontal' : 'vertical');
+        };
+        return (
+          <div>
+            <button onClick={toggle} type="button">
+              toggle
+            </button>
+            <Anchor
+              direction={direction}
+              items={[
+                {
+                  title: 'part-1',
+                  href: 'part-1',
+                  key: 'part-1',
+                },
+                {
+                  title: 'part-2',
+                  href: 'part-2',
+                  key: 'part-2',
+                },
+              ]}
+            />
+          </div>
+        );
+      };
+      const wrapper = await render(<Foo />);
+      (await wrapper.findByText('part-1')).click();
+      await waitFakeTimer();
+      const ink = wrapper.container.querySelector<HTMLSpanElement>('.ant-anchor-ink')!;
+      const toggleButton = wrapper.container.querySelector('button')!;
+
+      fireEvent.click(toggleButton);
+      act(() => jest.runAllTimers());
+      expect(!!ink.style.left).toBe(true);
+      expect(!!ink.style.width).toBe(true);
+      expect(ink.style.top).toBe('');
+      expect(ink.style.height).toBe('');
+
+      fireEvent.click(toggleButton);
+      act(() => jest.runAllTimers());
+      expect(!!ink.style.top).toBe(true);
+      expect(!!ink.style.height).toBe(true);
+      expect(ink.style.left).toBe('');
+      expect(ink.style.width).toBe('');
+    });
   });
 });

components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -9,15 +9,15 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
   >
     <div
       id="part-1"
-      style="height:100vh;background:rgba(255,0,0,0.02)"
+      style="height: 100vh; background: rgba(255, 0, 0, 0.02);"
     />
     <div
       id="part-2"
-      style="height:100vh;background:rgba(0,255,0,0.02)"
+      style="height: 100vh; background: rgba(0, 255, 0, 0.02);"
     />
     <div
       id="part-3"
-      style="height:100vh;background:rgba(0,0,255,0.02)"
+      style="height: 100vh; background: rgba(0, 0, 255, 0.02);"
     />
   </div>
   <div
@@ -29,19 +29,20 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
       >
         <div
           class="ant-anchor-wrapper"
-          style="max-height:100vh"
+          style="max-height: 100vh;"
         >
           <div
             class="ant-anchor"
           >
             <span
-              class="ant-anchor-ink"
+              class="ant-anchor-ink ant-anchor-ink-visible"
+              style="top: 0px; height: 0px;"
             />
             <div
-              class="ant-anchor-link"
+              class="ant-anchor-link ant-anchor-link-active"
             >
               <a
-                class="ant-anchor-link-title"
+                class="ant-anchor-link-title ant-anchor-link-title-active"
                 href="#part-1"
                 title="Part 1"
               >
@@ -78,16 +79,17 @@ exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/customizeHighlight.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
   <div
     class="ant-anchor ant-anchor-fixed"
   >
     <span
-      class="ant-anchor-ink"
+      class="ant-anchor-ink ant-anchor-ink-visible"
+      style="top: 0px; height: 0px;"
     />
     <div
       class="ant-anchor-link"
@@ -101,10 +103,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
       </a>
     </div>
     <div
-      class="ant-anchor-link"
+      class="ant-anchor-link ant-anchor-link-active"
     >
       <a
-        class="ant-anchor-link-title"
+        class="ant-anchor-link-title ant-anchor-link-title-active"
         href="#components-anchor-demo-static"
         title="Static demo"
       >
@@ -148,10 +150,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx extend context
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/horizontal.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/horizontal.tsx extend context correctly 1`] = `
 Array [
   <div
-    style="padding:20px"
+    style="padding: 20px;"
   >
     <div>
       <div
@@ -159,19 +161,20 @@ Array [
       >
         <div
           class="ant-anchor-wrapper ant-anchor-wrapper-horizontal"
-          style="max-height:100vh"
+          style="max-height: 100vh;"
         >
           <div
             class="ant-anchor"
           >
             <span
-              class="ant-anchor-ink"
+              class="ant-anchor-ink ant-anchor-ink-visible"
+              style="left: 0px; width: 0px;"
             />
             <div
-              class="ant-anchor-link"
+              class="ant-anchor-link ant-anchor-link-active"
             >
               <a
-                class="ant-anchor-link-title"
+                class="ant-anchor-link-title ant-anchor-link-title-active"
                 href="#part-1"
                 title="Part 1"
               >
@@ -241,36 +244,36 @@ Array [
   <div>
     <div
       id="part-1"
-      style="width:100vw;height:100vh;text-align:center;background:rgba(0,255,0,0.02)"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgba(0, 255, 0, 0.02);"
     />
     <div
       id="part-2"
-      style="width:100vw;height:100vh;text-align:center;background:rgba(0,0,255,0.02)"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgba(0, 0, 255, 0.02);"
     />
     <div
       id="part-3"
-      style="width:100vw;height:100vh;text-align:center;background:#FFFBE9"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgb(255, 251, 233);"
     />
     <div
       id="part-4"
-      style="width:100vw;height:100vh;text-align:center;background:#F4EAD5"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgb(244, 234, 213);"
     />
     <div
       id="part-5"
-      style="width:100vw;height:100vh;text-align:center;background:#DAE2B6"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgb(218, 226, 182);"
     />
     <div
       id="part-6"
-      style="width:100vw;height:100vh;text-align:center;background:#CCD6A6"
+      style="width: 100vw; height: 100vh; text-align: center; background: rgb(204, 214, 166);"
     />
   </div>,
 ]
 `;
 
-exports[`renders ./components/anchor/demo/legacy-anchor.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
   <div
     class="ant-anchor ant-anchor-fixed"
@@ -337,10 +340,10 @@ exports[`renders ./components/anchor/demo/legacy-anchor.tsx extend context corre
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
   <div
     class="ant-anchor ant-anchor-fixed"
@@ -407,10 +410,10 @@ exports[`renders ./components/anchor/demo/onChange.tsx extend context correctly
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
   <div
     class="ant-anchor ant-anchor-fixed"
@@ -477,10 +480,10 @@ exports[`renders ./components/anchor/demo/onClick.tsx extend context correctly 1
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/static.tsx extend context correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
   <div
     class="ant-anchor ant-anchor-fixed"
@@ -547,7 +550,7 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1`
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
+exports[`renders components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
 <div>
   <div
     class="ant-row"
@@ -557,19 +560,19 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
     >
       <div
         id="part-1"
-        style="height:100vh;background:rgba(255,0,0,0.02);margin-top:30vh"
+        style="height: 100vh; background: rgba(255, 0, 0, 0.02); margin-top: 30vh;"
       >
         Part 1
       </div>
       <div
         id="part-2"
-        style="height:100vh;background:rgba(0,255,0,0.02)"
+        style="height: 100vh; background: rgba(0, 255, 0, 0.02);"
       >
         Part 2
       </div>
       <div
         id="part-3"
-        style="height:100vh;background:rgba(0,0,255,0.02)"
+        style="height: 100vh; background: rgba(0, 0, 255, 0.02);"
       >
         Part 3
       </div>
@@ -583,19 +586,20 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
         >
           <div
             class="ant-anchor-wrapper"
-            style="max-height:100vh"
+            style="max-height: 100vh;"
           >
             <div
               class="ant-anchor"
             >
               <span
-                class="ant-anchor-ink"
+                class="ant-anchor-ink ant-anchor-ink-visible"
+                style="top: 0px; height: 0px;"
               />
               <div
-                class="ant-anchor-link"
+                class="ant-anchor-link ant-anchor-link-active"
               >
                 <a
-                  class="ant-anchor-link-title"
+                  class="ant-anchor-link-title ant-anchor-link-title-active"
                   href="#part-1"
                   title="Part 1"
                 >
@@ -631,7 +635,7 @@ exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correc
     </div>
   </div>
   <div
-    style="height:30vh;background:rgba(0,0,0,0.85);position:fixed;top:0;left:0;width:75%;color:#FFF"
+    style="height: 30vh; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; width: 75%; color: rgb(255, 255, 255);"
   >
     <div>
       Fixed Top Block

components/anchor/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-row"
 >
@@ -78,7 +78,7 @@ exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height:100vh"
@@ -148,7 +148,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.tsx correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/horizontal.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/horizontal.tsx correctly 1`] = `
 Array [
   <div
     style="padding:20px"
@@ -267,7 +267,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height:100vh"
@@ -337,7 +337,7 @@ exports[`renders ./components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height:100vh"
@@ -407,7 +407,7 @@ exports[`renders ./components/anchor/demo/onChange.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height:100vh"
@@ -477,7 +477,7 @@ exports[`renders ./components/anchor/demo/onClick.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
 <div
   class="ant-anchor-wrapper"
   style="max-height:100vh"
@@ -547,7 +547,7 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
+exports[`renders components/anchor/demo/targetOffset.tsx correctly 1`] = `
 <div>
   <div
     class="ant-row"

components/anchor/index.en-US.md

@@ -68,3 +68,7 @@ We recommend using the items form instead.
 | href     | The target of hyperlink                   | string    |         |         |
 | target   | Specifies where to display the linked URL | string    |         |         |
 | title    | The content of hyperlink                  | ReactNode |         |         |
+
+## Design Token
+
+<ComponentTokenTable component="Anchor"></ComponentTokenTable>

components/anchor/index.zh-CN.md

@@ -69,3 +69,7 @@ group:
 | href   | 锚点链接                       | string    | -      |      |
 | target | 该属性指定在何处显示链接的资源 | string    | -      |      |
 | title  | 文字内容                       | ReactNode | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="Anchor"></ComponentTokenTable>

components/anchor/style/index.ts

@@ -69,7 +69,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
         },
       },
 
-      [`&:not(${componentCls}-horizontal)`]: {
+      [`&:not(${componentCls}-wrapper-horizontal)`]: {
         [componentCls]: {
           '&::before': {
             position: 'absolute',

components/app/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/app/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-app"
 >
@@ -9,7 +9,7 @@ exports[`renders ./components/app/demo/basic.tsx extend context correctly 1`] =
   >
     <div
       class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
     >
       <button
         class="ant-btn ant-btn-primary"
@@ -22,7 +22,7 @@ exports[`renders ./components/app/demo/basic.tsx extend context correctly 1`] =
     </div>
     <div
       class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
     >
       <button
         class="ant-btn ant-btn-primary"

components/app/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/app/demo/basic.tsx correctly 1`] = `
+exports[`renders components/app/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-app"
 >

components/app/__tests__/index.test.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import App from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
+import { render, waitFakeTimer } from '../../../tests/utils';
+import type { AppConfig } from '../context';
+import { AppConfigContext } from '../context';
 
 describe('App', () => {
   mountTest(App);
   rtlTest(App);
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   it('single', () => {
     // Sub page
-    const MyPage = () => {
+    const MyPage: React.FC = () => {
       const { message } = App.useApp();
       React.useEffect(() => {
         message.success('Good!');
@@ -20,7 +31,7 @@ describe('App', () => {
     };
 
     // Entry component
-    const MyApp = () => (
+    const MyApp: React.FC = () => (
       <App>
         <MyPage />
       </App>
@@ -30,4 +41,103 @@ describe('App', () => {
     expect(getByText('Hello World')).toBeTruthy();
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should work as message and notification config configured in app', async () => {
+    let consumedConfig: AppConfig | undefined;
+    const Consumer = () => {
+      const { message, notification } = App.useApp();
+      consumedConfig = React.useContext(AppConfigContext);
+
+      useEffect(() => {
+        message.success('Message 1');
+        message.success('Message 2');
+        notification.success({ message: 'Notification 1' });
+        notification.success({ message: 'Notification 2' });
+        notification.success({ message: 'Notification 3' });
+      }, [message, notification]);
+
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 1 }} notification={{ maxCount: 2 }}>
+        <Consumer />
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    await waitFakeTimer();
+
+    expect(consumedConfig?.message).toStrictEqual({ maxCount: 1 });
+    expect(consumedConfig?.notification).toStrictEqual({ maxCount: 2 });
+
+    expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
+    expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
+  });
+
+  it('should be a merged config configured in nested app', async () => {
+    let offsetConsumedConfig: AppConfig | undefined;
+    let maxCountConsumedConfig: AppConfig | undefined;
+    const OffsetConsumer = () => {
+      offsetConsumedConfig = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const MaxCountConsumer = () => {
+      maxCountConsumedConfig = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 1 }} notification={{ maxCount: 2 }}>
+        <App message={{ top: 32 }} notification={{ top: 96 }}>
+          <OffsetConsumer />
+        </App>
+        <MaxCountConsumer />
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    expect(offsetConsumedConfig?.message).toStrictEqual({ maxCount: 1, top: 32 });
+    expect(offsetConsumedConfig?.notification).toStrictEqual({ maxCount: 2, top: 96 });
+    expect(maxCountConsumedConfig?.message).toStrictEqual({ maxCount: 1 });
+    expect(maxCountConsumedConfig?.notification).toStrictEqual({ maxCount: 2 });
+  });
+
+  it('should respect config from props in priority', async () => {
+    let config: AppConfig | undefined;
+    const Consumer = () => {
+      config = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 10, top: 20 }} notification={{ maxCount: 30, bottom: 40 }}>
+        <App message={{ maxCount: 11 }} notification={{ bottom: 41 }}>
+          <Consumer />
+        </App>
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    expect(config?.message).toStrictEqual({ maxCount: 11, top: 20 });
+    expect(config?.notification).toStrictEqual({ maxCount: 30, bottom: 41 });
+  });
+
+  it('support className', () => {
+    const { container } = render(
+      <App className="test-class">
+        <div>test</div>
+      </App>,
+    );
+    expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveClass('test-class');
+  });
+
+  it('support style', () => {
+    const { container } = render(
+      <App style={{ color: 'blue' }}>
+        <div>test</div>
+      </App>,
+    );
+    expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
+  });
 });

components/app/context.ts

@@ -1,8 +1,15 @@
 import React from 'react';
-import type { MessageInstance } from '../message/interface';
-import type { NotificationInstance } from '../notification/interface';
+import type { MessageInstance, ConfigOptions as MessageConfig } from '../message/interface';
+import type { NotificationInstance, NotificationConfig } from '../notification/interface';
 import type { ModalStaticFunctions } from '../modal/confirm';
 
+export type AppConfig = {
+  message?: MessageConfig;
+  notification?: NotificationConfig;
+};
+
+export const AppConfigContext = React.createContext<AppConfig>({});
+
 type ModalType = Omit<ModalStaticFunctions, 'warn'>;
 export interface useAppProps {
   message: MessageInstance;

components/app/index.en-US.md

@@ -26,8 +26,8 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec
 App provides upstream and downstream method calls through `Context`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
 
 ```tsx
-import React from 'react';
 import { App } from 'antd';
+import React from 'react';
 
 const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
@@ -77,11 +77,10 @@ The App component can only use the token in the `ConfigProvider`, if you need to
 
 ```tsx
 // Entry component
-import React, { useEffect } from 'react';
 import { App } from 'antd';
 import type { MessageInstance } from 'antd/es/message/interface';
-import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 
 let message: MessageInstance;
 let notification: NotificationInstance;
@@ -100,9 +99,9 @@ export { message, notification, modal };
 
 ```tsx
 // sub page
-import React from 'react';
 import { Button, Space } from 'antd';
-import { message, modal, notification } from './store';
+import React from 'react';
+import { message } from './store';
 
 export default () => {
   const showMessage = () => {
@@ -118,3 +117,16 @@ export default () => {
   );
 };
 ```
+
+## API
+
+### App
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
+| notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
+
+## Design Token
+
+<ComponentTokenTable component="App"></ComponentTokenTable>

components/app/index.tsx

@@ -6,28 +6,49 @@ import { ConfigContext } from '../config-provider';
 import useMessage from '../message/useMessage';
 import useModal from '../modal/useModal';
 import useNotification from '../notification/useNotification';
-import type { useAppProps } from './context';
-import AppContext from './context';
+import type { AppConfig, useAppProps } from './context';
+import AppContext, { AppConfigContext } from './context';
 import useStyle from './style';
 
-export type AppProps = {
+export interface AppProps extends AppConfig {
+  style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
   prefixCls?: string;
   children?: ReactNode;
-};
+}
 
 const useApp = () => React.useContext<useAppProps>(AppContext);
 
-const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
-  const { prefixCls: customizePrefixCls, children, className, rootClassName } = props;
+const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    children,
+    className,
+    rootClassName,
+    message,
+    notification,
+    style,
+  } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const customClassName = classNames(hashId, prefixCls, className, rootClassName);
 
-  const [messageApi, messageContextHolder] = useMessage();
-  const [notificationApi, notificationContextHolder] = useNotification();
+  const appConfig = useContext<AppConfig>(AppConfigContext);
+
+  const mergedAppConfig = React.useMemo<AppConfig>(
+    () => ({
+      message: { ...appConfig.message, ...message },
+      notification: { ...appConfig.notification, ...notification },
+    }),
+    [message, notification, appConfig.message, appConfig.message],
+  );
+
+  const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.message);
+  const [notificationApi, notificationContextHolder] = useNotification(
+    mergedAppConfig.notification,
+  );
   const [ModalApi, ModalContextHolder] = useModal();
 
   const memoizedContextValue = React.useMemo<useAppProps>(
@@ -41,12 +62,14 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
 
   return wrapSSR(
     <AppContext.Provider value={memoizedContextValue}>
-      <div className={customClassName}>
-        {ModalContextHolder}
-        {messageContextHolder}
-        {notificationContextHolder}
-        {children}
-      </div>
+      <AppConfigContext.Provider value={mergedAppConfig}>
+        <div className={customClassName} style={style}>
+          {ModalContextHolder}
+          {messageContextHolder}
+          {notificationContextHolder}
+          {children}
+        </div>
+      </AppConfigContext.Provider>
     </AppContext.Provider>,
   );
 };

components/app/index.zh-CN.md

@@ -119,3 +119,16 @@ export default () => {
   );
 };
 ```
+
+## API
+
+### App
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
+| notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
+
+## Design Token
+
+<ComponentTokenTable component="App"></ComponentTokenTable>

components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/auto-complete/demo/basic.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
@@ -16,6 +16,7 @@ Array [
           aria-activedescendant="undefined_list_0"
           aria-autocomplete="list"
           aria-controls="undefined_list"
+          aria-expanded="false"
           aria-haspopup="listbox"
           aria-owns="undefined_list"
           autocomplete="off"
@@ -48,6 +49,7 @@ Array [
           aria-activedescendant="undefined_list_0"
           aria-autocomplete="list"
           aria-controls="undefined_list"
+          aria-expanded="false"
           aria-haspopup="listbox"
           aria-owns="undefined_list"
           autocomplete="off"
@@ -67,7 +69,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/auto-complete/demo/certain-category.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width:250px"
@@ -88,6 +90,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.tsx correctly
             aria-activedescendant="undefined_list_0"
             aria-autocomplete="list"
             aria-controls="undefined_list"
+            aria-expanded="false"
             aria-haspopup="listbox"
             aria-owns="undefined_list"
             autocomplete="off"
@@ -135,7 +138,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.tsx correctly
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/custom.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/custom.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width:200px"
@@ -150,6 +153,7 @@ exports[`renders ./components/auto-complete/demo/custom.tsx correctly 1`] = `
         aria-activedescendant="undefined_list_0"
         aria-autocomplete="list"
         aria-controls="undefined_list"
+        aria-expanded="false"
         aria-haspopup="listbox"
         aria-owns="undefined_list"
         autocomplete="off"
@@ -167,7 +171,7 @@ exports[`renders ./components/auto-complete/demo/custom.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
   style="margin:0 auto"
@@ -210,6 +214,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                     aria-activedescendant="undefined_list_0"
                     aria-autocomplete="list"
                     aria-controls="undefined_list"
+                    aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-owns="undefined_list"
                     autocomplete="off"
@@ -266,6 +271,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                   <input
                     aria-autocomplete="list"
                     aria-controls="undefined_list"
+                    aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-owns="undefined_list"
                     autocomplete="off"
@@ -355,6 +361,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                     <input
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -411,6 +418,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                       aria-activedescendant="undefined_list_0"
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -472,6 +480,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                       aria-activedescendant="undefined_list_0"
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -556,6 +565,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                     <input
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -615,6 +625,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                         aria-activedescendant="undefined_list_0"
                         aria-autocomplete="list"
                         aria-controls="undefined_list"
+                        aria-expanded="false"
                         aria-haspopup="listbox"
                         aria-owns="undefined_list"
                         autocomplete="off"
@@ -700,6 +711,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                     <input
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -762,6 +774,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                           aria-activedescendant="undefined_list_0"
                           aria-autocomplete="list"
                           aria-controls="undefined_list"
+                          aria-expanded="false"
                           aria-haspopup="listbox"
                           aria-owns="undefined_list"
                           autocomplete="off"
@@ -853,6 +866,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                     <input
                       aria-autocomplete="list"
                       aria-controls="undefined_list"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-owns="undefined_list"
                       autocomplete="off"
@@ -915,6 +929,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
                           aria-activedescendant="undefined_list_0"
                           aria-autocomplete="list"
                           aria-controls="undefined_list"
+                          aria-expanded="false"
                           aria-haspopup="listbox"
                           aria-owns="undefined_list"
                           autocomplete="off"
@@ -995,7 +1010,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.tsx correctly 1`] =
 </form>
 `;
 
-exports[`renders ./components/auto-complete/demo/non-case-sensitive.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/non-case-sensitive.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width:200px"
@@ -1010,6 +1025,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.tsx correctl
         aria-activedescendant="undefined_list_0"
         aria-autocomplete="list"
         aria-controls="undefined_list"
+        aria-expanded="false"
         aria-haspopup="listbox"
         aria-owns="undefined_list"
         autocomplete="off"
@@ -1028,7 +1044,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.tsx correctl
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/options.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/options.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
   style="width:200px"
@@ -1043,6 +1059,7 @@ exports[`renders ./components/auto-complete/demo/options.tsx correctly 1`] = `
         aria-activedescendant="undefined_list_0"
         aria-autocomplete="list"
         aria-controls="undefined_list"
+        aria-expanded="false"
         aria-haspopup="listbox"
         aria-owns="undefined_list"
         autocomplete="off"
@@ -1061,7 +1078,7 @@ exports[`renders ./components/auto-complete/demo/options.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/render-panel.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/render-panel.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="display:flex"
@@ -1128,7 +1145,7 @@ exports[`renders ./components/auto-complete/demo/render-panel.tsx correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/status.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/status.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -1151,6 +1168,7 @@ exports[`renders ./components/auto-complete/demo/status.tsx correctly 1`] = `
             aria-activedescendant="undefined_list_0"
             aria-autocomplete="list"
             aria-controls="undefined_list"
+            aria-expanded="false"
             aria-haspopup="listbox"
             aria-owns="undefined_list"
             autocomplete="off"
@@ -1183,6 +1201,7 @@ exports[`renders ./components/auto-complete/demo/status.tsx correctly 1`] = `
             aria-activedescendant="undefined_list_0"
             aria-autocomplete="list"
             aria-controls="undefined_list"
+            aria-expanded="false"
             aria-haspopup="listbox"
             aria-owns="undefined_list"
             autocomplete="off"
@@ -1201,7 +1220,7 @@ exports[`renders ./components/auto-complete/demo/status.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/auto-complete/demo/uncertain-category.tsx correctly 1`] = `
+exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly 1`] = `
 <div
   class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
   style="width:300px"
@@ -1222,6 +1241,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.tsx correctl
             aria-activedescendant="undefined_list_0"
             aria-autocomplete="list"
             aria-controls="undefined_list"
+            aria-expanded="false"
             aria-haspopup="listbox"
             aria-owns="undefined_list"
             autocomplete="off"

components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
         aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
         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"

components/auto-complete/index.en-US.md

@@ -72,6 +72,10 @@ The differences with Select are:
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
 
+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ
 
 ### Why doesn't the text composition system work well with onSearch in controlled mode?

components/auto-complete/index.tsx

@@ -144,6 +144,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
   return (
     <Select
       ref={ref}
+      showArrow={false}
       {...omit(props, ['dataSource', 'dropdownClassName'])}
       prefixCls={prefixCls}
       popupClassName={popupClassName || dropdownClassName}

components/auto-complete/index.zh-CN.md

@@ -74,6 +74,10 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ
 
 ### 为何受控状态下使用 onSearch 无法输入中文？

components/avatar/__tests__/Avatar.test.tsx

@@ -53,7 +53,7 @@ describe('Avatar Render', () => {
 
   it('should handle onError correctly', () => {
     const LOAD_FAILURE_SRC = 'http://error.url/';
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const Foo: React.FC = () => {
       const [avatarSrc, setAvatarSrc] = useState<typeof LOAD_FAILURE_SRC | typeof LOAD_SUCCESS_SRC>(
         LOAD_FAILURE_SRC,
@@ -75,7 +75,7 @@ describe('Avatar Render', () => {
 
   it('should show image on success after a failure state', () => {
     const LOAD_FAILURE_SRC = 'http://error.url';
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
 
     const div = global.document.createElement('div');
     global.document.body.appendChild(div);
@@ -172,7 +172,7 @@ describe('Avatar Render', () => {
   });
 
   it('should exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const crossOrigin = 'anonymous';
     const { container } = render(
       <Avatar src={LOAD_SUCCESS_SRC} crossOrigin={crossOrigin}>
@@ -184,7 +184,7 @@ describe('Avatar Render', () => {
   });
 
   it('should not exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://xsgames.co/randomusers/avatar.php?g=pixel';
     const { container } = render(<Avatar src={LOAD_SUCCESS_SRC}>crossorigin</Avatar>);
     expect(container.querySelector('img')?.crossOrigin).toBeFalsy();
     expect(container.querySelector('img')?.crossOrigin).toEqual('');

components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -140,7 +140,7 @@ exports[`Avatar Render should handle onError correctly 1`] = `
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joesch.moe/api/v1/random"
+    src="https://xsgames.co/randomusers/avatar.php?g=pixel"
   />
 </span>
 `;
@@ -163,7 +163,7 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joesch.moe/api/v1/random"
+    src="https://xsgames.co/randomusers/avatar.php?g=pixel"
   />
 </span>
 `;

components/avatar/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/avatar/demo/badge.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -90,7 +90,7 @@ exports[`renders ./components/avatar/demo/badge.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/avatar/demo/basic.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -342,7 +342,7 @@ exports[`renders ./components/avatar/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/avatar/demo/dynamic.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/dynamic.tsx correctly 1`] = `
 Array [
   <span
     class="ant-avatar ant-avatar-lg ant-avatar-circle"
@@ -376,7 +376,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/fallback.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/fallback.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -406,7 +406,7 @@ exports[`renders ./components/avatar/demo/fallback.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/avatar/demo/group.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/group.tsx correctly 1`] = `
 Array [
   <div
     class="ant-avatar-group"
@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=1"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1"
       />
     </span>
     <a
@@ -493,7 +493,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=2"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2"
       />
     </span>
     <span
@@ -530,7 +530,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random?key=3"
+        src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3"
       />
     </span>
     <span
@@ -596,7 +596,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/responsive.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/responsive.tsx correctly 1`] = `
 <span
   class="ant-avatar ant-avatar-circle ant-avatar-icon"
 >
@@ -622,7 +622,7 @@ exports[`renders ./components/avatar/demo/responsive.tsx correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/avatar/demo/toggle-debug.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/toggle-debug.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -717,7 +717,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/avatar/demo/type.tsx correctly 1`] = `
+exports[`renders components/avatar/demo/type.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap:wrap;margin-bottom:-16px"

components/avatar/avatar.tsx

@@ -24,7 +24,7 @@ export interface AvatarProps {
   src?: React.ReactNode;
   /** Srcset of image avatar */
   srcSet?: string;
-  draggable?: boolean;
+  draggable?: boolean | 'true' | 'false';
   /** Icon to be used in avatar */
   icon?: React.ReactNode;
   style?: React.CSSProperties;
@@ -36,7 +36,7 @@ export interface AvatarProps {
   crossOrigin?: '' | 'anonymous' | 'use-credentials';
   onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
   /* callback when img load error */
-  /* return false to prevent Avatar show default fallback behavior, then you can do fallback by your self */
+  /* return false to prevent Avatar show default fallback behavior, then you can do fallback by yourself */
   onError?: () => boolean;
 }
 

components/avatar/demo/group.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 const App: React.FC = () => (
   <>
     <Avatar.Group>
-      <Avatar src="https://joesch.moe/api/v1/random?key=1" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
       <a href="https://ant.design">
         <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       </a>
@@ -16,7 +16,7 @@ const App: React.FC = () => (
     </Avatar.Group>
     <Divider />
     <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-      <Avatar src="https://joesch.moe/api/v1/random?key=2" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
@@ -29,7 +29,7 @@ const App: React.FC = () => (
       size="large"
       maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
     >
-      <Avatar src="https://joesch.moe/api/v1/random?key=3" />
+      <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />

components/avatar/index.en-US.md

@@ -37,7 +37,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
 | src | The address of the image for an image avatar or image element | string \| ReactNode | - | ReactNode: 4.8.0 |
 | srcSet | A list of sources to use for different screen resolutions | string | - |  |
-| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - |  |
+| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | true |  |
 | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
 | onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
 
@@ -52,3 +52,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>

components/avatar/index.zh-CN.md

@@ -42,7 +42,7 @@ group:
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
 | src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
 | srcSet | 设置图片类头像响应式资源地址 | string | - |  |
-| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - |  |
+| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | true |  |
 | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.17.0 |
 | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
 
@@ -57,3 +57,7 @@ group:
 | maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>

components/back-top/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/back-top/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-back-top"
@@ -15,9 +15,9 @@ Array [
 ]
 `;
 
-exports[`renders ./components/back-top/demo/custom.tsx extend context correctly 1`] = `
+exports[`renders components/back-top/demo/custom.tsx extend context correctly 1`] = `
 <div
-  style="height:600vh;padding:8px"
+  style="height: 600vh; padding: 8px;"
 >
   <div>
     Scroll to bottom

components/back-top/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/back-top/demo/basic.tsx correctly 1`] = `
+exports[`renders components/back-top/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="ant-back-top"
@@ -15,7 +15,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/back-top/demo/custom.tsx correctly 1`] = `
+exports[`renders components/back-top/demo/custom.tsx correctly 1`] = `
 <div
   style="height:600vh;padding:8px"
 >

components/badge/ScrollNumber.tsx

@@ -21,7 +21,7 @@ export interface ScrollNumberState {
   count?: string | number | null;
 }
 
-const ScrollNumber = React.forwardRef<React.Ref<HTMLDivElement>, ScrollNumberProps>(
+const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
   (
     {
       prefixCls: customizePrefixCls,

components/badge/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
+exports[`renders components/badge/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -103,7 +103,7 @@ exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/change.tsx correctly 1`] = `
+exports[`renders components/badge/demo/change.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
 >
@@ -291,7 +291,7 @@ exports[`renders ./components/badge/demo/change.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/colorful.tsx correctly 1`] = `
+exports[`renders components/badge/demo/colorful.tsx correctly 1`] = `
 Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
@@ -615,7 +615,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
+exports[`renders components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap:wrap;margin-bottom:-16px"
@@ -1143,7 +1143,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
 </div>
 `;
 
-exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
+exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1200,7 +1200,7 @@ exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
+exports[`renders components/badge/demo/link.tsx correctly 1`] = `
 <a
   href="#"
 >
@@ -1235,7 +1235,7 @@ exports[`renders ./components/badge/demo/link.tsx correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
+exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
   style="flex-wrap:wrap;margin-bottom:-16px"
@@ -1578,7 +1578,7 @@ exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = `
+exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1729,7 +1729,7 @@ exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = `
+exports[`renders components/badge/demo/offset.tsx correctly 1`] = `
 <span
   class="ant-badge"
 >
@@ -1761,7 +1761,7 @@ exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = `
 </span>
 `;
 
-exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
+exports[`renders components/badge/demo/overflow.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -1882,7 +1882,7 @@ exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/ribbon.tsx correctly 1`] = `
+exports[`renders components/badge/demo/ribbon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -1965,7 +1965,11 @@ exports[`renders ./components/badge/demo/ribbon.tsx correctly 1`] = `
         <span
           class="ant-ribbon-text"
         >
-          Hippies
+          <div>
+            Hippies
+            <br />
+            Happy
+          </div>
         </span>
         <div
           class="ant-ribbon-corner"
@@ -2233,7 +2237,7 @@ exports[`renders ./components/badge/demo/ribbon.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `
+exports[`renders components/badge/demo/ribbon-debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
   style="width:100%"
@@ -2396,7 +2400,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/size.tsx correctly 1`] = `
+exports[`renders components/badge/demo/size.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -2468,7 +2472,7 @@ exports[`renders ./components/badge/demo/size.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/badge/demo/status.tsx correctly 1`] = `
+exports[`renders components/badge/demo/status.tsx correctly 1`] = `
 Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
@@ -2625,7 +2629,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/title.tsx correctly 1`] = `
+exports[`renders components/badge/demo/title.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >

components/badge/__tests__/index.test.tsx

@@ -85,7 +85,7 @@ describe('Badge', () => {
       fireEvent.mouseEnter(container.querySelector('.ant-badge')!);
       jest.runAllTimers();
     });
-    expect((container.firstChild! as HTMLElement).classList).toContain('ant-tooltip-open');
+    expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
   });
 
   it('should render when count is changed', () => {

components/badge/demo/ribbon.tsx

@@ -8,7 +8,12 @@ const App: React.FC = () => (
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-    <Badge.Ribbon text="Hippies" color="pink">
+    <Badge.Ribbon text={
+        <div>
+          Hippies <br />
+          Happy
+        </div>
+      } color="pink">
       <Card title="Pushes open the window" size="small">
         and raises the spyglass.
       </Card>

components/badge/index.en-US.md

@@ -57,3 +57,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | color | Customize Ribbon color | string | - |  |
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>

components/badge/index.zh-CN.md

@@ -58,3 +58,7 @@ group: 数据展示
 | color | 自定义缎带的颜色 | string | - |  |
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>

components/badge/style/index.ts

@@ -1,8 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genPresetColor, resetComponent } from '../../style';
+import { genComponentStyleHook, mergeToken, genPresetColor } from '../../theme/internal';
+import { resetComponent } from '../../style';
 
 interface BadgeToken extends FullToken<'Badge'> {
   badgeFontHeight: number;
@@ -284,7 +284,6 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
       ...resetComponent(token),
       position: 'absolute',
       top: marginXS,
-      height: badgeFontHeight,
       padding: `0 ${token.paddingXS}px`,
       color: token.colorPrimary,
       lineHeight: `${badgeFontHeight}px`,

components/breadcrumb/Breadcrumb.tsx

@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import type { DropdownProps } from '../dropdown';
-import Menu from '../menu';
 import { cloneElement } from '../_util/reactNode';
 import warning from '../_util/warning';
 import type { BreadcrumbItemProps } from './BreadcrumbItem';
@@ -11,63 +10,94 @@ import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
 import useStyle from './style';
+import useItems from './useItems';
 
+/** @deprecated New of Breadcrumb using `items` instead of `routes` */
 export interface Route {
   path: string;
   breadcrumbName: string;
   children?: Omit<Route, 'children'>[];
 }
 
-export interface BreadcrumbProps {
+export interface BreadcrumbItemType {
+  key?: React.Key;
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+  title: React.ReactNode;
+  menu?: BreadcrumbItemProps['menu'];
+  /** @deprecated Please use `menu` instead */
+  overlay?: React.ReactNode;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+}
+export interface BreadcrumbSeparatorType {
+  type: 'separator';
+  separator?: React.ReactNode;
+}
+
+export type ItemType = BreadcrumbItemType | BreadcrumbSeparatorType;
+
+type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
+
+export interface BaseBreadcrumbProps {
   prefixCls?: string;
-  routes?: Route[];
   params?: any;
   separator?: React.ReactNode;
-  itemRender?: (
-    route: Route,
-    params: any,
-    routes: Array<Route>,
-    paths: Array<string>,
-  ) => React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
   children?: React.ReactNode;
 }
 
-function getBreadcrumbName(route: Route, params: any) {
-  if (!route.breadcrumbName) {
+export interface LegacyBreadcrumbProps extends BaseBreadcrumbProps {
+  /** @deprecated Please use `items` instead */
+  routes: Route[];
+
+  itemRender?: (route: Route, params: any, routes: Route[], paths: string[]) => React.ReactNode;
+}
+
+export interface NewBreadcrumbProps extends BaseBreadcrumbProps {
+  items: ItemType[];
+
+  itemRender?: (
+    route: ItemType,
+    params: any,
+    routes: ItemType[],
+    paths: string[],
+  ) => React.ReactNode;
+}
+
+export type BreadcrumbProps = BaseBreadcrumbProps | LegacyBreadcrumbProps | NewBreadcrumbProps;
+
+function getBreadcrumbName(route: InternalRouteType, params: any) {
+  if (route.title === undefined) {
     return null;
   }
   const paramsKeys = Object.keys(params).join('|');
-  const name = route.breadcrumbName.replace(
-    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement,
-  );
-  return name;
+  return typeof route.title === 'object'
+    ? route.title
+    : String(route.title).replace(
+        new RegExp(`:(${paramsKeys})`, 'g'),
+        (replacement, key) => params[key] || replacement,
+      );
 }
 
-function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
-  const isLastItem = routes.indexOf(route) === routes.length - 1;
-  const name = getBreadcrumbName(route, params);
-  return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
-}
-
-const getPath = (path: string, params: any) => {
-  path = (path || '').replace(/^\//, '');
-  Object.keys(params).forEach((key) => {
-    path = path.replace(`:${key}`, params[key]);
-  });
-  return path;
-};
-
-const addChildPath = (paths: string[], childPath: string, params: any) => {
-  const originalPaths = [...paths];
-  const path = getPath(childPath || '', params);
-  if (path) {
-    originalPaths.push(path);
+const getPath = (params: any, path?: string) => {
+  if (path === undefined) {
+    return path;
   }
-  return originalPaths;
+
+  let mergedPath = (path || '').replace(/^\//, '');
+  Object.keys(params).forEach((key) => {
+    mergedPath = mergedPath.replace(`:${key}`, params[key]!);
+  });
+  return mergedPath;
 };
 
 type CompoundedComponent = React.FC<BreadcrumbProps> & {
@@ -75,64 +105,118 @@ type CompoundedComponent = React.FC<BreadcrumbProps> & {
   Separator: typeof BreadcrumbSeparator;
 };
 
-const Breadcrumb: CompoundedComponent = ({
-  prefixCls: customizePrefixCls,
-  separator = '/',
-  style,
-  className,
-  rootClassName,
-  routes,
-  children,
-  itemRender = defaultItemRender,
-  params = {},
-  ...restProps
-}) => {
+const Breadcrumb: CompoundedComponent = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    separator = '/',
+    style,
+    className,
+    rootClassName,
+    routes: legacyRoutes,
+    items,
+    children,
+    itemRender,
+    params = {},
+    ...restProps
+  } = props as LegacyBreadcrumbProps & NewBreadcrumbProps;
+
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   let crumbs: React.ReactNode;
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  if (routes && routes.length > 0) {
+  const mergedItems = useItems(items, legacyRoutes);
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(!legacyRoutes, 'Breadcrumb', '`routes` is deprecated. Please use `items` instead.');
+  }
+
+  const mergedItemRender =
+    itemRender ||
+    ((route: BreadcrumbItemType) => {
+      const name = getBreadcrumbName(route, params);
+
+      return name;
+    });
+
+  if (mergedItems && mergedItems.length > 0) {
     // generated by route
     const paths: string[] = [];
-    crumbs = routes.map((route) => {
-      const path = getPath(route.path, params);
 
-      if (path) {
-        paths.push(path);
-      }
-      // generated overlay by route.children
-      let overlay: DropdownProps['overlay'];
-      if (route.children && route.children.length) {
-        overlay = (
-          <Menu
-            items={route.children.map((child) => ({
-              key: child.path || child.breadcrumbName,
-              label: itemRender(child, params, routes, addChildPath(paths, child.path, params)),
-            }))}
-          />
-        );
+    const itemRenderRoutes: any = items || legacyRoutes;
+
+    crumbs = mergedItems.map((item, index) => {
+      const {
+        path,
+        key,
+        type,
+        menu,
+        overlay,
+        onClick,
+        className: itemClassName,
+        separator: itemSeparator,
+      } = item;
+      const mergedPath = getPath(params, path);
+
+      if (mergedPath !== undefined) {
+        paths.push(mergedPath);
       }
 
-      const itemProps: BreadcrumbItemProps = { separator };
+      const mergedKey = key ?? index;
 
-      if (overlay) {
-        itemProps.overlay = overlay;
+      if (type === 'separator') {
+        return <BreadcrumbSeparator key={mergedKey}>{itemSeparator}</BreadcrumbSeparator>;
+      }
+
+      const itemProps: BreadcrumbItemProps = {};
+      const isLastItem = index === mergedItems.length - 1;
+
+      if (menu) {
+        itemProps.menu = menu;
+      } else if (overlay) {
+        itemProps.overlay = overlay as any;
+      }
+
+      if (itemClassName) {
+        itemProps.className = itemClassName;
+      }
+
+      let { href } = item;
+      if (paths.length && mergedPath !== undefined) {
+        href = `#/${paths.join('/')}`;
       }
 
       return (
-        <BreadcrumbItem {...itemProps} key={path || route.breadcrumbName}>
-          {itemRender(route, params, routes, paths)}
+        <BreadcrumbItem
+          key={mergedKey}
+          {...itemProps}
+          {...pickAttrs(item, {
+            data: true,
+            aria: true,
+          })}
+          href={href}
+          separator={isLastItem ? '' : separator}
+          onClick={onClick}
+        >
+          {mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths)}
         </BreadcrumbItem>
       );
     });
   } else if (children) {
+    const childrenLength = toArray(children).length;
     crumbs = toArray(children).map((element: any, index) => {
       if (!element) {
         return element;
       }
-
+      // =================== Warning =====================
+      if (process.env.NODE_ENV !== 'production') {
+        warning(
+          !element,
+          'Breadcrumb',
+          '`Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
+        );
+      }
       warning(
         element.type &&
           (element.type.__ANT_BREADCRUMB_ITEM === true ||
@@ -140,9 +224,9 @@ const Breadcrumb: CompoundedComponent = ({
         'Breadcrumb',
         "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
       );
-
+      const isLastItem = index === childrenLength - 1;
       return cloneElement(element, {
-        separator,
+        separator: isLastItem ? '' : separator,
         key: index,
       });
     });

components/breadcrumb/BreadcrumbItem.tsx

@@ -4,17 +4,32 @@ import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { DropdownProps } from '../dropdown/dropdown';
 import Dropdown from '../dropdown/dropdown';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export interface BreadcrumbItemProps {
-  prefixCls?: string;
+export interface SeparatorType {
   separator?: React.ReactNode;
+  key?: React.Key;
+}
+
+type MenuType = NonNullable<DropdownProps['menu']>;
+interface MenuItem {
+  key?: React.Key;
+  title?: React.ReactNode;
+  label?: React.ReactNode;
+  path?: string;
   href?: string;
-  menu?: DropdownProps['menu'];
+}
+
+export interface BreadcrumbItemProps extends SeparatorType {
+  prefixCls?: string;
+  href?: string;
+  menu?: Omit<MenuType, 'items'> & {
+    items?: MenuItem[];
+  };
   dropdownProps?: DropdownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
   children?: React.ReactNode;
-
   // Deprecated
   /** @deprecated Please use `menu` instead */
   overlay?: DropdownProps['overlay'];
@@ -22,7 +37,7 @@ export interface BreadcrumbItemProps {
 type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
   __ANT_BREADCRUMB_ITEM: boolean;
 };
-const BreadcrumbItem: CompoundedComponent = (props) => {
+const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',
@@ -30,6 +45,7 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
     menu,
     overlay,
     dropdownProps,
+    href,
     ...restProps
   } = props;
 
@@ -51,11 +67,31 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
       const mergeDropDownProps: DropdownProps = {
         ...dropdownProps,
       };
-      if ('overlay' in props) {
+
+      if (menu) {
+        const { items, ...menuProps } = menu || {};
+        mergeDropDownProps.menu = {
+          ...menuProps,
+          items: items?.map(({ key, title, label, path, ...itemProps }, index) => {
+            let mergedLabel: React.ReactNode = label ?? title;
+
+            if (path) {
+              mergedLabel = <a href={`${href}${path}`}>{mergedLabel}</a>;
+            }
+
+            return {
+              ...itemProps,
+              key: key ?? index,
+              label: mergedLabel as string,
+            };
+          }),
+        };
+      } else if (overlay) {
         mergeDropDownProps.overlay = overlay;
       }
+
       return (
-        <Dropdown menu={menu} placement="bottom" {...mergeDropDownProps}>
+        <Dropdown placement="bottom" {...mergeDropDownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />
@@ -67,9 +103,9 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
   };
 
   let link: React.ReactNode;
-  if ('href' in restProps) {
+  if (href !== undefined) {
     link = (
-      <a className={`${prefixCls}-link`} {...restProps}>
+      <a className={`${prefixCls}-link`} href={href} {...restProps}>
         {children}
       </a>
     );
@@ -85,10 +121,10 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
   link = renderBreadcrumbNode(link);
   if (children !== undefined && children !== null) {
     return (
-      <li>
-        {link}
-        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
-      </li>
+      <>
+        <li>{link}</li>
+        {separator && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+      </>
     );
   }
   return null;

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -12,7 +12,7 @@ const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
 
   return (
     <li className={`${prefixCls}-separator`} aria-hidden="true">
-      {children || '/'}
+      {children === '' ? children : children || '/'}
     </li>
   );
 };

components/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -3,7 +3,8 @@ import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render } from '../../../tests/utils';
-import type { Route } from '../Breadcrumb';
+import { resetWarned } from '../../_util/warning';
+import type { ItemType } from '../Breadcrumb';
 import Breadcrumb from '../index';
 
 describe('Breadcrumb', () => {
@@ -33,22 +34,96 @@ describe('Breadcrumb', () => {
     );
   });
 
-  it('overlay deprecation warning', () => {
+  it('warns on routes', () => {
+    render(
+      <Breadcrumb
+        routes={[
+          {
+            breadcrumbName: 'yyy',
+          } as any,
+        ]}
+      />,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Breadcrumb] `routes` is deprecated. Please use `items` instead.',
+    );
+  });
+
+  it('should render correct', () => {
+    const { asFragment } = render(
+      <Breadcrumb
+        items={[
+          {
+            path: '',
+            title: <span>xxx</span>,
+          },
+          {
+            title: 'yyy',
+          },
+        ]}
+      />,
+    );
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  describe('overlay deprecation warning set', () => {
+    it('legacy jsx', () => {
+      resetWarned();
+      render(
+        <Breadcrumb>
+          <Breadcrumb.Item overlay={<div>menu</div>}>
+            <a href="">General</a>
+          </Breadcrumb.Item>
+        </Breadcrumb>,
+      );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      );
+    });
+
+    it('items', () => {
+      resetWarned();
+      render(
+        <Breadcrumb
+          items={[
+            {
+              overlay: <div>menu</div>,
+              title: 'General',
+            },
+          ]}
+        />,
+      );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      );
+    });
+  });
+
+  it('Breadcrumb.Item deprecation warning', () => {
     render(
       <Breadcrumb>
-        <Breadcrumb.Item overlay={<div>menu</div>}>
-          <a href="">General</a>
-        </Breadcrumb.Item>
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
       </Breadcrumb>,
     );
     expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
+    );
+  });
+
+  it('Breadcrumb.separator deprecation warning', () => {
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Separator>:</Breadcrumb.Separator>
+      </Breadcrumb>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
     );
   });
 
   // https://github.com/ant-design/ant-design/issues/40204
   it('wrong overlay deprecation warning in Dropdown', () => {
-    const items = [
+    const menuItems = [
       {
         key: '1',
         label: (
@@ -59,11 +134,14 @@ describe('Breadcrumb', () => {
       },
     ];
     render(
-      <Breadcrumb>
-        <Breadcrumb.Item menu={{ items }}>
-          <a href="">General</a>
-        </Breadcrumb.Item>
-      </Breadcrumb>,
+      <Breadcrumb
+        items={[
+          {
+            menu: { items: menuItems },
+            title: <a href="">General</a>,
+          },
+        ]}
+      />,
     );
     expect(errorSpy).not.toHaveBeenCalledWith(
       'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
@@ -79,18 +157,23 @@ describe('Breadcrumb', () => {
         {undefined}
       </Breadcrumb>,
     );
-    expect(errorSpy).not.toHaveBeenCalled();
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/5542
   it('should not display Breadcrumb Item when its children is falsy', () => {
     const { asFragment } = render(
-      <Breadcrumb>
-        <Breadcrumb.Item />
-        <Breadcrumb.Item>xxx</Breadcrumb.Item>
-        <Breadcrumb.Item>yyy</Breadcrumb.Item>
-      </Breadcrumb>,
+      <Breadcrumb
+        items={[
+          {} as any,
+          {
+            title: 'xxx',
+          },
+          {
+            title: 'yyy',
+          },
+        ]}
+      />,
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
@@ -111,53 +194,66 @@ describe('Breadcrumb', () => {
   });
 
   it('should render a menu', () => {
-    const routes: Route[] = [
+    const items: ItemType[] = [
       {
         path: 'index',
-        breadcrumbName: 'home',
+        title: 'home',
       },
       {
         path: 'first',
-        breadcrumbName: 'first',
-        children: [
-          {
-            path: '/general',
-            breadcrumbName: 'General',
-          },
-          {
-            path: '/layout',
-            breadcrumbName: 'Layout',
-          },
-          {
-            path: '/navigation',
-            breadcrumbName: 'Navigation',
-          },
-        ],
+        title: 'first',
+        menu: {
+          items: [
+            {
+              path: '/general',
+              title: 'General',
+            },
+            {
+              path: '/layout',
+              title: 'Layout',
+            },
+            {
+              path: '/navigation',
+              title: 'Navigation',
+            },
+          ],
+        },
       },
       {
         path: 'second',
-        breadcrumbName: 'second',
+        title: 'second',
       },
       {
         path: 'third',
-        breadcrumbName: '',
+        title: '',
       },
     ];
-    const { asFragment } = render(<Breadcrumb routes={routes} />);
+    const { asFragment } = render(<Breadcrumb items={items} />);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it('should accept undefined routes', () => {
-    const { asFragment } = render(<Breadcrumb routes={undefined} />);
+  it('should accept undefined items', () => {
+    const { asFragment } = render(<Breadcrumb items={undefined!} />);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should support custom attribute', () => {
     const { asFragment } = render(
-      <Breadcrumb data-custom="custom">
-        <Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
-        <Breadcrumb.Item>yyy</Breadcrumb.Item>
-      </Breadcrumb>,
+      (
+        <Breadcrumb
+          items={[
+            {
+              title: 'xxx',
+              // @ts-ignore
+              'data-custom': 'custom-item',
+            },
+            {
+              title: 'yyy',
+            },
+          ]}
+          data-custom="custom"
+        />
+      ) as React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
@@ -194,19 +290,42 @@ describe('Breadcrumb', () => {
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
-  it('should support string `0` and number `0`', () => {
+
+  it('should support Breadcrumb.Item customized menu items key', () => {
+    const key = 'test-key';
     const { container } = render(
       <Breadcrumb>
-        <Breadcrumb.Item>{0}</Breadcrumb.Item>
-        <Breadcrumb.Item>0</Breadcrumb.Item>
+        <Breadcrumb.Item dropdownProps={{ open: true }} menu={{ items: [{ key }] }}>
+          test-item
+        </Breadcrumb.Item>
       </Breadcrumb>,
     );
+
+    const item = container.querySelector<HTMLElement>('.ant-dropdown-menu-item');
+
+    expect(item?.getAttribute('data-menu-id')?.endsWith(key)).toBeTruthy();
+  });
+
+  it('should support string `0` and number `0`', () => {
+    const { container } = render(
+      <Breadcrumb
+        items={[
+          {
+            title: 0,
+          },
+          {
+            title: '0',
+          },
+        ]}
+      />,
+    );
     expect(container.querySelectorAll('.ant-breadcrumb-link')[0].textContent).toBe('0');
     expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe('0');
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should console Error when `overlay` in props', () => {
+    resetWarned();
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     render(
       <Breadcrumb>
@@ -221,8 +340,26 @@ describe('Breadcrumb', () => {
 
   it('should not console Error when `overlay` not in props', () => {
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<Breadcrumb routes={[{ path: '/', breadcrumbName: 'Test' }]} />);
+    render(<Breadcrumb items={[{ path: '/', title: 'Test' }]} />);
     expect(errSpy).not.toHaveBeenCalled();
     errSpy.mockRestore();
   });
+
+  it('should use `onClick`', async () => {
+    const onClick = jest.fn();
+    const wrapper = render(<Breadcrumb items={[{ title: 'test', onClick }]} />);
+    const item = await wrapper.findByText('test');
+    item.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+  it('should use `className`', async () => {
+    const testClassName = 'testClassName';
+    const wrapper = render(<Breadcrumb items={[{ title: 'test', className: testClassName }]} />);
+    const item = await wrapper.findByText('test');
+    expect(item).toHaveClass(testClassName);
+  });
+
+  it('Breadcrumb.Item menu type', () => {
+    expect(<Breadcrumb.Item menu={{ selectable: true }} />).toBeTruthy();
+  });
 });

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`Breadcrumb rtl render component should be rendered correctly in RTL dir
 </nav>
 `;
 
-exports[`Breadcrumb should accept undefined routes 1`] = `
+exports[`Breadcrumb should accept undefined items 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -63,11 +63,6 @@ exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -84,11 +79,12 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
       >
         xxx
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -96,11 +92,6 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -112,34 +103,29 @@ exports[`Breadcrumb should render a menu 1`] = `
 >
   <ol>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#/index"
       >
-        <a
-          href="#/index"
-        >
-          home
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+        home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
         class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
       >
-        <span
+        <a
           class="ant-breadcrumb-link"
+          href="#/index/first"
         >
-          <a
-            href="#/index/first"
-          >
-            first
-          </a>
-        </span>
+          first
+        </a>
         <span
           aria-label="down"
           class="anticon anticon-down"
@@ -160,38 +146,63 @@ exports[`Breadcrumb should render a menu 1`] = `
           </svg>
         </span>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/index/first/second"
       >
-        /
-      </span>
+        second
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/index/first/second/third"
+      />
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumb should render correct 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/"
+      >
+        <span>
+          xxx
+        </span>
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
         class="ant-breadcrumb-link"
       >
-        <a
-          href="#/index/first/second"
-        >
-          second
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
-    </li>
-    <li>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        <span />
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
+        yyy
       </span>
     </li>
   </ol>
@@ -209,11 +220,12 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
       >
         Location
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <span>
       <li>
@@ -222,11 +234,12 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
         >
           Mock Node
         </span>
-        <span
-          class="ant-breadcrumb-separator"
-        >
-          /
-        </span>
+      </li>
+      <li
+        aria-hidden="true"
+        class="ant-breadcrumb-separator"
+      >
+        /
       </li>
     </span>
     <li>
@@ -235,11 +248,6 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
       >
         Application Center
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -256,11 +264,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -268,11 +277,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -280,11 +290,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     0
   </ol>
@@ -304,11 +315,12 @@ exports[`Breadcrumb should support custom attribute 1`] = `
       >
         xxx
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -316,11 +328,6 @@ exports[`Breadcrumb should support custom attribute 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -337,11 +344,12 @@ exports[`Breadcrumb should support string \`0\` and number \`0\` 1`] = `
       >
         0
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -349,11 +357,6 @@ exports[`Breadcrumb should support string \`0\` and number \`0\` 1`] = `
       >
         0
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/breadcrumb/demo/basic.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -11,11 +11,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -27,11 +28,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
           Application Center
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -43,11 +45,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
           Application List
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -55,17 +58,185 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correctly 1`] = `
+exports[`renders components/breadcrumb/demo/debug-routes.tsx extend context correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/home"
+      >
+        Home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <a
+          class="ant-breadcrumb-link"
+          href="#/home/user"
+        >
+          User
+        </a>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <div>
+        <div
+          class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
+        >
+          <ul
+            class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+            data-menu-list="true"
+            role="menu"
+            tabindex="0"
+          >
+            <li
+              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-0"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                <a
+                  href="#/home/user/user1"
+                >
+                  User1
+                </a>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-1"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                <a
+                  href="#/home/user/user2"
+                >
+                  User2
+                </a>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+          <div
+            aria-hidden="true"
+            style="display: none;"
+          >
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`renders components/breadcrumb/demo/overlay.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -76,11 +247,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
       >
         Ant Design
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -92,11 +264,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
           Component
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -133,8 +306,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
       </span>
       <div>
         <div
-          class="ant-dropdown"
-          style="opacity:0"
+          class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
         >
           <ul
             class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@@ -144,6 +317,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
           >
             <li
               class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-1"
               role="menuitem"
               tabindex="-1"
             >
@@ -159,30 +333,26 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
               class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-2"
               role="menuitem"
               tabindex="-1"
             >
@@ -198,30 +368,26 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
               class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-3"
               role="menuitem"
               tabindex="-1"
             >
@@ -237,107 +403,88 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </ul>
           <div
             aria-hidden="true"
-            style="display:none"
+            style="display: none;"
           >
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -345,17 +492,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
       >
         Button
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator.tsx extend context correctly 1`] = `
+exports[`renders components/breadcrumb/demo/separator.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -366,11 +508,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -379,11 +522,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Application Center
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -392,11 +536,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Application List
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <span
@@ -404,17 +549,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator-component.tsx extend context correctly 1`] = `
+exports[`renders components/breadcrumb/demo/separator-component.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -471,7 +611,7 @@ exports[`renders ./components/breadcrumb/demo/separator-component.tsx extend con
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correctly 1`] = `
+exports[`renders components/breadcrumb/demo/withIcon.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -501,11 +641,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
           </svg>
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <a
@@ -535,11 +676,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
           Application List
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -547,11 +689,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
       >
         Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
+exports[`renders components/breadcrumb/demo/basic.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -11,11 +11,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -27,11 +28,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
           Application Center
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -43,11 +45,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
           Application List
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -55,17 +58,66 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`renders components/breadcrumb/demo/debug-routes.tsx correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/home"
       >
-        /
+        Home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <a
+          class="ant-breadcrumb-link"
+          href="#/home/user"
+        >
+          User
+        </a>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
       </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
+exports[`renders components/breadcrumb/demo/overlay.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -76,11 +128,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
       >
         Ant Design
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -92,11 +145,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
           Component
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -131,11 +185,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
           </svg>
         </span>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -143,17 +198,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
       >
         Button
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
+exports[`renders components/breadcrumb/demo/separator.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -164,11 +214,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -177,11 +228,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Application Center
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -190,11 +242,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Application List
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <span
@@ -202,17 +255,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
     </li>
   </ol>
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/separator-component.tsx correctly 1`] = `
+exports[`renders components/breadcrumb/demo/separator-component.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -269,7 +317,7 @@ exports[`renders ./components/breadcrumb/demo/separator-component.tsx correctly
 </nav>
 `;
 
-exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
+exports[`renders components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -299,11 +347,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
           </svg>
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <a
@@ -333,11 +382,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
           Application List
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -345,11 +395,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
       >
         Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap

@@ -6,66 +6,54 @@ exports[`react router react router 3 1`] = `
 >
   <ol>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#/"
       >
-        <a
-          href="#/"
-        >
-          Home
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+        Home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps"
       >
-        <a
-          href="#/apps"
-        >
-          Application List
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+        Application List
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps/1"
       >
-        <a
-          href="#/apps/1"
-        >
-          Application1
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+        Application1
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps/1/detail"
       >
-        <span>
-          Detail
-        </span>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+        Detail
+      </a>
     </li>
   </ol>
 </nav>

components/breadcrumb/demo/basic.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
-  <Breadcrumb>
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Application Center</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Application List</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    items={[
+      {
+        title: 'Home',
+      },
+      {
+        title: <a href="">Application Center</a>,
+      },
+      {
+        title: <a href="">Application List</a>,
+      },
+      {
+        title: 'An Application',
+      },
+    ]}
+  />
 );
 
 export default App;

components/breadcrumb/demo/debug-routes.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+原 `routes` 调试。
+
+## en-US
+
+Origin `routes` debug.

components/breadcrumb/demo/debug-routes.tsx

@@ -0,0 +1,27 @@
+import { Breadcrumb } from 'antd';
+import React from 'react';
+
+export default () => (
+  <Breadcrumb
+    routes={[
+      {
+        path: '/home',
+        breadcrumbName: 'Home',
+      },
+      {
+        path: '/user',
+        breadcrumbName: 'User',
+        children: [
+          {
+            path: '/user1',
+            breadcrumbName: 'User1',
+          },
+          {
+            path: '/user2',
+            breadcrumbName: 'User2',
+          },
+        ],
+      },
+    ]}
+  />
+);

components/breadcrumb/demo/overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Breadcrumb } from 'antd';
 
-const items = [
+const menuItems = [
   {
     key: '1',
     label: (
@@ -29,16 +29,23 @@ const items = [
 ];
 
 const App: React.FC = () => (
-  <Breadcrumb>
-    <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Component</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item menu={{ items }}>
-      <a href="">General</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>Button</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    items={[
+      {
+        title: 'Ant Design',
+      },
+      {
+        title: <a href="">Component</a>,
+      },
+      {
+        title: <a href="">General</a>,
+        menu: { items: menuItems },
+      },
+      {
+        title: 'Button',
+      },
+    ]}
+  />
 );
 
 export default App;

components/breadcrumb/demo/react-router.tsx

@@ -27,17 +27,17 @@ const Home = () => {
 
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
-    return (
-      <Breadcrumb.Item key={url}>
-        <Link to={url}>{breadcrumbNameMap[url]}</Link>
-      </Breadcrumb.Item>
-    );
+    return {
+      key: url,
+      title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
+    };
   });
 
   const breadcrumbItems = [
-    <Breadcrumb.Item key="home">
-      <Link to="/">Home</Link>
-    </Breadcrumb.Item>,
+    {
+      title: <Link to="/">Home</Link>,
+      key: 'home',
+    },
   ].concat(extraBreadcrumbItems);
 
   return (
@@ -51,7 +51,7 @@ const Home = () => {
         <Route path="*" element={<span>Home Page</span>} />
       </Routes>
       <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
-      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
+      <Breadcrumb items={breadcrumbItems} />
     </div>
   );
 };