Merge branch 'feature' into feat/transfer-operations-support-reactnode

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

.devcontainer/devcontainer.json

@@ -0,0 +1,16 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+  "name": "ant-design",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "postCreateCommand": "pnpm install",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "shezhangzhang.antd-design-token",
+        "fi3ework.vscode-antd-rush"
+      ]
+    }
+  }
+}

.dumi/components/SemanticPreview.tsx

@@ -66,7 +66,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
 }));
 
 export interface SemanticPreviewProps {
-  componentName?: string;
+  componentName: string;
   semantics: { name: string; desc: string; version?: string }[];
   children: React.ReactElement<any>;
   height?: number;

.dumi/components/TemplateSemanticPreview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import useLocale from '../hooks/useLocale';
 import SemanticPreview from './SemanticPreview';
 
@@ -42,6 +43,7 @@ const Block: React.FC<BlockProps> = ({ component: Component, options, defaultVal
 
 export interface TemplateSemanticPreviewProps {
   component: React.ComponentType<any>;
+  componentName: string;
   defaultValue?: string;
   options?: { value: string; label: string }[];
   height?: number;
@@ -57,12 +59,14 @@ const TemplateSemanticPreview: React.FC<TemplateSemanticPreviewProps> = ({
   options,
   height,
   style,
+  componentName,
   ...restProps
 }) => {
   const [locale] = useLocale(locales);
 
   return (
     <SemanticPreview
+      componentName={componentName}
       semantics={[
         { name: 'root', desc: locale.root, version: '5.25.0' },
         { name: 'popup', desc: locale.popup, version: '5.25.0' },

.dumi/remarkAnchor.ts

@@ -0,0 +1,86 @@
+import { unistUtilVisit } from 'dumi';
+import type { UnifiedTransformer } from 'dumi';
+
+let toSlug: typeof import('github-slugger').slug;
+
+// workaround to import pure esm module
+(async () => {
+  ({ slug: toSlug } = await import('github-slugger'));
+})();
+
+const isNil = (value: any) => value == null;
+
+const toArr = <T>(value: T | T[]) => {
+  if (isNil(value)) return [];
+  return Array.isArray(value) ? value : [value];
+};
+
+const patch = (context: Record<string, any>, key: string, value: any) => {
+  if (!context[key]) {
+    context[key] = value;
+  }
+  return context[key];
+};
+
+interface Options {
+  level?: number;
+}
+
+const remarkAnchor = (opt: Options = {}): UnifiedTransformer<any> => {
+  // https://regex101.com/r/WDjkK0/1
+  const RE = /\s*\{#([^}]+)\}$/;
+
+  const realOpt = {
+    level: [1, 2, 3, 4, 5, 6],
+    ...opt,
+  };
+
+  return function transformer(tree) {
+    const ids = new Set();
+
+    unistUtilVisit.visit(tree, 'heading', (node) => {
+      if (toArr(realOpt.level).indexOf(node.depth) === -1) {
+        return unistUtilVisit.CONTINUE;
+      }
+
+      const lastChild = node.children.at(-1);
+
+      if (lastChild?.type === 'text') {
+        const text = lastChild.value;
+        const match = text.match(RE);
+        if (match) {
+          const id = match[1];
+          if (id !== toSlug(id)) {
+            throw new Error(
+              `Expected header ID to be a valid slug. You specified: {#${id}}. Replace it with: {#${toSlug(id)}}`,
+            );
+          }
+
+          node.data ??= {};
+          node.data.hProperties = { ...node.data.hProperties, id };
+
+          lastChild.value = text.replace(RE, '');
+
+          if (lastChild.value === '') {
+            node.children.pop();
+          }
+          if (ids.has(id)) {
+            throw new Error(`Cannot have a duplicate header with id "${id}" on the page.
+              Rename the section or give it an explicit unique ID. For example: #### Arguments {#setstate-arguments}`);
+          }
+
+          ids.add(id);
+
+          const data = patch(node, 'data', {});
+          patch(data, 'id', id);
+          patch(data, 'htmlAttributes', {});
+          patch(data, 'hProperties', {});
+          patch(data.htmlAttributes, 'id', id);
+          patch(data.hProperties, 'id', id);
+        }
+      }
+    });
+  };
+};
+
+export default remarkAnchor;

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
+import { EditOutlined, GithubOutlined, HistoryOutlined, CompassOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
 import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import Link from '../../common/Link';
 
 import useLocale from '../../../hooks/useLocale';
 import ComponentChangelog from '../../common/ComponentChangelog';
@@ -18,6 +19,7 @@ const locales = {
     docs: '文档',
     edit: '编辑此页',
     changelog: '更新日志',
+    design: '设计指南',
     version: '版本',
   },
   en: {
@@ -28,6 +30,7 @@ const locales = {
     docs: 'Docs',
     edit: 'Edit this page',
     changelog: 'Changelog',
+    design: 'Design',
     version: 'Version',
   },
 };
@@ -57,24 +60,8 @@ const useStyle = createStyles(({ token }) => ({
       text-decoration: underline !important;
     }
   `,
-  import: css`
-    color: ${token.magenta8};
-  `,
-  component: css`
-    color: ${token.colorText};
-  `,
-  from: css`
-    color: ${token.magenta8};
-    margin-inline-end: 0.5em;
-  `,
-  antd: css`
-    color: ${token.green8};
-  `,
-  semicolon: css`
-    color: ${token.colorText};
-  `,
   icon: css`
-    margin-inline-end: ${token.marginXXS}px;
+    margin-inline-end: 3px;
   `,
 }));
 
@@ -83,10 +70,11 @@ export interface ComponentMetaProps {
   source: string | true;
   filename?: string;
   version?: string;
+  designUrl?: string;
 }
 
 const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
-  const { component, source, filename, version } = props;
+  const { component, source, filename, version, designUrl } = props;
   const { token } = theme.useToken();
   const [locale, lang] = useLocale(locales);
   const isZhCN = lang === 'cn';
@@ -130,23 +118,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
   };
 
   // ======================== Render ========================
-  const importList = [
+  const importList = `import { ${transformComponentName(component)} } from "antd";`;
-    <span key="import" className={styles.import}>
-      import
-    </span>,
-    <span key="component" className={styles.component}>{`{ ${transformComponentName(
-      component,
-    )} }`}</span>,
-    <span key="from" className={styles.from}>
-      from
-    </span>,
-    <span key="antd" className={styles.antd}>
-      {`"antd"`}
-    </span>,
-    <span key="semicolon" className={styles.semicolon}>
-      ;
-    </span>,
-  ];
 
   return (
     <Descriptions
@@ -187,7 +159,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filename && {
             label: locale.docs,
             children: (
-              <Flex justify="flex-start" align="center" gap="middle">
+              <Flex justify="flex-start" align="center" gap="small">
                 <Typography.Link
                   className={styles.code}
                   href={`${branchUrl}${filename}`}
@@ -196,6 +168,12 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                   <EditOutlined className={styles.icon} />
                   <span>{locale.edit}</span>
                 </Typography.Link>
+                {designUrl && (
+                  <Link className={styles.code} to={designUrl}>
+                    <CompassOutlined className={styles.icon} />
+                    <span>{locale.design}</span>
+                  </Link>
+                )}
                 <ComponentChangelog>
                   <Typography.Link className={styles.code}>
                     <HistoryOutlined className={styles.icon} />

.dumi/theme/common/ComponentChangelog/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ComponentChangelog from './ComponentChangelog';
 
 const ChangeLog: React.FC<Readonly<React.PropsWithChildren>> = ({ children }) => (
-  <React.Suspense fallback={null}>
+  <React.Suspense fallback="...">
     <ComponentChangelog>{children}</ComponentChangelog>
   </React.Suspense>
 );

.dumi/theme/common/styles/HeadingAnchor.tsx

@@ -34,6 +34,8 @@ export default () => {
             > .icon-link::before {
               font-size: ${token.fontSizeXL}px;
               content: '#';
+              color: ${token.colorTextSecondary};
+              font-family: ${token.codeFamily};
             }
           }
 

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

@@ -89,6 +89,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                 component={meta.frontmatter.title}
                 filename={meta.frontmatter.filename}
                 version={meta.frontmatter.tag}
+                designUrl={meta.frontmatter.designUrl}
               />
             )}
           <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>

.dumirc.ts

@@ -5,6 +5,7 @@ import os from 'node:os';
 
 import rehypeAntd from './.dumi/rehypeAntd';
 import remarkAntd from './.dumi/remarkAntd';
+import remarkAnchor from './.dumi/remarkAnchor';
 import { version } from './package.json';
 
 export default defineConfig({
@@ -52,7 +53,7 @@ export default defineConfig({
     '@ant-design/icons$': '@ant-design/icons/lib',
   },
   extraRehypePlugins: [rehypeAntd],
-  extraRemarkPlugins: [remarkAntd],
+  extraRemarkPlugins: [remarkAntd, remarkAnchor],
   metas: [
     { name: 'theme-color', content: '#1677ff' },
     { name: 'build-time', content: Date.now().toString() },

.gitignore

@@ -68,7 +68,6 @@ __image_snapshots__/
 /imageDiffSnapshots
 /visualRegressionReport*
 
-.devcontainer*
 .husky/prepare-commit-msg
 
 .eslintcache

CHANGELOG.en-US.md

@@ -19,6 +19,13 @@ tag: vVERSION
 
 - 🆕 Transfer `operations` property now supports passing an array of ReactNode, allowing for custom operation buttons. [#53121](https://github.com/ant-design/ant-design/pull/53121) [@afc163](https://github.com/afc163)
 
+## 5.24.6
+
+`2025-04-01`
+
+- 🐞 Fix Modal show loading with async call, still can close with click outer space. [#53227](https://github.com/ant-design/ant-design/pull/53227) [@jin19980928](https://github.com/jin19980928)
+- 🐞 Fix when Table `size` is `small`, the theme config will take effect on the sub Pagination. [#52829](https://github.com/ant-design/ant-design/pull/52829) [@Can-Chen](https://github.com/Can-Chen)
+
 ## 5.24.5
 
 `2025-03-24`

CHANGELOG.zh-CN.md

@@ -19,6 +19,13 @@ tag: vVERSION
 
 - 🆕 Transfer 组件 `operations` 属性支持传入 ReactNode 数组，可以自定义操作按钮。[#53121](https://github.com/ant-design/ant-design/pull/53121) [@afc163](https://github.com/afc163)
 
+## 5.24.6
+
+`2025-04-01`
+
+- 🐞 修复 Modal 通过异步方法显示 loading 态时，点击外侧仍能触发关闭的问题。[#53227](https://github.com/ant-design/ant-design/pull/53227) [@jin19980928](https://github.com/jin19980928)
+- 🐞 修复 Table 在 `size` 为 `small` 时，主题配置 Pagination 无效的问题。[#52829](https://github.com/ant-design/ant-design/pull/52829) [@Can-Chen](https://github.com/Can-Chen)
+
 ## 5.24.5
 
 `2025-03-24`

components/affix/index.zh-CN.md

@@ -12,7 +12,7 @@ group:
   order: 7
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
 

components/alert/index.zh-CN.md

@@ -12,7 +12,7 @@ group:
   order: 6
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当某个页面需要向用户显示警告的信息时。
 - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

components/anchor/index.zh-CN.md

@@ -11,7 +11,7 @@ group:
   order: 3
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
 

components/app/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
 tag: 5.1.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
 - 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。

components/auto-complete/demo/_semantic.tsx

@@ -8,18 +8,19 @@ const mockVal = (str: string, repeat = 1) => ({
   label: str.repeat(repeat),
 });
 
+const getPanelValue = (searchText: string) =>
+  !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
+
 const App: React.FC = () => {
   const [options, setOptions] = React.useState([
     { value: 'aojunhao123', label: 'aojunhao123' },
     { value: 'thinkasany', label: 'thinkasany' },
   ]);
 
-  const getPanelValue = (searchText: string) =>
-    !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
-
   return (
     <TemplateSemanticPreview
       component={AutoComplete}
+      componentName="AutoComplete"
       style={{ width: 200 }}
       options={options}
       onSearch={(text: string) => setOptions(getPanelValue(text))}

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

@@ -12,7 +12,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要一个输入框而不是选择器。
 - 需要输入建议/辅助提示。

components/badge/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
 group: 数据展示
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
 

components/breadcrumb/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当系统拥有超过两级以上的层级结构时；
 - 当需要告知用户『你在哪里』时；
@@ -129,7 +129,7 @@ function itemRender(currentRoute, params, items, paths) {
   return isLast ? (
     <span>{currentRoute.title}</span>
   ) : (
-    <Link to={`/${paths.join("/")}`}>{currentRoute.title}</Link>
+    <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
   );
 }
 

components/button/index.en-US.md

@@ -4,6 +4,7 @@ title: Button
 description: To trigger an operation.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
+designUrl: /docs/spec/buttons
 demo:
   cols: 2
 group:
@@ -17,18 +18,18 @@ A button means an operation (or a series of operations). Clicking a button will
 
 In Ant Design we provide 5 types of button.
 
-- Primary button: used for the main action, there can be at most one primary button in a section.
+- 🔵 Primary button: used for the main action, there can be at most one primary button in a section.
-- Default button: used for a series of actions without priority.
+- ⚪️ Default button: used for a series of actions without priority.
-- Dashed button: commonly used for adding more actions.
+- 🫥 Dashed button: commonly used for adding more actions.
-- Text button: used for the most secondary action.
+- 🔤 Text button: used for the most secondary action.
-- Link button: used for external links.
+- 🔗 Link button: used for external links.
 
 And 4 other properties additionally.
 
-- `danger`: used for actions of risk, like deletion or authorization.
+- 🔴 `danger`: used for actions of risk, like deletion or authorization.
-- `ghost`: used in situations with complex background, home pages usually.
+- 👻 `ghost`: used in situations with complex background, home pages usually.
-- `disabled`: used when actions are not available.
+- 🚫 `disabled`: used when actions are not available.
-- `loading`: adds a loading spinner in button, avoids multiple submits too.
+- 🔃 `loading`: adds a loading spinner in button, avoids multiple submits too.
 
 ## Examples
 
@@ -96,7 +97,7 @@ It accepts all props which native buttons support.
 
 ## FAQ
 
-### How to choose type and color & variant?
+### How to choose type and color & variant? {#faq-type-color-variant}
 
 Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
 
@@ -112,7 +113,7 @@ Equivalent
 </Button>
 ```
 
-### How to close the click wave effect?
+### How to close the click wave effect? {#faq-close-wave-effect}
 
 If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.
 

components/button/index.zh-CN.md

@@ -5,6 +5,7 @@ subtitle: 按钮
 description: 按钮用于开始一个即时操作。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
+designUrl: /docs/spec/buttons-cn
 demo:
   cols: 2
 group:
@@ -12,28 +13,26 @@ group:
   order: 1
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
 在 Ant Design 中我们提供了五种按钮。
 
-- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
+- 🔵 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
-- 默认按钮：用于没有主次之分的一组行动点。
+- ⚪️ 默认按钮：用于没有主次之分的一组行动点。
-- 虚线按钮：常用于添加操作。
+- 🫥 虚线按钮：常用于添加操作。
-- 文本按钮：用于最次级的行动点。
+- 🔤 文本按钮：用于最次级的行动点。
-- 链接按钮：一般用于链接，即导航至某位置。
+- 🔗 链接按钮：一般用于链接，即导航至某位置。
 
 以及四种状态属性与上面配合使用。
 
-- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
+- ⚠️ 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
-- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
+- 👻 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
-- 禁用：行动点不可用的时候，一般需要文案解释。
+- 🚫 禁用：行动点不可用的时候，一般需要文案解释。
-- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
+- 🔃 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
 
-[完整设计指南](https://ant.design/docs/spec/buttons-cn)
+## 代码演示 {#examples}
-
-## 代码演示
 
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">语法糖</code>
@@ -92,17 +91,17 @@ group:
 
 > type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
 
-## Semantic DOM
+## Semantic DOM {#semantic-dom}
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
-## 主题变量（Design Token）
+## 主题变量（Design Token）{#design-token}
 
 <ComponentTokenTable component="Button"></ComponentTokenTable>
 
 ## FAQ
 
-### 类型和颜色与变体如何选择？
+### 类型和颜色与变体如何选择？ {#faq-type-color-variant}
 
 类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。
 
@@ -118,7 +117,7 @@ group:
 </Button>
 ```
 
-### 如何关闭点击波纹效果？
+### 如何关闭点击波纹效果？ {#faq-close-wave-effect}
 
 如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `wave` 的 `disabled` 为 `true`。
 
@@ -135,6 +134,6 @@ group:
 }
 </style>
 
-## 设计指引
+## 设计指引 {#design-guide}
 
 - [我的按钮究竟该放哪儿！？| Ant Design 4.0 系列分享](https://zhuanlan.zhihu.com/p/109644406)

components/calendar/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
 

components/card/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
 

components/carousel/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当有一组平级的内容。
 - 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。

components/cascader/index.en-US.md

@@ -54,7 +54,9 @@ Common props ref：[Common props](/docs/react/common-props)
 | autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | 5.9.0 |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false |  |
+| className | The additional css class | string | - |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.25.0 |
+| defaultOpen | Initial visible of cascader popup | boolean | - |  |
 | defaultValue | Initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | Whether disabled select | boolean | false |  |
 | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |

components/cascader/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
 - 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
@@ -55,7 +55,9 @@ demo:
 | autoClearSearchValue | 是否在选中项后清空搜索框，只在 `multiple` 为 `true` 时有效 | boolean | true | 5.9.0 |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | changeOnSelect | 单选时生效（multiple 下始终都可以选择），点选每级菜单选项值都会发生变化。 | boolean | false |  |
+| className | 自定义类名 | string | - |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.25.0 |
+| defaultOpen | 是否默认展示浮层 | boolean | - |  |
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |

components/checkbox/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 在一组可选项中进行多项选择时；
 - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。

components/collapse/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 对复杂区域进行分组和隐藏，保持页面的整洁。
 - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。

components/color-picker/index.zh-CN.md

@@ -12,7 +12,7 @@ group:
   title: 数据录入
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当用户需要自定义颜色选择的时候使用。
 

components/date-picker/index.en-US.md

@@ -97,6 +97,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
+| defaultOpen | Initial open state of picker | boolean | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | `info`: 5.14.0 |
 | format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |

components/date-picker/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
 
@@ -98,6 +98,7 @@ dayjs.locale('zh-cn');
 | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
+| defaultOpen | 是否默认展开控制弹层 | boolean | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | `info`: 5.14.0 |
 | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |

components/descriptions/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 常见于详情页的信息展示。
 

components/divider/index.zh-CN.md

@@ -12,7 +12,7 @@ group:
   order: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 对不同章节的文本段落进行分割。
 - 对行内文字/链接进行分割，例如表格的操作列。

components/drawer/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
 

components/dropdown/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
 

components/empty/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当目前没有数据时，用于显式的用户提示。
 - 初始化场景时的引导创建流程。

components/flex/index.zh-CN.md

@@ -9,7 +9,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 tag: 5.10.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 适合设置元素之间的间距。
 - 适合设置各种水平、垂直对齐方式。

components/float-button/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
 tag: 5.0.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 用于网站上的全局功能；
 - 无论浏览到何处都可以看见的按钮。

components/form/index.en-US.md

@@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## When to use
+## When to use {#when-to-use}
 
 - When you need to create an instance or collect information.
 - When you need to validate fields in certain rules.

components/form/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 用于创建一个实体或收集信息。
 - 需要对输入的数据类型进行校验时。

components/image/index.zh-CN.md

@@ -9,7 +9,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要展示图片时使用。
 - 加载显示大图或加载失败时容错处理。

components/input-number/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当需要获取标准数值时。
 

components/input/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要用户输入表单域内容时。
 - 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

components/list/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
 

components/mentions/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
 

components/menu/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
 

components/message/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 可提供成功、警告和错误等反馈信息。
 - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

components/modal/index.en-US.md

@@ -58,7 +58,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |  |
 | destroyOnClose | Whether to unmount child components on onClose | boolean | false |  |
 | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 |
-| footer | Footer content, set as `footer={null}` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | (OK and Cancel buttons) | renderFunction: 5.9.0 |
+| footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (OK and Cancel buttons) | renderFunction: 5.9.0 |
 | forceRender | Force render Modal | boolean | false |  |
 | getContainer | The mounted node for Modal but still display at fullscreen | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
@@ -108,7 +108,7 @@ The items listed above are all functions, expecting a settings object as paramet
 | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
 | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
-| footer | Footer content, set as `footer: null` when you don't need default buttons | React.ReactNode \| ((params:[footerRenderParams](/components/modal#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 |
+| footer | Footer content, set as `footer: null` when you don't need default buttons | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | Custom icon | ReactNode | <ExclamationCircleFilled /> |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
@@ -184,14 +184,6 @@ return <div>{contextHolder}</div>;
 const confirmed = await modal.confirm({ ... });
 ```
 
-#### footerRenderParams
-
-<!-- prettier-ignore -->
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| originNode | default node | React.ReactNode | - |
-| extra | extended options | { OkBtn: FC; CancelBtn: FC } | - |
-
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>

components/modal/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
 
@@ -59,7 +59,7 @@ demo:
 | confirmLoading | 确定按钮 loading | boolean | false |  |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
 | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
-| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | (确定取消按钮) | renderFunction: 5.9.0 |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
 | forceRender | 强制渲染 Modal | boolean | false |  |
 | getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
@@ -109,7 +109,7 @@ demo:
 | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
 | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
-| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | React.ReactNode \| ((params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode) | - | renderFunction: 5.9.0 |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 |
 | getContainer | 指定 Modal 挂载的 HTML 节点，false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | <ExclamationCircleFilled /> |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
@@ -185,14 +185,6 @@ return <div>{contextHolder}</div>;
 const confirmed = await modal.confirm({ ... });
 ```
 
-#### footerRenderParams
-
-<!-- prettier-ignore -->
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| originNode | 默认节点 | React.ReactNode | - |
-| extra | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | - |
-
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>

components/notification/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 在系统四个角显示通知提醒信息。经常用于以下情况：
 

components/pagination/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当加载/渲染所有数据将花费很多时间时；
 - 可切换页码浏览数据。

components/popconfirm/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
 

components/popover/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
 

components/progress/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
 

components/qr-code/index.zh-CN.md

@@ -13,7 +13,7 @@ group:
 tag: 5.1.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当需要将文本转换成为二维码时使用。
 

components/radio/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 用于在多个备选项中选中单个状态。
 - 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

components/rate/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 对评价进行展示。
 - 对事物进行快速的评级操作。

components/result/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
 

components/segmented/index.zh-CN.md

@@ -12,7 +12,7 @@ demo:
 
 自 `antd@4.20.0` 版本开始提供该组件。
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 用于展示多个选项并允许用户选择其中单个选项；
 - 当切换选中选项时，关联区域的内容会发生变化。

components/select/demo/_semantic.tsx

@@ -7,6 +7,7 @@ const App: React.FC = () => {
   return (
     <TemplateSemanticPreview
       component={Select}
+      componentName="Select"
       style={{ width: 200 }}
       defaultValue="aojunhao123"
       options={[

components/select/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。

components/skeleton/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 网络较慢，需要长时间等待加载处理的情况下。
 - 图文信息内容较多的列表/卡片中。

components/slider/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
 

components/space/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 避免组件紧贴在一起，拉开统一的空间。
 

components/spin/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
 

components/splitter/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
 tag: 5.21.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 可以水平或垂直地分隔区域。
 - 当需要自由拖拽调整各区域大小。

components/statistic/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当需要突出某个或某组数字时。
 - 当需要展示带描述的统计类数据时使用。

components/steps/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
 

components/switch/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要表示开关状态/两种状态之间的切换时；
 - 和 `checkbox` 的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。

components/table/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3yz3QqMlShYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当有大量结构化的数据需要展现时；
 - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

components/tabs/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8HMoTZUoSGoAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
 

components/tag/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 用于标记事物的属性和维度。
 - 进行分类。

components/time-picker/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
 

components/timeline/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当有一系列信息需按时间排列时，可正序和倒序。
 - 需要有一条时间轴进行视觉上的串联时。

components/tooltip/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
 

components/tour/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
 tag: 5.0.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 常用于引导用户了解产品功能。
 
@@ -61,7 +61,7 @@ tag: 5.0.0
 | cover | 展示的图片或者视频 | `ReactNode` | - |  |
 | title | 标题 | `ReactNode` | - |  |
 | description | 主要描述部分 | `ReactNode` | - |  |
-| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
+| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | 关闭引导时的回调函数 | `Function` | - |  |
 | mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |

components/transfer/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fkfzT5BbwNIAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g9vUQq2nkpEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 需要在多个可选项中进行多选时。
 - 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。

components/tree-select/demo/_semantic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TreeSelect } from 'antd';
+import type { TreeSelectProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -31,40 +32,34 @@ const treeData = [
   },
 ];
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<TreeSelectProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const [value, setValue] = React.useState<string>();
-  const onChange = (newValue: string) => {
-    setValue(newValue);
-  };
   return (
     <div ref={divRef}>
       <TreeSelect
         {...props}
-        getPopupContainer={() => divRef.current}
+        getPopupContainer={() => divRef.current!}
         showSearch
         placement="bottomLeft"
         open
         style={{ width: 200, marginBottom: 80, marginTop: -10 }}
-        styles={{
+        styles={{ popup: { zIndex: 1, height: 90 } }}
-          popup: {
-            zIndex: 1,
-            height: 90,
-          },
-        }}
         value={value}
         placeholder="Please select"
         treeDefaultExpandAll
-        onChange={onChange}
+        onChange={setValue}
         treeData={treeData}
       />
     </div>
   );
 };
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="TreeSelect"
       semantics={[
         { name: 'root', desc: locale.root, version: '5.25.0' },
         { name: 'popup', desc: locale.popup, version: '5.25.0' },

components/tree-select/index.en-US.md

@@ -41,6 +41,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
 | autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.25.0 |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | To set the initial selected treeNode(s) | string \| string\[] | - |  |
 | disabled | Disabled or not | boolean | false |  |
 | ~~popupClassName~~ | The className of dropdown menu, use `classNames.popup` instead | string | - | 4.23.0 |
@@ -60,6 +61,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | maxTagTextLength | Max tag text length to show | number | - |  |
 | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false |  |
 | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` |  |
+| open | Controlled open state of dropdown | boolean | - |  |
 | placeholder | Placeholder of the select input | string | - |  |
 | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | prefix | The custom prefix | ReactNode | - | 5.22.0 |

components/tree-select/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
 
@@ -42,6 +42,7 @@ demo:
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 |
 | autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.25.0 |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | ~~popupClassName~~ | 下拉菜单的 className 属性，使用 `classNames.popup` 替换 | string | - | 4.23.0 |
@@ -61,6 +62,7 @@ demo:
 | maxTagTextLength | 最大显示的 tag 文本长度 | number | - |  |
 | multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
 | placeholder | 选择框默认文字 | string | - |  |
 | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | prefix | 自定义前缀 | ReactNode | - | 5.22.0 |

components/tree/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
 

components/typography/index.zh-CN.md

@@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
 - 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。

components/upload/index.zh-CN.md

@@ -10,7 +10,7 @@ demo:
   cols: 2
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
 

components/watermark/index.zh-CN.md

@@ -11,7 +11,7 @@ demo:
 tag: 5.1.0
 ---
 
-## 何时使用
+## 何时使用 {#when-to-use}
 
 - 页面需要添加水印标识版权时使用。
 - 适用于防止信息盗用。

eslint.config.mjs

@@ -65,6 +65,7 @@ export default antfu(
       'react/no-forward-ref': 'off',
       'react/no-context-provider': 'off',
       'react/no-use-context': 'off',
+      'react-hooks-extra/no-unnecessary-use-prefix': 'off',
     },
   },
   compat.configs['flat/recommended'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.24.5",
+  "version": "5.24.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {
@@ -148,7 +148,7 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.50.4",
-    "rc-tabs": "~15.5.1",
+    "rc-tabs": "~15.5.2",
     "rc-textarea": "~1.9.0",
     "rc-tooltip": "~6.4.0",
     "rc-tree": "~5.13.1",
@@ -239,7 +239,7 @@
     "cypress-image-diff-html-report": "2.2.0",
     "dekko": "^0.2.1",
     "dotenv": "^16.4.5",
-    "dumi": "~2.4.17",
+    "dumi": "~2.4.20",
     "dumi-plugin-color-chunk": "^2.1.0",
     "env-paths": "^3.0.0",
     "eslint": "^9.23.0",
@@ -251,6 +251,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.2.0",
+    "github-slugger": "^2.0.0",
     "glob": "^11.0.0",
     "html2sketch": "^1.0.2",
     "http-server": "^14.1.1",

scripts/__snapshots__/check-site.ts.snap

@@ -144,9 +144,9 @@ exports[`site test Component components/message en Page 1`] = `3`;
 
 exports[`site test Component components/message zh Page 1`] = `3`;
 
-exports[`site test Component components/modal en Page 1`] = `3`;
+exports[`site test Component components/modal en Page 1`] = `2`;
 
-exports[`site test Component components/modal zh Page 1`] = `3`;
+exports[`site test Component components/modal zh Page 1`] = `2`;
 
 exports[`site test Component components/notification en Page 1`] = `3`;
 

scripts/pre-publish.ts

@@ -4,8 +4,9 @@ import { Octokit } from '@octokit/rest';
 import AdmZip from 'adm-zip';
 import axios from 'axios';
 import chalk from 'chalk';
-import Spinnies from 'spinnies';
 import dotnev from 'dotenv';
+import Spinnies from 'spinnies';
+
 import checkRepo from './check-repo';
 
 dotnev.config({ override: true });
@@ -13,13 +14,9 @@ dotnev.config({ override: true });
 const { Notification: Notifier } = require('node-notifier');
 const simpleGit = require('simple-git');
 
-const blockStatus = ['failure', 'cancelled', 'timed_out'] as const;
-
 const spinner = { interval: 80, frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] };
 const spinnies = new Spinnies({ spinner });
 
-const IGNORE_ACTIONS = ['Check Virtual Regression Approval', 'issue-remove-inactive'];
-
 let spinniesId = 0;
 
 // `spinnies` 为按条目进度，需要做简单的封装变成接近 `ora` 的形态
@@ -67,27 +64,6 @@ process.on('SIGINT', () => {
   process.exit(1);
 });
 
-const emojify = (status = '') => {
-  if (!status) {
-    return '';
-  }
-  const emoji = {
-    /* status */
-    completed: '✅',
-    queued: '🕒',
-    in_progress: '⌛',
-    /* conclusion */
-    success: '✅',
-    failure: '❌',
-    neutral: '⚪',
-    cancelled: '❌',
-    skipped: '⏭️',
-    timed_out: '⌛',
-    action_required: '🔴',
-  }[status];
-  return `${emoji || ''} ${(status || '').padEnd(15)}`;
-};
-
 const toMB = (bytes: number) => (bytes / 1024 / 1024).toFixed(2);
 
 async function downloadArtifact(msgKey: string, url: string, filepath: string, token?: string) {
@@ -144,26 +120,15 @@ const runPrePublish = async () => {
   showMessage(`开始检查远程分支 ${currentBranch} 的 CI 状态`, true);
 
   const failureUrlList: string[] = [];
-  let {
+
-    data: { check_runs },
+  const { data } = await octokit.rest.repos.getCombinedStatusForRef({
-  } = await octokit.checks.listForRef({
     owner,
     repo,
     ref: sha,
-    filter: 'all',
   });
-  showMessage(`远程分支 CI 状态(${check_runs.length})：`, 'succeed');
+
-  check_runs = check_runs.filter((run) =>
+  showMessage(`远程分支 CI 状态：${data.state}`, 'succeed');
-    IGNORE_ACTIONS.every((action) => !run.name.includes(action)),
+  if (data.state === 'failure') {
-  );
-  check_runs.forEach((run) => {
-    showMessage(`  ${run.name.padEnd(36)} ${emojify(run.status)} ${emojify(run.conclusion || '')}`);
-    if (blockStatus.some((status) => run.conclusion === status)) {
-      failureUrlList.push(run.html_url!);
-    }
-  });
-  const conclusions = check_runs.map((run) => run.conclusion);
-  if (blockStatus.some((status) => conclusions.includes(status))) {
     showMessage(chalk.bgRedBright('远程分支 CI 执行异常，无法继续发布，请尝试修复或重试'), 'fail');
     showMessage(`  点此查看状态：https://github.com/${owner}/${repo}/commit/${sha}`);
 
@@ -174,12 +139,18 @@ const runPrePublish = async () => {
     process.exit(1);
   }
 
-  const statuses = check_runs.map((run) => run.status);
+  if (data.state === 'pending') {
-  if (check_runs.length < 1 || statuses.includes('queued') || statuses.includes('in_progress')) {
     showMessage(chalk.bgRedBright('远程分支 CI 还在执行中，请稍候再试'), 'fail');
     showMessage(`  点此查看状态：https://github.com/${owner}/${repo}/commit/${sha}`);
     process.exit(1);
   }
+
+  if (data.state !== 'success') {
+    showMessage(chalk.bgRedBright('远程分支 CI 状态异常'), 'fail');
+    showMessage(`  点此查看状态：https://github.com/${owner}/${repo}/commit/${sha}`);
+    process.exit(1);
+  }
+
   showMessage(`远程分支 CI 已通过`, 'succeed');
   // clean up
   await runScript({ event: 'clean', path: '.', stdio: 'inherit' });