[pull] master from ant-design:master

.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/global.css

@@ -13,3 +13,8 @@
   background: rgba(255, 255, 255, 0.2);
   border-radius: 6px;
 }
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: unset;
+}

.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/useLocale.ts

@@ -1,16 +1,22 @@
 import { useLocale as useDumiLocale } from 'dumi';
 
-export interface LocaleMap<Key extends string> {
-  cn: Record<Key, string>;
-  en: Record<Key, string>;
+export interface LocaleMap<
+  K extends PropertyKey = PropertyKey,
+  V extends string | ((...params: any[]) => string) = string,
+> {
+  cn: Record<K, V>;
+  en: Record<K, V>;
 }
 
-function useLocale<Key extends string>(
-  localeMap?: LocaleMap<Key>,
-): [Record<Key, string>, 'cn' | 'en'] {
+const useLocale = <
+  K extends PropertyKey = PropertyKey,
+  V extends string | ((...params: any[]) => string) = string,
+>(
+  localeMap?: LocaleMap<K, V>,
+): [Record<K, V>, 'cn' | 'en'] => {
   const { id } = useDumiLocale();
   const localeType = id === 'zh-CN' ? 'cn' : 'en';
-  return [localeMap?.[localeType]!, localeType];
-}
+  return [localeMap?.[localeType]!, localeType] as const;
+};
 
 export default useLocale;

.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,24 +1,74 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
 import { Tag, version } from 'antd';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
-const ItemTag: React.FC<{ tag?: string; show?: boolean }> = (props) => {
-  const { tag, show = true } = props;
-  if (!show || !tag) {
-    return null;
+function isVersionNumber(value?: string) {
+  return value && /^\d+\.\d+\.\d+$/.test(value);
+}
+
+const useStyle = createStyles(({ css, token }) => ({
+  link: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `,
+  tag: css`
+    margin-inline-end: 0;
+  `,
+  subtitle: css`
+    margin-inline-start: ${token.marginXS}px;
+    font-weight: normal;
+    font-size: ${token.fontSizeSM}px;
+    opacity: 0.8;
+  `,
+}));
+
+interface MenuItemLabelProps {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  link: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  search?: string;
+  tag?: string;
+  className?: string;
+}
+
+const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
+  const { styles } = useStyle();
+  const { before, after, link, title, subtitle, search, tag, className } = props;
+  if (!before && !after) {
+    return (
+      <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
+        <span>
+          {title}
+          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+        </span>
+        {tag && (
+          <Tag
+            bordered={false}
+            className={classnames(styles.tag)}
+            color={isVersionNumber(tag) || tag === 'New' ? 'success' : 'processing'}
+          >
+            {tag.replace('VERSION', version)}
+          </Tag>
+        )}
+      </Link>
+    );
   }
   return (
-    <Tag
-      bordered={false}
-      color={tag === 'New' ? 'success' : 'processing'}
-      style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
-    >
-      {tag.replace('VERSION', version)}
-    </Tag>
+    <Link to={`${link}${search}`} className={className}>
+      {before}
+      {title}
+      {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+      {after}
+    </Link>
   );
 };
 
@@ -27,7 +77,7 @@ export interface UseMenuOptions {
   after?: React.ReactNode;
 }
 
-const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
+const useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], string] => {
   const fullData = useFullSidebarData();
   const { pathname, search } = useLocation();
   const sidebarData = useSidebarData();
@@ -120,18 +170,15 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               key: group?.title,
               children: group.children?.map((item) => ({
                 label: (
-                  <Link
-                    to={`${item.link}${search}`}
-                    style={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    {before}
-                    <span key="english">{item?.title}</span>
-                    <span className="chinese" key="chinese">
-                      {item.frontmatter?.subtitle}
-                    </span>
-                    <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                    {after}
-                  </Link>
+                  <MenuItemLabelWithTag
+                    before={before}
+                    after={after}
+                    link={item.link}
+                    title={item?.title}
+                    subtitle={item.frontmatter?.subtitle}
+                    search={search}
+                    tag={item.frontmatter?.tag}
+                  />
                 ),
                 key: item.link.replace(/(-cn$)/g, ''),
               })),
@@ -146,15 +193,14 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           result.push(
             ...list.map((item) => ({
               label: (
-                <Link
-                  to={`${item.link}${search}`}
-                  style={{ display: 'flex', alignItems: 'center' }}
-                >
-                  {before}
-                  {item?.title}
-                  <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                  {after}
-                </Link>
+                <MenuItemLabelWithTag
+                  before={before}
+                  after={after}
+                  link={item.link}
+                  title={item?.title}
+                  search={search}
+                  tag={item.frontmatter?.tag}
+                />
               ),
               key: item.link.replace(/(-cn$)/g, ''),
             })),
@@ -165,7 +211,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
     );
   }, [sidebarData, fullData, pathname, search, options]);
 
-  return [menuItems, pathname];
+  return [menuItems, pathname] as const;
 };
 
 export default useMenu;

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