Merge branch 'feature' into feat-mention

Signed-off-by: afc163 <[email protected]>

.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;
@@ -66,7 +66,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
 
 export interface SemanticPreviewProps {
   semantics: { name: string; desc: string; version?: string }[];
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   height?: number;
 }
 
@@ -97,7 +97,7 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
   // ======================== Hover =========================
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(null);
 
   const [positionMotion, setPositionMotion] = React.useState<boolean>(false);
   const [hoverSemantic, setHoverSemantic] = React.useState<string | null>(null);
@@ -111,12 +111,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
       const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
       const containerRect = containerRef.current?.getBoundingClientRect();
       const targetRect = targetElement?.getBoundingClientRect();
+
       setMarkPos([
         (targetRect?.left || 0) - (containerRect?.left || 0),
         (targetRect?.top || 0) - (containerRect?.top || 0),
         targetRect?.width || 0,
         targetRect?.height || 0,
       ]);
+
       timerRef.current = setTimeout(() => {
         setPositionMotion(true);
       }, 10);

.dumi/global.css

@@ -16,5 +16,5 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: unset;
+  scrollbar-color: #eaeaea transparent;
 }

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