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

.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>
                     );

.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 }}>
+        <Suspense>
           <DumiDemoGrid items={demos} />
+        </Suspense>
       </ConfigProvider>
     </div>
   );

.dumi/theme/common/Link.tsx

@@ -1,7 +1,6 @@
-import type { MouseEvent, MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
+import React from 'react';
-import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
+import { Link as DumiLink } from 'dumi';
-import nprogress from 'nprogress';
 
 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: React.FC<LinkProps> = (props) => <DumiLink {...props} prefetch />;
-
-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>
-  );
-});
 
 export default Link;

.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};

.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\//],

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;

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,
       });
     });

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"

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"

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

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>

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>
 );

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}>

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>

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>
               }

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>

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',
   },
   {

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>

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>

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' }}

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}

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>

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>

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

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

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/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^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",

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', () => {});
     });