Merge remote-tracking branch 'origin/master' into feature-merge-master

.dumi/theme/SiteThemeProvider.tsx

@@ -0,0 +1,35 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useContext } from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
+import { ThemeProvider } from 'antd-style';
+import { theme } from 'antd';
+
+const SiteThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
+  const rootPrefixCls = getPrefixCls();
+  const { token } = theme.useToken();
+
+  return (
+    <ThemeProvider
+      customToken={{
+        headerHeight: 64,
+        menuItemBorder: 2,
+        mobileMaxWidth: 767.99,
+        siteMarkdownCodeBg: token.colorFillTertiary,
+        antCls: `.${rootPrefixCls}`,
+        iconCls: `.${iconPrefixCls}`,
+        /** 56 */
+        marginFarXS: (token.marginXXL / 6) * 7,
+        /** 80 */
+        marginFarSM: (token.marginXXL / 3) * 5,
+        /** 96 */
+        marginFar: token.marginXXL * 2,
+        codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
+      }}
+    >
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default SiteThemeProvider;

.dumi/theme/common/Link.tsx

@@ -5,10 +5,11 @@ import { useNavigate } from 'dumi';
 export type LinkProps = {
   to?: string;
   children?: React.ReactNode;
+  className?: string;
 };
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { to, children } = props;
+  const { to, children, ...rest } = props;
   const navigate = useNavigate();
 
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
@@ -21,7 +22,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   };
 
   return (
-    <a ref={ref} href={to} onClick={handleClick}>
+    <a ref={ref} href={to} onClick={handleClick} {...rest}>
       {children}
     </a>
   );

.dumi/theme/common/PrevAndNext.tsx

@@ -1,15 +1,13 @@
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import { ClassNames, css } from '@emotion/react';
 import type { MenuProps } from 'antd';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { createStyles, css } from 'antd-style';
+import classNames from 'classnames';
 import useMenu from '../../hooks/useMenu';
-import useSiteToken from '../../hooks/useSiteToken';
-
-const useStyle = () => {
-  const { token } = useSiteToken();
 
+const useStyle = createStyles(({ token }) => {
   const { colorSplit, iconCls, fontSizeIcon } = token;
 
   return {
@@ -22,7 +20,7 @@ const useStyle = () => {
       border-top: 1px solid ${colorSplit};
       display: flex;
     `,
-    pageNav: `
+    pageNav: css`
       flex: 1;
       height: 72px;
       line-height: 72px;
@@ -37,7 +35,7 @@ const useStyle = () => {
         margin-inline-start: 4px;
       }
     `,
-    prevNav: `
+    prevNav: css`
       text-align: start;
 
       .footer-nav-icon-after {
@@ -57,7 +55,7 @@ const useStyle = () => {
         right: 0.2em;
       }
     `,
-    nextNav: `
+    nextNav: css`
       text-align: end;
 
       .footer-nav-icon-before {
@@ -79,7 +77,7 @@ const useStyle = () => {
       }
     `,
   };
-};
+});
 
 const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null => {
   if (Array.isArray(menuItems)) {
@@ -97,7 +95,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null =
 };
 
 const PrevAndNext: React.FC = () => {
-  const styles = useStyle();
+  const { styles } = useStyle();
 
   const [menuItems, selectedKey] = useMenu({
     before: <LeftOutlined className="footer-nav-icon-before" />,
@@ -122,21 +120,15 @@ const PrevAndNext: React.FC = () => {
   }, [menuItems, selectedKey]);
 
   return (
-    <section css={styles.prevNextNav}>
-      <ClassNames>
-        {({ css: classCss, cx }) => (
-          <>
-            {prev &&
-              React.cloneElement(prev.label as ReactElement, {
-                className: cx(classCss(styles.pageNav), classCss(styles.prevNav)),
-              })}
-            {next &&
-              React.cloneElement(next.label as ReactElement, {
-                className: cx(classCss(styles.pageNav), classCss(styles.nextNav)),
-              })}
-          </>
-        )}
-      </ClassNames>
+    <section className={styles.prevNextNav}>
+      {prev &&
+        React.cloneElement(prev.label as ReactElement, {
+          className: classNames(styles.pageNav, styles.prevNav),
+        })}
+      {next &&
+        React.cloneElement(next.label as ReactElement, {
+          className: classNames(styles.pageNav, styles.nextNav),
+        })}
     </section>
   );
 };

.dumi/theme/layouts/GlobalLayout.tsx

@@ -9,6 +9,7 @@ import { App, ConfigProvider, theme as antdTheme } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
@@ -117,15 +118,17 @@ const GlobalLayout: React.FC = () => {
             algorithm: getAlgorithm(theme),
           }}
         >
-          <App>
-            {outlet}
-            {!pathname.startsWith('/~demos') && (
-              <ThemeSwitch
-                value={theme}
-                onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
-              />
-            )}
-          </App>
+          <SiteThemeProvider>
+            <App>
+              {outlet}
+              {!pathname.startsWith('/~demos') && (
+                <ThemeSwitch
+                  value={theme}
+                  onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+                />
+              )}
+            </App>
+          </SiteThemeProvider>
         </ConfigProvider>
       </SiteContext.Provider>
     </StyleProvider>

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

@@ -6006,7 +6006,7 @@ Array [
           </div>
           <div>
             <div
-              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
               style="opacity: 0;"
             >
               <ul
@@ -6232,7 +6232,7 @@ Array [
           </div>
           <div>
             <div
-              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
               style="opacity: 0;"
             >
               <ul
@@ -6343,7 +6343,7 @@ Array [
                   </div>
                   <div>
                     <div
-                      class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+                      class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
                       style="opacity: 0;"
                     >
                       <ul
@@ -6481,7 +6481,7 @@ Array [
           </div>
           <div>
             <div
-              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
               style="opacity: 0;"
             >
               <ul
@@ -8833,7 +8833,7 @@ Array [
           </div>
           <div>
             <div
-              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
               style="opacity: 0;"
             >
               <ul
@@ -8948,7 +8948,7 @@ Array [
           </div>
           <div>
             <div
-              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light"
+              class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
               style="opacity: 0;"
             >
               <ul

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

@@ -575,7 +575,7 @@ exports[`renders components/layout/demo/fixed.tsx extend context correctly 1`] =
         </div>
         <div>
           <div
-            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
+            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
             style="opacity: 0;"
           >
             <ul
@@ -2994,7 +2994,7 @@ exports[`renders components/layout/demo/top.tsx extend context correctly 1`] = `
         </div>
         <div>
           <div
-            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
+            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
             style="opacity: 0;"
           >
             <ul
@@ -3472,7 +3472,7 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1`
         </div>
         <div>
           <div
-            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
+            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
             style="opacity: 0;"
           >
             <ul
@@ -4635,7 +4635,7 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
         </div>
         <div>
           <div
-            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
+            class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
             style="opacity: 0;"
           >
             <ul

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

@@ -222,7 +222,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu-light"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu-light ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
           style="opacity: 0;"
         >
           <ul
@@ -584,7 +584,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu-dark ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
           style="opacity: 0;"
         >
           <ul
@@ -4655,7 +4655,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul
@@ -4764,7 +4764,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul
@@ -4824,7 +4824,7 @@ Array [
               </div>
               <div>
                 <div
-                  class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+                  class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
                   style="opacity: 0;"
                 >
                   <ul
@@ -4980,7 +4980,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul
@@ -7194,7 +7194,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul
@@ -7400,7 +7400,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul
@@ -7491,7 +7491,7 @@ Array [
               </div>
               <div>
                 <div
-                  class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+                  class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
                   style="opacity: 0;"
                 >
                   <ul
@@ -7609,7 +7609,7 @@ Array [
       </div>
       <div>
         <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
           style="opacity: 0;"
         >
           <ul

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

@@ -13373,7 +13373,7 @@ exports[`renders components/table/demo/head.tsx extend context correctly 1`] = `
                                 </div>
                                 <div>
                                   <div
-                                    class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-table-filter-dropdown-submenu ant-dropdown-menu-light"
+                                    class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-popup ant-dropdown-menu ant-table-filter-dropdown-submenu ant-dropdown-menu-light ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
                                     style="opacity: 0;"
                                   >
                                     <ul

package.json

@@ -132,7 +132,7 @@
     "rc-input-number": "~7.4.0",
     "rc-mentions": "~2.2.0",
     "rc-menu": "~9.8.3",
-    "rc-motion": "^2.6.1",
+    "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.0",
     "rc-pagination": "~3.3.1",
     "rc-picker": "~3.6.1",