Merge branch 'ant-design:master' into master

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

@@ -1,10 +1,9 @@
 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 Link from '../../../../theme/common/Link';
+import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import GroupMaskLayer from '../GroupMaskLayer';
@@ -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)}>
-            <Button size="large" type="primary">
-              {locale.start}
-            </Button>
-          </Link>
-          <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
-            <Button size="large">{locale.designLanguage}</Button>
-          </Link>
+          <LinkButton
+            size="large"
+            type="primary"
+            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
+          >
+            {locale.start}
+          </LinkButton>
+          <LinkButton
+            size="large"
+            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
+          >
+            {locale.designLanguage}
+          </LinkButton>
         </Flex>
         <div className={styles.child}>{children}</div>
       </div>

.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)}>
-                        <Button type="default">{locale.toDef}</Button>
-                      </Link>
-                      <Link
+                      <LinkButton to={getLocalizedPathname('/theme-editor', isZhCN, search)}>
+                        {locale.toDef}
+                      </LinkButton>
+                      <LinkButton
+                        type="primary"
                         to={getLocalizedPathname('/docs/react/customize-theme', isZhCN, search)}
                       >
-                        <Button type="primary">{locale.toUse}</Button>
-                      </Link>
+                        {locale.toUse}
+                      </LinkButton>
                     </Flex>
                   }
                 >

.dumi/theme/common/Link.tsx

@@ -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 { EditFilled } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import React from 'react';
 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,70 +47,24 @@ 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}
-          initialValue={props.initialValue}
-          onChange={props.onChange}
-        />
-        <LiveError error={props.error} />
-      </div>
-      <Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
-        <EditFilled className={styles.editableIcon} />
-      </Tooltip>
-    </>
+    <div className={styles.editor}>
+      <SourceCodeEditor
+        lang={props.lang}
+        initialValue={props.initialValue}
+        onChange={props.onChange}
+      />
+      <LiveError error={props.error} />
+    </div>
   );
 };
 

.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;

.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);
-      }, 0);
-    }
+    timerRef.current = setTimeout(() => {
+      nprogressHiddenStyle?.remove();
+    }, 0);
+    return () => clearTimeout(timerRef.current);
   }, []);
 
   // handle hash change or visit page hash from Link component, and jump after async chunk loaded