chore: auto merge branches (#42680)

chore: merge master into feature

.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',

.dumi/theme/plugin.ts

@@ -3,6 +3,7 @@ import type { IApi, IRoute } from 'dumi';
 import ReactTechStack from 'dumi/dist/techStacks/react';
 import fs from 'fs';
 import sylvanas from 'sylvanas';
+import localPackage from '../../package.json';
 
 /**
  * extends dumi internal tech stack, for customize previewer props
@@ -18,7 +19,9 @@ class AntdReactTechStack extends ReactTechStack {
 
       const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
       const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
+      const pkgDependencyList = localPackage.dependencies;
 
+      props.pkgDependencyList = pkgDependencyList;
       props.jsx = sylvanas.parseText(code);
 
       if (md) {

components/empty/empty.tsx

@@ -6,14 +6,9 @@ const Empty: React.FC = () => {
   const [, token] = useToken();
 
   const bgColor = new TinyColor(token.colorBgBase);
-  let themeStyle: React.CSSProperties = {};
 
   // Dark Theme need more dark of this
-  if (bgColor.toHsl().l < 0.5) {
+  const themeStyle: React.CSSProperties = bgColor.toHsl().l < 0.5 ? { opacity: 0.65 } : {};
-    themeStyle = {
-      opacity: 0.65,
-    };
-  }
 
   return (
     <svg

components/image/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
-import { initZoomMotion, initFadeMotion } from '../../style/motion';
+import { resetComponent, textEllipsis } from '../../style';
+import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
@@ -81,6 +81,7 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
         padding: paddingSM,
         cursor: 'pointer',
         transition: `all ${motionDurationSlow}`,
+        userSelect: 'none',
 
         '&:hover': {
           background: operationBgHover.toRgbString(),
@@ -140,6 +141,7 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
       cursor: 'pointer',
       transition: `all ${motionDurationSlow}`,
       pointerEvents: 'auto',
+      userSelect: 'none',
 
       '&:hover': {
         background: operationBgHover.toRgbString(),