Merge branch 'ant-design:master' into master

.depslintrc.js

@@ -11,15 +11,15 @@ module.exports = {
   ],
   modulePattern: [
     {
-      pattern: /ConfigContext.*renderEmpty/ms,
+      pattern: /ConfigContext.*renderEmpty/s,
       module: '../empty',
     },
     {
-      pattern: /ConfigConsumer.*renderEmpty/ms,
+      pattern: /ConfigConsumer.*renderEmpty/s,
       module: '../empty',
     },
     {
-      pattern: /config-provider\/context.*renderEmpty/ms,
+      pattern: /config-provider\/context.*renderEmpty/s,
       module: '../empty',
     },
   ],

.dumi/components/SemanticPreview.tsx

@@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
     z-index: 999999;
     box-shadow: 0 0 0 1px #fff;
     pointer-events: none;
-    left: ${markPos[0] - MARK_BORDER_SIZE}px;
+    inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;
     top: ${markPos[1] - MARK_BORDER_SIZE}px;
     width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
     height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;

.dumi/hooks/use.ts

@@ -9,22 +9,22 @@ function use<T>(promise: PromiseLike<T>): T {
   }
   if (internal.status === 'rejected') {
     throw internal.reason;
-  } else if (internal.status === 'pending') {
-    throw internal;
-  } else {
-    internal.status = 'pending';
-    internal.then(
-      (result) => {
-        internal.status = 'fulfilled';
-        internal.value = result;
-      },
-      (reason) => {
-        internal.status = 'rejected';
-        internal.reason = reason;
-      },
-    );
+  }
+  if (internal.status === 'pending') {
     throw internal;
   }
+  internal.status = 'pending';
+  internal.then(
+    (result) => {
+      internal.status = 'fulfilled';
+      internal.value = result;
+    },
+    (reason) => {
+      internal.status = 'rejected';
+      internal.reason = reason;
+    },
+  );
+  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/hooks/useMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Tag, version } from 'antd';
+import { Space, Tag, version } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';
@@ -22,7 +22,6 @@ const useStyle = createStyles(({ css, token }) => ({
     margin-inline-end: 0;
   `,
   subtitle: css`
-    margin-inline-start: ${token.marginXS}px;
     font-weight: normal;
     font-size: ${token.fontSizeSM}px;
     opacity: 0.8;
@@ -46,10 +45,10 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
   if (!before && !after) {
     return (
       <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
-        <span>
-          {title}
+        <Space>
+          <span>{title}</span>
           {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
-        </span>
+        </Space>
         {tag && (
           <Tag
             bordered={false}

.dumi/hooks/useThemeAnimation.ts

@@ -89,7 +89,6 @@ const useThemeAnimation = () => {
       .startViewTransition(async () => {
         // wait for theme change end
         while (colorBgElevated === animateRef.current.colorBgElevated) {
-          // eslint-disable-next-line no-await-in-loop
           await new Promise((resolve) => {
             setTimeout(resolve, 1000 / 60);
           });
@@ -99,6 +98,7 @@ const useThemeAnimation = () => {
         root.classList.add(isDark ? 'light' : 'dark');
       })
       .ready.then(() => {
+        // eslint-disable-next-line no-console
         console.log(`Theme transition finished in ${Date.now() - time}ms`);
         const clipPath = [
           `circle(0px at ${x}px ${y}px)`,

.dumi/loading.js

@@ -1,3 +1,3 @@
 // must be .js file, can't modify to be .ts file!
-// eslint-disable-next-line no-restricted-exports
+
 export { default } from './theme/common/Loading';

.dumi/pages/404/index.tsx

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

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Badge, Carousel, Skeleton, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 
 import useLocale from '../../../hooks/useLocale';
@@ -57,6 +57,9 @@ const useStyle = createStyles(({ token, css, cx }) => {
       }
     `,
     carousel,
+    bannerBg: css`
+      height: ${token.fontSize}px;
+    `,
   };
 });
 
@@ -66,8 +69,8 @@ interface RecommendItemProps {
   icons: Icon[];
   className?: string;
 }
+
 const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
-  const token = useTheme();
   const { styles } = useStyle();
 
   if (!extra) {
@@ -87,10 +90,10 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
       <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
         {extra.description}
       </Typography.Paragraph>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <Flex justify="space-between" align="center">
         <Typography.Text>{extra.date}</Typography.Text>
-        {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
-      </div>
+        {icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
+      </Flex>
     </a>
   );
 
@@ -109,7 +112,7 @@ export const BannerRecommendsFallback: React.FC = () => {
   const { isMobile } = useContext(SiteContext);
   const { styles } = useStyle();
 
-  const list = Array(3).fill(1);
+  const list = new Array(3).fill(1);
 
   return isMobile ? (
     <Carousel className={styles.carousel}>
@@ -137,7 +140,7 @@ const BannerRecommends: React.FC = () => {
   const data = useSiteData();
   const extras = data?.extras?.[lang];
   const icons = data?.icons || [];
-  const first3 = !extras || extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
+  const first3 = !extras || extras.length === 0 ? new Array(3).fill(null) : extras.slice(0, 3);
 
   if (!data) {
     return <BannerRecommendsFallback />;

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

@@ -12,7 +12,7 @@ import {
   Tour,
   Typography,
 } from 'antd';
-import { createStyles, css, useTheme } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 
@@ -104,6 +104,13 @@ const useStyle = () => {
         justify-content: center;
       `,
       carousel,
+      componentsList: css`
+        width: 100%;
+        overflow: hidden;
+      `,
+      mobileComponentsList: css`
+        margin: 0 ${token.margin}px;
+      `,
     };
   })();
 };
@@ -119,7 +126,7 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index
       {/* Decorator */}
       <div
         className={styles.cardCircle}
-        style={{ right: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
+        style={{ insetInlineEnd: (index % 2) * -20 - 20, bottom: (index % 3) * -40 - 20 }}
       />
 
       {/* Title */}
@@ -142,7 +149,6 @@ interface ComponentItemProps {
 }
 
 const ComponentsList: React.FC = () => {
-  const token = useTheme();
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const { isMobile } = useContext(SiteContext);
@@ -260,21 +266,33 @@ const ComponentsList: React.FC = () => {
   );
 
   return isMobile ? (
-    <div style={{ margin: '0 16px' }}>
+    <div className={styles.mobileComponentsList}>
       <Carousel className={styles.carousel}>
         {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`mobile-item-${index}`}
+          />
         ))}
       </Carousel>
     </div>
   ) : (
-    <div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
-      <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
+    <Flex justify="center" className={styles.componentsList}>
+      <Flex align="stretch" gap="large">
         {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`desktop-item-${index}`}
+          />
         ))}
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 };
 

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

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { Col, Row, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
-import { Link, useLocation } from 'dumi';
+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';
 
@@ -133,7 +134,7 @@ const DesignFramework: React.FC = () => {
           <Col key={index} span={colSpan}>
             <Link to={path}>
               <div className={styles.card}>
-                <img alt={title} src={img} />
+                <img draggable={false} alt={title} src={img} />
 
                 <Typography.Title
                   level={4}
@@ -157,7 +158,12 @@ const DesignFramework: React.FC = () => {
         return (
           <Col key={index} span={colSpan}>
             <a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
-              <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
+              <img
+                draggable={false}
+                alt={title}
+                src={img}
+                style={{ transform: `scale(${imgScale})` }}
+              />
 
               <Typography.Title
                 level={4}