Merge branch 'ant-design:master' into master

.circleci/config.yml

@@ -7,15 +7,15 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:16.20-browsers
     steps:
       - checkout
       - run:
           name: Install node_modules
-          command: npm i
+          command: yarn
       - run:
           name: Build dist file
-          command: npm run dist
+          command: npm run dist:esbuild
       - run:
           name: Run image screenshot tests
           command: npm run test-image

.dumi/hooks/useMenu.tsx

@@ -1,15 +1,14 @@
-import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { useFullSidebarData, useSidebarData } from 'dumi';
 import { Tag, theme } from 'antd';
-import useLocation from './useLocation';
+import { useFullSidebarData, useSidebarData } from 'dumi';
+import React, { useMemo } from 'react';
 import Link from '../theme/common/Link';
+import useLocation from './useLocation';
 
-export type UseMenuOptions = {
-  before?: ReactNode;
-  after?: ReactNode;
-};
+export interface UseMenuOptions {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}
 
 const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
   const fullData = useFullSidebarData();
@@ -111,7 +110,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                       {(item.frontmatter as any).subtitle}
                     </span>
                     {(item.frontmatter as any).tag && (
-                      <Tag color="warning" style={{ marginLeft: token.marginXS }}>
+                      <Tag color="warning" style={{ marginInlineStart: token.marginXS }}>
                         {(item.frontmatter as any).tag}
                       </Tag>
                     )}
@@ -145,7 +144,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         return result;
       }, []) ?? []
     );
-  }, [sidebarData, fullData, pathname, search]);
+  }, [sidebarData, fullData, pathname, search, options]);
 
   return [menuItems, pathname];
 };

.dumi/theme/SiteThemeProvider.tsx

@@ -1,18 +1,24 @@
-import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { ConfigContext } from 'antd/es/config-provider';
+import { ConfigProvider, theme as antdTheme } from 'antd';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
-import { theme } from 'antd';
+import type { FC } from 'react';
+import React, { useContext } from 'react';
 
-const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, ...rest }) => {
-  const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
+const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest }) => {
+  const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const rootPrefixCls = getPrefixCls();
-  const { token } = theme.useToken();
+  const { token } = antdTheme.useToken();
+
+  React.useEffect(() => {
+    ConfigProvider.config({
+      theme,
+    });
+  }, [theme]);
 
   return (
     <ThemeProvider
       {...rest}
+      theme={theme}
       customToken={{
         headerHeight: 64,
         menuItemBorder: 2,

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

@@ -17,9 +17,8 @@ export interface InlinePopoverProps {
 }
 
 // 鼠标悬浮弹出 Popover 组件，用于帮助用户更快看到一些属性对应的预览效果
-const InlinePopover: React.FC = (props: InlinePopoverProps) => {
+const InlinePopover: React.FC<InlinePopoverProps> = (props) => {
   const { previewURL } = props;
-
   const [locale] = useLocale(locales);
   const [visible, setVisible] = React.useState(false);
 

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

@@ -0,0 +1,62 @@
+import type { TabsProps } from 'antd';
+import { Tabs } from 'antd';
+import SourceCode from 'dumi/theme-default/builtins/SourceCode';
+import React from 'react';
+import NpmLogo from './npm';
+import PnpmLogo from './pnpm';
+import YarnLogo from './yarn';
+
+interface InstallProps {
+  npm?: string;
+  yarn?: string;
+  pnpm?: string;
+}
+
+const npmLabel = (
+  <span className="snippet-label">
+    <NpmLogo />
+    npm
+  </span>
+);
+
+const pnpmLabel = (
+  <span className="snippet-label">
+    <PnpmLogo />
+    pnpm
+  </span>
+);
+
+const yarnLabel = (
+  <span className="snippet-label">
+    <YarnLogo />
+    yarn
+  </span>
+);
+
+const InstallDependencies: React.FC<InstallProps> = (props) => {
+  const { npm, yarn, pnpm } = props;
+  const items = React.useMemo<TabsProps['items']>(
+    () =>
+      [
+        {
+          key: 'npm',
+          children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
+          label: npmLabel,
+        },
+        {
+          key: 'yarn',
+          children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
+          label: yarnLabel,
+        },
+        {
+          key: 'pnpm',
+          children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
+          label: pnpmLabel,
+        },
+      ].filter((item) => item.children),
+    [npm, yarn, pnpm],
+  );
+  return <Tabs className="antd-site-snippet" defaultActiveKey="npm" items={items} />;
+};
+
+export default InstallDependencies;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const NpmIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      fill="#E53E3E"
+      focusable="false"
+      height="1em"
+      stroke="#E53E3E"
+      strokeWidth="0"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
+    </svg>
+  );
+};
+
+export default NpmIcon;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const PnpmIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      aria-hidden="true"
+      fill="#F69220"
+      focusable="false"
+      height="1em"
+      role="img"
+      stroke="#F69220"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <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>
+  );
+};
+
+export default PnpmIcon;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const YarnIcon: React.FC<IconProps> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      aria-hidden="true"
+      fill="#2C8EBB"
+      focusable="false"
+      height="1em"
+      stroke="#2C8EBB"
+      strokeWidth="0"
+      viewBox="0 0 496 512"
+      width="1em"
+    >
+      <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>
+  );
+};
+
+export default YarnIcon;

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

@@ -15,6 +15,7 @@ import LZString from 'lz-string';
 import Prism from 'prismjs';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@@ -27,7 +28,6 @@ import RiddleIcon from '../../common/RiddleIcon';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
 import { ping } from '../../utils';
-import type { AntdPreviewerProps } from '.';
 
 const { ErrorBoundary } = Alert;
 
@@ -105,6 +105,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     filename,
     version,
     clientOnly,
+    pkgDependencyList,
   } = props;
 
   const { pkg } = useSiteData();
@@ -331,6 +332,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
     main: 'index.js',
     dependencies: {
       ...dependencies,
+      'rc-util': pkgDependencyList['rc-util'],
       react: '^18.0.0',
       'react-dom': '^18.0.0',
       'react-scripts': '^5.0.0',
@@ -390,7 +392,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
         <ErrorBoundary>
           <React.StrictMode>{liveDemo.current}</React.StrictMode>
         </ErrorBoundary>
-        {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
       </section>
       <section className="code-box-meta markdown">
         <div className="code-box-title">
@@ -546,6 +547,23 @@ createRoot(document.getElementById('container')).render(<Demo />);
     </section>
   );
 
+  useEffect(() => {
+    // In Safari, if style tag be inserted into non-head tag,
+    // it will affect the rendering ability of the browser,
+    // resulting in some response delays like following issue:
+    // https://github.com/ant-design/ant-design/issues/39995
+    // So we insert style tag into head tag.
+    if (!style) return;
+    const styleTag = document.createElement('style');
+    styleTag.type = 'text/css';
+    styleTag.innerHTML = style;
+    styleTag['data-demo-url'] = demoUrl;
+    document.head.appendChild(styleTag);
+    return () => {
+      document.head.removeChild(styleTag);
+    };
+  }, [style, demoUrl]);
+
   if (version) {
     return (
       <Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>

.dumi/theme/common/DirectionIcon.tsx

@@ -0,0 +1,18 @@
+import Icon from '@ant-design/icons';
+import type { DirectionType } from 'antd/es/config-provider';
+import React from 'react';
+
+const ltrD =
+  'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
+const rtlD =
+  'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
+
+const DirectionIcon: React.FC<{ direction: DirectionType }> = (props) => (
+  <Icon {...props}>
+    <svg viewBox="0 0 1024 1024" fill="currentColor">
+      <path d={props.direction === 'ltr' ? ltrD : rtlD} />
+    </svg>
+  </Icon>
+);
+
+export default DirectionIcon;

.dumi/theme/common/GlobalStyles.tsx

@@ -15,6 +15,7 @@ import {
   Responsive,
   SearchBar,
 } from './styles';
+import InlineCard from './styles/InlineCard';
 
 const GlobalStyles = () => (
   <>
@@ -29,6 +30,7 @@ const GlobalStyles = () => (
     <Responsive />
     <NProgress />
     <PreviewImage />
+    <InlineCard />
     <ColorStyle />
     <HeadingAnchor />
     <SearchBar />