-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`;
diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
index 0baff728e51a..92374427b129 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
@@ -422,191 +422,6 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
style="display:none"
/>
-
`;
diff --git a/components/menu/demo/component-token.tsx b/components/menu/demo/component-token.tsx
index 340b4fb9a26c..5cce0cf0d43a 100644
--- a/components/menu/demo/component-token.tsx
+++ b/components/menu/demo/component-token.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
import {
AppstoreOutlined,
ContainerOutlined,
@@ -7,6 +6,7 @@ import {
PieChartOutlined,
SettingOutlined,
} from '@ant-design/icons';
+import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { ConfigProvider, Menu, Space } from 'antd';
@@ -120,7 +120,6 @@ const App: React.FC = () => {
components: {
Menu: {
horizontalItemBorderRadius: 6,
- popupBg: 'red',
horizontalItemHoverBg: '#f5f5f5',
},
},
@@ -137,7 +136,6 @@ const App: React.FC = () => {
darkSubMenuItemBg: '#faad14',
darkItemSelectedColor: '#ffccc7',
darkItemSelectedBg: '#52c41a',
- darkPopupBg: 'red',
},
},
}}
@@ -153,24 +151,6 @@ const App: React.FC = () => {
}}
/>
-
-
);
};
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index 5f3731b0c324..af41184e5201 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -295,12 +295,6 @@ export interface ComponentToken {
collapsedIconSize: number;
// Dark
- /**
- * @desc 暗色模式下的浮层菜单的背景颜色
- * @descEN The background color of the overlay menu in dark mode.
- */
- darkPopupBg: string;
-
/**
* @desc 暗色模式下的菜单项文字颜色
* @descEN Color of menu item text in dark mode
@@ -958,7 +952,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
darkItemColor,
darkDangerItemColor,
darkItemBg,
- darkPopupBg,
darkSubMenuItemBg,
darkItemSelectedColor,
darkItemSelectedBg,
@@ -994,7 +987,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
groupTitleColor: darkGroupTitleColor,
itemSelectedColor: darkItemSelectedColor,
itemBg: darkItemBg,
- popupBg: darkPopupBg || darkItemBg,
+ popupBg: darkItemBg,
subMenuItemBg: darkSubMenuItemBg,
itemActiveBg: 'transparent',
itemSelectedBg: darkItemSelectedBg,
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index 842651b0c1ca..d54ed26a7b35 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -1,6 +1,5 @@
import { unit } from '@ant-design/cssinjs';
import type { CSSInterpolation } from '@ant-design/cssinjs';
-
import type { MenuToken } from '.';
import { genFocusOutline } from '../../style';
@@ -160,10 +159,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
backgroundColor: menuSubMenuBg,
},
- [`&${componentCls}-submenu-popup > ${componentCls}`]: {
- backgroundColor: popupBg,
- },
-
[`&${componentCls}-popup > ${componentCls}`]: {
backgroundColor: popupBg,
},
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index 1a8f723abd2b..d4f6005ee4fe 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -3,6 +3,7 @@ import type { CSSProperties } from 'react';
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -186,7 +187,7 @@ const genMessageStyle: GenerateStyle
= (token) => {
};
export const prepareComponentToken: GetDefaultToken<'Message'> = (token) => ({
- zIndexPopup: token.zIndexPopupBase + 10,
+ zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
contentBg: token.colorBgElevated,
contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
token.paddingSM
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index ff3c064f1bcf..7e4c71996483 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -5,11 +5,13 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
import classNames from 'classnames';
+import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
import { getTransitionName } from '../_util/motion';
import { devUseWarning } from '../_util/warning';
import type { ThemeConfig } from '../config-provider';
import ConfigProvider from '../config-provider';
import { useLocale } from '../locale';
+import useToken from '../theme/useToken';
import CancelBtn from './components/ConfirmCancelBtn';
import OkBtn from './components/ConfirmOkBtn';
import type { ModalContextProps } from './context';
@@ -31,6 +33,10 @@ export interface ConfirmDialogProps extends ModalFuncProps {
autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls?: string;
iconPrefixCls?: string;
+
+ /**
+ * Only passed by static method
+ */
theme?: ThemeConfig;
/** @private Internal Usage. Do not override this */
@@ -177,8 +183,6 @@ const ConfirmDialog: React.FC = (props) => {
prefixCls,
wrapClassName,
rootPrefixCls,
- iconPrefixCls,
- theme,
bodyStyle,
closable = false,
closeIcon,
@@ -215,6 +219,63 @@ const ConfirmDialog: React.FC = (props) => {
props.className,
);
+ // ========================= zIndex =========================
+ const [, token] = useToken();
+
+ const mergedZIndex = React.useMemo(() => {
+ if (zIndex !== undefined) {
+ return zIndex;
+ }
+
+ // Static always use max zIndex
+ return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+ }, [zIndex, token]);
+
+ // ========================= Render =========================
+ return (
+ {
+ close?.({ triggerCancel: true });
+ onConfirm?.(false);
+ }}
+ open={open}
+ title=""
+ footer={null}
+ transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
+ maskTransitionName={getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName)}
+ mask={mask}
+ maskClosable={maskClosable}
+ style={style}
+ styles={{
+ body: bodyStyle,
+ mask: maskStyle,
+ ...styles,
+ }}
+ width={width}
+ zIndex={mergedZIndex}
+ afterClose={afterClose}
+ keyboard={keyboard}
+ centered={centered}
+ getContainer={getContainer}
+ closable={closable}
+ closeIcon={closeIcon}
+ modalRender={modalRender}
+ focusTriggerAfterClose={focusTriggerAfterClose}
+ >
+
+ );
+};
+
+const ConfirmDialogWrapper: React.FC = (props) => {
+ const { rootPrefixCls, iconPrefixCls, direction, theme } = props;
+
return (
= (props) => {
direction={direction}
theme={theme}
>
- {
- close?.({ triggerCancel: true });
- onConfirm?.(false);
- }}
- open={open}
- title=""
- footer={null}
- transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
- maskTransitionName={getTransitionName(
- rootPrefixCls || '',
- 'fade',
- props.maskTransitionName,
- )}
- mask={mask}
- maskClosable={maskClosable}
- style={style}
- styles={{
- body: bodyStyle,
- mask: maskStyle,
- ...styles,
- }}
- width={width}
- zIndex={zIndex}
- afterClose={afterClose}
- keyboard={keyboard}
- centered={centered}
- getContainer={getContainer}
- closable={closable}
- closeIcon={closeIcon}
- modalRender={modalRender}
- focusTriggerAfterClose={focusTriggerAfterClose}
- >
-
+
);
};
if (process.env.NODE_ENV !== 'production') {
ConfirmDialog.displayName = 'ConfirmDialog';
+ ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
}
-export default ConfirmDialog;
+export default ConfirmDialogWrapper;
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index e214278cd970..f45cbb2bb105 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -674,7 +674,7 @@ exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] =
aria-checked="false"
class="ant-switch"
role="switch"
- style="position: relative; z-index: 4000;"
+ style="position: relative; z-index: 0;"
type="button"
>
{
{
instance = modal.confirm({
+ zIndex: 903,
content: (
{(name) => {name}
}
@@ -55,6 +56,10 @@ describe('Modal.hook', () => {
expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy();
expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy();
+ expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+ zIndex: '903',
+ });
+
// Update instance
act(() => {
instance.update({
diff --git a/components/modal/demo/nested.tsx b/components/modal/demo/nested.tsx
index d48ca08f51e0..45095455deef 100644
--- a/components/modal/demo/nested.tsx
+++ b/components/modal/demo/nested.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Modal, Select, Switch } from 'antd';
+import { Button, message, Modal, notification, Select, Space, Switch } from 'antd';
const options = [
{
@@ -12,13 +12,16 @@ const options = [
},
];
-const App: React.FC = () => {
+const Demo: React.FC = () => {
+ const [messageInstance, messageHolder] = message.useMessage();
+ const [notificationInstance, notificationHolder] = notification.useNotification();
+
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<>
setIsModalOpen(open)}
@@ -78,12 +81,50 @@ const App: React.FC = () => {
},
}}
>
-
+ {
+ Modal.confirm({
+ title: 'Are you OK?',
+ content: 'I am OK',
+ });
+ }}
+ >
+ Static Confirm
+
+
+ {
+ message.success('Hello World');
+ notification.success({
+ message: 'Hello World',
+ });
+ }}
+ >
+ Static Message, Notification
+
+
+ {
+ messageInstance.success('Hello World');
+ notificationInstance.success({
+ message: 'Hello World',
+ });
+ }}
+ >
+ Hook Message, Notification
+
+
+
+
+ {messageHolder}
+ {notificationHolder}
);
};
-export default App;
+export default Demo;
diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
index 556d54a6c83e..f55d68ec412e 100644
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@@ -1,7 +1,9 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genNotificationPlacementStyle from './placement';
import genStackStyle from './stack';
@@ -258,7 +260,7 @@ const genNotificationStyle: GenerateStyle = (token) => {
// ============================== Export ==============================
export const prepareComponentToken = (token: AliasToken) => ({
- zIndexPopup: token.zIndexPopupBase + 50,
+ zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
width: 384,
closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
});
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0ae0d9065693..5100bf3afca5 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -813,7 +813,7 @@ Array [
,
Notes for developers
+>
+> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
+>
+>
+
2. Create `lib/AntdRegistry.tsx`
@@ -160,6 +166,12 @@ If you are using the Pages Router in Next.js and using antd as your component li
1. Install `@ant-design/cssinjs`
+> Notes for developers
+>
+> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
+>
+>
+
2. Rewrite `pages/_document.tsx`
diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md
index 932661690f09..f21835090402 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -58,6 +58,12 @@ export default Home;
1. 安装 `@ant-design/cssinjs`
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+>
+
2. 创建 `lib/AntdRegistry.tsx`
@@ -160,6 +166,12 @@ export default HomePage;
1. 安装 `@ant-design/cssinjs`
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+>
+
2. 改写 `pages/_document.tsx`
diff --git a/scripts/ci-mock-project-build.sh b/scripts/ci-mock-project-build.sh
index 6c559be160c4..d54b0f19860a 100644
--- a/scripts/ci-mock-project-build.sh
+++ b/scripts/ci-mock-project-build.sh
@@ -3,14 +3,23 @@
# clean up
rm -rf ~tmpProj/
+# clean up `packageManager` since this will block yarn install
+echo "Cleaning up package.json..."
+sed -i '/packageManager/d' 'package.json' # linux no need for `''`
+sed -i '' '/packageManager/d' 'package.json' # mac need `''`
+
# clone project
+echo "Cloning project..."
git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
# change directory
+echo "Changing directory..."
cd ~tmpProj/examples/with-nextjs-inline-style
# install dependencies
+echo "Installing dependencies..."
yarn
# build
+echo "Building..."
yarn run build
diff --git a/scripts/post-script.ts b/scripts/post-script.ts
index 6bbeb54c5c57..501b97aa8ccb 100644
--- a/scripts/post-script.ts
+++ b/scripts/post-script.ts
@@ -49,6 +49,7 @@ const DEPRECIATED_VERSION = {
'5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'],
'5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'],
'5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'],
+ '5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'],
} as const;
function matchDeprecated(v: string) {
+