type: typeScript definition improvement

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.dumi/hooks/useIssueCount.ts

@@ -31,7 +31,7 @@ export const useIssueCount = (options: UseIssueCountOptions) => {
 
   // Note: current query only filters by title keywords. Filtering by component name can be added later if needed.
   const searchUrl = useMemo(() => {
-    const tokens = (titleKeywords || []).filter(Boolean).map((k) => encodeURIComponent(String(k)));
+    const tokens = (titleKeywords || []).filter(Boolean).map<string>(encodeURIComponent);
     const orExpr = tokens.length > 0 ? tokens.join('%20OR%20') : '';
     const titlePart = orExpr ? `in:title+(${orExpr})` : 'in:title';
     const q = `repo:${repo}+is:issue+is:open+${titlePart}`;
@@ -45,7 +45,7 @@ export const useIssueCount = (options: UseIssueCountOptions) => {
   const issueNewUrl = `https://github.com/${repo}/issues/new/choose`;
 
   const issueSearchUrl = useMemo(() => {
-    const keywords = (titleKeywords || []).filter(Boolean).map((k) => String(k));
+    const keywords = (titleKeywords || []).filter(Boolean).map<string>(String);
     const groupExpr =
       keywords.length > 0 ? `(${keywords.map((k) => `is:issue in:title ${k}`).join(' OR ')})` : '';
     const qRaw = `is:open ${groupExpr}`.trim();

.dumi/pages/index/components/BannerRecommends.tsx

@@ -113,8 +113,10 @@ const RecommendItem: React.FC<RecommendItemProps> = (props) => {
   const [mousePosition, setMousePosition] = React.useState<[number, number]>([0, 0]);
   const [transMousePosition, setTransMousePosition] = React.useState<[number, number]>([0, 0]);
 
-  const onMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!cardRef.current) return;
+  const onMouseMove: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (!cardRef.current) {
+      return;
+    }
 
     const rect = cardRef.current.getBoundingClientRect();
     const x = e.clientX - rect.left;

.dumi/theme/common/VersionUpgrade/index.tsx

@@ -29,13 +29,13 @@ const VersionUpgradeModal = () => {
   const [locale, lang] = useLocale(locales);
   const { pathname } = useLocation();
 
-  const [open, updateOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
   const isCN = lang === 'cn' || utils.isZhCN(pathname);
 
   function handleClose() {
     localStorage.setItem(STORAGE_KEY, Date.now().toString());
-    updateOpen(false);
+    setOpen(false);
   }
 
   React.useEffect(() => {
@@ -48,7 +48,7 @@ const VersionUpgradeModal = () => {
 
     if (!lastTime) {
       const timer = setTimeout(() => {
-        updateOpen(true);
+        setOpen(true);
       }, 1000);
 
       return () => {

.dumi/theme/plugins/raw-md.ts

@@ -101,7 +101,9 @@ let TOKEN_CACHE: { meta: TokenMeta; data: TokenData } | null | undefined;
  */
 function readJsonIfExists<T>(abs: string): T | null {
   try {
-    if (!fs.existsSync(abs)) return null;
+    if (!fs.existsSync(abs)) {
+      return null;
+    }
     return JSON.parse(fs.readFileSync(abs, 'utf-8')) as T;
   } catch {
     return null;
@@ -144,7 +146,9 @@ function replaceSemanticDomSection(md: string, context: ContentFilterContext) {
   // 从文档路径推断组件路径（用于生成链接）
   // 例如：components/card/index.en-US.md -> components/card/semantic.md
   const componentPathMatch = context.file.match(/components\/([^/]+)\//);
-  if (!componentPathMatch) return md;
+  if (!componentPathMatch) {
+    return md;
+  }
 
   const componentName = componentPathMatch[1];
   const isZhCN = /-cn\.md$/i.test(context.file) || /\.zh-CN\.md$/i.test(context.file);
@@ -154,10 +158,14 @@ function replaceSemanticDomSection(md: string, context: ContentFilterContext) {
   return md.replace(/<code[^>]*_semantic[^>]*>.*?<\/code>/g, (match) => {
     // 从匹配的标签中提取文件名
     const demoIndex = match.indexOf('./demo/');
-    if (demoIndex === -1) return match;
+    if (demoIndex === -1) {
+      return match;
+    }
     const start = demoIndex + './demo/'.length;
     const end = match.indexOf('"', start);
-    if (end === -1) return match;
+    if (end === -1) {
+      return match;
+    }
     const semanticFile = match.substring(start, end);
     // 生成对应的 semantic.md 文件名：_semantic.tsx -> semantic.md, _semantic_meta.tsx -> semantic_meta.md
     const semanticMdFileName = semanticFile
@@ -180,7 +188,9 @@ function getMaxBacktickRun(text: string) {
   let m: RegExpExecArray | null = re.exec(text);
 
   while (m) {
-    if (m[0].length > max) max = m[0].length;
+    if (m[0].length > max) {
+      max = m[0].length;
+    }
     m = re.exec(text);
   }
   return max;
@@ -244,7 +254,9 @@ function antdCodeAppend(docFileAbs: string, src: string): string {
     'i',
   );
   const match = demoMd.match(re);
-  if (!match) return demoMd.trim();
+  if (!match) {
+    return demoMd.trim();
+  }
   return (match[2] ?? '').trim();
 }
 
@@ -255,7 +267,7 @@ function antdCodeAppend(docFileAbs: string, src: string): string {
  *
  * @param md - 原始 markdown 内容
  * @param docFileAbs - 文档文件的绝对路径，用于解析相对路径和检测语言
- * @param enablePickLocaleBlock - 是否启用多语言块提取，可以是布尔值或函数，默认为 true
+ * @param codeAppend - 代码追加函数：在替换 <code src> 标签时，用于追加额外的内容（如 demo 描述信息）
  * @returns 替换后的 markdown 内容
  */
 function replaceCodeSrcToMarkdown(
@@ -305,8 +317,9 @@ function replaceCodeSrcToMarkdown(
  * @returns token 元数据和数据对象，如果文件不存在则返回 null
  */
 function loadTokenFromRepo(api: IApi) {
-  if (TOKEN_CACHE !== undefined) return TOKEN_CACHE;
-
+  if (TOKEN_CACHE !== undefined) {
+    return TOKEN_CACHE;
+  }
   const cwd = api.paths.cwd;
   const metaPath = path.join(cwd, 'components', 'version', 'token-meta.json');
   const dataPath = path.join(cwd, 'components', 'version', 'token.json');
@@ -345,9 +358,15 @@ function escapeMdCell(v: unknown) {
  * @returns 规范化后的字符串，null/undefined 返回空字符串
  */
 function normalizeValue(v: unknown) {
-  if (v === undefined || v === null) return '';
-  if (typeof v === 'string') return v.trim();
-  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  if (v === undefined || v === null) {
+    return '';
+  }
+  if (typeof v === 'string') {
+    return v.trim();
+  }
+  if (typeof v === 'number' || typeof v === 'boolean') {
+    return String(v);
+  }
   try {
     return JSON.stringify(v);
   } catch {
@@ -369,7 +388,9 @@ function normalizeValue(v: unknown) {
  */
 function replaceComponentTokenTable(md: string, context: ContentFilterContext) {
   const tokens = loadTokenFromRepo(context.api);
-  if (!tokens) return md;
+  if (!tokens) {
+    return md;
+  }
 
   const { meta: tokenMeta, data: tokenData } = tokens;
   const locale = detectDocLocale(context.file);
@@ -398,7 +419,9 @@ function replaceComponentTokenTable(md: string, context: ContentFilterContext) {
 
   return md.replace(re, (full, componentProp) => {
     const comp = String(componentProp || '').trim();
-    if (!comp) return full;
+    if (!comp) {
+      return full;
+    }
 
     const comps = comp
       .split(',')
@@ -474,7 +497,9 @@ function replaceComponentTokenTable(md: string, context: ContentFilterContext) {
     }
 
     // 如果没有生成任何内容，则保留原标签
-    if (!out.length) return full;
+    if (!out.length) {
+      return full;
+    }
     // 返回生成的 markdown 表格，前后添加换行确保格式正确
     return `\n\n${out.join('\n').trim()}\n\n`;
   });
@@ -489,8 +514,12 @@ function replaceComponentTokenTable(md: string, context: ContentFilterContext) {
  * @param api - Dumi API 实例，用于获取输出路径等配置
  */
 function emitRawMd(api: IApi) {
-  if (process.env.NODE_ENV !== 'production') return;
-  if (RAW_MD_EMITTED) return;
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  if (RAW_MD_EMITTED) {
+    return;
+  }
   RAW_MD_EMITTED = true;
 
   const outRoot = api.paths.absOutputPath;
@@ -499,7 +528,9 @@ function emitRawMd(api: IApi) {
     try {
       const { absPath, file } = route;
       const relPath = absPath.replace(/^\//, '');
-      if (!relPath || !fs.existsSync(file)) return;
+      if (!relPath || !fs.existsSync(file)) {
+        return;
+      }
 
       // 应用路由过滤器
       if (PLUGIN_OPTIONS.routeFilter && !PLUGIN_OPTIONS.routeFilter(route)) {
@@ -556,7 +587,6 @@ function emitRawMd(api: IApi) {
  * 2. 在 HTML 文件导出阶段输出处理后的 raw markdown 文件
  *
  * @param api - Dumi API 实例
- * @param options - 插件配置选项
  */
 export default function rawMdPlugin(api: IApi) {
   // 注册配置键，允许用户在配置中使用 rawMd 键

.dumi/theme/plugins/semantic-md.ts

@@ -19,8 +19,8 @@ function extractSemantics(objContent: string): Record<string, string> {
 }
 
 /**
- * 从 _semantic*.tsx 文件中提取语义信息
- * @param semanticFile - _semantic*.tsx 文件的绝对路径
+ * 从 _semantic*.tsx 文件内容中提取语义信息
+ * @param content - _semantic*.tsx 文件的文件内容字符串
  * @returns 包含中文和英文语义描述的对象，失败返回 null
  */
 function extractLocaleInfoFromContent(content: string): {
@@ -29,14 +29,20 @@ function extractLocaleInfoFromContent(content: string): {
 } | null {
   // 匹配 locales 对象定义
   const localesMatch = content.match(/const locales = \{([\s\S]*?)\};/);
-  if (!localesMatch) return null;
+  if (!localesMatch) {
+    return null;
+  }
 
   // 提取中文和英文的语义描述
   const cnMatch = content.match(/cn:\s*\{([\s\S]*?)\},?\s*en:/);
-  if (!cnMatch) return null;
+  if (!cnMatch) {
+    return null;
+  }
 
   const enMatch = content.match(/en:\s*\{([\s\S]*?)\}\s*[,;]/);
-  if (!enMatch) return null;
+  if (!enMatch) {
+    return null;
+  }
 
   const cnContent = cnMatch[1];
   const enContent = enMatch[1];
@@ -44,7 +50,9 @@ function extractLocaleInfoFromContent(content: string): {
   const cnSemantics = extractSemantics(cnContent);
   const enSemantics = extractSemantics(enContent);
 
-  if (Object.keys(cnSemantics).length === 0) return null;
+  if (Object.keys(cnSemantics).length === 0) {
+    return null;
+  }
 
   return { cn: cnSemantics, en: enSemantics };
 }
@@ -60,7 +68,9 @@ function resolveTemplateFilePath(semanticFile: string, importPath: string): stri
     path.join(basePath, 'index.ts'),
   ];
   for (const candidate of candidates) {
-    if (fs.existsSync(candidate)) return candidate;
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
   }
   return null;
 }
@@ -72,7 +82,9 @@ function parseTemplateUsage(content: string): Array<{ componentName: string; imp
   for (const match of content.matchAll(importRegex)) {
     const importClause = match[1].trim();
     const importPath = match[2].trim();
-    if (!importPath.startsWith('.')) continue;
+    if (!importPath.startsWith('.')) {
+      continue;
+    }
 
     const componentNames: string[] = [];
     if (importClause.startsWith('{')) {
@@ -119,7 +131,9 @@ function parseTemplateUsage(content: string): Array<{ componentName: string; imp
 // 解析 ignoreSemantics 属性值
 function parseIgnoreSemantics(propsString: string): string[] {
   const ignoreMatch = propsString.match(/ignoreSemantics\s*=\s*\{([\s\S]*?)\}/);
-  if (!ignoreMatch) return [];
+  if (!ignoreMatch) {
+    return [];
+  }
   const ignoreContent = ignoreMatch[1];
   return Array.from(ignoreContent.matchAll(/['"]([^'"]+)['"]/g)).map((match) => match[1]);
 }
@@ -127,8 +141,12 @@ function parseIgnoreSemantics(propsString: string): string[] {
 // 解析 singleOnly 属性值
 function parseSingleOnly(propsString: string): boolean {
   const singleOnlyMatch = propsString.match(/singleOnly(\s*=\s*\{?([^}\s]+)\}?)?/);
-  if (!singleOnlyMatch) return false;
-  if (!singleOnlyMatch[1]) return true;
+  if (!singleOnlyMatch) {
+    return false;
+  }
+  if (!singleOnlyMatch[1]) {
+    return true;
+  }
   const value = singleOnlyMatch[2];
   return value !== 'false';
 }
@@ -136,7 +154,9 @@ function parseSingleOnly(propsString: string): boolean {
 // 抽取模板组件 JSX 的属性字符串
 function extractTemplateProps(content: string, componentName: string): string {
   const start = content.indexOf(`<${componentName}`);
-  if (start === -1) return '';
+  if (start === -1) {
+    return '';
+  }
   let index = start + componentName.length + 1;
   const propsStart = index;
   let braceDepth = 0;
@@ -164,7 +184,9 @@ function extractTemplateProps(content: string, componentName: string): string {
     }
 
     if (ch === '}') {
-      if (braceDepth > 0) braceDepth -= 1;
+      if (braceDepth > 0) {
+        braceDepth -= 1;
+      }
       continue;
     }
 
@@ -198,15 +220,21 @@ function extractSemanticInfoFromTemplate(
   content: string,
 ): { cn: Record<string, string>; en: Record<string, string> } | null {
   const templates = parseTemplateUsage(content);
-  if (templates.length === 0) return null;
+  if (templates.length === 0) {
+    return null;
+  }
 
   for (const template of templates) {
     const templatePath = resolveTemplateFilePath(semanticFile, template.importPath);
-    if (!templatePath) continue;
+    if (!templatePath) {
+      continue;
+    }
 
     const templateContent = fs.readFileSync(templatePath, 'utf-8');
     const templateLocales = extractLocaleInfoFromContent(templateContent);
-    if (!templateLocales) continue;
+    if (!templateLocales) {
+      continue;
+    }
 
     const propsString = extractTemplateProps(content, template.componentName);
     const ignoreSemantics = parseIgnoreSemantics(propsString);
@@ -235,11 +263,15 @@ function extractSemanticInfo(semanticFile: string): {
   en: Record<string, string>;
 } | null {
   try {
-    if (!fs.existsSync(semanticFile)) return null;
+    if (!fs.existsSync(semanticFile)) {
+      return null;
+    }
 
     const content = fs.readFileSync(semanticFile, 'utf-8');
     const localeInfo = extractLocaleInfoFromContent(content);
-    if (localeInfo) return localeInfo;
+    if (localeInfo) {
+      return localeInfo;
+    }
 
     return extractSemanticInfoFromTemplate(semanticFile, content);
   } catch (error) {
@@ -324,9 +356,12 @@ function getComponentHTMLSnapshot(semanticFile: string, cwd: string): string | n
   try {
     const relativePath = path.relative(cwd, semanticFile);
     const pathMatch = relativePath.match(/^components\/([^/]+)\/demo\/([^/]+)\.tsx$/);
-    if (!pathMatch) return null;
+    if (!pathMatch) {
+      return null;
+    }
 
     const [, componentName, fileName] = pathMatch;
+
     const snapshotPath = path.join(
       cwd,
       'components',
@@ -336,7 +371,9 @@ function getComponentHTMLSnapshot(semanticFile: string, cwd: string): string | n
       'demo-semantic.test.tsx.snap',
     );
 
-    if (!fs.existsSync(snapshotPath)) return null;
+    if (!fs.existsSync(snapshotPath)) {
+      return null;
+    }
 
     const snapshotContent = fs.readFileSync(snapshotPath, 'utf-8');
     // 匹配快照 key：exports[`renders components/button/demo/_semantic.tsx correctly 1`] = `...`;
@@ -345,7 +382,9 @@ function getComponentHTMLSnapshot(semanticFile: string, cwd: string): string | n
       `exports\\[\\\`[^\\\`]*${snapshotKeyPattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[^\\\`]*\\\`\\]\\s*=\\s*\\\`([\\s\\S]*?)\\\`;`,
     );
     const snapshotMatch = snapshotContent.match(regex);
-    if (!snapshotMatch) return null;
+    if (!snapshotMatch) {
+      return null;
+    }
 
     let html = snapshotMatch[1].trim();
 
@@ -415,8 +454,12 @@ function getComponentHTMLSnapshot(semanticFile: string, cwd: string): string | n
  * @param api - Dumi API 实例
  */
 function emitSemanticMd(api: IApi) {
-  if (process.env.NODE_ENV !== 'production') return;
-  if (SEMANTIC_MD_EMITTED) return;
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  if (SEMANTIC_MD_EMITTED) {
+    return;
+  }
   SEMANTIC_MD_EMITTED = true;
 
   const outRoot = api.paths.absOutputPath;

.github/workflows/pr-check-merge.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: blacksmith-4vcpu-ubuntu-2404
     if: (github.event.pull_request.head.ref == 'next' || github.event.pull_request.head.ref == 'feature' || github.event.pull_request.head.ref == 'master') && github.event.pull_request.head.user.login == 'ant-design'
     steps:
-      - uses: actions-cool/issues-helper@e2ff99831a4f13625d35064e2b3dfe65c07a0396
+      - uses: actions-cool/issues-helper@e361abf610221f09495ad510cb1e69328d839e1c
         with:
           actions: create-comment
           issue-number: ${{ github.event.number }}

.github/workflows/preview-deploy.yml

@@ -63,7 +63,7 @@ jobs:
     steps:
       # We need get PR id first
       - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -83,7 +83,7 @@ jobs:
       # Download site artifact
       - name: download site artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/size-limit.yml

@@ -17,12 +17,12 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: oven-sh/setup-bun@v2
+      - uses: utooland/setup-utoo@v1
       - name: size-limit
         uses: ant-design/size-limit-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          package_manager: bun
+          package_manager: ut
           build_script: dist
         env:
           NODE_OPTIONS: --max_old_space_size=4096

.github/workflows/visual-regression-diff-finish.yml

@@ -70,7 +70,7 @@ jobs:
 
       # We need get persist-index first
       - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -92,7 +92,7 @@ jobs:
       - name: download report artifact
         id: download_report
         if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/visual-regression-persist-finish.yml

@@ -67,7 +67,7 @@ jobs:
 
       # We need get persist key first
       - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -81,7 +81,7 @@ jobs:
 
       - name: Download Visual-Regression Artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v14
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.gitignore

@@ -78,6 +78,7 @@ __image_snapshots__/
 .env
 examples/
 .neocoder/
+.claude/
 
 # generated css
 components/style/antd.css

.jest.image.js

@@ -1,13 +1,11 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
-// jest config for image snapshots
 module.exports = {
   setupFiles: ['./tests/setup.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },

.jest.js

@@ -11,6 +11,7 @@ const compileModules = [
   'parse5',
   '@exodus',
   'jsdom',
+  '@csstools',
 ];
 
 // cnpm use `_` as prefix
@@ -62,7 +63,7 @@ module.exports = {
   ],
   transform: {
     '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '\\.(m?)js(m)?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },

.jest.node.js

@@ -1,14 +1,12 @@
 const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
-// jest config for server render environment
 module.exports = {
   setupFiles: ['./tests/setup.ts'],
   setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
   moduleNameMapper,
   transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
+    '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },

CHANGELOG.en-US.md

@@ -15,6 +15,61 @@ tag: vVERSION
 
 ---
 
+## 6.3.0
+
+`2026-02-10`
+
+- ConfigProvider
+  - 🆕 Support ConfigProvider global configuration of `maskClosable` for Modal and Drawer. [#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
+  - 🆕 Support ConfigProvider `suffixIcon` global configuration for DatePicker and TimePicker. [#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Support ConfigProvider `expandIcon` and `loadingIcon` global configuration for Cascader. [#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Support ConfigProvider `scroll` global configuration for Table. [#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
+  - 🆕 Support ConfigProvider `className` and `style` configuration for App, and `arrow` prop for ColorPicker. [#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
+  - 🆕 Support ConfigProvider `loadingIcon` global configuration for Button. [#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Support ConfigProvider `rangePicker.separator` global configuration. [#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Support ConfigProvider `tooltipIcon` and `tooltipProps` global configuration for Form. [#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
+- Upload
+  - 🆕 Add Upload `classNames.trigger` and `styles.trigger` props. [#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
+  - 🆕 Support Upload.Dragger `onDoubleClick` event. [#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 Fix Upload missing default height for `picture-card` / `picture-circle` parent nodes. [#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
+- 🆕 Add Grid `xxxl` (1920px) breakpoint to adapt to FHD screens. [#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Support Switch `indicator` customization for semantic structure. [#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
+- Button
+  - 🐞 Fix Button reversed `hover` and `active` colors for `color` in dark theme. [#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Fix Button border size not following Design Token `lineWidth`. [#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
+- Select
+  - 💄 Remove Select redundant `-content-value` div DOM in single mode to optimize semantic structure, allowing override via `classNames` and `styles`. [#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Fix Select `notFoundContent` not taking effect. [#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- Radio
+  - 🐞 Fix Radio.Group extra right margin for radio items when vertically aligned. [#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
+  - 💄 Remove Radio `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
+- 💄 Disable Modal & Drawer mask blur effect by default. [#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 Fix Tooltip & Popover popup animation starting position being shifted to the left. [#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix List color-related tokens not working for deprecated component config. [#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
+- 🛠 Refactor Spin DOM structure to align across different scenarios and support full Semantic Structure. [#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
+- ⌨️ ♿ Add Icon accessibility names to the search icon SVG to improve screen reader support. [#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
+- 🐞 Fix Cascader filter list resetting immediately when closing on selection in search mode, affecting UX. [#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
+- ⌨️ ♿ Improve Tree accessibility support. [#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 Support ColorPicker semantic structure for selection block, and fix `root` semantic being incorrectly applied to popup elements. [#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
+- 💄 Change Avatar default value of `size` from `default` to `medium` for consistency. [#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 Remove Checkbox `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
+- MISC
+  - 🐞 MISC: Fix React Compiler compatibility in UMD version, now disabled by default. [#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 Streamline `styles` and `classNames` type definitions for better standardization. [#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
+
+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 Fix Button `defaultBg`, `defaultColor`, `defaultHoverColor` and `defaultActiveColor` tokens not taking effect. [#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 Fix Button default tokens not taking effect. [#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 Fix Button `variant="solid"` borders displaying incorrectly inside Space.Compact. [#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 Fix Input.TextArea ref missing `nativeElement` property. [#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 Fix Flex default `align` not taking effect when using `orientation`. [#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 Fix Typography link selector specificity being too low causing styles to be overridden. [#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix ColorPicker HEX input allowing invalid characters. [#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
 ## 6.2.2
 
 `2026-01-26`

CHANGELOG.zh-CN.md

@@ -15,6 +15,61 @@ tag: vVERSION
 
 ---
 
+## 6.3.0
+
+`2026-02-10`
+
+- ConfigProvider
+  - 🆕 ConfigProvider 支持 Modal 和 Drawer 的 `maskClosable` 全局配置。[#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
+  - 🆕 ConfigProvider 支持 DatePicker 和 TimePicker 的 `suffixIcon` 全局配置。[#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 ConfigProvider 支持 Cascader 的 `expandIcon` 和 `loadingIcon` 全局配置。[#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 ConfigProvider 支持 Table 的 `scroll` 全局配置。[#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
+  - 🆕 ConfigProvider 支持配置 App 的 `className` 与 `style`，以及 ColorPicker 的 `arrow` 属性。[#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
+  - 🆕 ConfigProvider 支持 Button 的 `loadingIcon` 全局配置。[#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 ConfigProvider 支持 `rangePicker.separator` 全局配置。[#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 ConfigProvider 支持 Form 的 `tooltipIcon` 和 `tooltipProps` 全局配置。[#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
+- Upload
+  - 🆕 Upload 新增 `classNames.trigger` 和 `styles.trigger` 属性。[#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
+  - 🆕 Upload.Dragger 支持 `onDoubleClick` 事件。[#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 Upload 修复 `picture-card` / `picture-circle` 父节点缺少默认高度的问题。[#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
+- 🆕 Grid 新增 `xxxl`（1920px）断点以适应 FHD 屏幕。[#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Switch 语义化结构支持 `indicator` 定制。[#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
+- Button
+  - 🐞 Button 修复暗色主题下 `color` 的 `hover` 与 `active` 状态颜色相反的问题。[#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Button 修复边框尺寸未跟随 Design Token `lineWidth` 的问题。[#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
+- Select
+  - 💄 Select 移除单选模式下额外的 `-content-value` div DOM，优化语义化结构并支持通过 `classNames` 与 `styles` 覆盖。[#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Select 修复 `notFoundContent` 不生效的问题。[#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
+- Radio
+  - 🐞 Radio.Group 修复垂直排列时单选项出现多余右边距的问题。[#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
+  - 💄 Radio 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
+- 💄 Modal & Drawer 默认关闭蒙层 blur 效果。[#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 Tooltip & Popover 修复弹出层动画起始位置偏左的问题。[#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
+- 🐞 List 修复废弃组件配置的颜色相关 token 不生效的问题。[#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
+- 🛠 Spin 重构 DOM 结构以对齐不同场景，并支持全量语义化结构（Semantic Structure）。[#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
+- ⌨️ ♿ Icon 为搜索图标 SVG 添加无障碍名称，改善屏幕阅读器支持。[#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
+- 🐞 Cascader 修复搜索模式下选择选项并关闭时，过滤列表立即还原影响体验的问题。[#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
+- ⌨️ ♿ Tree 优化无障碍支持。[#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 ColorPicker 选择块支持语义化结构，并修复 `root` 语义化错误应用到弹出元素的问题。[#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
+- 💄 Avatar 将 `size` 默认值从 `default` 改为 `medium` 以保持一致性。[#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
+- 💄 Checkbox 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
+- MISC
+  - 🐞 MISC: 修复 UMD 版本中 React Compiler 兼容性问题，现已默认关闭。[#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 精简 `styles` 和 `classNames` 类型定义，使其更规范。[#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
+
+## 6.2.3
+
+`2026-02-02`
+
+- Button
+  - 🐞 修复 Button `defaultBg`、`defaultColor`、`defaultHoverColor` 和 `defaultActiveColor` token 不生效的问题。[#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
+  - 🐞 修复 Button 默认 token 不生效的问题。[#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
+  - 🐞 修复 Button `variant="solid"` 在 Space.Compact 中边框显示异常的问题。[#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
+- 🐞 修复 Input.TextArea ref 缺少 `nativeElement` 属性的问题。[#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
+- 🐞 修复 Flex 使用 `orientation` 时默认 `align` 不生效的问题。[#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
+- 🐞 修复 Typography 链接选择器特异性过低导致样式被覆盖的问题。[#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 ColorPicker HEX 输入框可以输入无效字符的问题。[#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
+
 ## 6.2.2
 
 `2026-01-26`

README-zh_CN.md

@@ -14,7 +14,7 @@
 
 ## ❤️ 赞助者 [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218)
 
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
+[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](https://lobehub.com/)
 
 [npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/antd
@@ -115,6 +115,7 @@ export default App;
 
 - [首页](https://ant.design/)
 - [所有组件](https://ant.design/components/overview-cn)
+- [赞助](https://ant.design/docs/react/sponsor)
 - [更新日志](CHANGELOG.zh-CN.md)
 - [React 底层基础组件](https://react-component.github.io/)
 - [🆕 Ant Design X](https://x.ant.design/index-cn)
@@ -186,7 +187,7 @@ $ npm start
 </table>
 
 <a href="https://openomy.app/github/ant-design/ant-design" target="_blank" style="display: block; width: 100%;" align="center">
-  <img src="https://openomy.app/svg?repo=ant-design/ant-design&chart=bubble&latestMonth=3" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
+  <img src="https://openomy.app/svg?repo=ant-design/ant-design&chart=bubble&latestMonth=3" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
 </a>
 
 请参考[贡献指南](https://ant.design/docs/react/contributing-cn).

README.md

@@ -14,7 +14,7 @@ An enterprise-class UI design language and React UI library.
 
 ## ❤️ Sponsors [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218)
 
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
+[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](https://lobehub.com/)
 
 [npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/antd
@@ -98,6 +98,7 @@ export default () => (
 
 - [Home page](https://ant.design/)
 - [Components Overview](https://ant.design/components/overview)
+- [Sponsor](https://ant.design/docs/react/sponsor)
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](https://react-component.github.io/)
 - [🆕 Ant Design X](https://x.ant.design/index-cn)

SECURITY.md

@@ -2,7 +2,7 @@
 
 ## Supported Versions
 
-Use this section to tell people about which versions of your project are currently being supported with security updates.
+Versions of ant-design that are currently supported with security updates:
 
 | Version | Supported          |
 | ------- | ------------------ |
@@ -12,6 +12,14 @@ Use this section to tell people about which versions of your project are current
 
 ## Reporting a Vulnerability
 
-Use this section to tell people how to report a vulnerability.
+Security vulnerabilities in ant-design are handled by the ant-design team.
 
-Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.
+### How to Report
+
+If you find a security vulnerability, please **do not** open a public issue. Instead, please send an email to **security@ant.design**. Include details about:
+
+- The affected version(s)
+- Steps to reproduce the vulnerability
+- Potential impact of the vulnerability
+
+Our team will review your report and respond as soon as possible. We appreciate your help in reporting security issues responsibly.

components/__tests__/blog.test.ts

@@ -1,35 +1,24 @@
-const fs = require('fs');
+import fs from 'node:fs';
+import path from 'node:path';
 
-const path = require('path');
+const blogDir = path.join(__dirname, '../../docs/blog');
 
-const blogList = [
-  'check-conduct',
-  'contributor-development-maintenance-guide',
-  'css-in-js',
-  'extract-ssr',
-  'getContainer',
-  'github-actions-workflow',
-  'issue-helper',
-  'mock-project-build',
-  'modal-hook-order',
-  'testing-migrate',
-  'render-times',
-  'to-be-collaborator',
-  'tooltip-align',
-  'tree-shaking',
-  'why-not-static',
-].map((blogName) => path.join(__dirname, `../../docs/blog/${blogName}.en-US.md`));
+const blogList = fs
+  .readdirSync(blogDir, { withFileTypes: true })
+  .filter((entry) => entry.isFile())
+  .map((entry) => entry.name)
+  .filter((file) => file.endsWith('.en-US.md'))
+  .map((file) => path.join(blogDir, file));
 
-describe('blog', () => {
+describe('Chinese detected in en-US blog', () => {
   it('should not include Chinese in en-US blog', () => {
-    blogList.forEach((blog) => {
-      fs.readFile(blog, (err: NodeJS.ErrnoException | null, data: Buffer) => {
-        if (err) {
-          return;
-        }
-        const includeChinese = /[\u4E00-\u9FA5]/.test(data.toString());
-        expect(includeChinese).toBe(false);
-      });
-    });
+    for (const blog of blogList) {
+      const data = fs.readFileSync(blog, 'utf-8');
+      const includeChinese = /[\u4E00-\u9FA5]/.test(data);
+      if (includeChinese) {
+        console.error('❌ 检测到中文：', blog);
+      }
+      expect(includeChinese).toBe(false);
+    }
   });
 });

components/_util/__tests__/useZIndex.test.tsx

@@ -26,7 +26,7 @@ import {
 import type { ZIndexConsumer, ZIndexContainer } from '../hooks/useZIndex';
 import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '../hooks/useZIndex';
 import { resetWarned } from '../warning';
-import zIndexContext from '../zindexContext';
+import ZIndexContext from '../zindexContext';
 
 // TODO: Remove this. Mock for React 19
 jest.mock('react-dom', () => {
@@ -45,7 +45,7 @@ const WrapWithProvider: React.FC<PropsWithChildren<{ container: ZIndexContainer
   container,
 }) => {
   const [, contextZIndex] = useZIndex(container);
-  return <zIndexContext.Provider value={contextZIndex}>{children}</zIndexContext.Provider>;
+  return <ZIndexContext.Provider value={contextZIndex}>{children}</ZIndexContext.Provider>;
 };
 
 const containerComponent: Partial<

components/_util/hooks/useMergedMask.ts

@@ -3,35 +3,52 @@ import { useMemo } from 'react';
 export interface MaskConfig {
   enabled?: boolean;
   blur?: boolean;
+  closable?: boolean;
 }
 export type MaskType = MaskConfig | boolean;
 
-const normalizeMaskConfig = (mask?: MaskType): MaskConfig => {
+export const normalizeMaskConfig = (mask?: MaskType, maskClosable?: boolean): MaskConfig => {
+  let maskConfig: MaskConfig = {};
+
   if (mask && typeof mask === 'object') {
-    return mask;
+    maskConfig = mask;
   }
   if (typeof mask === 'boolean') {
-    return {
+    maskConfig = {
       enabled: mask,
-      blur: false,
     };
   }
-  return {};
+
+  if (maskConfig.closable === undefined && maskClosable !== undefined) {
+    maskConfig.closable = maskClosable;
+  }
+
+  return maskConfig;
 };
 
 export const useMergedMask = (
   mask?: MaskType,
   contextMask?: MaskType,
   prefixCls?: string,
-): [boolean, { [key: string]: string | undefined }] => {
+  maskClosable?: boolean,
+): [
+  config: boolean,
+  maskBlurClassName: { [key: string]: string | undefined },
+  maskClosable: boolean,
+] => {
   return useMemo(() => {
-    const maskConfig = normalizeMaskConfig(mask);
+    const maskConfig = normalizeMaskConfig(mask, maskClosable);
     const contextMaskConfig = normalizeMaskConfig(contextMask);
 
-    const mergedConfig: MaskConfig = { ...contextMaskConfig, ...maskConfig };
+    const mergedConfig: MaskConfig = {
+      blur: false,
+      ...contextMaskConfig,
+      ...maskConfig,
+      closable: maskConfig.closable ?? maskClosable ?? contextMaskConfig.closable ?? true,
+    };
 
     const className = mergedConfig.blur ? `${prefixCls}-mask-blur` : undefined;
 
-    return [mergedConfig.enabled !== false, { mask: className }];
-  }, [mask, contextMask, prefixCls]);
+    return [mergedConfig.enabled !== false, { mask: className }, !!mergedConfig.closable];
+  }, [mask, contextMask, prefixCls, maskClosable]);
 };

components/_util/hooks/useZIndex.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import useToken from '../../theme/useToken';
 import { devUseWarning } from '../warning';
-import zIndexContext from '../zindexContext';
+import ZIndexContext from '../zindexContext';
 
 export type ZIndexContainer =
   | 'Modal'
@@ -61,7 +61,7 @@ export const useZIndex = (
   customZIndex?: number,
 ): ReturnResult => {
   const [, token] = useToken();
-  const parentZIndex = React.useContext(zIndexContext);
+  const parentZIndex = React.useContext(ZIndexContext);
   const isContainer = isContainerType(componentType);
 
   let result: ReturnResult;

components/_util/responsiveObserver.ts

@@ -3,12 +3,14 @@ import React from 'react';
 import type { GlobalToken } from '../theme/internal';
 import { useToken } from '../theme/internal';
 
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const;
+export const responsiveArrayReversed = [...responsiveArray].reverse();
+
+export type Breakpoint = (typeof responsiveArray)[number];
 export type BreakpointMap = Record<Breakpoint, string>;
 export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
-export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 type SubscribeFunc = (screens: ScreenMap) => void;
 
 const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
@@ -18,6 +20,7 @@ const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
   lg: `(min-width: ${token.screenLG}px)`,
   xl: `(min-width: ${token.screenXL}px)`,
   xxl: `(min-width: ${token.screenXXL}px)`,
+  xxxl: `(min-width: ${token.screenXXXL}px)`,
 });
 
 /**

components/_util/wave/WaveEffect.tsx

@@ -34,7 +34,7 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const [varName] = genCssVar(rootPrefixCls, 'wave');
 
   // ===================== Effect =====================
-  const [color, setWaveColor] = React.useState<string | null>(null);
+  const [waveColor, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -50,8 +50,8 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
     borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
   };
 
-  if (color) {
-    waveStyle[varName('color')] = color;
+  if (waveColor) {
+    waveStyle[varName('color')] = waveColor;
   }
 
   function syncPos() {

components/_util/wave/style.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { genComponentStyleHook } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genCssVar } from '../../theme/util/genStyleUtils';
@@ -7,8 +9,15 @@ export interface ComponentToken {}
 
 export interface WaveToken extends FullToken<'Wave'> {}
 
-const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
-  const { componentCls, colorPrimary, antCls } = token;
+const genWaveStyle: GenerateStyle<WaveToken, CSSObject> = (token) => {
+  const {
+    componentCls,
+    colorPrimary,
+    motionDurationSlow,
+    motionEaseInOut,
+    motionEaseOutCirc,
+    antCls,
+  } = token;
   const [, varRef] = genCssVar(antCls, 'wave');
   return {
     [componentCls]: {
@@ -22,20 +31,18 @@ const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
 
       // =================== Motion ===================
       '&.wave-motion-appear': {
-        transition: [
-          `box-shadow 0.4s ${token.motionEaseOutCirc}`,
-          `opacity 2s ${token.motionEaseOutCirc}`,
-        ].join(','),
+        transition: [`box-shadow 0.4s`, `opacity 2s`]
+          .map((prop) => `${prop} ${motionEaseOutCirc}`)
+          .join(','),
 
         '&-active': {
           boxShadow: `0 0 0 6px currentcolor`,
           opacity: 0,
         },
         '&.wave-quick': {
-          transition: [
-            `box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-            `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-          ].join(','),
+          transition: [`box-shadow`, `opacity`]
+            .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
+            .join(','),
         },
       },
     },

components/_util/zindexContext.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const zIndexContext = React.createContext<number | undefined>(undefined);
+const ZIndexContext = React.createContext<number | undefined>(undefined);
 
 if (process.env.NODE_ENV !== 'production') {
-  zIndexContext.displayName = 'zIndexContext';
+  ZIndexContext.displayName = 'ZIndexContext';
 }
 
-export default zIndexContext;
+export default ZIndexContext;

components/affix/index.en-US.md

@@ -19,7 +19,7 @@ Please note that Affix should not cover other content on the page, especially wh
 
 > Notes for developers
 >
-> After version `5.10.0`, we rewrite Affix use FC, Some methods of obtaining `ref` and calling internal instance methods will invalid.
+> After version `5.10.0`, we rewrite Affix use FC, Some methods of obtaining `ref` and calling internal instance methods will be invalid.
 
 ## Examples
 

components/affix/index.tsx

@@ -17,9 +17,9 @@ const TRIGGER_EVENTS: (keyof WindowEventMap)[] = [
   'load',
 ];
 
-function getDefaultTarget() {
+const getDefaultTarget = () => {
   return typeof window !== 'undefined' ? window : null;
-}
+};
 
 // Affix
 export interface AffixProps {
@@ -37,6 +37,7 @@ export interface AffixProps {
   rootClassName?: string;
   children: React.ReactNode;
 }
+
 const AFFIX_STATUS_NONE = 0;
 const AFFIX_STATUS_PREPARE = 1;
 

components/affix/style/index.ts

@@ -1,5 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -16,7 +14,7 @@ interface AffixToken extends FullToken<'Affix'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
+const genSharedAffixStyle: GenerateStyle<AffixToken> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/alert/style/index.ts

@@ -43,7 +43,7 @@ const genAlertTypeStyle = (
   },
 });
 
-export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genBaseStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
     motionDurationSlow: duration,
@@ -98,9 +98,9 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       [`&${componentCls}-motion-leave`]: {
         overflow: 'hidden',
         opacity: 1,
-        transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
-        padding-top ${duration} ${motionEaseInOutCirc}, padding-bottom ${duration} ${motionEaseInOutCirc},
-        margin-bottom ${duration} ${motionEaseInOutCirc}`,
+        transition: [`max-height`, `opacity`, `padding-top`, `padding-bottom`, `margin-bottom`]
+          .map((prop) => `${prop} ${duration} ${motionEaseInOutCirc}`)
+          .join(', '),
       },
 
       [`&${componentCls}-motion-leave-active`]: {
@@ -142,7 +142,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
   };
 };
 
-export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genTypeStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
 
@@ -191,7 +191,7 @@ export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
   };
 };
 
-export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
+export const genActionStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,

components/anchor/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
@@ -45,7 +46,7 @@ interface AnchorToken extends FullToken<'Anchor'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token) => {
+const genSharedAnchorStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
   const {
     componentCls,
     holderOffsetBlock,
@@ -131,7 +132,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token) => {
   };
 };
 
-const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token) => {
+const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
   const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token;
 
   return {
@@ -170,7 +171,9 @@ const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token) => {
         [`${componentCls}-ink`]: {
           position: 'absolute',
           bottom: 0,
-          transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`,
+          transition: [`left`, `width`]
+            .map((prop) => `${prop} ${motionDurationSlow} ease-in-out`)
+            .join(', '),
           height: lineWidthBold,
           backgroundColor: colorPrimary,
         },

components/app/style/index.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -7,7 +9,7 @@ export interface ComponentToken {}
 interface AppToken extends FullToken<'App'> {}
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<AppToken> = (token) => {
+const genBaseStyle: GenerateStyle<AppToken, CSSObject> = (token) => {
   const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
   return {
     [componentCls]: {

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

@@ -13,15 +13,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -124,15 +119,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -167,15 +157,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -278,15 +263,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -321,15 +301,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -432,15 +407,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
       style="width: 200px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -2371,15 +2341,10 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
       style="width: 120px; margin: 0px;"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="Lucy"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility: hidden;"
-          title="Lucy"
-        >
-          Lucy
-        </div>
+        Lucy
         <input
           aria-autocomplete="list"
           aria-expanded="false"

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

@@ -13,15 +13,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -63,15 +58,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -94,15 +84,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -144,15 +129,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -175,15 +155,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -225,15 +200,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx corre
       style="width:200px"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="centered"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="centered"
-        >
-          centered
-        </div>
+        centered
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -1307,15 +1277,10 @@ exports[`renders components/auto-complete/demo/render-panel.tsx correctly 1`] =
       style="width:120px;margin:0"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value ant-select-content-has-search-value"
+        title="Lucy"
       >
-        <div
-          class="ant-select-content-value"
-          style="visibility:hidden"
-          title="Lucy"
-        >
-          Lucy
-        </div>
+        Lucy
         <input
           aria-autocomplete="list"
           aria-expanded="false"

components/avatar/Avatar.tsx

@@ -114,7 +114,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
   const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'medium');
 
   const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
-    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+    responsiveArray.includes(key as Breakpoint),
   );
   const screens = useBreakpoint(needResponsive);
   const responsiveSizeStyle = React.useMemo<React.CSSProperties>(() => {

components/avatar/style/index.ts

@@ -78,7 +78,7 @@ type AvatarToken = FullToken<'Avatar'> & {
   avatarColor: string;
 };
 
-const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
+const genBaseStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
   const {
     antCls,
     componentCls,
@@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
   };
 };
 
-const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
+const genGroupStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
   const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
 
   return {

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

@@ -4,35 +4,7 @@ exports[`renders components/back-top/demo/basic.tsx correctly 1`] = `
 Array [
   <div
     class="css-var-test-id ant-back-top"
-  >
-    <div
-      class="ant-back-top-content"
-    >
-      <div
-        class="ant-back-top-icon"
-      >
-        <span
-          aria-label="vertical-align-top"
-          class="anticon anticon-vertical-align-top"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="vertical-align-top"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </div>,
+  />,
   Scroll down to see the bottom-right.,
 ]
 `;

components/back-top/style/index.ts

@@ -65,7 +65,7 @@ type BackTopToken = FullToken<'BackTop'> & {
 };
 
 // ============================== Shared ==============================
-const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): CSSObject => {
+const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
   const { componentCls, backTopFontSize, backTopSize, zIndexPopup } = token;
 
   return {
@@ -109,7 +109,7 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
   };
 };
 
-const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject => {
+const genMediaBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
   const { componentCls, screenMD, screenXS, backTopInlineEndMD, backTopInlineEndXS } = token;
   return {
     [`@media (max-width: ${unit(screenMD)})`]: {

components/badge/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -139,7 +140,7 @@ const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
   },
 });
 
-const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
+const genSharedBadgeStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,
@@ -372,7 +373,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Badge'>>[0]) => {
   const { fontHeight, lineWidth, marginXS, colorBorderBg } = token;
 
   const badgeFontHeight = fontHeight;

components/badge/style/ribbon.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { prepareComponentToken, prepareToken } from '.';
@@ -7,7 +8,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import { genPresetColor, genStyleHooks } from '../../theme/internal';
 
 // ============================== Ribbon ==============================
-const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
+const genRibbonStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
   const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset, calc } = token;
   const ribbonPrefixCls = `${antCls}-ribbon`;
   const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;

components/button/Button.tsx

@@ -225,7 +225,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   const loadingOrDelay = useMemo<LoadingConfigType>(() => getLoadingConfig(loading), [loading]);
 
-  const [innerLoading, setLoading] = useState<boolean>(loadingOrDelay.loading);
+  const [innerLoading, setInnerLoading] = useState<boolean>(loadingOrDelay.loading);
 
   const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);
 
@@ -255,10 +255,10 @@ const InternalCompoundedButton = React.forwardRef<
     if (loadingOrDelay.delay > 0) {
       delayTimer = setTimeout(() => {
         delayTimer = null;
-        setLoading(true);
+        setInnerLoading(true);
       }, loadingOrDelay.delay);
     } else {
-      setLoading(loadingOrDelay.loading);
+      setInnerLoading(loadingOrDelay.loading);
     }
 
     function cleanupTimer() {

components/button/demo/component-token.tsx

@@ -1,8 +1,222 @@
 import React from 'react';
+import { SearchOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Flex } from 'antd';
 
 const App: React.FC = () => (
   <Flex gap="small" vertical>
+    <div>Component Token</div>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            fontWeight: '900',
+            contentFontSizeSM: 20,
+            contentFontSize: 30,
+            contentFontSizeLG: 40,
+            paddingInlineSM: 20,
+            paddingInline: 30,
+            paddingInlineLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small">Small</Button>
+        <Button>Default</Button>
+        <Button size="large">Large</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dangerColor: 'green',
+            dangerShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button danger>Default</Button>
+        <Button danger type="primary">
+          Primary
+        </Button>
+        <Button danger type="dashed">
+          Dashed
+        </Button>
+        <Button danger type="text">
+          Text
+        </Button>
+        <Button danger type="link">
+          Link
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dashedBgDisabled: 'red',
+          },
+        },
+      }}
+    >
+      <Button type="dashed" disabled>
+        Dashed Disabled
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultColor: 'red',
+            defaultBg: 'blue',
+            defaultBorderColor: 'green',
+            defaultShadow: 'yellow',
+            defaultBgDisabled: 'pink',
+
+            defaultHoverColor: 'brown',
+            defaultHoverBg: 'orange',
+            defaultHoverBorderColor: 'purple',
+
+            defaultActiveColor: 'fuchsia',
+            defaultActiveBg: 'aqua',
+            defaultActiveBorderColor: 'lime',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button>Default</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <Button disabled>Disabled</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            ghostBg: 'red',
+            defaultGhostColor: 'yellow',
+            defaultGhostBorderColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button ghost>Default</Button>
+        <Button ghost type="dashed">
+          Dashed
+        </Button>
+        <Button ghost type="text">
+          Text
+        </Button>
+        <Button ghost type="link">
+          Link
+        </Button>
+        <Button ghost type="primary">
+          Primary
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            iconGap: 40,
+          },
+        },
+      }}
+    >
+      <Button icon={<SearchOutlined />}>icon gap 40</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            linkHoverBg: 'red',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button type="link" href="https://ant.design">
+          Link
+        </Button>
+        <Button disabled type="link" href="https://ant.design">
+          Link(disabled)
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            onlyIconSizeSM: 20,
+            onlyIconSize: 30,
+            onlyIconSizeLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small" icon={<SearchOutlined />} />
+        <Button icon={<SearchOutlined />} />
+        <Button size="large" icon={<SearchOutlined />} />
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            primaryColor: 'red',
+            primaryShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Button type="primary">Primary</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            solidTextColor: 'red',
+          },
+        },
+      }}
+    >
+      <Button variant="solid" color="default">
+        Solid
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            textTextColor: 'red',
+            textHoverBg: 'yellow',
+            textTextHoverColor: 'blue',
+            textTextActiveColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button type="text">Text</Button>
+        <Button variant="text" color="default">
+          Default Text
+        </Button>
+        <Button variant="text" color="primary">
+          Primary Text
+        </Button>
+        <Button variant="text" color="danger">
+          Danger Text
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <div>Global Token</div>
     <ConfigProvider
       theme={{
         components: {
@@ -85,47 +299,6 @@ const App: React.FC = () => (
         </Button>
       </Flex>
     </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: { Button: { paddingInline: 100, paddingInlineLG: 150, paddingInlineSM: 50 } },
-      }}
-    >
-      <Flex gap="small" vertical align="start">
-        <Button>Default Button</Button>
-        <Button shape="round">Default Button</Button>
-        <Button size="large">Default Button</Button>
-        <Button shape="round" size="large">
-          Default Button
-        </Button>
-        <Button size="small">Default Button</Button>
-        <Button shape="round" size="small">
-          Default Button
-        </Button>
-      </Flex>
-    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            defaultBg: 'red',
-            defaultColor: 'blue',
-            defaultHoverColor: 'green',
-            defaultActiveColor: 'yellow',
-
-            textTextColor: 'purple',
-            textTextHoverColor: 'orange',
-            textTextActiveColor: 'pink',
-            textHoverBg: 'brown',
-          },
-        },
-      }}
-    >
-      <Flex gap="small" align="start">
-        <Button>Default Button</Button>
-        <Button type="dashed">Dashed Button</Button>
-        <Button type="text">Text Button</Button>
-      </Flex>
-    </ConfigProvider>
   </Flex>
 );
 

components/button/style/index.ts

@@ -2,6 +2,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetIcon } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
@@ -12,7 +13,7 @@ import genVariantStyle from './variant';
 export type { ComponentToken };
 
 // ============================== Shared ==============================
-const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const {
     componentCls,
     iconCls,
@@ -40,7 +41,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
       userSelect: 'none',
       touchAction: 'manipulation',
-
+      ...genNoMotionStyle(),
       '&:disabled > *': {
         pointerEvents: 'none',
       },
@@ -80,7 +81,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
 
       [`${componentCls}-loading-icon`]: {
         transition: ['width', 'opacity', 'margin']
-          .map((transition) => `${transition} ${motionDurationSlow} ${motionEaseInOut}`)
+          .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`)
           .join(','),
       },
 
@@ -210,7 +211,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   return genButtonStyle(largeToken, `${token.componentCls}-lg`);
 };
 
-const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
+const genBlockButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/button/style/token.ts

@@ -4,9 +4,9 @@ import { unit } from '@ant-design/cssinjs';
 
 import { AggregationColor } from '../../color-picker/color';
 import { isBright } from '../../color-picker/components/ColorPresets';
+import { PresetColors } from '../../theme/interface';
 import type { FullToken, GenStyleFn, GetDefaultToken, PresetColorKey } from '../../theme/internal';
 import { getLineHeight, mergeToken } from '../../theme/internal';
-import { PresetColors } from '../../theme/interface';
 import getAlphaColor from '../../theme/util/getAlphaColor';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -154,16 +154,19 @@ export interface ComponentToken {
   /**
    * @desc 按钮纵向内间距
    * @descEN Vertical padding of button
+   * @deprecated not used
    */
   paddingBlock: CSSProperties['paddingBlock'];
   /**
    * @desc 大号按钮纵向内间距
    * @descEN Vertical padding of large button
+   * @deprecated not used
    */
   paddingBlockLG: CSSProperties['paddingBlock'];
   /**
    * @desc 小号按钮纵向内间距
    * @descEN Vertical padding of small button
+   * @deprecated not used
    */
   paddingBlockSM: CSSProperties['paddingBlock'];
   /**
@@ -209,16 +212,19 @@ export interface ComponentToken {
   /**
    * @desc 按钮内容字体行高
    * @descEN Line height of button content
+   * @deprecated not used
    */
   contentLineHeight: number;
   /**
    * @desc 大号按钮内容字体行高
    * @descEN Line height of large button content
+   * @deprecated not used
    */
   contentLineHeightLG: number;
   /**
    * @desc 小号按钮内容字体行高
    * @descEN Line height of small button content
+   * @deprecated not used
    */
   contentLineHeightSM: number;
   /**
@@ -241,6 +247,10 @@ type ShadowColorMap = {
   [Key in `${PresetColorKey}ShadowColor`]: string;
 };
 
+type PresetColorHoverActiveMap = {
+  [Key in `${PresetColorKey}Hover` | `${PresetColorKey}Active`]: string;
+};
+
 type GroupToken = {
   /**
    * @desc 按钮组边框颜色
@@ -251,7 +261,11 @@ type GroupToken = {
   groupBorderColor: string;
 };
 
-export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap, GroupToken {
+export interface ButtonToken
+  extends FullToken<'Button'>,
+    ShadowColorMap,
+    PresetColorHoverActiveMap,
+    GroupToken {
   /**
    * @desc 按钮横向内边距
    * @descEN Horizontal padding of button
@@ -269,9 +283,7 @@ export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap, GroupT
   buttonIconOnlyFontSize: number | string;
 }
 
-export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
-  token,
-) => {
+export const prepareToken = (token: Parameters<GenStyleFn<'Button'>>[0]) => {
   const { paddingInline, onlyIconSize, borderColorDisabled } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
@@ -296,7 +308,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     : '#fff';
 
   const shadowColorTokens = PresetColors.reduce<CSSObject>(
-    (prev: CSSObject, colorKey: PresetColorKey) => ({
+    (prev, colorKey) => ({
       ...prev,
       [`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor(token[`${colorKey}1`], token.colorBgContainer)}`,
     }),

components/button/style/variant.ts

@@ -1,9 +1,11 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { PresetColors } from '../../theme/interface';
 import type { GenerateStyle } from '../../theme/interface';
 import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 
-const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
+const genVariantStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
   const { componentCls, antCls, lineWidth } = token;
 
   const [varName, varRef] = genCssVar(antCls, 'btn');
@@ -165,6 +167,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
           [varName('color-base')]: token.colorLink,
           [varName('color-hover')]: token.colorLinkHover,
           [varName('color-active')]: token.colorLinkActive,
+          [varName('bg-color-hover')]: token.linkHoverBg,
         },
 
         // ======================== Compatible ========================
@@ -223,6 +226,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
           [varName('text-color-active')]: token.defaultActiveColor,
           [varName('shadow')]: token.defaultShadow,
 
+          [`&${componentCls}-variant-outlined`]: {
+            [varName('bg-color-disabled')]: token.defaultBgDisabled,
+          },
+
           [`&${componentCls}-variant-solid`]: {
             [varName('text-color')]: token.solidTextColor,
             [varName('text-color-hover')]: varRef('text-color'),
@@ -263,10 +270,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
       PresetColors.map((colorKey) => {
         const darkColor = token[`${colorKey}6`];
         const lightColor = token[`${colorKey}1`];
-        const hoverColor = token[`${colorKey}5`];
+        const hoverColor = token[`${colorKey}Hover`];
         const lightHoverColor = token[`${colorKey}2`];
         const lightActiveColor = token[`${colorKey}3`];
-        const activeColor = token[`${colorKey}7`];
+        const activeColor = token[`${colorKey}Active`];
 
         const shadowColor = token[`${colorKey}ShadowColor`];
 
@@ -303,8 +310,15 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
       {
         // Ghost
         [`&${componentCls}-background-ghost`]: {
-          [varName('bg-color')]: 'transparent',
+          [varName('bg-color')]: token.ghostBg,
+          [varName('bg-color-hover')]: token.ghostBg,
+          [varName('bg-color-active')]: token.ghostBg,
           [varName('shadow')]: 'none',
+
+          [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+            [varName('bg-color-hover')]: token.ghostBg,
+            [varName('bg-color-active')]: token.ghostBg,
+          },
         },
       },
     ],

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

@@ -11,14 +11,10 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2016"
       >
-        <div
-          class="ant-select-content-value"
-          title="2016"
-        >
-          2016
-        </div>
+        2016
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -426,14 +422,10 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Nov"
       >
-        <div
-          class="ant-select-content-value"
-          title="Nov"
-        >
-          Nov
-        </div>
+        Nov
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -1543,14 +1535,10 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -1958,14 +1946,10 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -3074,14 +3058,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -3489,14 +3469,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -4599,14 +4575,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -5014,14 +4986,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6185,14 +6153,10 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
           class="ant-select ant-select-sm ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
         >
           <div
-            class="ant-select-content"
+            class="ant-select-content ant-select-content-has-value"
+            title="2016"
           >
-            <div
-              class="ant-select-content-value"
-              title="2016"
-            >
-              2016
-            </div>
+            2016
             <input
               aria-autocomplete="list"
               aria-expanded="false"
@@ -6640,14 +6604,10 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
           class="ant-select ant-select-sm ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
         >
           <div
-            class="ant-select-content"
+            class="ant-select-content ant-select-content-has-value"
+            title="Nov"
           >
-            <div
-              class="ant-select-content-value"
-              title="Nov"
-            >
-              Nov
-            </div>
+            Nov
             <input
               aria-autocomplete="list"
               aria-expanded="false"
@@ -7728,14 +7688,10 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2016"
       >
-        <div
-          class="ant-select-content-value"
-          title="2016"
-        >
-          2016
-        </div>
+        2016
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -8143,14 +8099,10 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Nov"
       >
-        <div
-          class="ant-select-content-value"
-          title="Nov"
-        >
-          Nov
-        </div>
+        Nov
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -9670,14 +9622,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2017"
         >
-          <div
-            class="ant-select-content-value"
-            title="2017"
-          >
-            2017
-          </div>
+          2017
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -10085,14 +10033,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Jan"
         >
-          <div
-            class="ant-select-content-value"
-            title="Jan"
-          >
-            Jan
-          </div>
+          Jan
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -11204,14 +11148,10 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -11619,14 +11559,10 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -12729,14 +12665,10 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -13144,14 +13076,10 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -14260,14 +14188,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -14675,14 +14599,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -15846,14 +15766,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -16261,14 +16177,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"

components/calendar/__tests__/__snapshots__/demo-semantic.test.tsx.snap

@@ -20,14 +20,10 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
             class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
           >
             <div
-              class="ant-select-content"
+              class="ant-select-content ant-select-content-has-value"
+              title="2016"
             >
-              <div
-                class="ant-select-content-value"
-                title="2016"
-              >
-                2016
-              </div>
+              2016
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"
@@ -69,14 +65,10 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
             class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
           >
             <div
-              class="ant-select-content"
+              class="ant-select-content ant-select-content-has-value"
+              title="Nov"
             >
-              <div
-                class="ant-select-content-value"
-                title="Nov"
-              >
-                Nov
-              </div>
+              Nov
               <input
                 aria-autocomplete="list"
                 aria-expanded="false"

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

@@ -11,14 +11,10 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2016"
       >
-        <div
-          class="ant-select-content-value"
-          title="2016"
-        >
-          2016
-        </div>
+        2016
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -60,14 +56,10 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Nov"
       >
-        <div
-          class="ant-select-content-value"
-          title="Nov"
-        >
-          Nov
-        </div>
+        Nov
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -937,14 +929,10 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -986,14 +974,10 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -1862,14 +1846,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -1911,14 +1891,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -2783,14 +2759,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -2832,14 +2804,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -3763,14 +3731,10 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
           class="ant-select ant-select-sm ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
         >
           <div
-            class="ant-select-content"
+            class="ant-select-content ant-select-content-has-value"
+            title="2016"
           >
-            <div
-              class="ant-select-content-value"
-              title="2016"
-            >
-              2016
-            </div>
+            2016
             <input
               aria-autocomplete="list"
               aria-expanded="false"
@@ -3812,14 +3776,10 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
           class="ant-select ant-select-sm ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
         >
           <div
-            class="ant-select-content"
+            class="ant-select-content ant-select-content-has-value"
+            title="Nov"
           >
-            <div
-              class="ant-select-content-value"
-              title="Nov"
-            >
-              Nov
-            </div>
+            Nov
             <input
               aria-autocomplete="list"
               aria-expanded="false"
@@ -4644,14 +4604,10 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2016"
       >
-        <div
-          class="ant-select-content-value"
-          title="2016"
-        >
-          2016
-        </div>
+        2016
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -4693,14 +4649,10 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Nov"
       >
-        <div
-          class="ant-select-content-value"
-          title="Nov"
-        >
-          Nov
-        </div>
+        Nov
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -5980,14 +5932,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2017"
         >
-          <div
-            class="ant-select-content-value"
-            title="2017"
-          >
-            2017
-          </div>
+          2017
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6029,14 +5977,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Jan"
         >
-          <div
-            class="ant-select-content-value"
-            title="Jan"
-          >
-            Jan
-          </div>
+          Jan
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6908,14 +6852,10 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6957,14 +6897,10 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -7829,14 +7765,10 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -7878,14 +7810,10 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -8754,14 +8682,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -8803,14 +8727,10 @@ Array [
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -9736,14 +9656,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2016"
         >
-          <div
-            class="ant-select-content-value"
-            title="2016"
-          >
-            2016
-          </div>
+          2016
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -9785,14 +9701,10 @@ Array [
         class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Nov"
         >
-          <div
-            class="ant-select-content-value"
-            title="Nov"
-          >
-            Nov
-          </div>
+          Nov
           <input
             aria-autocomplete="list"
             aria-expanded="false"

components/calendar/__tests__/__snapshots__/index.test.tsx.snap

@@ -11,14 +11,10 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2019"
       >
-        <div
-          class="ant-select-content-value"
-          title="2019"
-        >
-          2019
-        </div>
+        2019
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -60,14 +56,10 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Jan"
       >
-        <div
-          class="ant-select-content-value"
-          title="Jan"
-        >
-          Jan
-        </div>
+        Jan
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -934,14 +926,10 @@ exports[`Calendar Calendar should support locale 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2018年"
       >
-        <div
-          class="ant-select-content-value"
-          title="2018年"
-        >
-          2018年
-        </div>
+        2018年
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -983,14 +971,10 @@ exports[`Calendar Calendar should support locale 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="10月"
       >
-        <div
-          class="ant-select-content-value"
-          title="10月"
-        >
-          10月
-        </div>
+        10月
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -1857,14 +1841,10 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       class="ant-select ant-select-rtl ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2000"
       >
-        <div
-          class="ant-select-content-value"
-          title="2000"
-        >
-          2000
-        </div>
+        2000
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -1906,14 +1886,10 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       class="ant-select ant-select-rtl ant-select-outlined ant-picker-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Sep"
       >
-        <div
-          class="ant-select-content-value"
-          title="Sep"
-        >
-          Sep
-        </div>
+        Sep
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -2780,14 +2756,10 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="2000"
       >
-        <div
-          class="ant-select-content-value"
-          title="2000"
-        >
-          2000
-        </div>
+        2000
         <input
           aria-autocomplete="list"
           aria-expanded="false"
@@ -2829,14 +2801,10 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
       class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Jan"
       >
-        <div
-          class="ant-select-content-value"
-          title="Jan"
-        >
-          Jan
-        </div>
+        Jan
         <input
           aria-autocomplete="list"
           aria-expanded="false"

components/calendar/demo/lunar.tsx

@@ -99,7 +99,7 @@ const App: React.FC = () => {
   const { styles } = useStyle({ test: true });
 
   const [selectDate, setSelectDate] = React.useState<Dayjs>(() => dayjs());
-  const [panelDateDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
+  const [panelDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
 
   const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
@@ -131,7 +131,7 @@ const App: React.FC = () => {
             <span
               className={clsx({
                 [styles.weekend]: isWeekend,
-                gray: !panelDateDate.isSame(date, 'month'),
+                gray: !panelDate.isSame(date, 'month'),
               })}
             >
               {date.get('date')}

components/calendar/style/index.ts

@@ -8,7 +8,7 @@ import {
   initPickerPanelToken,
 } from '../../date-picker/style';
 import { resetComponent } from '../../style';
-import type { FullToken, GetDefaultToken } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -67,7 +67,7 @@ interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelCo
   dateContentHeight: number | string;
 }
 
-export const genCalendarStyles = (token: CalendarToken): CSSObject => {
+export const genCalendarStyles: GenerateStyle<CalendarToken, CSSObject> = (token) => {
   const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token;
   return {
     [calendarCls]: {

components/card/style/index.ts

@@ -315,6 +315,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     boxShadowTertiary,
     bodyPadding,
     extraColor,
+    motionDurationMid,
   } = token;
 
   return {
@@ -379,7 +380,9 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
     [`${componentCls}-hoverable`]: {
       cursor: 'pointer',
-      transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`,
+      transition: [`box-shadow`, `border-color`]
+        .map((prop) => `${prop} ${motionDurationMid}`)
+        .join(', '),
 
       '&:hover': {
         borderColor: 'transparent',

components/carousel/style/index.ts

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -48,7 +49,7 @@ interface CarouselToken extends FullToken<'Carousel'> {}
 
 export const DotDuration = '--dot-duration';
 
-const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
+const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
   return {

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

@@ -597,25 +597,21 @@ Array [
     style="width: 100%;"
   >
     <div
-      class="ant-select-content"
+      class="ant-select-content ant-select-content-has-value"
     >
-      <div
-        class="ant-select-content-value"
-      >
-        <span>
-          Zhejiang / 
-        </span>
-        <span>
-          Hangzhou / 
-        </span>
-        <span>
-          West Lake (
-          <a>
-            752100
-          </a>
-          )
-        </span>
-      </div>
+      <span>
+        Zhejiang / 
+      </span>
+      <span>
+        Hangzhou / 
+      </span>
+      <span>
+        West Lake (
+        <a>
+          752100
+        </a>
+        )
+      </span>
       <input
         aria-autocomplete="list"
         aria-expanded="false"
@@ -934,14 +930,10 @@ Array [
     class="ant-select ant-cascader ant-select-outlined ant-select-css-var ant-cascader-css-var css-var-test-id ant-select-single ant-select-allow-clear ant-select-show-arrow"
   >
     <div
-      class="ant-select-content"
+      class="ant-select-content ant-select-content-has-value"
+      title="Zhejiang / Hangzhou / West Lake"
     >
-      <div
-        class="ant-select-content-value"
-        title="Zhejiang / Hangzhou / West Lake"
-      >
-        Zhejiang / Hangzhou / West Lake
-      </div>
+      Zhejiang / Hangzhou / West Lake
       <input
         aria-autocomplete="list"
         aria-expanded="false"

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

@@ -212,31 +212,27 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
   style="width:100%"
 >
   <div
-    class="ant-select-content"
+    class="ant-select-content ant-select-content-has-value"
   >
-    <div
-      class="ant-select-content-value"
-    >
-      <span>
-        Zhejiang
-        <!-- -->
-         / 
-      </span>
-      <span>
-        Hangzhou
-        <!-- -->
-         / 
-      </span>
-      <span>
-        West Lake
-        <!-- -->
-         (
-        <a>
-          752100
-        </a>
-        )
-      </span>
-    </div>
+    <span>
+      Zhejiang
+      <!-- -->
+       / 
+    </span>
+    <span>
+      Hangzhou
+      <!-- -->
+       / 
+    </span>
+    <span>
+      West Lake
+      <!-- -->
+       (
+      <a>
+        752100
+      </a>
+      )
+    </span>
     <input
       aria-autocomplete="list"
       aria-expanded="false"
@@ -315,14 +311,10 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
   class="ant-select ant-cascader ant-select-outlined ant-select-css-var ant-cascader-css-var css-var-test-id ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
   <div
-    class="ant-select-content"
+    class="ant-select-content ant-select-content-has-value"
+    title="Zhejiang / Hangzhou / West Lake"
   >
-    <div
-      class="ant-select-content-value"
-      title="Zhejiang / Hangzhou / West Lake"
-    >
-      Zhejiang / Hangzhou / West Lake
-    </div>
+    Zhejiang / Hangzhou / West Lake
     <input
       aria-autocomplete="list"
       aria-expanded="false"

components/cascader/__tests__/__snapshots__/index.test.tsx.snap

@@ -1161,14 +1161,10 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
   class="ant-select ant-cascader ant-select-rtl ant-select-outlined ant-select-css-var ant-cascader-css-var css-var-root ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
 >
   <div
-    class="ant-select-content"
+    class="ant-select-content ant-select-content-has-value"
+    title="Zhejiang / Hangzhou"
   >
-    <div
-      class="ant-select-content-value"
-      title="Zhejiang / Hangzhou"
-    >
-      Zhejiang / Hangzhou
-    </div>
+    Zhejiang / Hangzhou
     <input
       aria-autocomplete="list"
       aria-controls="test-id_list"
@@ -1481,14 +1477,10 @@ exports[`Cascader support controlled mode 1`] = `
   class="ant-select ant-cascader ant-select-outlined ant-select-css-var ant-cascader-css-var css-var-root ant-select-single ant-select-allow-clear ant-select-show-arrow"
 >
   <div
-    class="ant-select-content"
+    class="ant-select-content ant-select-content-has-value"
+    title="Zhejiang / Hangzhou / West Lake"
   >
-    <div
-      class="ant-select-content-value"
-      title="Zhejiang / Hangzhou / West Lake"
-    >
-      Zhejiang / Hangzhou / West Lake
-    </div>
+    Zhejiang / Hangzhou / West Lake
     <input
       aria-autocomplete="list"
       aria-expanded="false"

components/cascader/__tests__/index.test.tsx

@@ -231,11 +231,9 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />,
     );
-    expect(container.querySelector('.ant-select-content-value')?.textContent).toEqual(
-      'Zhejiang / Hangzhou',
-    );
+    expect(container.querySelector('.ant-select-content')).toHaveTextContent('Zhejiang / Hangzhou');
     fireEvent.mouseDown(container.querySelector('.ant-select-clear')!);
-    expect(container.querySelector('.ant-select-content-value')).toBeFalsy();
+    expect(container.querySelector('.ant-select-content')).toHaveTextContent('');
   });
 
   it('should clear search input when clear selection', () => {
@@ -320,7 +318,7 @@ describe('Cascader', () => {
     clickOption(container, 0, 0);
     clickOption(container, 1, 0);
     clickOption(container, 2, 0);
-    expect(container.querySelector('.ant-select-content-value')?.textContent).toEqual(
+    expect(container.querySelector('.ant-select-content')).toHaveTextContent(
       'Zhejiang / Hangzhou / West Lake',
     );
     expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
@@ -506,9 +504,7 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} defaultValue={['options1', 'options2']} />,
     );
-    expect(container.querySelector('.ant-select-content-value')?.textContent).toEqual(
-      'options1 / options2',
-    );
+    expect(container.querySelector('.ant-select-content')).toHaveTextContent('options1 / options2');
   });
 
   it('can be selected when showSearch', () => {

components/cascader/demo/placement.tsx

@@ -44,12 +44,12 @@ const options: Option[] = [
 ];
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
+  const [placement, setPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
     'topLeft',
   );
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/cascader/style/columns.ts

@@ -6,7 +6,7 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
-const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSInterpolation => {
+const getColumnsStyle: GenerateStyle<CascaderToken, CSSInterpolation> = (token) => {
   const { prefixCls, componentCls } = token;
 
   const cascaderMenuItemCls = `${componentCls}-menu-item`;

components/cascader/style/index.ts

@@ -96,7 +96,6 @@ export const prepareComponentToken = (token: GlobalToken) => {
   const itemPaddingVertical = Math.round(
     (token.controlHeight - token.fontSize * token.lineHeight) / 2,
   );
-
   return {
     controlWidth: 184,
     controlItemWidth: 111,

components/cascader/style/panel.ts

@@ -8,7 +8,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import getColumnsStyle from './columns';
 
 // ============================== Panel ===============================
-const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSObject => {
+const genPanelStyle: GenerateStyle<CascaderToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

components/checkbox/style/index.ts

@@ -1,6 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusOutline, resetComponent } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
@@ -99,6 +100,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         borderRadius: token.borderRadiusSM,
         borderCollapse: 'separate',
         transition: `all ${token.motionDurationSlow}`,
+        ...genNoMotionStyle(),
 
         // Checkmark
         '&:after': {
@@ -116,6 +118,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           opacity: 0,
           content: '""',
           transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
+          ...genNoMotionStyle(),
         },
 
         // Wrapper > Checkbox > input
@@ -173,6 +176,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           opacity: 1,
           transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
           transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
+          ...genNoMotionStyle(),
         },
 
         // Hover on checked checkbox directly

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

@@ -1098,14 +1098,10 @@ Array [
     style="margin: 0px 8px;"
   >
     <div
-      class="ant-select-content"
+      class="ant-select-content ant-select-content-has-value"
+      title="start"
     >
-      <div
-        class="ant-select-content-value"
-        title="start"
-      >
-        start
-      </div>
+      start
       <input
         aria-autocomplete="list"
         aria-expanded="false"

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

@@ -1086,14 +1086,10 @@ Array [
     style="margin:0 8px"
   >
     <div
-      class="ant-select-content"
+      class="ant-select-content ant-select-content-has-value"
+      title="start"
     >
-      <div
-        class="ant-select-content-value"
-        title="start"
-      >
-        start
-      </div>
+      start
       <input
         aria-autocomplete="list"
         aria-expanded="false"

components/collapse/style/index.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetComponent, resetIcon } from '../../style';
@@ -59,7 +60,7 @@ type CollapseToken = FullToken<'Collapse'> & {
   collapsePanelBorderRadius: number;
 };
 
-export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
+export const genBaseStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const {
     componentCls,
     contentBg,
@@ -269,7 +270,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
+const genArrowStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow`;
@@ -283,7 +284,7 @@ const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
+const genBorderlessStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls, headerBg, borderlessContentPadding, borderlessContentBg, colorBorder } =
     token;
 
@@ -319,7 +320,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
   };
 };
 
-const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
+const genGhostStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   const { componentCls, paddingSM } = token;
 
   return {

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -140,14 +140,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -513,14 +509,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -891,14 +883,10 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -1261,14 +1249,10 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -1640,14 +1624,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -1991,14 +1971,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -2304,14 +2280,10 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -2689,14 +2661,10 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HSB"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HSB"
-                        >
-                          HSB
-                        </div>
+                        HSB
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -3280,14 +3248,10 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="RGB"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="RGB"
-                        >
-                          RGB
-                        </div>
+                        RGB
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -3813,7 +3777,6 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                       class="ant-segmented-item"
                     >
                       <input
-                        checked=""
                         class="ant-segmented-item-input"
                         name="test-id"
                         type="radio"
@@ -3829,6 +3792,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                       class="ant-segmented-item ant-segmented-item-selected"
                     >
                       <input
+                        checked=""
                         class="ant-segmented-item-input"
                         name="test-id"
                         type="radio"
@@ -3971,14 +3935,10 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -4395,14 +4355,10 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -4795,14 +4751,10 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                         class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                       >
                         <div
-                          class="ant-select-content"
+                          class="ant-select-content ant-select-content-has-value"
+                          title="HEX"
                         >
-                          <div
-                            class="ant-select-content-value"
-                            title="HEX"
-                          >
-                            HEX
-                          </div>
+                          HEX
                           <input
                             aria-autocomplete="list"
                             aria-expanded="false"
@@ -5751,14 +5703,10 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                         class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                       >
                         <div
-                          class="ant-select-content"
+                          class="ant-select-content ant-select-content-has-value"
+                          title="HEX"
                         >
-                          <div
-                            class="ant-select-content-value"
-                            title="HEX"
-                          >
-                            HEX
-                          </div>
+                          HEX
                           <input
                             aria-autocomplete="list"
                             aria-expanded="false"
@@ -6128,14 +6076,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -6930,14 +6874,10 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -7315,14 +7255,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -7685,14 +7621,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -8055,14 +7987,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -8438,14 +8366,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -8813,14 +8737,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -9188,14 +9108,10 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"
@@ -9565,14 +9481,10 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                     class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                   >
                     <div
-                      class="ant-select-content"
+                      class="ant-select-content ant-select-content-has-value"
+                      title="HEX"
                     >
-                      <div
-                        class="ant-select-content-value"
-                        title="HEX"
-                      >
-                        HEX
-                      </div>
+                      HEX
                       <input
                         aria-autocomplete="list"
                         aria-expanded="false"
@@ -9931,14 +9843,10 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                     class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                   >
                     <div
-                      class="ant-select-content"
+                      class="ant-select-content ant-select-content-has-value"
+                      title="HEX"
                     >
-                      <div
-                        class="ant-select-content-value"
-                        title="HEX"
-                      >
-                        HEX
-                      </div>
+                      HEX
                       <input
                         aria-autocomplete="list"
                         aria-expanded="false"
@@ -10323,14 +10231,10 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -10700,14 +10604,10 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -11094,14 +10994,10 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -11465,14 +11361,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"
@@ -11838,14 +11730,10 @@ Array [
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"

components/color-picker/__tests__/__snapshots__/demo-semantic.test.tsx.snap

@@ -150,14 +150,10 @@ exports[`renders components/color-picker/demo/_semantic.tsx correctly 1`] = `
                       class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
                     >
                       <div
-                        class="ant-select-content"
+                        class="ant-select-content ant-select-content-has-value"
+                        title="HEX"
                       >
-                        <div
-                          class="ant-select-content-value"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
+                        HEX
                         <input
                           aria-autocomplete="list"
                           aria-expanded="false"

components/color-picker/__tests__/__snapshots__/index.test.tsx.snap

@@ -143,14 +143,10 @@ exports[`ColorPicker Should panelRender work 1`] = `
                   class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
                 >
                   <div
-                    class="ant-select-content"
+                    class="ant-select-content ant-select-content-has-value"
+                    title="HEX"
                   >
-                    <div
-                      class="ant-select-content-value"
-                      title="HEX"
-                    >
-                      HEX
-                    </div>
+                    HEX
                     <input
                       aria-autocomplete="list"
                       aria-expanded="false"
@@ -416,14 +412,10 @@ exports[`ColorPicker Should panelRender work 2`] = `
                 class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
               >
                 <div
-                  class="ant-select-content"
+                  class="ant-select-content ant-select-content-has-value"
+                  title="HEX"
                 >
-                  <div
-                    class="ant-select-content-value"
-                    title="HEX"
-                  >
-                    HEX
-                  </div>
+                  HEX
                   <input
                     aria-autocomplete="list"
                     aria-expanded="false"

components/color-picker/style/index.ts

@@ -76,7 +76,7 @@ export const genActiveStyle = (
   outline: 0,
 });
 
-const genRtlStyle = (token: ColorPickerToken): CSSObject => {
+const genRtlStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const { componentCls } = token;
   return {
     '&-rtl': {
@@ -133,7 +133,7 @@ const genClearStyle = (
   };
 };
 
-const genStatusStyle = (token: ColorPickerToken): CSSObject => {
+const genStatusStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     colorError,
@@ -164,7 +164,7 @@ const genStatusStyle = (token: ColorPickerToken): CSSObject => {
     },
   };
 };
-const genSizeStyle = (token: ColorPickerToken): CSSObject => {
+const genSizeStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     controlHeightLG,

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -1598,14 +1598,10 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -1647,14 +1643,10 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
         class="config-select config-select-outlined config-picker-calendar-month-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="config-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -2518,14 +2510,10 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -2855,14 +2843,10 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -2905,14 +2889,10 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
         class="config-select config-select-outlined config-picker-calendar-month-select css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="config-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -3779,14 +3759,10 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -4119,14 +4095,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
         class="config-select config-select-lg config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -4168,14 +4140,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
         class="config-select config-select-lg config-select-outlined config-picker-calendar-month-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="config-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -5039,14 +5007,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
         class="config-select config-select-lg config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -5376,14 +5340,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -5425,14 +5385,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
         class="config-select config-select-outlined config-picker-calendar-month-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="config-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6296,14 +6252,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
         class="config-select config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6633,14 +6585,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
         class="config-select config-select-sm config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -6682,14 +6630,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
         class="config-select config-select-sm config-select-outlined config-picker-calendar-month-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="config-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -7553,14 +7497,10 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
         class="config-select config-select-sm config-select-outlined config-picker-calendar-year-select css-var-root config-select-css-var config-select-single config-select-show-arrow"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="config-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -7890,14 +7830,10 @@ exports[`ConfigProvider components Calendar normal 1`] = `
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="ant-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -7939,14 +7875,10 @@ exports[`ConfigProvider components Calendar normal 1`] = `
         class="ant-select ant-select-outlined ant-picker-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="ant-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -8810,14 +8742,10 @@ exports[`ConfigProvider components Calendar normal 1`] = `
         class="ant-select ant-select-outlined ant-picker-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="ant-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -9147,14 +9075,10 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
         class="ant-select ant-select-outlined prefix-Calendar-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="ant-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -9196,14 +9120,10 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
         class="ant-select ant-select-outlined prefix-Calendar-calendar-month-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="Sep"
         >
-          <div
-            class="ant-select-content-value"
-            title="Sep"
-          >
-            Sep
-          </div>
+          Sep
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -10067,14 +9987,10 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
         class="ant-select ant-select-outlined prefix-Calendar-calendar-year-select css-var-root ant-select-css-var ant-select-single ant-select-show-arrow"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="2000"
         >
-          <div
-            class="ant-select-content-value"
-            title="2000"
-          >
-            2000
-          </div>
+          2000
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -16690,13 +16606,15 @@ exports[`ConfigProvider components List configProvider 1`] = `
   class="config-list config-list-split css-var-root"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
     >
       <ul
-        class="config-list-items"
+        class="config-list-items config-list-container css-var-root"
       >
         <li
           class="config-list-item"
@@ -16742,13 +16660,15 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
   class="config-list config-list-split css-var-root"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
     >
       <ul
-        class="config-list-items"
+        class="config-list-items config-list-container css-var-root"
       >
         <li
           class="config-list-item"
@@ -16794,13 +16714,15 @@ exports[`ConfigProvider components List configProvider componentSize large 1`] =
   class="config-list config-list-lg config-list-split css-var-root"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
     >
       <ul
-        class="config-list-items"
+        class="config-list-items config-list-container css-var-root"
       >
         <li
           class="config-list-item"
@@ -16846,13 +16768,15 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
   class="config-list config-list-split css-var-root"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
     >
       <ul
-        class="config-list-items"
+        class="config-list-items config-list-container css-var-root"
       >
         <li
           class="config-list-item"
@@ -16898,13 +16822,15 @@ exports[`ConfigProvider components List configProvider componentSize small 1`] =
   class="config-list config-list-sm config-list-split css-var-root"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
     >
       <ul
-        class="config-list-items"
+        class="config-list-items config-list-container css-var-root"
       >
         <li
           class="config-list-item"
@@ -16950,13 +16876,15 @@ exports[`ConfigProvider components List normal 1`] = `
   class="ant-list ant-list-split css-var-root"
 >
   <div
-    class="ant-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin css-var-root"
   >
     <div
       class="ant-spin-container"
     >
       <ul
-        class="ant-list-items"
+        class="ant-list-items ant-list-container css-var-root"
       >
         <li
           class="ant-list-item"
@@ -17002,13 +16930,15 @@ exports[`ConfigProvider components List prefixCls 1`] = `
   class="prefix-List prefix-List-split css-var-root"
 >
   <div
-    class="ant-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin css-var-root"
   >
     <div
       class="ant-spin-container"
     >
       <ul
-        class="prefix-List-items"
+        class="prefix-List-items prefix-List-container css-var-root"
       >
         <li
           class="prefix-List-item"
@@ -18265,14 +18195,10 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
         class="config-select config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -18397,14 +18323,10 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -18534,14 +18456,10 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
         class="config-select config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -18667,14 +18585,10 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -18805,14 +18719,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
         class="config-select config-select-lg config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -18937,14 +18847,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19074,14 +18980,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
         class="config-select config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19206,14 +19108,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19343,14 +19241,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19475,14 +19369,10 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
         class="config-select config-select-sm config-select-outlined config-pagination-options-size-changer css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-show-search"
       >
         <div
-          class="config-select-content"
+          class="config-select-content config-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="config-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19612,14 +19502,10 @@ exports[`ConfigProvider components Pagination normal 1`] = `
         class="ant-select ant-select-outlined ant-pagination-options-size-changer css-var-root ant-select-css-var ant-select-single ant-select-show-arrow ant-select-show-search"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="ant-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19744,14 +19630,10 @@ exports[`ConfigProvider components Pagination normal 1`] = `
         class="ant-select ant-select-sm ant-select-outlined ant-pagination-options-size-changer css-var-root ant-select-css-var ant-select-single ant-select-show-arrow ant-select-show-search"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="ant-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -19881,14 +19763,10 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
         class="ant-select ant-select-outlined prefix-Pagination-options-size-changer css-var-root ant-select-css-var ant-select-single ant-select-show-arrow ant-select-show-search"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="ant-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -20013,14 +19891,10 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
         class="ant-select ant-select-sm ant-select-outlined prefix-Pagination-options-size-changer css-var-root ant-select-css-var ant-select-single ant-select-show-arrow ant-select-show-search"
       >
         <div
-          class="ant-select-content"
+          class="ant-select-content ant-select-content-has-value"
+          title="10 / page"
         >
-          <div
-            class="ant-select-content-value"
-            title="10 / page"
-          >
-            10 / page
-          </div>
+          10 / page
           <input
             aria-autocomplete="list"
             aria-expanded="false"
@@ -23565,14 +23439,10 @@ exports[`ConfigProvider components Select configProvider 1`] = `
   class="config-select config-select-outlined css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-open"
 >
   <div
-    class="config-select-content"
+    class="config-select-content config-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="config-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -23620,14 +23490,10 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
   class="config-select config-select-outlined css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-disabled"
 >
   <div
-    class="config-select-content"
+    class="config-select-content config-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="config-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-autocomplete="list"
       aria-expanded="false"
@@ -23673,14 +23539,10 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
   class="config-select config-select-lg config-select-outlined css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-open"
 >
   <div
-    class="config-select-content"
+    class="config-select-content config-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="config-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -23728,14 +23590,10 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
   class="config-select config-select-outlined css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-open"
 >
   <div
-    class="config-select-content"
+    class="config-select-content config-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="config-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -23783,14 +23641,10 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
   class="config-select config-select-sm config-select-outlined css-var-root config-select-css-var config-select-single config-select-show-arrow config-select-open"
 >
   <div
-    class="config-select-content"
+    class="config-select-content config-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="config-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -23838,14 +23692,10 @@ exports[`ConfigProvider components Select normal 1`] = `
   class="ant-select ant-select-outlined css-var-root ant-select-css-var ant-select-single ant-select-show-arrow ant-select-open"
 >
   <div
-    class="ant-select-content"
+    class="ant-select-content ant-select-content-has-value"
+    title="Light"
   >
-    <div
-      class="ant-select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -23893,14 +23743,10 @@ exports[`ConfigProvider components Select prefixCls 1`] = `
   class="prefix-Select prefix-Select-outlined css-var-root prefix-Select-css-var prefix-Select-single prefix-Select-show-arrow prefix-Select-open"
 >
   <div
-    class="prefix-Select-content"
+    class="prefix-Select-content prefix-Select-content-has-value"
+    title="Light"
   >
-    <div
-      class="prefix-Select-content-value"
-      title="Light"
-    >
-      Light
-    </div>
+    Light
     <input
       aria-activedescendant="test-id_list_0"
       aria-autocomplete="list"
@@ -24485,7 +24331,7 @@ exports[`ConfigProvider components Spin configProvider 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
-  class="config-spin config-spin-spinning css-var-root"
+  class="config-spin config-spin-spinning config-spin-section css-var-root"
 >
   <span
     class="config-spin-dot-holder"
@@ -24514,7 +24360,7 @@ exports[`ConfigProvider components Spin configProvider componentDisabled 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
-  class="config-spin config-spin-spinning css-var-root"
+  class="config-spin config-spin-spinning config-spin-section css-var-root"
 >
   <span
     class="config-spin-dot-holder"
@@ -24543,7 +24389,7 @@ exports[`ConfigProvider components Spin configProvider componentSize large 1`] =
 <div
   aria-busy="true"
   aria-live="polite"
-  class="config-spin config-spin-spinning css-var-root"
+  class="config-spin config-spin-spinning config-spin-section css-var-root"
 >
   <span
     class="config-spin-dot-holder"
@@ -24572,7 +24418,7 @@ exports[`ConfigProvider components Spin configProvider componentSize middle 1`]
 <div
   aria-busy="true"
   aria-live="polite"
-  class="config-spin config-spin-spinning css-var-root"
+  class="config-spin config-spin-spinning config-spin-section css-var-root"
 >
   <span
     class="config-spin-dot-holder"
@@ -24601,7 +24447,7 @@ exports[`ConfigProvider components Spin configProvider componentSize small 1`] =
 <div
   aria-busy="true"
   aria-live="polite"
-  class="config-spin config-spin-spinning css-var-root"
+  class="config-spin config-spin-spinning config-spin-section css-var-root"
 >
   <span
     class="config-spin-dot-holder"
@@ -24630,7 +24476,7 @@ exports[`ConfigProvider components Spin normal 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
-  class="ant-spin ant-spin-spinning css-var-root"
+  class="ant-spin ant-spin-spinning ant-spin-section css-var-root"
 >
   <span
     class="ant-spin-dot-holder"
@@ -24659,7 +24505,7 @@ exports[`ConfigProvider components Spin prefixCls 1`] = `
 <div
   aria-busy="true"
   aria-live="polite"
-  class="prefix-Spin prefix-Spin-spinning css-var-root"
+  class="prefix-Spin prefix-Spin-spinning prefix-Spin-section css-var-root"
 >
   <span
     class="prefix-Spin-dot-holder"
@@ -25292,7 +25138,9 @@ exports[`ConfigProvider components Table configProvider 1`] = `
   class="css-var-root config-table-css-var config-table-wrapper"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
@@ -25596,7 +25444,9 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
   class="css-var-root config-table-css-var config-table-wrapper"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
@@ -25902,7 +25752,9 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
   class="css-var-root config-table-css-var config-table-wrapper"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
@@ -26206,7 +26058,9 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
   class="css-var-root config-table-css-var config-table-wrapper"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
@@ -26510,7 +26364,9 @@ exports[`ConfigProvider components Table configProvider componentSize small 1`]
   class="css-var-root config-table-css-var config-table-wrapper"
 >
   <div
-    class="config-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="config-spin css-var-root"
   >
     <div
       class="config-spin-container"
@@ -26814,7 +26670,9 @@ exports[`ConfigProvider components Table normal 1`] = `
   class="css-var-root ant-table-css-var ant-table-wrapper"
 >
   <div
-    class="ant-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin css-var-root"
   >
     <div
       class="ant-spin-container"
@@ -27118,7 +26976,9 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
   class="css-var-root prefix-Table-css-var prefix-Table-wrapper"
 >
   <div
-    class="ant-spin-nested-loading css-var-root"
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin css-var-root"
   >
     <div
       class="ant-spin-container"

components/config-provider/demo/locale.tsx

@@ -225,11 +225,11 @@ const Page: React.FC = () => {
 };
 
 const App: React.FC = () => {
-  const [locale, setLocal] = useState<Locale>(enUS);
+  const [locale, setLocale] = useState<Locale>(enUS);
 
   const changeLocale = (e: RadioChangeEvent) => {
     const localeValue = e.target.value;
-    setLocal(localeValue);
+    setLocale(localeValue);
     if (!localeValue) {
       dayjs.locale('en');
     } else {

components/config-provider/index.en-US.md

@@ -59,7 +59,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | `(trigger?: HTMLElement) => HTMLElement \| ShadowRoot` | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | `() => HTMLElement \| Window \| ShadowRoot` | () => window | 4.2.0 |
 | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |
-| locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - |  |
+| locale | Language package setting, you can find the packages in [antd/locale](https://unpkg.com/antd/locale/) | object | - |  |
 | popupMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 5.5.0 |
 | popupOverflow | Select like component popup logic. Can set to show in viewport or follow window scroll | 'viewport' \| 'scroll' <InlinePopover previewURL="https://user-images.githubusercontent.com/5378891/230344474-5b9f7e09-0a5d-49e8-bae8-7d2abed6c837.png"></InlinePopover> | 'viewport' | 5.5.0 |
 | prefixCls | Set prefix className | string | `ant` |  |

components/config-provider/index.zh-CN.md

@@ -60,7 +60,7 @@ export default Demo;
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | `(trigger?: HTMLElement) => HTMLElement \| ShadowRoot` | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | `() => HTMLElement \| Window \| ShadowRoot` | () => window | 4.2.0 |
 | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
-| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - |  |
+| locale | 语言包配置，语言包可到 [antd/locale](https://unpkg.com/antd/locale/) 目录下寻找 | object | - |  |
 | popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 5.5.0 |
 | popupOverflow | Select 类组件弹层展示逻辑，默认为可视区域滚动，可配置成滚动区域滚动 | 'viewport' \| 'scroll' <InlinePopover previewURL="https://user-images.githubusercontent.com/5378891/230344474-5b9f7e09-0a5d-49e8-bae8-7d2abed6c837.png"></InlinePopover> | 'viewport' | 5.5.0 |
 | prefixCls | 设置统一样式前缀 | string | `ant` |  |

components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -88069,14 +88069,10 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
       class="ant-select ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Time"
       >
-        <div
-          class="ant-select-content-value"
-          title="Time"
-        >
-          Time
-        </div>
+        Time
         <input
           aria-autocomplete="list"
           aria-expanded="false"

components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap

@@ -7645,14 +7645,10 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
       class="ant-select ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
     >
       <div
-        class="ant-select-content"
+        class="ant-select-content ant-select-content-has-value"
+        title="Time"
       >
-        <div
-          class="ant-select-content-value"
-          title="Time"
-        >
-          Time
-        </div>
+        Time
         <input
           aria-autocomplete="list"
           aria-expanded="false"

components/date-picker/demo/placement.tsx

@@ -5,10 +5,10 @@ import { DatePicker, Radio } from 'antd';
 const { RangePicker } = DatePicker;
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');
+  const [placement, setPlacement] = useState<DatePickerProps['placement']>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (

components/date-picker/style/index.ts

@@ -30,7 +30,7 @@ const genPickerPadding = (paddingBlock: number, paddingInline: number): CSSObjec
   };
 };
 
-const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
+const genPickerStatusStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const { componentCls, colorError, colorWarning } = token;
 
   return {
@@ -101,7 +101,9 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         alignItems: 'center',
         lineHeight: 1,
         borderRadius,
-        transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
+        transition: [`border`, `box-shadow`, `background-color`]
+          .map((prop) => `${prop} ${motionDurationMid}`)
+          .join(', '),
 
         [`${componentCls}-prefix`]: {
           flex: '0 0 auto',
@@ -180,7 +182,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           color: colorTextQuaternary,
           lineHeight: 1,
           pointerEvents: 'none',
-          transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
+          transition: ['opacity', 'color'].map((prop) => `${prop} ${motionDurationMid}`).join(', '),
 
           '> *': {
             verticalAlign: 'top',
@@ -200,7 +202,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           transform: 'translateY(-50%)',
           cursor: 'pointer',
           opacity: 0,
-          transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
+          transition: ['opacity', 'color'].map((prop) => `${prop} ${motionDurationMid}`).join(', '),
 
           '> *': {
             verticalAlign: 'top',

components/date-picker/style/panel.ts

@@ -5,7 +5,7 @@ import { FastColor } from '@ant-design/fast-color';
 import type { GenerateStyle } from '../../theme/internal';
 import type { PickerToken, SharedPickerToken } from './token';
 
-const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
+const genPickerCellInnerStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
   const {
     pickerCellCls,
     pickerCellInnerCls,
@@ -141,7 +141,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
   };
 };
 
-export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
+export const genPanelStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     pickerCellCls,
@@ -625,7 +625,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
   };
 };
 
-const genPickerPanelStyle: GenerateStyle<PickerToken> = (token) => {
+const genPickerPanelStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const {
     componentCls,
     textHeight,

components/date-picker/style/util.ts

@@ -116,7 +116,9 @@ export const genOverflowStyle = (
         marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
         borderRadius: borderRadiusSM,
         cursor: 'default',
-        transition: `font-size ${motionDurationSlow}, line-height ${motionDurationSlow}, height ${motionDurationSlow}`,
+        transition: [`font-size`, `line-height`, `height`]
+          .map((prop) => `${prop} ${motionDurationSlow}`)
+          .join(', '),
         marginInlineEnd: token.calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
         paddingInlineStart: paddingXS,
         paddingInlineEnd: token.calc(paddingXS).div(2).equal(),

components/date-picker/style/variants.ts

@@ -7,9 +7,10 @@ import {
   genOutlinedStyle,
   genUnderlinedStyle,
 } from '../../input/style/variants';
+import type { GenerateStyle } from '../../theme/interface';
 import type { PickerToken } from './token';
 
-const genVariantsStyle = (token: PickerToken): CSSObject => {
+const genVariantsStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {

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

@@ -2778,7 +2778,9 @@ exports[`renders components/descriptions/demo/text.tsx extend context correctly
                   class="css-var-test-id ant-table-css-var ant-table-wrapper"
                 >
                   <div
-                    class="ant-spin-nested-loading css-var-test-id"
+                    aria-busy="false"
+                    aria-live="polite"
+                    class="ant-spin css-var-test-id"
                   >
                     <div
                       class="ant-spin-container"

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

@@ -2590,7 +2590,9 @@ exports[`renders components/descriptions/demo/text.tsx correctly 1`] = `
                   class="css-var-test-id ant-table-css-var ant-table-wrapper"
                 >
                   <div
-                    class="ant-spin-nested-loading css-var-test-id"
+                    aria-busy="false"
+                    aria-live="polite"
+                    class="ant-spin css-var-test-id"
                   >
                     <div
                       class="ant-spin-container"

components/descriptions/constant.ts

@@ -1,6 +1,7 @@
 import type { Breakpoint } from '../_util/responsiveObserver';
 
 const DEFAULT_COLUMN_MAP: Record<Breakpoint, number> = {
+  xxxl: 4,
   xxl: 3,
   xl: 3,
   lg: 3,

components/descriptions/style/index.ts

@@ -62,7 +62,7 @@ export interface ComponentToken {
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {}
 
-const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
+const genBorderedStyle: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
   const { componentCls, labelBg } = token;
   return {
     [`&${componentCls}-bordered`]: {
@@ -118,7 +118,7 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
   };
 };
 
-const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
+const genDescriptionStyles: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
   const {
     componentCls,
     extraColor,

components/divider/style/index.ts

@@ -43,7 +43,7 @@ interface DividerToken extends FullToken<'Divider'> {
 }
 
 // ============================== Size ================================
-const genSizeDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+const genSizeDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
   const { componentCls } = token;
 
   return {
@@ -63,7 +63,7 @@ const genSizeDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
 };
 
 // ============================== Shared ==============================
-const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
+const genSharedDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
   const {
     componentCls,
     sizePaddingEdgeHorizontal,

components/drawer/Drawer.tsx

@@ -59,15 +59,23 @@ export interface DrawerProps
    * @since 5.25.0
    */
   destroyOnHidden?: boolean;
+  /** @deprecated Please use `mask.closable` instead */
+  maskClosable?: boolean;
   mask?: MaskType;
-
   focusable?: FocusableConfig;
 }
 
-const defaultPushState: PushState = { distance: 180 };
+const DEFAULT_PUSH_STATE: PushState = { distance: 180 };
 
 const DEFAULT_SIZE = 378;
 
+const MOTION_CONFIG: CSSMotionProps = {
+  motionAppear: true,
+  motionEnter: true,
+  motionLeave: true,
+  motionDeadline: 500,
+} as const;
+
 const Drawer: React.FC<DrawerProps> & {
   _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 } = (props) => {
@@ -78,7 +86,7 @@ const Drawer: React.FC<DrawerProps> & {
     height,
     width,
     mask: drawerMask,
-    push = defaultPushState,
+    push = DEFAULT_PUSH_STATE,
     open,
     afterOpenChange,
     onClose,
@@ -94,6 +102,7 @@ const Drawer: React.FC<DrawerProps> & {
     focusable,
 
     // Deprecated
+    maskClosable,
     maskStyle,
     drawerStyle,
     contentWrapperStyle,
@@ -127,32 +136,6 @@ const Drawer: React.FC<DrawerProps> & {
       ? () => getPopupContainer(document.body)
       : customizeGetContainer;
 
-  // ========================== Warning ===========================
-  if (process.env.NODE_ENV !== 'production') {
-    const warning = devUseWarning('Drawer');
-    [
-      ['headerStyle', 'styles.header'],
-      ['bodyStyle', 'styles.body'],
-      ['footerStyle', 'styles.footer'],
-      ['contentWrapperStyle', 'styles.wrapper'],
-      ['maskStyle', 'styles.mask'],
-      ['drawerStyle', 'styles.section'],
-      ['destroyInactivePanel', 'destroyOnHidden'],
-      ['width', 'size'],
-      ['height', 'size'],
-    ].forEach(([deprecatedName, newName]) => {
-      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
-    });
-
-    if (getContainer !== undefined && props.style?.position === 'absolute') {
-      warning(
-        false,
-        'breaking',
-        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
-      );
-    }
-  }
-
   // ============================ Size ============================
   const drawerSize = React.useMemo<string | number | undefined>(() => {
     if (typeof size === 'number') {
@@ -183,18 +166,12 @@ const Drawer: React.FC<DrawerProps> & {
   // =========================== Motion ===========================
   const maskMotion: CSSMotionProps = {
     motionName: getTransitionName(prefixCls, 'mask-motion'),
-    motionAppear: true,
-    motionEnter: true,
-    motionLeave: true,
-    motionDeadline: 500,
+    ...MOTION_CONFIG,
   };
 
   const panelMotion: RcDrawerProps['motion'] = (motionPlacement) => ({
     motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`),
-    motionAppear: true,
-    motionEnter: true,
-    motionLeave: true,
-    motionDeadline: 500,
+    ...MOTION_CONFIG,
   });
 
   // ============================ Refs ============================
@@ -206,7 +183,12 @@ const Drawer: React.FC<DrawerProps> & {
   const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
 
   // ============================ Mask ============================
-  const [mergedMask, maskBlurClassName] = useMergedMask(drawerMask, contextMask, prefixCls);
+  const [mergedMask, maskBlurClassName, mergedMaskClosable] = useMergedMask(
+    drawerMask,
+    contextMask,
+    prefixCls,
+    maskClosable,
+  );
 
   // ========================== Focusable =========================
   const mergedFocusable = useFocusable(focusable, getContainer !== false && mergedMask);
@@ -218,6 +200,7 @@ const Drawer: React.FC<DrawerProps> & {
     zIndex,
     panelRef,
     mask: mergedMask,
+    maskClosable: mergedMaskClosable,
     defaultSize,
     push,
     focusable: mergedFocusable,
@@ -242,6 +225,38 @@ const Drawer: React.FC<DrawerProps> & {
     mergedClassNames.root,
   );
 
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Drawer');
+    [
+      ['headerStyle', 'styles.header'],
+      ['bodyStyle', 'styles.body'],
+      ['footerStyle', 'styles.footer'],
+      ['contentWrapperStyle', 'styles.wrapper'],
+      ['maskStyle', 'styles.mask'],
+      ['drawerStyle', 'styles.section'],
+      ['destroyInactivePanel', 'destroyOnHidden'],
+      ['width', 'size'],
+      ['height', 'size'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+
+    if (getContainer !== undefined && props.style?.position === 'absolute') {
+      warning(
+        false,
+        'breaking',
+        '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.',
+      );
+    }
+
+    warning.deprecated(
+      !(mergedClassNames?.content || mergedStyles?.content),
+      'classNames.content and styles.content',
+      'classNames.section and styles.section',
+    );
+  }
+
   return (
     <ContextIsolator form space>
       <zIndexContext.Provider value={contextZIndex}>
@@ -265,6 +280,7 @@ const Drawer: React.FC<DrawerProps> & {
           }}
           open={open}
           mask={mergedMask}
+          maskClosable={mergedMaskClosable}
           push={push}
           size={drawerSize}
           defaultSize={defaultSize}

components/drawer/DrawerPanel.tsx

@@ -22,6 +22,10 @@ export type DrawerSemanticClassNames = {
   wrapper?: string;
   dragger?: string;
   close?: string;
+  /**
+   * @deprecated please use `classNames.section` instead.
+   */
+  content?: string;
 };
 
 export type DrawerSemanticStyles = {
@@ -36,6 +40,10 @@ export type DrawerSemanticStyles = {
   wrapper?: React.CSSProperties;
   dragger?: React.CSSProperties;
   close?: React.CSSProperties;
+  /**
+   * @deprecated please use `styles.section` instead.
+   */
+  content?: React.CSSProperties;
 };
 
 export type DrawerClassNamesType = SemanticClassNamesType<DrawerProps, DrawerSemanticClassNames>;

components/drawer/__tests__/DrawerEvent.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { DrawerProps } from '..';
 import Drawer from '..';
 import { act, fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
 
 const DrawerTest: React.FC<DrawerProps> = (props) => (
   <Drawer open getContainer={false} {...props}>
@@ -81,6 +82,47 @@ describe('Drawer', () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
+  it('mask.closable no trigger onClose', () => {
+    const onClose = jest.fn();
+    const { container } = render(<DrawerTest onClose={onClose} mask={{ closable: false }} />);
+
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("mask.closable no trigger onClose by ConfigProvider's drawer config", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <ConfigProvider drawer={{ mask: { closable: false } }}>
+        <DrawerTest onClose={onClose} />
+      </ConfigProvider>,
+    );
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("mask.closable no trigger onClose when maskClosable is false and ConfigProvider's drawer config is true", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <ConfigProvider drawer={{ mask: { closable: false } }}>
+        <DrawerTest onClose={onClose} maskClosable={false} />
+      </ConfigProvider>,
+    );
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("mask.closable trigger onClose when maskClosable is true and ConfigProvider's drawer config is false", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <ConfigProvider drawer={{ mask: { closable: false } }}>
+        <DrawerTest onClose={onClose} maskClosable={true} />
+      </ConfigProvider>,
+    );
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it('dom should be removed after close when destroyOnHidden is true', () => {
     const { container, rerender } = render(<DrawerTest destroyOnHidden />);
     expect(container.querySelector('.ant-drawer')).toBeTruthy();

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -88,205 +88,6 @@ Array [
 
 exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/drawer/demo/classNames.tsx extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
-  >
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-        type="button"
-      >
-        <span>
-          Open
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-        type="button"
-      >
-        <span>
-          ConfigProvider
-        </span>
-      </button>
-    </div>
-  </div>,
-  <div
-    class="ant-drawer ant-drawer-right css-var-test-id ant-drawer-open ant-drawer-inline"
-    tabindex="-1"
-  >
-    <div
-      class="ant-drawer-mask acss-c0hvaj"
-    />
-    <div
-      class="ant-drawer-content-wrapper"
-      style="width: 378px;"
-    >
-      <div
-        aria-labelledby="test-id"
-        aria-modal="true"
-        class="ant-drawer-section acss-10412ne"
-        role="dialog"
-        style="box-shadow: -10px 0 10px #666;"
-      >
-        <div
-          class="ant-drawer-header acss-1l0wu1y"
-          style="border-bottom: 1px solid rgb(22, 119, 255);"
-        >
-          <div
-            class="ant-drawer-header-title"
-          >
-            <button
-              aria-label="Close"
-              class="ant-drawer-close"
-              type="button"
-            >
-              <span
-                aria-label="close"
-                class="anticon anticon-close"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="ant-drawer-title"
-              id="test-id"
-            >
-              Basic Drawer
-            </div>
-          </div>
-        </div>
-        <div
-          class="ant-drawer-body acss-pgpe64"
-          style="font-size: 16px;"
-        >
-          <p>
-            Some contents...
-          </p>
-          <p>
-            Some contents...
-          </p>
-          <p>
-            Some contents...
-          </p>
-        </div>
-        <div
-          class="ant-drawer-footer acss-r4s437"
-          style="border-top: 1px solid rgb(217, 217, 217);"
-        >
-          Footer
-        </div>
-      </div>
-    </div>
-  </div>,
-  <div
-    class="ant-drawer ant-drawer-right css-var-test-id ant-drawer-open ant-drawer-inline"
-    tabindex="-1"
-  >
-    <div
-      class="ant-drawer-mask acss-c0hvaj"
-    />
-    <div
-      class="ant-drawer-content-wrapper"
-      style="width: 378px;"
-    >
-      <div
-        aria-labelledby="test-id"
-        aria-modal="true"
-        class="ant-drawer-section acss-10412ne"
-        role="dialog"
-        style="box-shadow: -10px 0 10px #666;"
-      >
-        <div
-          class="ant-drawer-header acss-1l0wu1y"
-          style="border-bottom: 1px solid rgb(22, 119, 255);"
-        >
-          <div
-            class="ant-drawer-header-title"
-          >
-            <button
-              aria-label="Close"
-              class="ant-drawer-close"
-              type="button"
-            >
-              <span
-                aria-label="close"
-                class="anticon anticon-close"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="ant-drawer-title"
-              id="test-id"
-            >
-              Basic Drawer
-            </div>
-          </div>
-        </div>
-        <div
-          class="ant-drawer-body acss-pgpe64"
-          style="font-size: 16px;"
-        >
-          <p>
-            Some contents...
-          </p>
-          <p>
-            Some contents...
-          </p>
-          <p>
-            Some contents...
-          </p>
-        </div>
-        <div
-          class="ant-drawer-footer acss-r4s437"
-          style="border-top: 1px solid rgb(217, 217, 217);"
-        >
-          Footer
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders components/drawer/demo/classNames.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/drawer/demo/closable-placement.tsx extend context correctly 1`] = `
 Array [
   <button
@@ -4635,13 +4436,15 @@ Array [
     class="ant-list ant-list-split ant-list-bordered css-var-test-id"
   >
     <div
-      class="ant-spin-nested-loading css-var-test-id"
+      aria-busy="false"
+      aria-live="polite"
+      class="ant-spin css-var-test-id"
     >
       <div
         class="ant-spin-container"
       >
         <ul
-          class="ant-list-items"
+          class="ant-list-items ant-list-container css-var-test-id"
         >
           <li
             class="ant-list-item"

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

@@ -11,37 +11,6 @@ exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
 </button>
 `;
 
-exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
->
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-      type="button"
-    >
-      <span>
-        Open
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-      type="button"
-    >
-      <span>
-        ConfigProvider
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`renders components/drawer/demo/closable-placement.tsx correctly 1`] = `
 <button
   class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
@@ -950,13 +919,15 @@ exports[`renders components/drawer/demo/user-profile.tsx correctly 1`] = `
   class="ant-list ant-list-split ant-list-bordered css-var-test-id"
 >
   <div
-    class="ant-spin-nested-loading css-var-test-id"
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin css-var-test-id"
   >
     <div
       class="ant-spin-container"
     >
       <ul
-        class="ant-list-items"
+        class="ant-list-items ant-list-container css-var-test-id"
       >
         <li
           class="ant-list-item"

components/drawer/__tests__/semantic.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import { warning } from '@rc-component/util';
 
 import Drawer from '..';
 import type { DrawerProps } from '..';
 import { render } from '../../../tests/utils';
 
+const { resetWarned } = warning;
+
 describe('Drawer.Semantic', () => {
   it('should apply custom classnames & styles to Drawer', () => {
     const customClassNames: DrawerProps['classNames'] = {
@@ -217,4 +220,24 @@ describe('Drawer.Semantic', () => {
     expect(footerElement).toHaveStyle({ color: 'rgb(255, 255, 0)' });
     expect(closeElement).toHaveStyle({ color: 'rgb(90, 0, 0)' });
   });
+
+  it('warning with both deprecated classNames.content and styles.content props', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    resetWarned();
+
+    render(
+      <Drawer
+        open
+        classNames={{ content: 'custom-content' }}
+        styles={{ content: { color: 'red' } }}
+      >
+        Here is content of Drawer
+      </Drawer>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Drawer] `classNames.content and styles.content` is deprecated. Please use `classNames.section and styles.section` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
 });

components/drawer/demo/classNames.md

@@ -1,7 +0,0 @@
-## zh-CN
-
-通过 `classNames` 属性设置抽屉内部区域（header、body、footer、mask、wrapper）的 `className`。
-
-## en-US
-
-Set the `className` of the build-in module (header, body, footer, mask, wrapper) of the drawer through the `classNames`.

components/drawer/demo/classNames.tsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { Button, ConfigProvider, Drawer, Space } from 'antd';
-import type { DrawerProps } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
-
-const useStyle = createStyles(({ token }) => ({
-  'my-drawer-body': {
-    background: token.blue1,
-  },
-  'my-drawer-mask': {
-    boxShadow: `inset 0 0 15px #fff`,
-  },
-  'my-drawer-header': {
-    background: token.green1,
-  },
-  'my-drawer-footer': {
-    color: token.colorPrimary,
-  },
-  'my-drawer-section': {
-    borderInlineStart: '2px dotted #333',
-  },
-}));
-
-const App: React.FC = () => {
-  const [open, setOpen] = useState([false, false]);
-  const { styles } = useStyle();
-  const token = useTheme();
-
-  const toggleDrawer = (idx: number, target: boolean) => {
-    setOpen((p) => {
-      p[idx] = target;
-      return [...p];
-    });
-  };
-
-  const classNames: DrawerProps['classNames'] = {
-    body: styles['my-drawer-body'],
-    mask: styles['my-drawer-mask'],
-    header: styles['my-drawer-header'],
-    footer: styles['my-drawer-footer'],
-    section: styles['my-drawer-section'],
-  };
-
-  const drawerStyles: DrawerProps['styles'] = {
-    mask: {
-      backdropFilter: 'blur(10px)',
-    },
-    section: {
-      boxShadow: '-10px 0 10px #666',
-    },
-    header: {
-      borderBottom: `1px solid ${token.colorPrimary}`,
-    },
-    body: {
-      fontSize: token.fontSizeLG,
-    },
-    footer: {
-      borderTop: `1px solid ${token.colorBorder}`,
-    },
-  };
-
-  return (
-    <>
-      <Space>
-        <Button type="primary" onClick={() => toggleDrawer(0, true)}>
-          Open
-        </Button>
-        <Button type="primary" onClick={() => toggleDrawer(1, true)}>
-          ConfigProvider
-        </Button>
-      </Space>
-      <Drawer
-        title="Basic Drawer"
-        placement="right"
-        footer="Footer"
-        onClose={() => toggleDrawer(0, false)}
-        open={open[0]}
-        classNames={classNames}
-        styles={drawerStyles}
-      >
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Drawer>
-      <ConfigProvider drawer={{ classNames, styles: drawerStyles }}>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          footer="Footer"
-          onClose={() => toggleDrawer(1, false)}
-          open={open[1]}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </ConfigProvider>
-    </>
-  );
-};
-
-export default App;

components/drawer/demo/style-class.tsx

@@ -54,8 +54,8 @@ const stylesFn: DrawerProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const [drawerOpen, setOpen] = useState(false);
-  const [drawerFnOpen, setFnOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerFnOpen, setDrawerFnOpen] = useState(false);
 
   const sharedProps: DrawerProps = {
     classNames,
@@ -65,7 +65,7 @@ const App: React.FC = () => {
   const footer: React.ReactNode = (
     <Flex gap="middle" justify="flex-end">
       <Button
-        onClick={() => setFnOpen(false)}
+        onClick={() => setDrawerFnOpen(false)}
         styles={{ root: { borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' } }}
       >
         Cancel
@@ -73,7 +73,7 @@ const App: React.FC = () => {
       <Button
         type="primary"
         styles={{ root: { backgroundColor: '#171717' } }}
-        onClick={() => setOpen(true)}
+        onClick={() => setDrawerOpen(true)}
       >
         Submit
       </Button>
@@ -82,8 +82,8 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="middle">
-      <Button onClick={() => setOpen(true)}>Open Style Drawer</Button>
-      <Button type="primary" onClick={() => setFnOpen(true)}>
+      <Button onClick={() => setDrawerOpen(true)}>Open Style Drawer</Button>
+      <Button type="primary" onClick={() => setDrawerFnOpen(true)}>
         Open Function Drawer
       </Button>
       <Drawer
@@ -92,7 +92,7 @@ const App: React.FC = () => {
         title="Custom Style Drawer"
         styles={styles}
         open={drawerOpen}
-        onClose={() => setOpen(false)}
+        onClose={() => setDrawerOpen(false)}
       >
         {sharedContent}
       </Drawer>
@@ -103,7 +103,7 @@ const App: React.FC = () => {
         styles={stylesFn}
         mask={{ enabled: true, blur: true }}
         open={drawerFnOpen}
-        onClose={() => setFnOpen(false)}
+        onClose={() => setDrawerFnOpen(false)}
       >
         {sharedContent}
       </Drawer>

components/drawer/index.en-US.md

@@ -34,7 +34,6 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <code src="./demo/user-profile.tsx">Preview drawer</code>
 <code src="./demo/multi-level-drawer.tsx">Multi-level drawer</code>
 <code src="./demo/size.tsx">Preset size</code>
-<code src="./demo/classNames.tsx">Customize className for build-in module</code>
 <code src="./demo/mask.tsx">mask</code>
 <code src="./demo/closable-placement.tsx" version="5.28.0">Closable placement</code>
 <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
@@ -48,11 +47,6 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 
 Common props ref：[Common props](/docs/react/common-props)
 
-<!-- prettier-ignore -->
-:::warning{title=Note}
-v5 uses `rootClassName` & `rootStyle` to configure the outermost element style, instead of `className` & `style` from v4. This is done to align the API with Modal.
-:::
-
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - |  |
@@ -70,8 +64,8 @@ v5 uses `rootClassName` & `rootStyle` to configure the outermost element style,
 | ~~height~~ | Placement is `top` or `bottom`, height of the Drawer dialog, please use `size` instead | string \| number | 378 |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
 | loading | Show the Skeleton | boolean | false | 5.17.0 |
-| mask | Mask effect | boolean \| `{ enabled?: boolean, blur?: boolean }` | true |  |
-| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
+| mask | Mask effect | boolean \| `{ enabled?: boolean, blur?: boolean, closable?: boolean }` | true | mask.closable: 6.3.0 |
+| ~~maskClosable~~ | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
 | maxSize | Maximum size (width or height depending on `placement`) when resizable | number | - | 6.0.0 |
 | open | Whether the Drawer dialog is visible or not | boolean | false |  |
 | placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |  |

components/drawer/index.zh-CN.md

@@ -35,7 +35,6 @@ demo:
 <code src="./demo/multi-level-drawer.tsx">多层抽屉</code>
 <code src="./demo/size.tsx">预设宽度</code>
 <code src="./demo/mask.tsx">遮罩</code>
-<code src="./demo/classNames.tsx">自定义内部样式</code>
 <code src="./demo/closable-placement.tsx" version="5.28.0">关闭按钮位置</code>
 <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>
 <code src="./demo/config-provider.tsx" debug>ConfigProvider</code>
@@ -48,11 +47,6 @@ demo:
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
-<!-- prettier-ignore -->
-:::warning{title=注意}
-v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
-:::
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
@@ -70,8 +64,8 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | ~~height~~ | 高度，在 `placement` 为 `top` 或 `bottom` 时使用，请使用 `size` 替换 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | loading | 显示骨架屏 | boolean | false | 5.17.0 |
-| mask | 遮罩效果 | boolean \| `{ enabled?: boolean, blur?: boolean }` | true |  |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| mask | 遮罩效果 | boolean \| `{ enabled?: boolean, blur?: boolean, closable?: boolean }` | true | mask.closable: 6.3.0 |
+| ~~maskClosable~~ | 点击蒙层是否允许关闭 | boolean | true |  |
 | maxSize | 可拖拽的最大尺寸（宽度或高度，取决于 `placement`） | number | - | 6.0.0 |
 | open | Drawer 是否可见 | boolean | false |  |
 | placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |  |

components/dropdown/style/status.ts

@@ -1,7 +1,9 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { DropdownToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
+const genStatusStyle: GenerateStyle<DropdownToken, CSSObject> = (token) => {
   const { componentCls, menuCls, colorError, colorTextLightSolid } = token;
 
   const itemCls = `${menuCls}-item`;

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

@@ -831,7 +831,9 @@ Array [
         style="margin-top: 8px;"
       >
         <div
-          class="ant-spin-nested-loading css-var-test-id"
+          aria-busy="false"
+          aria-live="polite"
+          class="ant-spin css-var-test-id"
         >
           <div
             class="ant-spin-container"
@@ -928,7 +930,9 @@ Array [
         class="ant-list ant-list-split css-var-test-id"
       >
         <div
-          class="ant-spin-nested-loading css-var-test-id"
+          aria-busy="false"
+          aria-live="polite"
+          class="ant-spin css-var-test-id"
         >
           <div
             class="ant-spin-container"