chore: merge master into feature

wanghui2021 · Nov 24, 2023 · 244339d · 244339d
2 parents afbea25 + 03409af
commit 244339d
Show file tree

Hide file tree

Showing 15 changed files with 360 additions and 121 deletions.
diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx
@@ -1,7 +1,8 @@
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
 import React from 'react';
 import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
+import { ConfigProvider, Tabs } from 'antd';
+import { createStyles, css } from 'antd-style';
 import NpmLogo from './npm';
 import PnpmLogo from './pnpm';
 import YarnLogo from './yarn';
@@ -12,51 +13,71 @@ interface InstallProps {
   pnpm?: string;
 }
 
-const npmLabel = (
-  <span className="snippet-label">
-    <NpmLogo />
-    npm
-  </span>
-);
-
-const pnpmLabel = (
-  <span className="snippet-label">
-    <PnpmLogo />
-    pnpm
-  </span>
-);
-
-const yarnLabel = (
-  <span className="snippet-label">
-    <YarnLogo />
-    yarn
-  </span>
-);
+const useStyle = createStyles(() => ({
+  packageManager: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      margin-inline-end: 8px;
+    }
+  `,
+}));
 
 const InstallDependencies: React.FC<InstallProps> = (props) => {
   const { npm, yarn, pnpm } = props;
+  const { styles } = useStyle();
+
   const items = React.useMemo<TabsProps['items']>(
     () =>
       [
         {
           key: 'npm',
           children: npm ? <SourceCode lang="bash">{npm}</SourceCode> : null,
-          label: npmLabel,
+          label: (
+            <div className={styles.packageManager}>
+              <NpmLogo />
+              <span>npm</span>
+            </div>
+          ),
         },
         {
           key: 'yarn',
           children: yarn ? <SourceCode lang="bash">{yarn}</SourceCode> : null,
-          label: yarnLabel,
+          label: (
+            <div className={styles.packageManager}>
+              <YarnLogo />
+              <span>yarn</span>
+            </div>
+          ),
         },
         {
           key: 'pnpm',
           children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
-          label: pnpmLabel,
+          label: (
+            <div className={styles.packageManager}>
+              <PnpmLogo />
+              <span>pnpm</span>
+            </div>
+          ),
         },
       ].filter((item) => item.children),
     [npm, yarn, pnpm],
   );
-  return <Tabs className="antd-site-snippet" defaultActiveKey="npm" items={items} />;
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Tabs: {
+            horizontalMargin: '0',
+          },
+        },
+      }}
+    >
+      <Tabs className="markdown" size="small" defaultActiveKey="npm" items={items} />
+    </ConfigProvider>
+  );
 };
 
 export default InstallDependencies;
diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
@@ -199,28 +199,6 @@ const GlobalStyle: React.FC = () => {
             font-size: 30px;
           }
         }
-        .antd-site-snippet {
-          .ant-tabs-tab {
-            .snippet-label {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              svg {
-                margin-inline-end: 8px;
-              }
-            }
-          }
-          .dumi-default-source-code {
-            margin: 0 auto;
-            background-color: ${token.siteMarkdownCodeBg};
-            border-radius: ${token.borderRadius}px;
-            > pre.prism-code {
-              padding: 12px 20px;
-              font-size: 13px;
-              line-height: 2;
-            }
-          }
-        }
 
         .markdown table td > a:not(:last-child) {
           margin-right: 0 !important;

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,18 @@ tag: vVERSION
 
 ---
 
+## 5.11.4
+
+`2023-11-24`
+
+- 🐞 Fix where Image sets `z-index` abnormally in nested Modal. [#46035](https://github.com/ant-design/ant-design/pull/46035)
+- 🐞 Fix Button that disabled link button should not have navigate options when right click. [#46021](https://github.com/ant-design/ant-design/pull/46021)
+- Card
+  - 🛠 Refactor the Card internal method `getAction` into a function component. [#46032](https://github.com/ant-design/ant-design/pull/46032)
+  - 🐞 Fix the problem of Card warning `invalid annotation` in Rollup. [#46024](https://github.com/ant-design/ant-design/pull/46024)
+- TypeScript
+  - 🤖 Export the type definition for the `required` property of the Radio and Checkbox components. [#46028](https://github.com/ant-design/ant-design/pull/46028) [@nnmax](https://github.com/nnmax)
+
 ## 5.11.3
 
 `2023-11-22`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,18 @@ tag: vVERSION
 
 ---
 
+## 5.11.4
+
+`2023-11-24`
+
+- 🐞 修复 Image 在嵌套 Modal 中设置 `z-index` 异常的问题。[#46035](https://github.com/ant-design/ant-design/pull/46035)
+- 🐞 修复 Button 禁用的链接按钮右键点击时会有打开新链接选项的问题。[#46021](https://github.com/ant-design/ant-design/pull/46021)
+- Card
+  - 🛠 把 Card 内部方法 `getAction` 重构为函数组件。[#46032](https://github.com/ant-design/ant-design/pull/46032)
+  - 🐞 解决 Card 在 Rollup 中会警告 `invalid annotation` 的问题。[#46024](https://github.com/ant-design/ant-design/pull/46024)
+- TypeScript
+  - 🤖 导出 Radio 和 Checkbox 组件的 `required` 属性的类型定义。[#46028](https://github.com/ant-design/ant-design/pull/46028) [@nnmax](https://github.com/nnmax)
+
 ## 5.11.3
 
 `2023-11-22`

diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
@@ -180,13 +180,23 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
   ),
   Menu: (props) => <Menu {...props} items={items} defaultOpenKeys={['SubMenu']} />,
   ImagePreview: ({ rootClassName }: ImageProps) => (
-    <Image
-      src="xxx"
-      preview={{
-        visible: true,
-        rootClassName: `${rootClassName} comp-item comp-ImagePreview`,
-      }}
-    />
+    <>
+      <Image
+        src="xxx"
+        preview={{
+          visible: true,
+          rootClassName: `${rootClassName} comp-item comp-ImagePreview`,
+        }}
+      />
+      <Image.PreviewGroup
+        preview={{
+          visible: true,
+          rootClassName: `${rootClassName} comp-item comp-ImagePreviewGroup`,
+        }}
+      >
+        <Image src="xxx" />
+      </Image.PreviewGroup>
+    </>
   ),
 };
 
@@ -207,7 +217,12 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st
   } else if (['Menu'].includes(consumer)) {
     selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`;
   } else if (consumer === 'ImagePreview') {
-    selector = `${baseSelector}.comp-ImagePreview`;
+    selector = ['ImagePreview', 'ImagePreviewGroup']
+      .map(
+        (item) =>
+          `${baseSelector}.comp-${item} .ant-image-preview-wrap, ${baseSelector}.comp-${item}.ant-image-preview-operations-wrapper`,
+      )
+      .join(',');
   }
   return selector;
 }
@@ -276,7 +291,7 @@ describe('Test useZIndex hooks', () => {
           const selector2 = getConsumerSelector('.consumer2', key as ZIndexConsumer);
           const selector3 = getConsumerSelector('.consumer3', key as ZIndexConsumer);
 
-          if (['SelectLike', 'DatePicker'].includes(key)) {
+          if (['SelectLike', 'DatePicker', 'ImagePreview'].includes(key)) {
             let comps = document.querySelectorAll(selector1);
             comps.forEach((comp) => {
               expect((comp as HTMLDivElement).style.zIndex).toBeFalsy();
@@ -287,11 +302,15 @@ describe('Test useZIndex hooks', () => {
               const consumerOffset = isColorPicker
                 ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
+              const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper')
+                ? 1
+                : 0;
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
                   1000 +
                     containerBaseZIndexOffset[containerKey as ZIndexContainer] +
-                    consumerOffset,
+                    consumerOffset +
+                    operOffset,
                 ),
               );
             });
@@ -302,11 +321,15 @@ describe('Test useZIndex hooks', () => {
               const consumerOffset = isColorPicker
                 ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
+              const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper')
+                ? 1
+                : 0;
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
                   1000 +
                     containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
-                    consumerOffset,
+                    consumerOffset +
+                    operOffset,
                 ),
               );
             });
@@ -339,7 +362,7 @@ describe('Test useZIndex hooks', () => {
           }
 
           unmount();
-        }, 15000);
+        }, 20000);
       });
     });
   });

diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
@@ -6,17 +7,17 @@ import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined';
 import SwapOutlined from '@ant-design/icons/SwapOutlined';
 import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
 import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
+import classNames from 'classnames';
 import RcImage from 'rc-image';
 import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
-import * as React from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider';
-import { getTransitionName } from '../_util/motion';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
+import { getTransitionName } from '../_util/motion';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 // CSSINJS
 import useStyle from './style';
 import useCSSVar from './style/cssVar';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export const icons = {
   rotateLeft: <RotateLeftOutlined />,
@@ -44,7 +45,12 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   const rootCls = useCSSVarCls(prefixCls);
   const wrapCSSVar = useCSSVar(rootCls);
 
-  const mergedPreview = React.useMemo(() => {
+  const [zIndex] = useZIndex(
+    'ImagePreview',
+    typeof preview === 'object' ? preview.zIndex : undefined,
+  );
+
+  const mergedPreview = React.useMemo<GroupConsumerProps['preview']>(() => {
     if (preview === false) {
       return preview;
     }
@@ -56,6 +62,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
       rootClassName: mergedRootClassName,
+      zIndex,
     };
   }, [preview]);
 

diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -349,6 +349,19 @@ exports[`renders components/image/demo/imageRender.tsx extend context correctly
 
 exports[`renders components/image/demo/imageRender.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/image/demo/nested.tsx extend context correctly 1`] = `
+<button
+  class="ant-btn ant-btn-default"
+  type="button"
+>
+  <span>
+    showModal
+  </span>
+</button>
+`;
+
+exports[`renders components/image/demo/nested.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/image/demo/placeholder.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

diff --git a/components/image/__tests__/__snapshots__/demo.test.ts.snap b/components/image/__tests__/__snapshots__/demo.test.ts.snap
@@ -340,6 +340,17 @@ exports[`renders components/image/demo/imageRender.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/image/demo/nested.tsx correctly 1`] = `
+<button
+  class="ant-btn ant-btn-default"
+  type="button"
+>
+  <span>
+    showModal
+  </span>
+</button>
+`;
+
 exports[`renders components/image/demo/placeholder.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"