Merge branch 'master' into fix/tooltip

.dumi/hooks/use.ts

@@ -9,9 +9,10 @@ function use<T>(promise: PromiseLike<T>): T {
   }
   if (internal.status === 'rejected') {
     throw internal.reason;
-  } else if (internal.status === 'pending') {
+  }
+  if (internal.status === 'pending') {
     throw internal;
-  } else {
+  }
   internal.status = 'pending';
   internal.then(
     (result) => {
@@ -25,6 +26,5 @@ function use<T>(promise: PromiseLike<T>): T {
   );
   throw internal;
 }
-}
 
 export default use;

.dumi/hooks/useFetch/index.ts

@@ -1,4 +1,5 @@
 import fetch from 'cross-fetch';
+
 import use from '../use';
 import FetchCache from './cache';
 

.dumi/hooks/useLocation.ts

@@ -1,5 +1,6 @@
-import { useLocation as useDumiLocation } from 'dumi';
 import * as React from 'react';
+import { useLocation as useDumiLocation } from 'dumi';
+
 import useLocale from './useLocale';
 
 function clearPath(path: string) {

.dumi/pages/404/index.tsx

@@ -1,9 +1,10 @@
-import { HomeOutlined } from '@ant-design/icons';
-import { useLocation } from 'dumi';
 import React, { useEffect } from 'react';
+import { HomeOutlined } from '@ant-design/icons';
 import { Button, Result } from 'antd';
-import * as utils from '../../theme/utils';
+import { useLocation } from 'dumi';
+
 import Link from '../../theme/common/Link';
+import * as utils from '../../theme/utils';
 
 export interface NotFoundProps {
   router: {

.dumi/pages/index/components/DesignFramework.tsx

@@ -5,9 +5,9 @@ import { useLocation } from 'dumi';
 
 import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
+import Link from '../../../theme/common/Link';
 import SiteContext from '../../../theme/slots/SiteContext';
 import * as utils from '../../../theme/utils';
-import Link from '../../../theme/common/Link';
 
 const SECONDARY_LIST = [
   {

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
-import { Button, ConfigProvider, Flex, Typography } from 'antd';
+import { ConfigProvider, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { useLocation } from 'dumi';
-
 import useLocale from '../../../../hooks/useLocale';
+import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
-import Link from '../../../../theme/common/Link';
 import GroupMaskLayer from '../GroupMaskLayer';
 
 const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
@@ -144,14 +143,19 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
           <p>{locale.slogan}</p>
         </Typography>
         <Flex gap="middle" className={styles.btnWrap}>
-          <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
+          <LinkButton
-            <Button size="large" type="primary">
+            size="large"
+            type="primary"
+            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
+          >
             {locale.start}
-            </Button>
+          </LinkButton>
-          </Link>
+          <LinkButton
-          <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
+            size="large"
-            <Button size="large">{locale.designLanguage}</Button>
+            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
-          </Link>
+          >
+            {locale.designLanguage}
+          </LinkButton>
         </Flex>
         <div className={styles.child}>{children}</div>
       </div>

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

@@ -15,7 +15,7 @@ const RadiusPicker: React.FC<RadiusPickerProps> = ({ id, value, onChange }) => (
       style={{ width: 120 }}
       min={0}
       formatter={(val) => `${val}px`}
-      parser={(str) => (str ? parseFloat(str) : (str as any))}
+      parser={(str) => str?.replace('px', '') as unknown as number}
       id={id}
     />
     <Slider

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

@@ -10,7 +10,6 @@ import { TinyColor } from '@ctrl/tinycolor';
 import type { MenuProps, ThemeConfig } from 'antd';
 import {
   Breadcrumb,
-  Button,
   Card,
   ConfigProvider,
   Flex,
@@ -29,7 +28,7 @@ import { useLocation } from 'dumi';
 
 import useDark from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
-import Link from '../../../../theme/common/Link';
+import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import { getLocalizedPathname } from '../../../../theme/utils';
 import Group from '../Group';
@@ -518,14 +517,15 @@ const Theme: React.FC = () => {
                   title={locale.myTheme}
                   extra={
                     <Flex gap="small">
-                      <Link to={getLocalizedPathname('/theme-editor', isZhCN, search)}>
+                      <LinkButton to={getLocalizedPathname('/theme-editor', isZhCN, search)}>
-                        <Button type="default">{locale.toDef}</Button>
+                        {locale.toDef}
-                      </Link>
+                      </LinkButton>
-                      <Link
+                      <LinkButton
+                        type="primary"
                         to={getLocalizedPathname('/docs/react/customize-theme', isZhCN, search)}
                       >
-                        <Button type="primary">{locale.toUse}</Button>
+                        {locale.toUse}
-                      </Link>
+                      </LinkButton>
                     </Flex>
                   }
                 >

.dumi/pages/index/index.tsx

@@ -5,8 +5,8 @@ import { createStyles, css } from 'antd-style';
 import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
 import BannerRecommends from './components/BannerRecommends';
-import PreviewBanner from './components/PreviewBanner';
 import Group from './components/Group';
+import PreviewBanner from './components/PreviewBanner';
 
 const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
 const DesignFramework = React.lazy(() => import('./components/DesignFramework'));

.dumi/pages/theme-editor/index.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense, useEffect } from 'react';
-import { Button, message, Skeleton } from 'antd';
+import { Button, App, Skeleton } from 'antd';
 import { enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
@@ -36,7 +36,7 @@ const locales = {
 const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';
 
 const CustomTheme: React.FC = () => {
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const [locale, lang] = useLocale(locales);
 
   const [theme, setTheme] = React.useState<ThemeConfig>({});
@@ -51,7 +51,7 @@ const CustomTheme: React.FC = () => {
 
   const handleSave = () => {
     localStorage.setItem(ANT_DESIGN_V5_THEME_EDITOR_THEME, JSON.stringify(theme));
-    messageApi.success(locale.saveSuccessfully);
+    message.success(locale.saveSuccessfully);
   };
 
   return (
@@ -60,7 +60,6 @@ const CustomTheme: React.FC = () => {
         <title>{`${locale.title} - Ant Design`}</title>
         <meta property="og:title" content={`${locale.title} - Ant Design`} />
       </Helmet>
-      {contextHolder}
       <Suspense fallback={<Skeleton style={{ margin: 24 }} />}>
         <ThemeEditor
           advanced

.dumi/rehypeAntd.ts

@@ -74,7 +74,7 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
           const code = (node.children[0] as any).value as string;
           const configRegx = /^const sandpackConfig = ([\S\s]*?});/;
           const [configString] = code.match(configRegx) || [];
-          // eslint-disable-next-line no-eval
+          /* biome-ignore lint/security/noGlobalEval: used in documentation */ /* eslint-disable-next-line no-eval */
           const config = configString && eval(`(${configString.replace(configRegx, '$1')})`);
           Object.keys(config || {}).forEach((key) => {
             if (typeof config[key] === 'object') {

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

@@ -198,31 +198,30 @@ const Overview: React.FC = () => {
                 </Title>
                 <Row gutter={[24, 24]}>
                   {components.map((component) => {
+                    let url = component.link;
                     /** 是否是外链 */
-                    const isExternalLink = component.link.startsWith('http');
+                    const isExternalLink = url.startsWith('http');
-                    let url = `${component.link}`;
 
                     if (!isExternalLink) {
                       url += urlSearch;
                     }
 
-                    return (
+                    const cardContent = (
-                      <Col xs={24} sm={12} lg={8} xl={6} key={component?.title}>
-                        <Link to={url} prefetch>
                       <Card
+                        key={component.title}
                         onClick={() => onClickCard(url)}
                         styles={{
                           body: {
                             backgroundRepeat: 'no-repeat',
                             backgroundPosition: 'bottom right',
-                                backgroundImage: `url(${component?.tag || ''})`,
+                            backgroundImage: `url(${component.tag || ''})`,
                           },
                         }}
                         size="small"
                         className={styles.componentsOverviewCard}
                         title={
                           <div className={styles.componentsOverviewTitle}>
-                                {component?.title} {component.subtitle}
+                            {component.title} {component.subtitle}
                           </div>
                         }
                       >
@@ -233,11 +232,25 @@ const Overview: React.FC = () => {
                                 ? component.coverDark
                                 : component.cover
                             }
-                                alt={component?.title}
+                            alt={component.title}
                           />
                         </div>
                       </Card>
+                    );
+
+                    const linkContent = isExternalLink ? (
+                      <a href={url} key={component.title}>
+                        {cardContent}
+                      </a>
+                    ) : (
+                      <Link to={url} prefetch key={component.title}>
+                        {cardContent}
                       </Link>
+                    );
+
+                    return (
+                      <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
+                        {linkContent}
                       </Col>
                     );
                   })}

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -51,15 +51,12 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
 
   const demos = React.useMemo(
     () =>
-      items.reduce(
+      items.reduce<typeof items>((acc, item) => {
-        (acc, item) => {
         const { previewerProps } = item;
         const { debug } = previewerProps;
-
         if (debug && !showDebug) {
           return acc;
         }
-
         return acc.concat({
           ...item,
           previewerProps: {
@@ -74,9 +71,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             originDebug: debug,
           },
         });
-        },
+      }, []),
-        [] as typeof items,
-      ),
     [expandAll, showDebug],
   );
 

.dumi/theme/builtins/IconSearch/CopyableIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as AntdIcons from '@ant-design/icons';
-import { Badge, message } from 'antd';
+import { Badge, App } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -69,6 +69,7 @@ export interface CopyableIconProps {
 }
 
 const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
+  const { message } = App.useApp();
   const { name, isNew, justCopied, theme, onCopied } = props;
   const { styles } = useStyle();
   const onCopy = (text: string, result: boolean) => {

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -81,7 +81,7 @@ const IconSearch: React.FC = () => {
         if (searchKey) {
           const matchKey = searchKey
             // eslint-disable-next-line prefer-regex-literals
-            .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
+            .replace(/^<([a-z]*)\s\/>$/gi, (_, name) => name)
             .replace(/(Filled|Outlined|TwoTone)$/, '')
             .toLowerCase();
           iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));

.dumi/theme/builtins/IconSearch/themeIcons.tsx

@@ -12,6 +12,7 @@ export const FilledIcon: CustomIconComponent = (props) => {
     '0c0-53-43-96-96-96z';
   return (
     <svg {...props} viewBox="0 0 1024 1024">
+      <title>Filled Icon</title>
       <path d={path} />
     </svg>
   );
@@ -26,6 +27,7 @@ export const OutlinedIcon: CustomIconComponent = (props) => {
     ' 12 12v680c0 6.6-5.4 12-12 12z';
   return (
     <svg {...props} viewBox="0 0 1024 1024">
+      <title>Outlined Icon</title>
       <path d={path} />
     </svg>
   );
@@ -39,6 +41,7 @@ export const TwoToneIcon: CustomIconComponent = (props) => {
     '68 368 0 203.41-164.622 368-368 368z';
   return (
     <svg {...props} viewBox="0 0 1024 1024">
+      <title>TwoTone Icon</title>
       <path d={path} />
     </svg>
   );

.dumi/theme/builtins/ImagePreview/index.tsx

@@ -117,6 +117,7 @@ const ImagePreview: React.FC<React.PropsWithChildren<ImagePreviewProps>> = (prop
             <div className="preview-image-title">{coverMeta.alt}</div>
             <div
               className="preview-image-description"
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown
               dangerouslySetInnerHTML={{ __html: coverMeta.description ?? '' }}
             />
           </div>

.dumi/theme/builtins/InlinePopover/index.tsx

@@ -1,6 +1,7 @@
-import { PictureOutlined } from '@ant-design/icons';
 import React from 'react';
+import { PictureOutlined } from '@ant-design/icons';
 import { Image, Tooltip, Typography } from 'antd';
+
 import useLocale from '../../../hooks/useLocale';
 
 const locales = {

.dumi/theme/builtins/InstallDependencies/index.tsx

@@ -3,10 +3,10 @@ import { ConfigProvider, Tabs } from 'antd';
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
 import type { Tab } from 'rc-tabs/lib/interface';
 
+import BunLogo from './bun';
 import NpmLogo from './npm';
 import PnpmLogo from './pnpm';
 import YarnLogo from './yarn';
-import BunLogo from './bun';
 
 interface InstallProps {
   npm?: string;

.dumi/theme/builtins/InstallDependencies/npm.tsx

@@ -31,6 +31,7 @@ const NpmIcon: React.FC<IconProps> = (props) => {
         viewBox="0 0 16 16"
         width="1em"
       >
+        <title>npm icon</title>
         <path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
       </svg>
     </span>

.dumi/theme/builtins/InstallDependencies/pnpm.tsx

@@ -33,6 +33,7 @@ const PnpmIcon: React.FC<IconProps> = (props) => {
         viewBox="0 0 24 24"
         width="1em"
       >
+        <title>pnpm icon</title>
         <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
       </svg>
     </span>

.dumi/theme/builtins/InstallDependencies/yarn.tsx

@@ -32,6 +32,7 @@ const YarnIcon: React.FC<IconProps> = (props) => {
         viewBox="0 0 496 512"
         width="1em"
       >
+        <title>yarn icon</title>
         <path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
       </svg>
     </span>

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

@@ -401,6 +401,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
           {description && (
             <div
               className="code-box-description"
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown
               dangerouslySetInnerHTML={{ __html: description }}
             />
           )}

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

@@ -80,6 +80,7 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
         {title}
       </a>
       {description && (
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: description is from markdown
         <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
       )}
       <div className={styles.copy}>
@@ -89,10 +90,10 @@ const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description,
             <span style={{ marginInlineStart: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
           </div>
         ) : (
-          <div onClick={handleCopy} className={styles.copyTip}>
+          <button type="button" onClick={handleCopy} className={styles.copyTip}>
             <SketchOutlined />
             <span style={{ marginInlineStart: 8 }}>复制 Sketch JSON</span>
-          </div>
+          </button>
         )}
       </div>
       <div className={styles.demo} ref={demoRef}>

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip, Card, Typography } from 'antd';
+import { Card, Col, Row, Tooltip, Typography } from 'antd';
 import { createStyles } from 'antd-style';
+
 import useLocale from '../../../hooks/useLocale';
 
 const { Paragraph } = Typography;

.dumi/theme/common/CodePenIcon.tsx

@@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
 
 const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 15 15" fill="currentColor">
+    <title>codepen icon</title>
     <path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
   </svg>
 );

.dumi/theme/common/CodePreview.tsx

@@ -79,6 +79,7 @@ function toReactComponent(jsonML: any[]) {
         const attr = JsonML.getAttributes(node);
         return (
           <pre key={index} className={`language-${attr.lang}`}>
+            {/* biome-ignore lint/security/noDangerouslySetInnerHtml: it's for markdown */}
             <code dangerouslySetInnerHTML={{ __html: attr.highlighted }} />
           </pre>
         );

.dumi/theme/common/CodeSandboxIcon.tsx

@@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
 
 const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 1024 1024" fill="currentColor">
+    <title>CodeSandbox Icon</title>
     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
   </svg>
 );

.dumi/theme/common/Color/ColorBlock.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
+import { App } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { message } from 'antd';
 
 interface ColorBlockProps {
   color: string;
@@ -9,6 +9,7 @@ interface ColorBlockProps {
 }
 
 const ColorBlock: React.FC<ColorBlockProps> = (props) => {
+  const { message } = App.useApp();
   const { color, index, dark } = props;
   const textStyle = useMemo<React.CSSProperties>(() => {
     const colorMap = { default: ['#fff', 'unset'], dark: ['#314659', '#fff'] };

.dumi/theme/common/Color/ColorPaletteToolDark.tsx

@@ -1,8 +1,9 @@
-import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
-import ColorPatterns from './ColorPatterns';
+import { FormattedMessage } from 'dumi';
+
 import useLocale from '../../../hooks/useLocale';
+import ColorPatterns from './ColorPatterns';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度

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

@@ -1,5 +1,6 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
+
 import Palette from './Palette';
 
 const colors = [

.dumi/theme/common/Color/ColorPatterns.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { generate } from '@ant-design/colors';
 import uniq from 'lodash/uniq';
+
 import ColorBlock from './ColorBlock';
 
 interface ColorPatternsProps {

.dumi/theme/common/Color/ColorStyle.tsx

@@ -21,7 +21,7 @@ const gray: { [key: number]: string } = {
 const ColorStyle: React.FC = () => {
   const token = useTheme();
 
-  const makePalette = (color: string, index: number = 1): string => {
+  const makePalette = (color: string, index = 1): string => {
     if (index <= 10) {
       return `
 .palette-${color}-${index} {
@@ -33,7 +33,7 @@ ${makePalette(color, index + 1)}
     return '';
   };
 
-  const makeGrayPalette = (index: number = 1): string => {
+  const makeGrayPalette = (index = 1): string => {
     if (index <= 13) {
       return `
 .palette-gray-${index} {

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { presetDarkPalettes } from '@ant-design/colors';
-import { message } from 'antd';
+import { App } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const rgbToHex = (rgbString: string): string => {
@@ -36,9 +36,10 @@ const Palette: React.FC<PaletteProps> = (props) => {
   } = props;
   const [hexColors, setHexColors] = React.useState<Record<PropertyKey, string>>({});
   const colorNodesRef = React.useRef<Record<PropertyKey, HTMLDivElement>>({});
+  const { message } = App.useApp();
 
   useEffect(() => {
-    const colors = {};
+    const colors: Record<string, string> = {};
     Object.keys(colorNodesRef.current || {}).forEach((key) => {
       const computedColor = getComputedStyle(colorNodesRef.current[key])['background-color'];
       if (computedColor.includes('rgba')) {
@@ -70,7 +71,9 @@ const Palette: React.FC<PaletteProps> = (props) => {
         <div
           key={i}
           ref={(node) => {
+            if (node) {
               colorNodesRef.current[`${name}-${i}`] = node;
+            }
           }}
           className={`main-color-item palette-${name}-${i}`}
           style={{

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

@@ -28,16 +28,6 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }
 
 const useStyle = createStyles(({ token, css }) => ({
-  history: css`
-    position: absolute;
-    top: 0;
-    inset-inline-end: ${token.marginXS}px;
-  `,
-
-  li: css`
-    // white-space: pre;
-  `,
-
   ref: css`
     margin-inline-start: ${token.marginXS}px;
   `,
@@ -75,7 +65,7 @@ export interface ComponentChangelogProps {
 
 const locales = {
   cn: {
-    full: '完整更新日志',
+    full: '查看完整日志',
     changelog: '更新日志',
     loading: '加载中...',
     empty: '暂无更新',
@@ -213,7 +203,7 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
             </Typography.Title>
             <ul>
               {changelogList.map<React.ReactNode>((info, index) => (
-                <li key={index} className={styles.li}>
+                <li key={index}>
                   <ParseChangelog {...info} styles={styles} />
                 </li>
               ))}
@@ -234,7 +224,6 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
   return (
     <>
       <Button
-        className={styles.history}
         icon={<HistoryOutlined />}
         onClick={() => {
           setShow(true);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import type { ComponentChangelogProps } from './ComponentChangelog';
 import ComponentChangelog from './ComponentChangelog';
 

.dumi/theme/common/DirectionIcon.tsx

@@ -15,6 +15,7 @@ const DirectionSvg: React.FC<DirectionIconProps> = ({ direction }) => (
     fill="currentColor"
     style={{ transform: `scaleX(${direction === 'ltr' ? '1' : '-1'})` }}
   >
+    <title>Direction Icon</title>
     <path d="m14.6961816 11.6470802.0841184.0726198 2 2c.2662727.2662727.2904793.682876.0726198.9764816l-.0726198.0841184-2 2c-.2929.2929-.7677.2929-1.0606 0-.2662727-.2662727-.2904793-.682876-.0726198-.9764816l.0726198-.0841184.7196-.7197h-10.6893c-.41421 0-.75-.3358-.75-.75 0-.3796833.28215688-.6934889.64823019-.7431531l.10176981-.0068469h10.6893l-.7196-.7197c-.2929-.2929-.2929-.7677 0-1.0606.2662727-.2662727.682876-.2904793.9764816-.0726198zm-8.1961616-8.6470802c.30667 0 .58246.18671.69635.47146l3.00003 7.50004c.1538.3845-.0333.821-.41784.9749-.38459.1538-.82107-.0333-.9749-.4179l-.81142-2.0285h-2.98445l-.81142 2.0285c-.15383.3846-.59031.5717-.9749.4179-.38458-.1539-.57165-.5904-.41781-.9749l3-7.50004c.1139-.28475.38968-.47146.69636-.47146zm8.1961616 1.14705264.0841184.07261736 2 2c.2662727.26626364.2904793.68293223.0726198.97654222l-.0726198.08411778-2 2c-.2929.29289-.7677.29289-1.0606 0-.2662727-.26626364-.2904793-.68293223-.0726198-.97654222l.0726198-.08411778.7196-.7196675h-3.6893c-.4142 0-.75-.3357925-.75-.7500025 0-.3796925.2821653-.69348832.6482323-.74315087l.1017677-.00684663h3.6893l-.7196-.7196725c-.2929-.29289-.2929-.76777 0-1.06066.2662727-.26626364.682876-.29046942.9764816-.07261736zm-8.1961616 1.62238736-.89223 2.23056h1.78445z" />
   </svg>
 );

.dumi/theme/common/ExternalLinkIcon.tsx

@@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
 
 const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => (
   <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill={color}>
+    <title>External Link Icon</title>
     <path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
     <path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
   </svg>

.dumi/theme/common/Link.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent, MouseEventHandler } from 'react';
 import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
-import { useLocation, useNavigate, Link as DumiLink } from 'dumi';
+import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
 import nprogress from 'nprogress';
 
 export interface LinkProps {
@@ -8,12 +8,13 @@ export interface LinkProps {
   style?: React.CSSProperties;
   className?: string;
   onClick?: MouseEventHandler;
+  component?: React.ComponentType<any>;
 }
 
 nprogress.configure({ showSpinner: false });
 
 const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, ...rest } = props;
+  const { to, children, component, ...rest } = props;
   const [isPending, startTransition] = useTransition();
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -48,6 +49,19 @@ const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((
     }
   }, [isPending]);
 
+  if (component) {
+    return React.createElement(
+      component,
+      {
+        ...rest,
+        ref,
+        onClick: handleClick,
+        href,
+      },
+      children,
+    );
+  }
+
   return (
     <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
       {children}

.dumi/theme/common/LinkButton.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'antd';
+import type { ButtonProps } from 'antd';
+import Link from './Link';
+import type { LinkProps } from './Link';
+
+type LinkButtonProps = LinkProps &
+  Readonly<React.PropsWithChildren<Pick<ButtonProps, 'type' | 'size'>>>;
+
+const LinkButton: React.FC<LinkButtonProps> = (props) => <Link component={Button} {...props} />;
+
+export default LinkButton;

.dumi/theme/common/LiveCode.tsx

@@ -1,24 +1,23 @@
 import type { ComponentProps, FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { EditFilled } from '@ant-design/icons';
-import { Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
 import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
 
-import useLocale from '../../hooks/useLocale';
 import LiveError from '../slots/LiveError';
 
 const useStyle = createStyles(({ token, css }) => {
-  const { colorBgContainer, colorIcon } = token;
+  const { colorBgContainer } = token;
-
   return {
     editor: css`
       // override dumi editor styles
       .dumi-default-source-code-editor {
         .dumi-default-source-code {
           background: ${colorBgContainer};
+          &-scroll-container {
+            scrollbar-width: thin;
+            scrollbar-color: unset;
+          }
         }
-
         .dumi-default-source-code > pre,
         .dumi-default-source-code-scroll-content > pre,
         .dumi-default-source-code-editor-textarea {
@@ -48,58 +47,16 @@ const useStyle = createStyles(({ token, css }) => {
         }
       }
     `,
-
-    editableIcon: css`
-      position: absolute;
-      z-index: 2;
-      height: 32px;
-      width: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      top: 16px;
-      inset-inline-end: 56px;
-      color: ${colorIcon};
-    `,
   };
 });
 
-const locales = {
-  cn: {
-    demoEditable: '编辑 Demo 可实时预览',
-  },
-  en: {
-    demoEditable: 'Edit demo with real-time preview',
-  },
-};
-
-const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';
-
 const LiveCode: FC<
   {
     error: Error | null;
   } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
 > = (props) => {
-  const [open, setOpen] = useState(false);
   const { styles } = useStyle();
-  const [locale] = useLocale(locales);
-
-  useEffect(() => {
-    const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP);
-    if (shouldOpen) {
-      setOpen(true);
-    }
-  }, []);
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    if (!newOpen) {
-      localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true');
-    }
-  };
-
   return (
-    <>
     <div className={styles.editor}>
       <SourceCodeEditor
         lang={props.lang}
@@ -108,10 +65,6 @@ const LiveCode: FC<
       />
       <LiveError error={props.error} />
     </div>
-      <Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
-        <EditFilled className={styles.editableIcon} />
-      </Tooltip>
-    </>
   );
 };
 

.dumi/theme/common/RiddleIcon.tsx

@@ -3,6 +3,7 @@ import Icon from '@ant-design/icons';
 
 const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 14 14" fill="currentColor">
+    <title>Riddle logo</title>
     <path d="M13.8875145,13.1234844 C13.8687399,13.0691875 13.8499977,13.0329687 13.8312555,12.9786562 L11.3687445,8.83296875 C12.9187468,8.05754687 13.9640694,6.49009375 13.9640694,4.68728125 C13.9624994,2.09095312 11.7968694,0 9.10938728,0 L3.86404855,0 C3.04217572,0 2.37028902,0.648703125 2.37028902,1.44223437 L2.37028902,1.82090625 L0.746871676,1.82090625 C0.33593526,1.82090625 0,2.14526562 0,2.54203125 L0,13.4478437 C0,13.7540937 0.242191908,13.9879375 0.559368786,13.9879375 C0.615627746,13.9879375 0.67187052,13.9698281 0.72812948,13.9517187 L13.440615,13.9517187 C13.7578081,13.9517187 14,13.7178906 14,13.4116406 C14,13.321125 13.9624994,13.2125 13.8875145,13.1234844 Z M3.49061272,8.0394375 L3.49061272,2.9206875 L8.71719306,2.9206875 C9.74375723,2.9206875 10.5843723,3.73232812 10.5843723,4.7235 C10.5843723,5.71465625 9.76249942,6.5081875 8.71719306,6.5081875 L6.53280462,6.5081875 L6.53280462,6.52629688 C6.45781965,6.52629688 6.3828185,6.5625 6.3093711,6.59870313 C6.04843699,6.74354688 5.95469364,7.08598438 6.10467977,7.33792188 L8.3078104,11.0325469 L3.4906289,11.0325469 L3.4906289,8.0394375 L3.49061272,8.0394375 Z M1.1203237,12.8881406 L1.1203237,2.9206875 L2.3703052,2.9206875 L2.3703052,11.5545313 C2.3703052,11.8607813 2.61249711,12.0946094 2.92969017,12.0946094 L2.94843237,12.0946094 C2.98593295,12.1127188 3.04219191,12.1127188 3.09843468,12.1127188 L9.16563006,12.1127188 C9.48280694,12.1127188 9.72499884,11.878875 9.72499884,11.572625 L9.72499884,11.5364219 C9.76249942,11.3915938 9.74375723,11.2482813 9.66875607,11.1215469 L7.5593526,7.58835938 L8.6984185,7.58835938 C10.3406104,7.58835938 11.6843514,6.29095313 11.6843514,4.703875 C11.6843514,3.1168125 10.3406104,1.81939063 8.6984185,1.81939063 L3.4906289,1.81939063 L3.4906289,1.44073437 C3.4906289,1.24310937 3.65937341,1.08017187 3.86406474,1.08017187 L9.09061272,1.08017187 C11.143741,1.08017187 12.8234173,2.7019375 12.8234173,4.68578125 C12.8234173,6.21853125 11.8343538,7.5340625 10.4343538,8.05603125 C10.378111,8.07414063 10.3406104,8.09223438 10.2843514,8.11034375 C10.0234173,8.25517188 9.92967399,8.597625 10.0796763,8.8495625 L12.5062405,12.8881563 L1.12030751,12.8881563 L1.1203237,12.8881406 Z" />
   </svg>
 );

.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx

@@ -5,6 +5,7 @@ const ThemeIcon: React.FC<{ className?: string }> = (props) => {
   const SVGIcon = React.useCallback(
     () => (
       <svg width={20} height={20} viewBox="0 0 24 24" fill="currentColor" {...props}>
+        <title>Theme icon</title>
         <g fillRule="evenodd">
           <g fillRule="nonzero">
             <path d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z" />

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

@@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => {
         }
 
         ${antCls}-row-rtl {
-          #components-tooltip-demo-placement,
+          #tooltip-demo-placement,
-          #components-popover-demo-placement,
+          #popover-demo-placement,
-          #components-popconfirm-demo-placement {
+          #popconfirm-demo-placement {
             .code-box-demo {
               direction: ltr;
             }

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

@@ -197,6 +197,7 @@ const GlobalStyle: React.FC = () => {
             margin: 0 ${token.marginMD}px;
             color: #aaa;
             font-size: 30px;
+            user-select: none;
           }
         }
 
@@ -282,6 +283,10 @@ const GlobalStyle: React.FC = () => {
         }
 
         .markdown .dumi-default-table {
+          &-content {
+            scrollbar-width: thin;
+            scrollbar-color: unset;
+          }
           table {
             margin: 0;
             overflow-x: auto;
@@ -384,7 +389,7 @@ const GlobalStyle: React.FC = () => {
         }
 
         .grid-demo,
-        [id^='components-grid-demo-'] {
+        [id^='grid-demo-'] {
           ${antCls}-row > div,
             .code-box-demo ${antCls}-row > div {
             min-height: 30px;
@@ -462,8 +467,8 @@ const GlobalStyle: React.FC = () => {
           }
         }
 
-        [id='components-grid-demo-playground'],
+        [id='grid-demo-playground'],
-        [id='components-grid-demo-gutter'] {
+        [id='grid-demo-gutter'] {
           > .code-box-demo ${antCls}-row > div {
             margin-top: 0;
             margin-bottom: 0;

.dumi/theme/common/styles/Reset.tsx

@@ -1,5 +1,5 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
 export default () => {
@@ -11,7 +11,8 @@ export default () => {
         @font-face {
           font-weight: normal;
           font-family: AlibabaPuHuiTi;
-          src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
+          src:
+            url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
           font-display: swap;
@@ -20,7 +21,8 @@ export default () => {
         @font-face {
           font-weight: bold;
           font-family: AlibabaPuHuiTi;
-          src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
+          src:
+            url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf')
               format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
@@ -32,7 +34,8 @@ export default () => {
         @font-face {
           font-weight: 900;
           font-family: 'AliPuHui';
-          src: url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
+          src:
+            url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
               format('woff2'),
             url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
           font-display: swap;

.dumi/theme/layouts/DocLayout/index.tsx

@@ -37,7 +37,7 @@ const DocLayout: React.FC = () => {
   const location = useLocation();
   const { pathname, search, hash } = location;
   const [locale, lang] = useLocale(locales);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
   const { direction } = useContext(SiteContext);
   const { loading } = useSiteData();
 
@@ -51,11 +51,10 @@ const DocLayout: React.FC = () => {
 
   useEffect(() => {
     const nprogressHiddenStyle = document.getElementById('nprogress-style');
-    if (nprogressHiddenStyle) {
     timerRef.current = setTimeout(() => {
-        nprogressHiddenStyle.parentNode?.removeChild(nprogressHiddenStyle);
+      nprogressHiddenStyle?.remove();
     }, 0);
-    }
+    return () => clearTimeout(timerRef.current);
   }, []);
 
   // handle hash change or visit page hash from Link component, and jump after async chunk loaded

.dumi/theme/layouts/GlobalLayout.tsx

@@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
 //   (global as any).styleCache = styleCache;
 // }
 
+// Compatible with old anchors
+if (typeof window !== 'undefined') {
+  const hashId = location.hash.slice(1);
+  if (hashId.startsWith('components-')) {
+    if (!document.querySelector(`#${hashId}`)) {
+      location.hash = `#${hashId.replace(/^components-/, '')}`;
+    }
+  }
+}
+
 const getAlgorithm = (themes: ThemeName[] = []) =>
   themes
     .map((theme) => {
@@ -153,6 +163,7 @@ const GlobalLayout: React.FC = () => {
       plain: true,
       types: 'style',
     });
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
     return <style data-type="antd-cssinjs" dangerouslySetInnerHTML={{ __html: styleText }} />;
   });
 
@@ -166,6 +177,7 @@ const GlobalLayout: React.FC = () => {
         data-type="antd-css-var"
         data-rc-order="prepend"
         data-rc-priority="-9999"
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
         dangerouslySetInnerHTML={{ __html: styleText }}
       />
     );
@@ -175,6 +187,7 @@ const GlobalLayout: React.FC = () => {
     <style
       data-sandpack="true"
       id="sandpack"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: only used in .dumi
       dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
     />
   ));

.dumi/theme/layouts/ResourceLayout/index.tsx

@@ -10,7 +10,7 @@ import EditButton from '../../common/EditButton';
 import Footer from '../../slots/Footer';
 import AffixTabs from './AffixTabs';
 
-export type ResourceLayoutProps = PropsWithChildren<{}>;
+export type ResourceLayoutProps = PropsWithChildren<NonNullable<any>>;
 
 const resourcePadding = 40;
 const articleMaxWidth = 1208;

.dumi/theme/plugin.ts

@@ -39,6 +39,13 @@ export const getHash = (str: string, length = 8) =>
 class AntdReactTechStack extends ReactTechStack {
   // eslint-disable-next-line class-methods-use-this
   generatePreviewerProps(...[props, opts]: any) {
+    props.pkgDependencyList = { ...devDependencies, ...dependencies };
+    props.jsx ??= '';
+
+    if (opts.type === 'code-block') {
+      props.jsx = opts?.entryPointCode ? sylvanas.parseText(opts.entryPointCode) : '';
+    }
+
     if (opts.type === 'external') {
       // try to find md file with the same name as the demo tsx file
       const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1];
@@ -48,7 +55,6 @@ class AntdReactTechStack extends ReactTechStack {
       const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
       const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
 
-      props.pkgDependencyList = { ...devDependencies, ...dependencies };
       props.jsx = sylvanas.parseText(code);
 
       if (md) {

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { Button, Card, Divider } from 'antd';
 import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 
 import useLocale from '../../../hooks/useLocale';
 import JuejinLogo from './JuejinLogo';
@@ -42,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({
     color: #444;
     font-size: ${token.fontSizeLG}px;
     font-weight: ${token.fontWeightStrong};
+    user-select: none;
   `,
   subTitle: css`
     display: flex;
@@ -54,7 +56,8 @@ const useStyle = createStyles(({ token, css }) => ({
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    .logo {
+  `,
+  logo: css`
     width: 24px;
     height: 24px;
     font-size: 24px;
@@ -67,24 +70,20 @@ const useStyle = createStyles(({ token, css }) => ({
     &.juejin-logo {
       color: #1e80ff;
     }
-    }
+  `,
-    .arrowIcon {
+  arrowIcon: css`
     color: #8a8f8d;
     margin: 0 ${token.marginXS}px;
     font-size: ${token.fontSizeSM}px;
-    }
+  `,
-    .zl-btn {
+  zlBtn: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
     padding: 0;
     color: #646464;
-    }
   `,
-  btn: css`
+  discussLogo: css`
-    display: flex;
+    width: 16px;
-    justify-content: center;
+    height: 16px;
-    align-items: center;
+    font-size: 16px;
   `,
 }));
 
@@ -114,7 +113,18 @@ interface Props {
 const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
   const [locale] = useLocale(locales);
   const {
-    styles: { card, bigTitle, cardBody, left, title, subTitle, btn },
+    styles: {
+      card,
+      bigTitle,
+      cardBody,
+      left,
+      title,
+      subTitle,
+      logo,
+      arrowIcon,
+      zlBtn,
+      discussLogo,
+    },
   } = useStyle();
   if (!zhihuLink && !yuqueLink && !juejinLink) {
     return null;
@@ -123,18 +133,20 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
     <Card className={card} bordered={false}>
       <h3 className={bigTitle}>{locale.bigTitle}</h3>
       {zhihuLink && (
+        <>
+          <Divider />
           <div className={cardBody}>
             <div className={left}>
-            <img src={ANTD_IMG_URL} alt="antd" />
+              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
               <div>
                 <p className={title}>Ant Design</p>
                 <div className={subTitle}>
-                <ZhihuOutlined className="logo zhihu-logo" />
+                  <ZhihuOutlined className={classNames(logo, 'zhihu-logo')} />
-                <RightOutlined className="arrowIcon" />
+                  <RightOutlined className={arrowIcon} />
                   <Button
                     target="_blank"
                     href="https://www.zhihu.com/column/c_1564262000561106944"
-                  className="zl-btn"
+                    className={zlBtn}
                     type="link"
                   >
                     {locale.zhiHu}
@@ -143,32 +155,32 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
               </div>
             </div>
             <Button
-            type="primary"
-            className={btn}
-            icon={<ZhihuOutlined style={{ fontSize: 16 }} />}
               ghost
+              type="primary"
+              icon={<ZhihuOutlined className={discussLogo} />}
               target="_blank"
               href={zhihuLink}
             >
               {locale.buttonText}
             </Button>
           </div>
+        </>
       )}
       {yuqueLink && (
         <>
           <Divider />
           <div className={cardBody}>
             <div className={left}>
-              <img src={ANTD_IMG_URL} alt="antd" />
+              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
               <div>
                 <p className={title}>Ant Design</p>
                 <div className={subTitle}>
-                  <YuqueOutlined className="logo yuque-logo" />
+                  <YuqueOutlined className={classNames(logo, 'yuque-logo')} />
-                  <RightOutlined className="arrowIcon" />
+                  <RightOutlined className={arrowIcon} />
                   <Button
                     target="_blank"
                     href="https://www.yuque.com/ant-design/ant-design"
-                    className="zl-btn"
+                    className={zlBtn}
                     type="link"
                   >
                     {locale.yuQue}
@@ -177,10 +189,9 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
               </div>
             </div>
             <Button
-              type="primary"
-              className={btn}
-              icon={<YuqueOutlined style={{ fontSize: 16 }} />}
               ghost
+              type="primary"
+              icon={<YuqueOutlined className={discussLogo} />}
               target="_blank"
               href={yuqueLink}
             >
@@ -194,16 +205,16 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
           <Divider />
           <div className={cardBody}>
             <div className={left}>
-              <img src={ANTD_IMG_URL} alt="antd" />
+              <img draggable={false} src={ANTD_IMG_URL} alt="antd" />
               <div>
                 <p className={title}>Ant Design</p>
                 <div className={subTitle}>
-                  <JuejinLogo className="logo juejin-logo" />
+                  <JuejinLogo className={classNames(logo, 'juejin-logo')} />
-                  <RightOutlined className="arrowIcon" />
+                  <RightOutlined className={arrowIcon} />
                   <Button
                     target="_blank"
                     href="https://juejin.cn/column/7247354308258054200"
-                    className="zl-btn"
+                    className={zlBtn}
                     type="link"
                   >
                     {locale.junjin}
@@ -212,10 +223,9 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
               </div>
             </div>
             <Button
-              type="primary"
-              className={btn}
-              icon={<JuejinLogo style={{ fontSize: 16, width: 16, height: 16 }} />}
               ghost
+              type="primary"
+              icon={<JuejinLogo className={discussLogo} />}
               target="_blank"
               href={juejinLink}
             >

.dumi/theme/slots/Content/JuejinLogo.tsx

@@ -17,6 +17,7 @@ const JuejinLogo: React.FC<Props> = (props) => {
       viewBox="0 0 36 28"
       fill="none"
     >
+      <title>Juejin logo</title>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

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

@@ -1,5 +1,5 @@
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { Col, Flex, Typography } from 'antd';
+import { Col, Flex, Space, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
@@ -70,10 +70,11 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
         </InViewSuspense>
         <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
           {meta.frontmatter?.title ? (
-            <Typography.Title style={{ fontSize: 30, position: 'relative' }}>
+            <Flex justify="space-between">
-              <Flex gap="small">
+              <Typography.Title style={{ fontSize: 32, position: 'relative' }}>
-                <div>{meta.frontmatter?.title}</div>
+                <Space>
-                <div>{meta.frontmatter?.subtitle}</div>
+                  <span>{meta.frontmatter?.title}</span>
+                  <span>{meta.frontmatter?.subtitle}</span>
                   {!pathname.startsWith('/components/overview') && (
                     <InViewSuspense fallback={null}>
                       <EditButton
@@ -82,13 +83,14 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                       />
                     </InViewSuspense>
                   )}
-              </Flex>
+                </Space>
+              </Typography.Title>
               {pathname.startsWith('/components/') && (
                 <InViewSuspense fallback={null}>
                   <ComponentChangelog pathname={pathname} />
                 </InViewSuspense>
               )}
-            </Typography.Title>
+            </Flex>
           ) : null}
           <InViewSuspense fallback={null}>
             <DocMeta />

.dumi/theme/slots/Footer/AdditionalInfo.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createStyles } from 'antd-style';
 import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 import useLocale from '../../../hooks/useLocale';
@@ -19,9 +20,38 @@ const locales = {
   },
 };
 
+const useStyle = createStyles(({ css, token }) => ({
+  container: css`
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 99999999;
+    background-color: ${token.colorTextSecondary};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
+  alertBox: css`
+    border: 1px solid ${token.colorWarningBorder};
+    background-color: ${token.colorWarningBg};
+    color: ${token.colorTextHeading};
+    padding: ${token.paddingXS}px ${token.paddingSM}px;
+    border-radius: ${token.borderRadiusLG}px;
+    z-index: 9999999999;
+    line-height: 22px;
+    width: 520px;
+    a {
+      color: ${token.colorPrimary};
+      text-decoration-line: none;
+    }
+  `,
+}));
+
 // Check for browser support `:where` or not
 // Warning user if not support to modern browser
-function InfoNewVersion() {
+const InfoNewVersion: React.FC = () => {
   const [location] = useLocale(locales);
   const [supportWhere, setSupportWhere] = React.useState(true);
 
@@ -50,40 +80,19 @@ function InfoNewVersion() {
     removeCSS(whereCls);
   }, []);
 
-  return supportWhere ? null : (
+  const { styles } = useStyle();
-    <div
+
-      style={{
+  if (supportWhere) {
-        position: 'fixed',
+    return null;
-        left: 0,
+  }
-        right: 0,
+
-        top: 0,
+  return (
-        bottom: 0,
+    <div className={styles.container}>
-        zIndex: 99999999,
+      <div className={styles.alertBox}>
-        background: 'rgba(0,0,0,0.65)',
+        {location.whereNotSupport} <a href={location.whereDocUrl}>{location.whereDocTitle}</a>
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <div
-        style={{
-          border: `1px solid #ffe58f`,
-          background: '#fffbe6',
-          color: 'rgba(0,0,0,0.88)',
-          padding: '8px 12px',
-          borderRadius: '8px',
-          zIndex: 9999999999,
-          lineHeight: '22px',
-          width: 520,
-        }}
-      >
-        {location.whereNotSupport}{' '}
-        <a style={{ color: '#1677ff', textDecoration: 'none' }} href={location.whereDocUrl}>
-          {location.whereDocTitle}
-        </a>
       </div>
     </div>
   );
-}
+};
 
 export default InfoNewVersion;

.dumi/theme/slots/Header/Logo.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { createStyles } from 'antd-style';
 import { useLocation } from 'dumi';
 
-import * as utils from '../../utils';
 import Link from '../../common/Link';
+import * as utils from '../../utils';
 
 const useStyle = createStyles(({ token, css }) => {
   const { headerHeight, colorTextHeading, fontFamily, mobileMaxWidth } = token;
@@ -23,15 +23,17 @@ const useStyle = createStyles(({ token, css }) => {
       text-decoration: none;
       display: inline-flex;
       align-items: center;
+      column-gap: ${token.marginSM}px;
 
       &:hover {
         color: ${colorTextHeading};
       }
 
       img {
+        width: 32px;
         height: 32px;
+        display: inline-block;
         vertical-align: middle;
-        margin-inline-end: ${token.marginSM}px;
       }
 
       @media only screen and (max-width: ${mobileMaxWidth}px) {
@@ -50,18 +52,15 @@ export interface LogoProps {
   location: any;
 }
 
+const logoSrc = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
+
 const Logo: React.FC<LogoProps> = ({ isZhCN }) => {
   const { search } = useLocation();
   const { styles } = useStyle();
   return (
     <h1>
       <Link to={utils.getLocalizedPathname('/', isZhCN, search)} className={styles.logo}>
-        <img
+        <img src={logoSrc} draggable={false} alt="logo" />
-          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-          height={32}
-          width={32}
-          alt="logo"
-        />
         <span className={styles.title}>Ant Design</span>
       </Link>
     </h1>

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

@@ -30,16 +30,7 @@ const locales = {
 
 // ============================= Style =============================
 const useStyle = createStyles(({ token }) => {
-  const {
+  const { antCls, iconCls, fontFamily, fontSize, headerHeight, colorPrimary } = token;
-    antCls,
-    iconCls,
-    fontFamily,
-    fontSize,
-    headerHeight,
-    menuItemBorder,
-    colorPrimary,
-    colorText,
-  } = token;
 
   return {
     nav: css`
@@ -57,25 +48,6 @@ const useStyle = createStyles(({ token }) => {
           padding-inline-end: ${token.paddingSM}px;
           padding-inline-start: ${token.paddingSM}px;
           line-height: ${headerHeight}px;
-
-          &::after {
-            top: 0;
-            right: 12px;
-            bottom: auto;
-            left: 12px;
-            border-width: ${menuItemBorder}px;
-          }
-
-          a {
-            color: ${colorText};
-          }
-
-          a:before {
-            position: absolute;
-            inset: 0;
-            background-color: transparent;
-            content: '';
-          }
         }
 
         & ${antCls}-menu-submenu-title ${iconCls} {

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -11,7 +11,7 @@ export interface LangBtnProps {
   value: 1 | 2;
   pure?: boolean;
   onClick?: React.MouseEventHandler;
-  ['aria-label']?: string;
+  'aria-label'?: string;
 }
 
 const BASE_SIZE = '1.2em';
@@ -95,7 +95,13 @@ const LangBtn: React.FC<LangBtnProps> = (props) => {
   } = useStyle();
 
   const node = (
-    <button onClick={onClick} className={btn} key="lang-button" aria-label={props['aria-label']}>
+    <button
+      type="button"
+      onClick={onClick}
+      className={btn}
+      key="lang-button"
+      aria-label={props['aria-label']}
+    >
       <div className="btn-inner">
         {pure && (value === 1 ? label1 : label2)}
         {!pure && (

.dumi/theme/slots/SiteContext.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { DirectionType } from 'antd/es/config-provider';
+
 import type { ThemeName } from '../common/ThemeSwitch';
 
 export interface SiteContextProps {

.dumirc.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   manifest: {},
   conventionRoutes: {
     // to avoid generate routes for .dumi/pages/index/components/xx
-    exclude: [new RegExp('index/components/')],
+    exclude: [/index\/components\//],
   },
   ssr:
     process.env.NODE_ENV === 'production'
@@ -65,56 +65,56 @@ export default defineConfig({
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2',
       type: 'font/woff2',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff',
       type: 'font/woff',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf',
       type: 'font/ttf',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2',
       type: 'font/woff2',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.woff',
       type: 'font/woff',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf',
       type: 'font/ttf',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'preload',
       as: 'font',
       href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2',
       type: 'font/woff2',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
     {
       rel: 'preload',
       as: 'font',
       href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff',
       type: 'font/woff2',
-      crossorigin: true,
+      crossorigin: 'anonymous',
     },
   ],
   headScripts: [

.github/PULL_REQUEST_TEMPLATE.md

@@ -48,16 +48,11 @@ Thank you!
 Describe changes from the user side, and list all potential break changes or other risks.
 --->
 
+- Use a developer-oriented tone and narrative style.
+- Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
+- Refer to: https://ant.design/changelog
+
 | Language   | Changelog |
 | ---------- | --------- |
 | 🇺🇸 English |           |
 | 🇨🇳 Chinese |           |
-
-### ☑️ Self-Check before Merge
-
-⚠️ Please check all items below before requesting a reviewing. ⚠️
-
-- [ ] Doc is updated/provided or not needed
-- [ ] Demo is updated/provided or not needed
-- [ ] TypeScript definition is updated/provided or not needed
-- [ ] Changelog is provided or not needed

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -48,16 +48,11 @@
 从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
 -->
 
+- 请用面向开发者的角度和叙述方式撰写 changelog
+- 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
+- 参考：https://ant.design/changelog-cn
+
 | 语言    | 更新描述 |
 | ------- | -------- |
 | 🇺🇸 英文 |          |
 | 🇨🇳 中文 |          |
-
-### ☑️ 请求合并前的自查清单
-
-⚠️ 请自检并全部**勾选全部选项**。⚠️
-
-- [ ] 文档已补充或无须补充
-- [ ] 代码演示已提供或无须提供
-- [ ] TypeScript 定义已补充或无须补充
-- [ ] Changelog 已提供或无须提供

.github/workflows/issue-labeled.yml

@@ -38,9 +38,9 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
-            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
+            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/repro) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
 
-            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/repro) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
 
             > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
 

.github/workflows/pkg.pr.new.yml

@@ -0,0 +1,36 @@
+name: Publish Any Commit
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      # ========== Prepare examples ==========
+      - name: Clear examples
+        run: rm -rf examples
+
+      - name: Clone examples
+        uses: actions/checkout@v4
+        with:
+          repository: ant-design/ant-design-examples
+          path: examples
+
+      - name: Modify examples
+        run: npx tsx scripts/prepare-examples.ts
+
+      - run: npx pkg-pr-new publish --template './examples/examples/*'

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

@@ -39,14 +39,14 @@ jobs:
           require-include: '🇺🇸 English, 🇨🇳 Chinese, 🇺🇸 英文, 🇨🇳 中文'
           comment-body: |
             - 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in the PR
-              - Write with a **developer-oriented perspective** and **narrative method**, without describing the details of the repair
+              - Use a developer-oriented tone
-              - **Describing the problem and the impact on the developer**
+              - Describe the impact on developers, rather than your solution
-              - **describing the user-first site problem**, not your solution
+              - Refer to: https://ant.design/changelog#501
-              - Refer: https://ant.design/changelog#501
 
             - 🚨 @${{ github.event.pull_request.user.login }}, 请填写 PR 中的 changelog
-              - 请用**面向开发者的角度**和**叙述方式撰写**，不描述修复细节
+              - 使用面向开发者的角度撰写 changelog
-              - **描述问题和对开发者的影响**
+              - 描述用户第一现场的问题，对开发者有哪些影响，而非你的解决方式
-              - **描述用户第一现场的问题**，而非你的解决方式
               - 参考：https://ant.design/changelog-cn#501
+
+            ![](https://github.com/ant-design/ant-design/assets/507615/14c767db-e40f-42a1-9aab-553037eb1ab6)
           skip-title-start: 'docs, chore, test, ci'

.github/workflows/preview-deploy.yml

@@ -70,7 +70,13 @@ jobs:
       # Save PR id to output
       - name: save PR id
         id: pr
-        run: echo "id=$(<pr-id.txt)" >> $GITHUB_OUTPUT
+        run: |
+          pr_id=$(<pr-id.txt)
+          if ! [[ "$pr_id" =~ ^[0-9]+$ ]]; then
+            echo "Error: pr-id.txt does not contain a valid numeric PR id. Please check."
+            exit 1
+          fi
+          echo "id=$pr_id" >> $GITHUB_OUTPUT
 
       # Download site artifact
       - name: download site artifact
@@ -84,8 +90,10 @@ jobs:
       - name: upload surge service
         id: deploy
         continue-on-error: true
+        env:
+          PR_ID: ${{ steps.pr.outputs.id }}
         run: |
-          export DEPLOY_DOMAIN=https://preview-${{ steps.pr.outputs.id }}-ant-design.surge.sh
+          export DEPLOY_DOMAIN=https://preview-${PR_ID}-ant-design.surge.sh
           npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
 
       - name: success comment

.github/workflows/size-limit.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
       - name: size-limit
         uses: ant-design/size-limit-action@master
         with:

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

@@ -78,7 +78,13 @@ jobs:
       # Save PR id to output
       - name: save PR id
         id: pr
-        run: echo "id=$(<tmp/visual-regression-pr-id.txt)" >> $GITHUB_OUTPUT
+        run: |
+          pr_id=$(<tmp/visual-regression-pr-id.txt)
+          if ! [[ "$pr_id" =~ ^[0-9]+$ ]]; then
+            echo "Error: pr-id.txt does not contain a valid numeric PR id. Please check."
+            exit 1
+          fi
+          echo "id=$pr_id" >> $GITHUB_OUTPUT
 
       # Download report artifact
       - name: download report artifact
@@ -146,13 +152,15 @@ jobs:
       - name: Reset Commit Status
         uses: actions/github-script@v7
         if: ${{ steps.report.outcome == 'success' }}
+        env:
+          PR_ID: ${{ steps.pr.outputs.id }}
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const prResponse = await github.rest.pulls.get({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              pull_number: ${{ steps.pr.outputs.id }},
+              pull_number: process.env.PR_ID,
             });
             const prHeadSha = prResponse.data.head.sha;
 

.gitignore

@@ -74,3 +74,6 @@ __image_snapshots__/
 .eslintcache
 .node-version
 .node
+
+.env
+examples/

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
+lint-staged
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx,js,jsx,json,css}": ["biome check --write"],
+  "*.{md,yml}": ["prettier --ignore-unknown --write"]
+}

.prettierignore

@@ -3,16 +3,15 @@
 CODEOWNERS
 .dockerignore
 Dockerfile.ui-test
-package.json
 .dumi/tmp
 .dumi/tmp-production
+!dumi
 AUTHORS.txt
 lib/
 es/
 dist/
 _site/
 server
-.dumi/tmp
 coverage/
 CNAME
 LICENSE

.stylelintrc.js

@@ -1,42 +0,0 @@
-module.exports = {
-  extends: [
-    'stylelint-config-standard',
-    'stylelint-prettier/recommended',
-    'stylelint-config-rational-order',
-  ],
-  // 使用 stylelint 来 lint css in js? https://github.com/emotion-js/emotion/discussions/2694
-  rules: {
-    'function-name-case': ['lower'],
-    'function-no-unknown': [
-      true,
-      {
-        ignoreFunctions: [
-          'fade',
-          'fadeout',
-          'tint',
-          'darken',
-          'ceil',
-          'fadein',
-          'floor',
-          'unit',
-          'shade',
-          'lighten',
-          'percentage',
-          '-',
-        ],
-      },
-    ],
-    'import-notation': null,
-    'no-descending-specificity': null,
-    'no-invalid-position-at-import-rule': null,
-    'declaration-empty-line-before': null,
-    'keyframes-name-pattern': null,
-    'custom-property-pattern': null,
-    'number-max-precision': 8,
-    'alpha-value-notation': 'number',
-    'color-function-notation': 'legacy',
-    'selector-class-pattern': null,
-    'selector-id-pattern': null,
-    'selector-not-notation': null,
-  },
-};

BUG_VERSIONS.json

@@ -55,5 +55,6 @@
   "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
   ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"],
   "5.16.3": ["https://github.com/ant-design/ant-design/issues/48568"],
-  "5.17.1": ["https://github.com/ant-design/ant-design/issues/48913"]
+  "5.17.1": ["https://github.com/ant-design/ant-design/issues/48913"],
+  "5.18.2": ["https://github.com/ant-design/ant-design/pull/49487"]
 }

CHANGELOG.en-US.md

@@ -16,6 +16,101 @@ tag: vVERSION
 
 ---
 
+## 5.19.3
+
+`2024-07-19`
+
+- 🐞 Fix Table sorter argument of `onChange` with unexpected value. [#49533](https://github.com/ant-design/ant-design/pull/49533) [@Zyf665](https://github.com/Zyf665)
+- 🐞 Fix Pagination `token.itemBg` not working. [#49933](https://github.com/ant-design/ant-design/pull/49933)
+- 🐞 Fix List wrong align style of pagination. [#49925](https://github.com/ant-design/ant-design/pull/49925) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fix Image cannot exit preview, when click blank area on both sides of aciton bar. [#49915](https://github.com/ant-design/ant-design/pull/49915) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix Card border radius cannot works for non-img elements from `cover` property. [#49862](https://github.com/ant-design/ant-design/pull/49862) [@coding-ice](https://github.com/coding-ice)
+- 💄 Fix Dropdown menu item wrong wrap style at edge of viewport. [#49899](https://github.com/ant-design/ant-design/pull/49899)
+- 💄 Fix Descriptions items may too close with each other. [#49895](https://github.com/ant-design/ant-design/pull/49895) [@crazyair](https://github.com/crazyair)
+- ⌨️ Optimize Select be changed repeatedly when hold the enter key in multi-mode. [#49963](https://github.com/ant-design/ant-design/pull/49963) [@crazyair](https://github.com/crazyair)
+- 🇪🇬 Add missing translation for the Arabic language(Egypt) (ar_EG). [#49852](https://github.com/ant-design/ant-design/pull/49852) [@ahmedsamirdev](https://github.com/ahmedsamirdev)
+- TypeScript
+  - 🤖 Reuse Tooltips type definitions for ColorPicker. [#49949](https://github.com/ant-design/ant-design/pull/49949) [@Wxh16144](https://github.com/Wxh16144)
+
+## 5.19.2
+
+`2024-07-15`
+
+- 🐞 Fix List render `0` when `actions={[]}`. [#49842](https://github.com/ant-design/ant-design/pull/49842) [@int64ago](https://github.com/int64ago)
+- 🐞 Fix Upload with dragging upload, the `fileList` in `beforeUpload` is not fully filled. [#49832](https://github.com/ant-design/ant-design/pull/49832) [@coderz-w](https://github.com/coderz-w)
+- Descriptions
+  - 🐞 Fix Descriptions overlap when content is too long. [#49803](https://github.com/ant-design/ant-design/pull/49803) [@coding-ice](https://github.com/coding-ice)
+  - 🐞 Fix Descriptions render style issue when under Table `expandedRowRender`. [#49727](https://github.com/ant-design/ant-design/pull/49727) [@ljw-codeking](https://github.com/ljw-codeking)
+- 🐞 Fix Spin style issue when use `percent` and `size` at same time. [#49876](https://github.com/ant-design/ant-design/pull/49876)
+- 🇮🇳 Fill DatePicker `kn_IN` missing locales. [#49860](https://github.com/ant-design/ant-design/pull/49860) [@neerajap-01](https://github.com/neerajap-01)
+- Typescript
+  - 🐞 Fix Tree `icon` and `switcherIcon` parameter types not being correctly inferred. [#49821](https://github.com/ant-design/ant-design/pull/49821)
+  - 🐞 Revert Cascader `multiple` definition case `value` definition missing. [#49741](https://github.com/ant-design/ant-design/pull/49741) [@YangZhi1](https://github.com/YangZhi1)
+
+## 5.19.1
+
+`2024-07-05`
+
+- 🐞 Global: @ant-design/colors use pre-compiled color presets to improve runtime performance. [#49714](https://github.com/ant-design/ant-design/pull/49714) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Global: No more limit max auto `zIndex` increase but use warning instead. [#49720](https://github.com/ant-design/ant-design/pull/49720)
+- 🐞 Adjust position of Input.TextArea to be consistent with other data entry components. [#49718](https://github.com/ant-design/ant-design/pull/49718) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix Input variant `filled` `activeBorderColor` token invalid. [#49699](https://github.com/ant-design/ant-design/pull/49699) [@wanpan11](https://github.com/wanpan11)
+- TypeScript
+  - 🤖 Fix Cascader `multiple` type issue. [#49669](https://github.com/ant-design/ant-design/pull/49669) [@YangZhi1](https://github.com/YangZhi1)
+
+## 5.19.0
+
+`2024-07-01`
+
+- 🆕 ConfigProvider now supports global configuration for `variant`. [#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
+- QRCode
+  - QRCode uses `rc-qrcode` instead of `qrcode.react`. [#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
+  - QRCode adding support for click events and `iconSize` configuration. [#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Select component's `filterSort` property now includes `searchValue` parameter. [#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Pagination adds `simple` property, supports read-only mode, and introduces `align` property. [#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Enhanced Anchor's `affix` property for more configuration options. [#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
+- DatePicker
+  - 🐞 Fixed missing arrow in DatePicker/TimePicker RangePicker with `placement` set to `topRight` or `bottomRight`.[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 Fixed missing accessible text for DatePicker switch button, style issue in RTL mode for `DatePicker.RangePicker`, and crash when entering wrong end value in year selection of DatePicker.RangePicker.[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 Fixed DatePicker.RangePicker resetting selected dates when entering dates via keyboard. [#49333](https://github.com/ant-design/ant-design/pull/49333)
+- 🐞 Button fixed `disabled` property not working when used as `Dropdown` `trigger`. [#47363](https://github.com/ant-design/ant-design/pull/47363)
+- 🐞 InputNumber now warns when using `type=number` with `changeOnWheel`. [#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
+- Table
+  - 🐞 Table fixed issue with `locale.emptyText` showing default value when set to a non-`undefined` value. [#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
+  - 🐞 Fixed Table filter panel not working after customizing global Empty style. [#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
+- 🐞 Upload fixed rendering performance issue when listing many files in list mode. [#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
+- 💄 Added initial styles for `SubMenu` node in Menu. [#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
+- 💄 Improved active style for Slider handle. [#49630](https://github.com/ant-design/ant-design/pull/49630)
+- 💄 Optimized `variant=borderless` style for DatePicker, TimePicker, Select, TreeSelect, Input, InputNumber, Mentions, now distinguishable when setting `status` property. [#49608](https://github.com/ant-design/ant-design/pull/49608)
+- 🐞 Fixed Typography `ellipsis` not working when parent has `nowrap` style. [#49667](https://github.com/ant-design/ant-design/pull/49667)
+- TypeScript:
+  - 🤖 ConfigProvider Improved TypeScript definition for `renderEmpty` method. [#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
+- 🌐 Locales
+  - 🇹🇭 Added missing Thai translations for `Transfer.deselectAll`, `Text.collapse`, `QRCode.scanned`, `ColorPicker.presetEmpty`. [#49588](https://github.com/ant-design/ant-design/pull/49588) by [@Tantatorn-dev](https://github.com/Tantatorn-dev)
+  - 🇳🇱 Fixed nl_NL localization issues for Tour. [#49612](https://github.com/ant-design/ant-design/pull/49612) by [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
+  - 🇹🇷 Adjusted Turkish language text for `DatePicker`. [#49333](https://github.com/ant-design/ant-design/pull/49333)
+
+## 5.18.3
+
+`2024-06-19`
+
+- 🐞 Revert [#49289](https://github.com/ant-design/ant-design/pull/49289) to resolve Table sort state missing in some cases. [#49487](https://github.com/ant-design/ant-design/pull/49487)
+- 🛠 Migrate the `genCalc` and `AbstractCalculator ` to `@ant-design/cssinjs`. [#49463](https://github.com/ant-design/ant-design/pull/49463) [@YumoImer](https://github.com/YumoImer)
+- 🇳🇵 Fix ne_NP missing locales. [#49492](https://github.com/ant-design/ant-design/pull/49492) [@FuliangZhang](https://github.com/FuliangZhang)
+
+## 5.18.2
+
+`2024-06-17`
+
+- 🐞 Fix the bug where the icon and the text aren't strictly centered in message. [#49429](https://github.com/ant-design/ant-design/pull/49429) [@nova1751](https://github.com/nova1751)
+- 🐞 Fix Table sorter argument of `onChange` with unexpected value for #49134. [#49289](https://github.com/ant-design/ant-design/pull/49289) [@Zyf665](https://github.com/Zyf665)
+- 🐞 Add `aria-label` for expand icon in Collapse. [#49395](https://github.com/ant-design/ant-design/pull/49395) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix token `inputFontSizeSM` and `inputFontSizeLG` not working in InputNumber. [#49369](https://github.com/ant-design/ant-design/pull/49369)
+- 💄 Fix Empty sometimes doesn't take `colorTextDescription` as description text color. [#49408](https://github.com/ant-design/ant-design/pull/49408)
+- 💄 Resolve Badge `processing` status style conflict with Tailwind CSS. [#49379](https://github.com/ant-design/ant-design/pull/49379)
+- 🌐 Locales
+  - 🇲🇳 Add missing translations for Mongol language (mn_MN). [#49373](https://github.com/ant-design/ant-design/pull/49373) [@JiyinShao](https://github.com/JiyinShao)
+
 ## 5.18.1
 
 `2024-06-12`
@@ -1660,7 +1755,7 @@ tag: vVERSION
 - 💄 Optimize Design Token `boxShadow` tokens. [#40516](https://github.com/ant-design/ant-design/pull/40516)
 - TypeScript
   - 🤖 Optimize Badge Tag Tooltip `color` type definition. [#39871](https://github.com/ant-design/ant-design/pull/39871)
-  - 🤖 MISC: Add `Breakpoint` `ThmeConfig` `GlobalToken` type export. [#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)
+  - 🤖 MISC: Add `Breakpoint` `ThemeConfig` `GlobalToken` type export. [#40508](https://github.com/ant-design/ant-design/pull/40508) [@Kamahl19](https://github.com/Kamahl19)
   - 🤖 Update Upload `fileList` type. [#40585](https://github.com/ant-design/ant-design/pull/40585)
   - 🤖 Remove Tour ForwardRefRenderFunction. [#39924](https://github.com/ant-design/ant-design/pull/39924)
 - 🌐 Localization

CHANGELOG.zh-CN.md

@@ -15,6 +15,102 @@ tag: vVERSION
 
 ---
 
+## 5.19.3
+
+`2024-07-19`
+
+- 🐞 修复 Table 的 `onChange` 事件中排序器参数错误的问题。[#49533](https://github.com/ant-design/ant-design/pull/49533) [@Zyf665](https://github.com/Zyf665)
+- 🐞 修复 Pagination `token.itemBg` 设置不生效的问题。[#49933](https://github.com/ant-design/ant-design/pull/49933)
+- 🐞 修复 List 默认分页位置错误的问题。[#49925](https://github.com/ant-design/ant-design/pull/49925) [@coding-ice](https://github.com/coding-ice)
+- 🐞 修复 Image 预览操作栏两侧空白区域被点击时，无法关闭预览的问题。[#49915](https://github.com/ant-design/ant-design/pull/49915) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Card 圆角对 `cover` 属性中的非 img 元素不生效的问题。[#49862](https://github.com/ant-design/ant-design/pull/49862) [@coding-ice](https://github.com/coding-ice)
+- 💄 修复 Dropdown 菜单内容在视口边缘换行的问题。[#49899](https://github.com/ant-design/ant-design/pull/49899)
+- 💄 修复 Descriptions 子项之间可能没有边距的问题。[#49895](https://github.com/ant-design/ant-design/pull/49895) [@crazyair](https://github.com/crazyair)
+- ⌨️ 优化 Select 多选模式下长按回车会不断触发变更的问题。[#49963](https://github.com/ant-design/ant-design/pull/49963) [@crazyair](https://github.com/crazyair)
+- 🇪🇬 添加阿拉伯文(埃及) (ar_EG) 的翻译。[#49852](https://github.com/ant-design/ant-design/pull/49852) [@ahmedsamirdev](https://github.com/ahmedsamirdev)
+- TypeScript
+  - 🤖 复用 Tooltips 的定义以简化 ColorPicker 的类型声明。[#49949](https://github.com/ant-design/ant-design/pull/49949) [@Wxh16144](https://github.com/Wxh16144)
+
+## 5.19.2
+
+`2024-07-15`
+
+- 🐞 修复 List `actions` 为空数组时会渲染 `0` 的问题。[#49842](https://github.com/ant-design/ant-design/pull/49842) [@int64ago](https://github.com/int64ago)
+- 🐞 修复 Upload 拖拽上传文件夹时，`beforeUpload ` 中 `fileList` 不完整的问题。[#49832](https://github.com/ant-design/ant-design/pull/49832) [@coderz-w](https://github.com/coderz-w)
+- Descriptions
+  - 🐞 修复 Descriptions 在内容过长时会遮盖后面内容的问题。[#49803](https://github.com/ant-design/ant-design/pull/49803) [@coding-ice](https://github.com/coding-ice)
+  - 🐞 修复 Descriptions 在 Table `expandedRowRender` 中渲染样式异常的问题。[#49727](https://github.com/ant-design/ant-design/pull/49727) [@ljw-codeking](https://github.com/ljw-codeking)
+- 🐞 修复 Spin `percent` 和 `size` 一同使用时，样式不正确的问题。[#49876](https://github.com/ant-design/ant-design/pull/49876)
+- 🇮🇳 补充 DatePicker 的 `kn_IN` 本地化文案。[#49860](https://github.com/ant-design/ant-design/pull/49860) [@neerajap-01](https://github.com/neerajap-01)
+- Typescript
+  - 🐞 修复 Tree `icon` 和 `switcherIcon` 参数类型未能正确推导的问题。[#49821](https://github.com/ant-design/ant-design/pull/49821)
+  - 🐞 回滚 Cascader `multiple` 定义更新导致 `value` 定义丢失的问题。[#49741](https://github.com/ant-design/ant-design/pull/49741) [@YangZhi1](https://github.com/YangZhi1)
+
+## 5.19.1
+
+`2024-07-05`
+
+- 🐞 Global: @ant-design/colors 使用预编译颜色预设来提升运行时性能。[#49714](https://github.com/ant-design/ant-design/pull/49714) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Global: 对于弹层类自动增长 `zIndex` 不再限制最大值，而是改成控制台警告。[#49720](https://github.com/ant-design/ant-design/pull/49720)
+- 🐞 优化 Input.TextArea 清除图标的位置，与其他输入组件统一。[#49718](https://github.com/ant-design/ant-design/pull/49718) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Input 组件 `filled` 变体下 `activeBorderColor` 不生效问题。[#49699](https://github.com/ant-design/ant-design/pull/49699) [@wanpan11](https://github.com/wanpan11)
+- TypeScript
+  - 🤖 修复 Cascader 组件 `multiple` 的类型问题。[#49669](https://github.com/ant-design/ant-design/pull/49669) [@YangZhi1](https://github.com/YangZhi1)
+
+## 5.19.0
+
+`2024-07-01`
+
+- 🆕 ConfigProvider 现支持全局配置 `variant`。[#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
+- 🆕 QRCode
+  - QRCode 使用 `rc-qrcode` 替代了 `qrcode.react`。[#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
+  - QRCode 新增支持点击事件和 `iconSize` 宽高配置。[#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Select 组件的 `filterSort` 属性现新增获取 `searchValue` 的参数。[#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Pagination 支持 `simple={{ readOnly }}` 属性和 `align` 属性。[#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
+- 💄 优化了 Slider 滑块的激活样式。[#49630](https://github.com/ant-design/ant-design/pull/49630)
+- 🐞 增强了 Anchor 的 `affix` 属性，支持更多配置项。[#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
+- DatePicker
+  - 🐞 修复了 DatePicker/TimePicker 的 RangePicker 在 `placement` 设置为 `topRight` 或 `bottomRight` 时箭头丢失的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker 切换按钮缺失可访问性文本的问题，修复了 `DatePicker.RangePicker` 在 RTL 模式下的样式问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker.RangePicker 年选择器输入结束值错误导致报错的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker.RangePicker 键盘输入日期时已选日期重置的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+- 🐞 Button 修复了用作 Dropdown `trigger` 时 `disabled` 属性不生效的问题。[#47363](https://github.com/ant-design/ant-design/pull/47363)
+- 🐞 InputNumber 在同时使用 `type=number` 和 `changeOnWheel` 时现在会给出警告提示。[#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Dropdown 次级菜单 reset 样式丢失的问题。[#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
+- 💄 优化了 DatePicker、TimePicker、Select、TreeSelect、Input、InputNumber、Mentions 的 `variant="borderless"` 样式，现在在设置 `status` 属性时也能够被区分。[#49608](https://github.com/ant-design/ant-design/pull/49608)
+- Table
+  - 🐞 Table 修复了 `locale.emptyText` 设置为非 `undefined` 值时仍会显示默认值的问题。[#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
+  - 🐞 Table 自定义全局组件的 Empty 样式后，Table的过滤面板没生效的问题。[#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
+- 🐞 Upload 修复了在列表模式下文件过多时出现的渲染性能问题。[#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
+- 🐞 Typography 修复在父元素存在 `nowrap` 样式时，`ellipsis` 不生效的问题。[#49667](https://github.com/ant-design/ant-design/pull/49667)
+- TypeScript:
+  - 🤖 ConfigProvider 改进了 `renderEmpty` 方法的 TypeScript 类型定义。[#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
+- 🌐 国际化
+  - 🇹🇭 添加了缺失的泰语翻译，包括 `Transfer.deselectAll`、`Text.collapse`、`QRCode.scanned`、`ColorPicker.presetEmpty`。[#49588](https://github.com/ant-design/ant-design/pull/49588) [@Tantatorn-dev](https://github.com/Tantatorn-dev)
+  - 🇳🇱 Tour 修复了 nl_NL 本地化问题。[#49612](https://github.com/ant-design/ant-design/pull/49612) [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
+  - 🇹🇷 调整了 DatePicker 的土耳其语言文案。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+
+## 5.18.3
+
+`2024-06-19`
+
+- 🐞 回滚 [#49289](https://github.com/ant-design/ant-design/pull/49289) 以修复 5.18.2 引入的 Table 排序状态失效的问题。[#49487](https://github.com/ant-design/ant-design/pull/49487)
+- 🛠 将样式处理的部分功能迁移到 `@ant-design/cssinjs` 中。[#49463](https://github.com/ant-design/ant-design/pull/49463) [@YumoImer](https://github.com/YumoImer)
+- 🇳🇵 补充 ne_NP 本地化文案。[#49492](https://github.com/ant-design/ant-design/pull/49492) [@FuliangZhang](https://github.com/FuliangZhang)
+
+## 5.18.2
+
+`2024-06-17`
+
+- 🐞 修复了 message 图标与文本内容没有严格居中对齐的问题。[#49429](https://github.com/ant-design/ant-design/pull/49429) [@nova1751](https://github.com/nova1751)
+- 🐞 修复 #49134 [#49289](https://github.com/ant-design/ant-design/pull/49289) 中提到的 Table 组件的 `onChange` 事件中排序器参数的问题。[@Zyf665](https://github.com/Zyf665)
+- 🐞 为 Collapse 组件中展开/折叠图标 添加具有语义的 `aria-label` 属性值。[#49395](https://github.com/ant-design/ant-design/pull/49395) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 InputNumber 组件中 token `inputFontSizeSM` 和 `inputFontSizeLG` 不生效的问题。[#49369](https://github.com/ant-design/ant-design/pull/49369)
+- 💄 修复 Empty 部分样式下，描述的 `colorTextDescription` 不生效的问题。[#49408](https://github.com/ant-design/ant-design/pull/49408)
+- 💄 解决 Badge `processing` 与 Tailwind CSS 样式冲突的问题。[#49379](https://github.com/ant-design/ant-design/pull/49379)
+- 🌐 国际化
+  - 🇲🇳 添加蒙古语言 (mn_MN) 翻译。[#49373](https://github.com/ant-design/ant-design/pull/49373) [@JiyinShao](https://github.com/JiyinShao)
+
 ## 5.18.1
 
 `2024-06-12`

README-zh_CN.md

@@ -8,7 +8,7 @@
 
 [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
+[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
 
 [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
 
@@ -30,8 +30,8 @@
 [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
 [twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
 [twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
 [bundlephobia-url]: https://bundlephobia.com/package/antd
 [issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
@@ -127,7 +127,7 @@ export default App;
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [常见问题](https://ant.design/docs/react/faq-cn)
-- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
+- [Stackblitz 在线演示](https://u.ant.design/repro)，用于报告 bug
 - [定制主题](https://ant.design/docs/react/customize-theme-cn)
 - [国际化](https://ant.design/docs/react/i18n-cn)
 - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)

README.md

@@ -6,20 +6,11 @@
 
 An enterprise-class UI design language and React UI library.
 
-[![CI status][github-action-image]][github-action-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-[![codecov][codecov-image]][codecov-url]
-[![NPM version][npm-image]][npm-url]
-[![NPM downloads][download-image]][download-url]
 
-[![][bundlephobia-image]][bundlephobia-url]
+[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
-[![][bundlesize-js-image]][unpkg-js-url]
-[![FOSSA Status][fossa-image]][fossa-url]
 
-[![Follow Twitter][twitter-image]][twitter-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-[![Renovate status][renovate-image]][renovate-dashboard-url]
-[![][issues-helper-image]][issues-helper-url]
-[![dumi][dumi-image]][dumi-url]
-[![Issues need help][help-wanted-image]][help-wanted-url]
 
 [Changelog](./CHANGELOG.en-US.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
 
@@ -39,8 +30,8 @@ An enterprise-class UI design language and React UI library.
 [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
 [twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
 [twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
 [bundlephobia-url]: https://bundlephobia.com/package/antd
 [issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
@@ -50,6 +41,7 @@ An enterprise-class UI design language and React UI library.
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi
 [github-issues-url]: https://new-issue.ant.design
+
 </div>
 
 [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
@@ -119,7 +111,7 @@ export default () => (
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
+- [Stackblitz Demo](https://u.ant.design/repro) for bug reports
 - [Customize Theme](https://ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 

biome.json

@@ -1,8 +1,19 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
+  "files": {
+    "ignore": [
+      ".dumi/tmp*",
+      ".dumi/scripts/clarity.js",
+      "dist/*",
+      "es/**/*",
+      "lib/**/*",
+      "_site/**/*",
+      "node_modules",
+      "server",
+      "scripts/previewEditor/**/*"
+    ]
+  },
   "formatter": {
     "enabled": true,
-    "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"],
     "indentStyle": "space",
     "lineWidth": 100,
     "indentWidth": 2
@@ -11,5 +22,80 @@
     "formatter": {
       "quoteStyle": "single"
     }
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "useImportType": "off",
+        "useNumberNamespace": "off",
+        "useNodejsImportProtocol": "off",
+        "noNonNullAssertion": "off",
+        "noUnusedTemplateLiteral": "off"
+      },
+      "complexity": {
+        "noUselessTypeConstraint": "off",
+        "noForEach": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noGlobalIsNan": "off",
+        "noGlobalIsFinite": "off",
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off",
+        "noConfusingVoidType": "off",
+        "noThenProperty": "off"
+      },
+      "performance": {
+        "noDelete": "off",
+        "noAccumulatingSpread": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
       }
     }
+  },
+  "overrides": [
+    {
+      "include": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noParameterAssign": "off"
+          },
+          "suspicious": {
+            "noThenProperty": "off",
+            "noImplicitAnyLet": "off"
+          },
+          "complexity": {
+            "noUselessFragments": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["components/*/demo/*"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noVoidTypeReturn": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    }
+  ]
+}

components/_util/ActionButton.tsx

@@ -8,7 +8,7 @@ import { convertLegacyProps } from '../button/buttonHelpers';
 export interface ActionButtonProps {
   type?: LegacyButtonType;
   actionFn?: (...args: any[]) => any | PromiseLike<any>;
-  close?: Function;
+  close?: (...args: any[]) => void;
   autoFocus?: boolean;
   prefixCls: string;
   buttonProps?: ButtonProps;
@@ -22,8 +22,8 @@ export interface ActionButtonProps {
   isSilent?: () => boolean;
 }
 
-function isThenable<T extends any>(thing?: PromiseLike<T>): boolean {
+function isThenable<T>(thing?: PromiseLike<T>): boolean {
-  return !!(thing && thing.then);
+  return !!thing?.then;
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {

components/_util/ContextIsolator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { NoFormStyle } from '../form/context';
+import { NoCompactStyle } from '../space/Compact';
+
+const ContextIsolator: React.FC<
+  Readonly<React.PropsWithChildren<Partial<Record<'space' | 'form', boolean>>>>
+> = (props) => {
+  const { space, form, children } = props;
+  if (children === undefined || children === null) {
+    return null;
+  }
+  let result: React.ReactNode = children;
+  if (form) {
+    result = (
+      <NoFormStyle override status>
+        {result}
+      </NoFormStyle>
+    );
+  }
+  if (space) {
+    result = <NoCompactStyle>{result}</NoCompactStyle>;
+  }
+  return result;
+};
+
+export default ContextIsolator;

components/_util/InputAddon.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { NoFormStyle } from '../form/context';
-import { NoCompactStyle } from '../space/Compact';
-
-const getInputAddon = (addon: React.ReactNode): React.ReactNode =>
-  addon ? (
-    <NoCompactStyle>
-      <NoFormStyle override status>
-        {addon}
-      </NoFormStyle>
-    </NoCompactStyle>
-  ) : null;
-
-export default getInputAddon;

components/_util/__tests__/ContextIsolator.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { render } from '../../../tests/utils';
+import ContextIsolator from '../ContextIsolator';
+
+describe('ContextIsolator component', () => {
+  it('ContextIsolator should work when Children is null', () => {
+    [undefined, null].forEach((item) => {
+      expect(() => {
+        render(<ContextIsolator>{item}</ContextIsolator>);
+      }).not.toThrow();
+    });
+  });
+});

components/_util/__tests__/useZIndex.test.tsx

@@ -394,4 +394,20 @@ describe('Test useZIndex hooks', () => {
 
     jest.useRealTimers();
   });
+
+  it('warning for too large zIndex auto offset', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <Drawer open zIndex={999999999}>
+        <Tooltip open title="test">
+          <div>test</div>
+        </Tooltip>
+      </Drawer>,
+    );
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.',
+    );
+  });
 });

components/_util/easings.ts

@@ -1,10 +1,11 @@
-// eslint-disable-next-line import/prefer-default-export
+/* eslint-disable */
 export function easeInOutCubic(t: number, b: number, c: number, d: number) {
   const cc = c - b;
+  // biome-ignore lint: it is a common easing function
   t /= d / 2;
   if (t < 1) {
     return (cc / 2) * t * t * t + b;
   }
-  // eslint-disable-next-line no-return-assign
+  // biome-ignore lint: it is a common easing function
   return (cc / 2) * ((t -= 2) * t * t + 2) + b;
 }

components/_util/getScroll.ts

@@ -19,7 +19,7 @@ const getScroll = (target: HTMLElement | Window | Document | null): number => {
     //    `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
     //    the program may falls into this branch.
     // Check the corresponding tests for details. Don't sure what is the real scenario this happens.
-    // eslint-disable-next-line dot-notation
+    /* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
     result = target['scrollTop'];
   }
 

components/_util/hooks/usePatchElement.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export default function usePatchElement(): [
   React.ReactElement[],
-  (element: React.ReactElement) => Function,
+  (element: React.ReactElement) => () => void,
 ] {
   const [elements, setElements] = React.useState<React.ReactElement[]>([]);
 

components/_util/hooks/useZIndex.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import useToken from '../../theme/useToken';
+import { devUseWarning } from '../warning';
 import zIndexContext from '../zindexContext';
 
 export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
@@ -37,18 +38,21 @@ function isContainerType(type: ZIndexContainer | ZIndexConsumer): type is ZIndex
   return type in containerBaseZIndexOffset;
 }
 
+type ReturnResult = [zIndex: number | undefined, contextZIndex: number];
+
 export function useZIndex(
   componentType: ZIndexContainer | ZIndexConsumer,
   customZIndex?: number,
-): [zIndex: number | undefined, contextZIndex: number] {
+): ReturnResult {
   const [, token] = useToken();
   const parentZIndex = React.useContext(zIndexContext);
   const isContainer = isContainerType(componentType);
 
-  if (customZIndex !== undefined) {
+  let result: ReturnResult;
-    return [customZIndex, customZIndex];
-  }
 
+  if (customZIndex !== undefined) {
+    result = [customZIndex, customZIndex];
+  } else {
     let zIndex = parentZIndex ?? 0;
 
     if (isContainer) {
@@ -57,10 +61,24 @@ export function useZIndex(
         (parentZIndex ? 0 : token.zIndexPopupBase) +
         // Container offset
         containerBaseZIndexOffset[componentType];
-
-    zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
     } else {
       zIndex += consumerBaseZIndexOffset[componentType];
     }
-  return [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
+    result = [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning(componentType);
+
+    const maxZIndex = token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+    const currentZIndex = result[0] || 0;
+
+    warning(
+      customZIndex !== undefined || currentZIndex <= maxZIndex,
+      'usage',
+      '`zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.',
+    );
+  }
+
+  return result;
 }

components/_util/motion.ts

@@ -1,6 +1,8 @@
 import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
 import type { MotionEvent } from 'rc-motion/lib/interface';
 
+import { defaultPrefixCls } from '../config-provider';
+
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => {
@@ -11,7 +13,7 @@ const getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.of
 const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
   event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 
-const initCollapseMotion = (rootCls: string = 'ant'): CSSMotionProps => ({
+const initCollapseMotion = (rootCls = defaultPrefixCls): CSSMotionProps => ({
   motionName: `${rootCls}-motion-collapse`,
   onAppearStart: getCollapsedHeight,
   onEnterStart: getCollapsedHeight,

components/_util/reactNode.ts

@@ -6,7 +6,7 @@ export function isFragment(child: any): boolean {
   return child && React.isValidElement(child) && child.type === React.Fragment;
 }
 
-type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
+type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
 
 export const replaceElement = <P>(
   element: React.ReactNode,

components/_util/responsiveObserver.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { GlobalToken } from '../theme/interface';
+import type { GlobalToken } from '../theme/internal';
 import { useToken } from '../theme/internal';
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
@@ -67,7 +67,7 @@ export default function useResponsiveObserver() {
 
   // To avoid repeat create instance, we add `useMemo` here.
   return React.useMemo(() => {
-    const subscribers = new Map<Number, SubscribeFunc>();
+    const subscribers = new Map<number, SubscribeFunc>();
     let subUid = -1;
     let screens = {};
 

components/_util/wave/interface.ts

@@ -1,5 +1,5 @@
 import { defaultPrefixCls } from '../../config-provider';
-import type { GlobalToken } from '../../theme';
+import type { GlobalToken } from '../../theme/internal';
 
 export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
 

components/_util/wave/style.ts

@@ -1,6 +1,7 @@
 import { genComponentStyleHook } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 
+// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
 export interface ComponentToken {}
 
 export interface WaveToken extends FullToken<'Wave'> {}

components/_util/wave/util.ts

@@ -1,6 +1,7 @@
 export function isNotGrey(color: string) {
   // eslint-disable-next-line no-useless-escape
   const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
+  // biome-ignore lint/complexity/useOptionalChain: this is way is more simple
   if (match && match[1] && match[2] && match[3]) {
     return !(match[1] === match[2] && match[2] === match[3]);
   }

components/alert/Alert.tsx

@@ -7,8 +7,8 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
-import { composeRef } from 'rc-util/lib/ref';
 import pickAttrs from 'rc-util/lib/pickAttrs';
+import { composeRef } from 'rc-util/lib/ref';
 
 import type { ClosableType } from '../_util/hooks/useClosable';
 import { replaceElement } from '../_util/reactNode';

components/alert/ErrorBoundary.tsx

@@ -31,7 +31,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   render() {
     const { message, description, id, children } = this.props;
     const { error, info } = this.state;
-    const componentStack = info && info.componentStack ? info.componentStack : null;
+    const componentStack = info?.componentStack || null;
     const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
     const errorDescription = typeof description === 'undefined' ? componentStack : description;
     if (error) {

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

@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -79,11 +73,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -135,11 +126,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
         </span>
       </button>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -200,11 +188,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -282,9 +267,8 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/action.tsx extend context correctly 2`] = `
@@ -294,13 +278,7 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 2`] =
 `;
 
 exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
     data-show="true"
@@ -334,11 +312,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
         Warning text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
     data-show="true"
@@ -398,11 +373,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
     data-show="true"
@@ -417,11 +389,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
         Warning text without icon
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-banner"
     data-show="true"
@@ -456,9 +425,8 @@ exports[`renders components/alert/demo/banner.tsx extend context correctly 1`] =
         Error text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/banner.tsx extend context correctly 2`] = `[]`;
@@ -484,13 +452,7 @@ exports[`renders components/alert/demo/basic.tsx extend context correctly 1`] =
 exports[`renders components/alert/demo/basic.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/closable.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -531,11 +493,8 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -581,11 +540,8 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -632,21 +588,14 @@ exports[`renders components/alert/demo/closable.tsx extend context correctly 1`]
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/closable.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -661,11 +610,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         showIcon = false
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -699,11 +645,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Success Tips
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info"
     data-show="true"
@@ -737,11 +680,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Informational Notes
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning"
     data-show="true"
@@ -775,11 +715,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Warning
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error"
     data-show="true"
@@ -813,11 +750,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Error
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description"
     data-show="true"
@@ -856,11 +790,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Detailed description and advices about successful copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description"
     data-show="true"
@@ -899,11 +830,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         Additional description and informations about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description"
     data-show="true"
@@ -942,11 +870,8 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         This is a warning notice about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -985,21 +910,14 @@ exports[`renders components/alert/demo/custom-icon.tsx extend context correctly
         This is an error message about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/custom-icon.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/description.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1019,11 +937,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
         Success Description Success Description Success Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1043,11 +958,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
         Info Description Info Description Info Description Info Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1067,11 +979,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
         Warning Description Warning Description Warning Description Warning Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1091,9 +1000,8 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
         Error Description Error Description Error Description Error Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/description.tsx extend context correctly 2`] = `[]`;
@@ -1112,13 +1020,7 @@ exports[`renders components/alert/demo/error-boundary.tsx extend context correct
 exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -1152,11 +1054,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         Success Tips
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info"
     data-show="true"
@@ -1190,11 +1089,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         Informational Notes
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning"
     data-show="true"
@@ -1254,11 +1150,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error"
     data-show="true"
@@ -1293,11 +1186,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         Error
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description"
     data-show="true"
@@ -1336,11 +1226,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         Detailed description and advice about successful copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description"
     data-show="true"
@@ -1379,11 +1266,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         Additional description and information about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description"
     data-show="true"
@@ -1448,11 +1332,8 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -1492,21 +1373,14 @@ exports[`renders components/alert/demo/icon.tsx extend context correctly 1`] = `
         This is an error message about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/icon.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -1547,18 +1421,10 @@ exports[`renders components/alert/demo/smooth-closed.tsx extend context correctl
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
-  <div
-    class="ant-space-item"
-  >
   <p>
     click the close button to see the effect
-    </p>
+  </p>,
-  </div>
-  <div
-    class="ant-space-item"
-  >
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked ant-switch-disabled"
@@ -1579,21 +1445,14 @@ exports[`renders components/alert/demo/smooth-closed.tsx extend context correctl
         class="ant-switch-inner-unchecked"
       />
     </span>
-    </button>
+  </button>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/smooth-closed.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/alert/demo/style.tsx extend context correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width: 100%;"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -1608,11 +1467,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
         Success Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-no-icon"
     data-show="true"
@@ -1627,11 +1483,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
         Info Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -1646,11 +1499,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
         Warning Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-no-icon"
     data-show="true"
@@ -1665,9 +1515,8 @@ exports[`renders components/alert/demo/style.tsx extend context correctly 1`] =
         Error Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/style.tsx extend context correctly 2`] = `[]`;

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

@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/alert/demo/action.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -79,11 +73,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -135,11 +126,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
         </span>
       </button>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -200,11 +188,8 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -282,19 +267,12 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
     data-show="true"
@@ -328,11 +306,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
         Warning text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-banner"
     data-show="true"
@@ -392,11 +367,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"
     data-show="true"
@@ -411,11 +383,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
         Warning text without icon
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-banner"
     data-show="true"
@@ -450,9 +419,8 @@ exports[`renders components/alert/demo/banner.tsx correctly 1`] = `
         Error text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
@@ -474,13 +442,7 @@ exports[`renders components/alert/demo/basic.tsx correctly 1`] = `
 `;
 
 exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -521,11 +483,8 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -571,11 +530,8 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -622,19 +578,12 @@ exports[`renders components/alert/demo/closable.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -649,11 +598,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         showIcon = false
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -687,11 +633,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Success Tips
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info"
     data-show="true"
@@ -725,11 +668,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Informational Notes
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning"
     data-show="true"
@@ -763,11 +703,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Warning
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error"
     data-show="true"
@@ -801,11 +738,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Error
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description"
     data-show="true"
@@ -844,11 +778,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Detailed description and advices about successful copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description"
     data-show="true"
@@ -887,11 +818,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         Additional description and informations about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description"
     data-show="true"
@@ -930,11 +858,8 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         This is a warning notice about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -973,19 +898,12 @@ exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
         This is an error message about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/description.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1005,11 +923,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
         Success Description Success Description Success Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1029,11 +944,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
         Info Description Info Description Info Description Info Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1053,11 +965,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
         Warning Description Warning Description Warning Description Warning Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
     data-show="true"
@@ -1077,9 +986,8 @@ exports[`renders components/alert/demo/description.tsx correctly 1`] = `
         Error Description Error Description Error Description Error Description
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
@@ -1094,13 +1002,7 @@ exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
 `;
 
 exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success"
     data-show="true"
@@ -1134,11 +1036,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         Success Tips
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info"
     data-show="true"
@@ -1172,11 +1071,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         Informational Notes
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning"
     data-show="true"
@@ -1236,11 +1132,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error"
     data-show="true"
@@ -1275,11 +1168,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         Error
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-with-description"
     data-show="true"
@@ -1318,11 +1208,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         Detailed description and advice about successful copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-with-description"
     data-show="true"
@@ -1361,11 +1248,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         Additional description and information about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-with-description"
     data-show="true"
@@ -1430,11 +1314,8 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-with-description"
     data-show="true"
@@ -1474,19 +1355,12 @@ exports[`renders components/alert/demo/icon.tsx correctly 1`] = `
         This is an error message about copywriting.
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -1527,18 +1401,10 @@ exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
-  <div
-    class="ant-space-item"
-  >
   <p>
     click the close button to see the effect
-    </p>
+  </p>,
-  </div>
-  <div
-    class="ant-space-item"
-  >
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked ant-switch-disabled"
@@ -1559,19 +1425,12 @@ exports[`renders components/alert/demo/smooth-closed.tsx correctly 1`] = `
         class="ant-switch-inner-unchecked"
       />
     </span>
-    </button>
+  </button>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders components/alert/demo/style.tsx correctly 1`] = `
-<div
+Array [
-  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
-  style="width:100%"
->
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-success ant-alert-no-icon"
     data-show="true"
@@ -1586,11 +1445,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
         Success Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-info ant-alert-no-icon"
     data-show="true"
@@ -1605,11 +1461,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
         Info Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-warning ant-alert-no-icon"
     data-show="true"
@@ -1624,11 +1477,8 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
         Warning Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+  <br />,
-  <div
-    class="ant-space-item"
-  >
   <div
     class="ant-alert ant-alert-error ant-alert-no-icon"
     data-show="true"
@@ -1643,7 +1493,6 @@ exports[`renders components/alert/demo/style.tsx correctly 1`] = `
         Error Text
       </div>
     </div>
-    </div>
+  </div>,
-  </div>
+]
-</div>
 `;

components/alert/demo/action.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical" style={{ width: '100%' }}>
+  <>
     <Alert
       message="Success Tips"
       type="success"
@@ -14,6 +14,7 @@ const App: React.FC = () => (
       }
       closable
     />
+    <br />
     <Alert
       message="Error Text"
       showIcon
@@ -25,6 +26,7 @@ const App: React.FC = () => (
         </Button>
       }
     />
+    <br />
     <Alert
       message="Warning Text"
       type="warning"
@@ -37,6 +39,7 @@ const App: React.FC = () => (
       }
       closable
     />
+    <br />
     <Alert
       message="Info Text"
       description="Info Description Info Description Info Description Info Description"
@@ -53,7 +56,7 @@ const App: React.FC = () => (
       }
       closable
     />
-  </Space>
+  </>
 );
 
 export default App;

components/alert/demo/banner.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import { Alert, Space } from 'antd';
+import { Alert } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical" style={{ width: '100%' }}>
+  <>
     <Alert message="Warning text" banner />
+    <br />
     <Alert
       message="Very long warning text warning text text text text text text text"
       banner
       closable
     />
+    <br />
     <Alert showIcon={false} message="Warning text without icon" banner />
+    <br />
     <Alert type="error" message="Error text" banner />
-  </Space>
+  </>
 );
 
 export default App;

components/alert/demo/closable.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { CloseSquareFilled } from '@ant-design/icons';
-import { Alert, Space } from 'antd';
+import { Alert } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
 const App: React.FC = () => (
-  <Space direction="vertical" style={{ width: '100%' }}>
+  <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
       type="warning"
       closable
       onClose={onClose}
     />
+    <br />
     <Alert
       message="Error Text"
       description="Error Description Error Description Error Description Error Description Error Description Error Description"
@@ -21,6 +22,7 @@ const App: React.FC = () => (
       closable
       onClose={onClose}
     />
+    <br />
     <Alert
       message="Error Text"
       description="Error Description Error Description Error Description Error Description Error Description Error Description"
@@ -31,7 +33,7 @@ const App: React.FC = () => (
       }}
       onClose={onClose}
     />
-  </Space>
+  </>
 );
 
 export default App;