Merge branch 'master' into fix/duplicate-style-tags

2024-12-19 20:08:43 +08:00 · 2024-12-06 13:56:00 +08:00 · 2024-12-06 13:56:00 +08:00 · 74729a6998
commit 74729a6998
parent 41cc696c89 cb25346d8c
27 changed files with 105 additions and 86 deletions
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@ -243,7 +243,7 @@ const Overview: React.FC = () => {
                        {cardContent}
                      </a>
                    ) : (
-                      <Link to={url} prefetch key={component.title}>
+                      <Link to={url} key={component.title}>
                        {cardContent}
                      </Link>
                    );
--- a/.dumi/theme/builtins/DemoWrapper/index.tsx
+++ b/.dumi/theme/builtins/DemoWrapper/index.tsx
@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { Suspense, useContext } from 'react';
 import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
 import { ConfigProvider, Tooltip, Button } from 'antd';
 import classNames from 'classnames';
@ -113,7 +113,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
        </Tooltip>
      </span>
      <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
-        <DumiDemoGrid items={demos} />
+        <Suspense>
+          <DumiDemoGrid items={demos} />
+        </Suspense>
      </ConfigProvider>
    </div>
  );
--- a/.dumi/theme/common/Link.tsx
+++ b/.dumi/theme/common/Link.tsx
@ -1,7 +1,6 @@
-import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
-import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
-import nprogress from 'nprogress';
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+import { Link as DumiLink } from 'dumi';

 export interface LinkProps {
  to: string | { pathname?: string; search?: string; hash?: string };
@ -9,64 +8,9 @@ export interface LinkProps {
  className?: string;
  onClick?: MouseEventHandler;
  component?: React.ComponentType<any>;
+  children?: React.ReactNode;
 }

-nprogress.configure({ showSpinner: false });
-
-const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, component, ...rest } = props;
-  const [isPending, startTransition] = useTransition();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  const href = React.useMemo<string>(() => {
-    if (typeof to === 'object') {
-      return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
-    }
-    return to;
-  }, [to]);
-
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    props.onClick?.(e);
-    if (!href?.startsWith('http')) {
-      // Should support open in new tab
-      if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
-        e.preventDefault();
-        startTransition(() => {
-          if (href) {
-            navigate(href);
-          }
-        });
-      }
-    }
-  };
-
-  useLayoutEffect(() => {
-    if (isPending) {
-      nprogress.start();
-    } else {
-      nprogress.done();
-    }
-  }, [isPending]);
-
-  if (component) {
-    return React.createElement(
-      component,
-      {
-        ...rest,
-        ref,
-        onClick: handleClick,
-        href,
-      },
-      children,
-    );
-  }
-
-  return (
-    <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
-      {children}
-    </DumiLink>
-  );
-});
+const Link: React.FC<LinkProps> = (props) => <DumiLink {...props} prefetch />;

 export default Link;
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -350,9 +350,8 @@ const GlobalDemoStyles: React.FC = () => {
        }

        ${antCls}-btn {
-          opacity: 0.6;
          &.icon-enabled {
-            background: ${token.colorFillSecondary};
+            background-color: ${token.colorFillSecondary};
            opacity: 1;
            ${iconCls} {
              color: ${token.colorTextBase};
--- a/.dumirc.ts
+++ b/.dumirc.ts
@ -9,7 +9,11 @@ import { version } from './package.json';

 export default defineConfig({
  plugins: ['dumi-plugin-color-chunk'],
+
+  // For <Link prefetch />
+  routePrefetch: {},
  manifest: {},
+
  conventionRoutes: {
    // to avoid generate routes for .dumi/pages/index/components/xx
    exclude: [/index\/components\//],
--- a/components/avatar/group.tsx
+++ b/components/avatar/group.tsx
@ -102,7 +102,10 @@ const Group: React.FC<GroupProps> = (props) => {
  );

  const childrenWithProps = toArray(children).map((child, index) =>
-    cloneElement(child, { key: `avatar-key-${index}` }),
+    cloneElement(child, {
+      // eslint-disable-next-line react/no-array-index-key
+      key: `avatar-key-${index}`,
+    }),
  );

  const mergeCount = max?.count || maxCount;
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -199,6 +199,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
      const isLastItem = index === childrenLength - 1;
      return cloneElement(element, {
        separator: isLastItem ? '' : separator,
+        // eslint-disable-next-line react/no-array-index-key
        key: index,
      });
    });
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -1117,6 +1117,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
@ -1843,6 +1844,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
      href="https://www.google.com"
      tabindex="0"
+      target="_blank"
    >
      <span
        class="ant-btn-icon"
@ -2271,6 +2273,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-icon-end"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -1022,6 +1022,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
@ -1666,6 +1667,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
      href="https://www.google.com"
      tabindex="0"
+      target="_blank"
    >
      <span
        class="ant-btn-icon"
@ -2016,6 +2018,7 @@ Array [
        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-icon-end"
        href="https://www.google.com"
        tabindex="0"
+        target="_blank"
      >
        <span
          class="ant-btn-icon"
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOutlined, MinusSquareOutlined } from '@ant-design/icons';
+import { MinusSquareOutlined, SearchOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
 import type { ConfigProviderProps } from 'antd';

@ -52,7 +52,7 @@ const App: React.FC = () => {
            <Button type="dashed" icon={<SearchOutlined />}>
              Search
            </Button>
-            <Button icon={<SearchOutlined />} href="https://www.google.com" />
+            <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />
            <Button>
              <SearchOutlined />
              Search
--- a/components/button/demo/icon-position.tsx
+++ b/components/button/demo/icon-position.tsx
@ -47,7 +47,12 @@ const App: React.FC = () => {
          <Button type="dashed" icon={<SearchOutlined />} iconPosition={position}>
            Search
          </Button>
-          <Button icon={<SearchOutlined />} href="https://www.google.com" iconPosition={position} />
+          <Button
+            icon={<SearchOutlined />}
+            href="https://www.google.com"
+            target="_blank"
+            iconPosition={position}
+          />
          <Button type="primary" loading iconPosition={position}>
            Loading
          </Button>
--- a/components/button/demo/icon.tsx
+++ b/components/button/demo/icon.tsx
@ -30,7 +30,7 @@ const App: React.FC = () => (
      <Button type="dashed" icon={<SearchOutlined />}>
        Search
      </Button>
-      <Button icon={<SearchOutlined />} href="https://www.google.com" />
+      <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />
    </Flex>
  </Flex>
 );
--- a/components/config-provider/demo/direction.tsx
+++ b/components/config-provider/demo/direction.tsx
@ -406,7 +406,10 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
              <Rate defaultValue={2.5} />
              <br />
              <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
-              supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
+              supported after{' '}
+              <a href="https://github.com/react-component/rate" target="_blank" rel="noreferrer">
+                rc-rate
+              </a>{' '}
              implement rtl support.
            </Col>
            <Col span={12}>
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -4343,6 +4343,8 @@ Array [
                </p>
                <a
                  href="http://github.com/ant-design/ant-design/"
+                  rel="noreferrer"
+                  target="_blank"
                >
                  github.com/ant-design/ant-design/
                </a>
--- a/components/drawer/demo/user-profile.tsx
+++ b/components/drawer/demo/user-profile.tsx
@ -135,7 +135,7 @@ const App: React.FC = () => {
            <DescriptionItem
              title="Github"
              content={
-                <a href="http://github.com/ant-design/ant-design/">
+                <a href="http://github.com/ant-design/ant-design/" target="_blank" rel="noreferrer">
                  github.com/ant-design/ant-design/
                </a>
              }
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
@ -7263,6 +7263,8 @@ Array [
        >
          <a
            href="https://www.antgroup.com"
+            rel="noopener noreferrer"
+            target="_blank"
          >
            1st menu item
          </a>
@ -7296,6 +7298,8 @@ Array [
        >
          <a
            href="https://www.aliyun.com"
+            rel="noopener noreferrer"
+            target="_blank"
          >
            2nd menu item
          </a>
--- a/components/dropdown/demo/trigger.tsx
+++ b/components/dropdown/demo/trigger.tsx
@ -5,11 +5,19 @@ import { Dropdown, Space } from 'antd';

 const items: MenuProps['items'] = [
  {
-    label: <a href="https://www.antgroup.com">1st menu item</a>,
+    label: (
+      <a href="https://www.antgroup.com" target="_blank" rel="noopener noreferrer">
+        1st menu item
+      </a>
+    ),
    key: '0',
  },
  {
-    label: <a href="https://www.aliyun.com">2nd menu item</a>,
+    label: (
+      <a href="https://www.aliyun.com" target="_blank" rel="noopener noreferrer">
+        2nd menu item
+      </a>
+    ),
    key: '1',
  },
  {
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -942,6 +942,8 @@ Array [
          >
            <a
              href="https://github.com/ant-design/ant-design/issues/36459"
+              rel="noreferrer"
+              target="_blank"
            >
              #36459
            </a>
@ -1376,6 +1378,8 @@ Array [
          >
            <a
              href="https://github.com/ant-design/ant-design/issues/36459"
+              rel="noreferrer"
+              target="_blank"
            >
              #36459
            </a>
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@ -778,6 +778,8 @@ Array [
          >
            <a
              href="https://github.com/ant-design/ant-design/issues/36459"
+              rel="noreferrer"
+              target="_blank"
            >
              #36459
            </a>
@ -1107,6 +1109,8 @@ Array [
          >
            <a
              href="https://github.com/ant-design/ant-design/issues/36459"
+              rel="noreferrer"
+              target="_blank"
            >
              #36459
            </a>
--- a/components/form/demo/col-24-debug.tsx
+++ b/components/form/demo/col-24-debug.tsx
@ -3,7 +3,15 @@ import { Button, Divider, Form, Input, Select } from 'antd';

 const sharedItem = (
  <Form.Item
-    label={<a href="https://github.com/ant-design/ant-design/issues/36459">#36459</a>}
+    label={
+      <a
+        href="https://github.com/ant-design/ant-design/issues/36459"
+        target="_blank"
+        rel="noreferrer"
+      >
+        #36459
+      </a>
+    }
    initialValue={['bamboo']}
    name="select"
    style={{ boxShadow: '0 0 3px red' }}
--- a/components/modal/demo/footer.tsx
+++ b/components/modal/demo/footer.tsx
@ -41,6 +41,7 @@ const App: React.FC = () => {
          <Button
            key="link"
            href="https://google.com"
+            target="_blank"
            type="primary"
            loading={loading}
            onClick={handleOk}
--- a/components/tag/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/tag/tests/snapshots/demo-extend.test.ts.snap
@ -143,6 +143,8 @@ Array [
  >
    <a
      href="https://github.com/ant-design/ant-design/issues/1862"
+      rel="noopener noreferrer"
+      target="_blank"
    >
      Link
    </a>
--- a/components/tag/tests/snapshots/demo.test.ts.snap
+++ b/components/tag/tests/snapshots/demo.test.ts.snap
@ -141,6 +141,8 @@ Array [
  >
    <a
      href="https://github.com/ant-design/ant-design/issues/1862"
+      rel="noopener noreferrer"
+      target="_blank"
    >
      Link
    </a>
--- a/components/tag/demo/basic.tsx
+++ b/components/tag/demo/basic.tsx
@ -11,7 +11,13 @@ const App: React.FC = () => (
  <>
    <Tag>Tag 1</Tag>
    <Tag>
-      <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
+      <a
+        href="https://github.com/ant-design/ant-design/issues/1862"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Link
+      </a>
    </Tag>
    <Tag closeIcon onClose={preventDefault}>
      Prevent Default
--- a/components/tag/demo/component-token.tsx
+++ b/components/tag/demo/component-token.tsx
@ -8,10 +8,22 @@ const App: React.FC = () => (
  >
    <Flex gap="4px 0" wrap>
      <Tag>
-        <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
+        <a
+          href="https://github.com/ant-design/ant-design/issues/1862"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Link
+        </a>
      </Tag>
      <Tag bordered={false}>
-        <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
+        <a
+          href="https://github.com/ant-design/ant-design/issues/1862"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Link
+        </a>
      </Tag>
      <Tag closable color="magenta">
        Tag 2
--- a/package.json
+++ b/package.json
@ -135,12 +135,12 @@
    "rc-motion": "^2.9.3",
    "rc-notification": "~5.6.2",
    "rc-pagination": "~4.3.0",
-    "rc-picker": "~4.8.2",
+    "rc-picker": "~4.8.3",
    "rc-progress": "~4.0.0",
    "rc-rate": "~2.13.0",
    "rc-resize-observer": "^1.4.0",
    "rc-segmented": "~2.5.0",
-    "rc-select": "~14.16.3",
+    "rc-select": "~14.16.4",
    "rc-slider": "~11.1.7",
    "rc-steps": "~6.0.1",
    "rc-switch": "~4.1.0",
@ -165,8 +165,8 @@
    "@codecov/webpack-plugin": "^1.2.1",
    "@codesandbox/sandpack-react": "^2.19.9",
    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/modifiers": "^8.0.0",
-    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emotion/css": "^11.13.4",
    "@emotion/react": "^11.13.3",
@ -201,7 +201,6 @@
    "@types/lodash": "^4.17.12",
    "@types/minimist": "^1.2.5",
    "@types/node": "^22.7.7",
-    "@types/nprogress": "^0.2.3",
    "@types/pixelmatch": "^5.2.6",
    "@types/pngjs": "^6.0.5",
    "@types/prismjs": "^1.26.4",
@ -237,7 +236,7 @@
    "eslint-plugin-compat": "^6.0.1",
    "eslint-plugin-jest": "^28.8.3",
    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "fast-glob": "^3.3.2",
    "fetch-jsonp": "^1.3.0",
@ -270,7 +269,6 @@
    "mockdate": "^3.0.5",
    "node-fetch": "^3.3.2",
    "node-notifier": "^10.0.1",
-    "nprogress": "^0.2.0",
    "open": "^10.1.0",
    "ora": "^8.1.0",
    "p-all": "^5.0.0",
--- a/tests/shared/accessibilityTest.tsx
+++ b/tests/shared/accessibilityTest.tsx
@ -120,6 +120,7 @@ type Options = {
 export default function accessibilityDemoTest(component: string, options: Options = {}) {
  // If skip is true, return immediately without executing any tests
  if (options.skip === true) {
+    // eslint-disable-next-line jest/no-disabled-tests
    describe.skip(`${component} demo a11y`, () => {
      it('skipped', () => {});
    });