chore: auto merge branches (#44374)

chore: feature merge master

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
-import toReactElement from 'jsonml-to-react-element';
-import JsonML from 'jsonml.js/lib/utils';
 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 { Alert, Badge, Space, Tooltip } from 'antd';
@@ -31,28 +28,6 @@ import { ping } from '../../utils';
 
 const { ErrorBoundary } = Alert;
 
-function toReactComponent(jsonML: any) {
-  return toReactElement(jsonML, [
-    [
-      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-      (node: any, index: any) => {
-        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
-        const attr = JsonML.getAttributes(node);
-        return React.createElement(
-          'pre',
-          {
-            key: index,
-            className: `language-${attr.lang}`,
-          },
-          React.createElement('code', {
-            dangerouslySetInnerHTML: { __html: attr.highlighted },
-          }),
-        );
-      },
-    ],
-  ]);
-}
-
 function compress(string: string): string {
   return LZString.compressToBase64(string)
     .replace(/\+/g, '-') // Convert '+' to '-'
@@ -130,13 +105,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
 
-  const highlightedCodes = {
-    jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'),
-    tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'),
-  };
-
-  const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : '';
-
   useEffect(() => {
     const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
     setShowOnlineUrl(
@@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(<Demo />);
       {codeExpand && (
         <section className={highlightClass} key="code">
           <CodePreview
-            codes={highlightedCodes}
-            toReactComponent={toReactComponent}
+            sourceCode={entryCode}
+            jsxCode={jsx}
+            styleCode={style}
             onCodeTypeChange={(type) => setCodeType(type)}
           />
-          {highlightedStyle ? (
-            <div key="style" className="highlight">
-              <pre>
-                <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-              </pre>
-            </div>
-          ) : null}
         </section>
       )}
     </section>
@@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
     // resulting in some response delays like following issue:
     // https://github.com/ant-design/ant-design/issues/39995
     // So we insert style tag into head tag.
-    if (!style) return;
+    if (!style) {
+      return;
+    }
     const styleTag = document.createElement('style');
     styleTag.type = 'text/css';
     styleTag.innerHTML = style;

.dumi/theme/builtins/Previewer/Previewer.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { IPreviewerProps } from 'dumi';
 import { useTabMeta } from 'dumi';
-import React from 'react';
+
 import CodePreviewer from './CodePreviewer';
 import DesignPreviewer from './DesignPreviewer';
 

.dumi/theme/builtins/Previewer/index.tsx

@@ -1,10 +1,40 @@
 import React, { Suspense } from 'react';
 import type { IPreviewerProps } from 'dumi';
+import { Skeleton, Alert } from 'antd';
+import { createStyles } from 'antd-style';
+
+const { ErrorBoundary } = Alert;
 
 const Previewer = React.lazy(() => import('./Previewer'));
 
-export default (props: IPreviewerProps) => (
-  <Suspense fallback={null}>
-    <Previewer {...props} />
-  </Suspense>
-);
+const useStyle = createStyles(({ css }) => ({
+  skeletonWrapper: css`
+    width: 100% !important;
+    height: 500px;
+    margin-bottom: 16px;
+  `,
+}));
+
+export default (props: IPreviewerProps) => {
+  const { styles } = useStyle();
+  return (
+    <ErrorBoundary>
+      <Suspense
+        fallback={
+          <Skeleton.Node
+            active
+            className={styles.skeletonWrapper}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            {' '}
+          </Skeleton.Node>
+        }
+      >
+        <Previewer {...props} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};

.dumi/theme/common/CodePreview.tsx

@@ -1,37 +1,101 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
+import Prism from 'prismjs';
+import toReactElement from 'jsonml-to-react-element';
+import JsonML from 'jsonml.js/lib/utils';
 import { Tabs } from 'antd';
 
 const LANGS = {
   tsx: 'TypeScript',
   jsx: 'JavaScript',
+  style: 'CSS',
 };
 
 interface CodePreviewProps {
-  codes?: Record<PropertyKey, string>;
-  toReactComponent?: (node: any) => React.ReactNode;
+  sourceCode?: string;
+  jsxCode?: string;
+  styleCode?: string;
   onCodeTypeChange?: (activeKey: string) => void;
 }
 
-const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCodeTypeChange }) => {
-  const langList = Object.keys(codes).sort().reverse();
+function toReactComponent(jsonML: any) {
+  return toReactElement(jsonML, [
+    [
+      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
+      (node: any, index: any) => {
+        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
+        const attr = JsonML.getAttributes(node);
+        return React.createElement(
+          'pre',
+          {
+            key: index,
+            className: `language-${attr.lang}`,
+          },
+          React.createElement('code', {
+            dangerouslySetInnerHTML: { __html: attr.highlighted },
+          }),
+        );
+      },
+    ],
+  ]);
+}
+
+const CodePreview: React.FC<CodePreviewProps> = ({
+  sourceCode = '',
+  jsxCode = '',
+  styleCode = '',
+  onCodeTypeChange,
+}) => {
+  // 避免 Tabs 数量不稳定的闪动问题
+  const initialCodes = {};
+  if (sourceCode) {
+    initialCodes.tsx = '';
+  }
+  if (jsxCode) {
+    initialCodes.jsx = '';
+  }
+  if (styleCode) {
+    initialCodes.style = '';
+  }
+  const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
+
+  useEffect(() => {
+    const codes = {
+      tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'),
+      jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'),
+      style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
+    };
+    // 去掉空的代码类型
+    Object.keys(codes).forEach((key) => {
+      if (!codes[key]) {
+        delete codes[key];
+      }
+    });
+    setHighlightedCodes(codes);
+  }, [jsxCode, sourceCode, styleCode]);
+
+  const langList = Object.keys(highlightedCodes);
+  const items = useMemo(
+    () =>
+      langList.map((lang) => ({
+        label: LANGS[lang],
+        key: lang,
+        children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]),
+      })),
+    [JSON.stringify(highlightedCodes)],
+  );
+
+  if (!langList.length) {
+    return null;
+  }
+
   if (langList.length === 1) {
     return toReactComponent([
       'pre',
-      { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' },
+      { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' },
     ]);
   }
-  return (
-    <Tabs
-      centered
-      className="highlight"
-      onChange={onCodeTypeChange}
-      items={langList.map((lang) => ({
-        label: LANGS[lang],
-        key: lang,
-        children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]),
-      }))}
-    />
-  );
+
+  return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
 };
 
 export default CodePreview;

.dumi/theme/common/styles/Common.tsx

@@ -1,9 +1,13 @@
 import { css, Global } from '@emotion/react';
 import React from 'react';
+import { useTheme } from 'antd-style';
 
-export default () => (
-  <Global
-    styles={css`
+export default () => {
+  const { headerHeight, margin } = useTheme();
+
+  return (
+    <Global
+      styles={css`
       body,
       div,
       dl,
@@ -55,6 +59,11 @@ export default () => (
         vertical-align: middle;
         border-style: none;
       }
+
+      html {
+        scroll-padding-top: ${headerHeight + margin}px;
+      }
     `}
-  />
-);
+    />
+  );
+};

.dumirc.ts

@@ -87,14 +87,14 @@ export default defineConfig({
       crossorigin: true,
     },
     {
-      rel: 'prefetch',
+      rel: 'preload',
       as: 'font',
       href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2',
       type: 'font/woff2',
       crossorigin: true,
     },
     {
-      rel: 'prefetch',
+      rel: 'preload',
       as: 'font',
       href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff',
       type: 'font/woff2',

.github/workflows/pr-contributor-welcome.yml

@@ -9,6 +9,32 @@ on:
       - 'components/**'
 
 jobs:
+  read-file:
+    runs-on: ubuntu-latest
+    outputs:
+      require-result: ${{ steps.contributors.outputs.content }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Read contributors.json
+        id: contributors
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./contributors.json
+
+  output-log:
+    runs-on: ubuntu-latest
+    needs: read-file
+    steps:
+      - name: contributors.json
+        run: echo "${{ needs.read-file.outputs.require-result }}"
+      - name: creator
+        run: echo "${{ github.event.pull_request.user.login }}"
+      - name: contains
+        run: echo "${{ contains(fromJSON(needs.read-file.outputs.require-result), github.event.pull_request.user.login) }}"
+      - name: merged
+        run: echo "${{ github.event.pull_request.merged }}"
+
   check-merged:
     runs-on: ubuntu-latest
     needs: read-file
@@ -25,4 +51,4 @@ jobs:
             <img src="https://github.com/ant-design/ant-design/assets/5378891/e24c6080-bf38-4523-b1cd-f6c43ad7375f" height="200" />
 
             <!-- WELCOME_CONTRIBUTION -->
-          body-include: '<!-- WELCOME_CONTRIBUTION -->'
+          body-include: '<!-- WELCOME_CONTRIBUTION -->'

.prettierrc

@@ -4,10 +4,8 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
-  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
   "overrides": [
     {
       "files": ".prettierrc",

components/date-picker/__tests__/DatePicker.test.tsx

@@ -186,6 +186,20 @@ describe('DatePicker', () => {
     expect(mouseDownEvent).not.toThrow();
   });
 
+  it('showTime should work correctly when format is Array', () => {
+    const { container } = render(
+      <DatePicker defaultValue={dayjs()} showTime format={['YYYY-MM-DD HH:mm']} open />,
+    );
+    const fuousEvent = () => {
+      fireEvent.focus(container.querySelector('input')!);
+    };
+    const mouseDownEvent = () => {
+      fireEvent.mouseDown(container.querySelector('input')!);
+    };
+    expect(fuousEvent).not.toThrow();
+    expect(mouseDownEvent).not.toThrow();
+  });
+
   it('12 hours', () => {
     const { container } = render(
       <DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,

components/date-picker/util.ts

@@ -126,6 +126,11 @@ export function getTimeProps<DateType, DisabledTime>(
   const firstFormat = toArray(format)[0];
   const showTimeObj = { ...props };
 
+  // https://github.com/ant-design/ant-design/issues/44275
+  if (format && Array.isArray(format)) {
+    showTimeObj.format = firstFormat;
+  }
+
   if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {
       showTimeObj.showSecond = false;

components/mentions/style/index.ts

@@ -1,6 +1,5 @@
 import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import {
-  genActiveStyle,
   genBasicInputStyle,
   genDisabledStyle,
   genPlaceholderStyle,
@@ -78,10 +77,6 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
         },
       },
 
-      '&-focused': {
-        ...genActiveStyle(token),
-      },
-
       [`&-affix-wrapper ${componentCls}-suffix`]: {
         position: 'absolute',
         top: 0,

package.json

@@ -172,6 +172,7 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.4.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@qixian.cs/github-contributors-list": "^1.1.0",
     "@size-limit/file": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
@@ -181,7 +182,6 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/fs-extra": "^11.0.1",
     "@types/gtag.js": "^0.0.13",
     "@types/http-server": "^0.12.1",
@@ -304,7 +304,7 @@
     "ts-node": "^10.8.2",
     "typedoc": "^0.24.8",
     "typescript": "~5.1.3",
-    "vanilla-jsoneditor": "^0.17.1",
+    "vanilla-jsoneditor": "^0.18.0",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1"
   },