From f0a2695df99d44d117f7e202c0f64a6fec4af773 Mon Sep 17 00:00:00 2001
From: zbw-zbw <64134946+zbw-zbw@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:00:52 +0800
Subject: [PATCH 1/8] site(Header): increase z-index (#45890)

Co-authored-by: zbw01218944 <zbw01218944@alibaba-inc.com>
---
 .dumi/theme/slots/Header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index af16184672..d4a82e70ef 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -44,7 +44,7 @@ const useStyle = createStyles(({ token, css }) => {
     header: css`
       position: sticky;
       top: 0;
-      z-index: 1000;
+      z-index: 2000;
       max-width: 100%;
       background: ${token.colorBgContainer};
       box-shadow: ${token.boxShadowTertiary};

From 2dda417e2905edd95f65cf0e9c3e059856acbab8 Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Thu, 16 Nov 2023 11:36:51 +0800
Subject: [PATCH 2/8] fix: disabled btn with link should not be focused
 (#45910)

* fix: disabled btn with link should not be focused

* chore: update snapshot

* chore: update snapshot
---
 .../button/__tests__/__snapshots__/demo-extend.test.ts.snap   | 4 ++++
 components/button/__tests__/__snapshots__/demo.test.ts.snap   | 4 ++++
 components/button/__tests__/__snapshots__/index.test.tsx.snap | 1 +
 components/button/button.tsx                                  | 1 +
 .../__tests__/__snapshots__/dropdown-button.test.tsx.snap     | 1 +
 .../flex/__tests__/__snapshots__/demo-extend.test.ts.snap     | 1 +
 components/flex/__tests__/__snapshots__/demo.test.ts.snap     | 1 +
 7 files changed, 13 insertions(+)

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index d1c0a066c4..64a10a2e5c 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -898,6 +898,7 @@ Array [
       <a
         class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
         href="https://www.google.com"
+        tabindex="0"
       >
         <span
           class="ant-btn-icon"
@@ -1072,6 +1073,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
     <a
       class="ant-btn ant-btn-primary"
       href="https://ant.design/index-cn"
+      tabindex="0"
     >
       <span>
         Href Primary
@@ -1080,6 +1082,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
     <a
       class="ant-btn ant-btn-primary ant-btn-disabled"
       href="https://ant.design/index-cn"
+      tabindex="-1"
     >
       <span>
         Href Primary(disabled)
@@ -1550,6 +1553,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
     <a
       class="ant-btn ant-btn-default ant-btn-icon-only"
       href="https://www.google.com"
+      tabindex="0"
     >
       <span
         class="ant-btn-icon"
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index c2506f7054..b3efc2f8b0 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -805,6 +805,7 @@ Array [
       <a
         class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
         href="https://www.google.com"
+        tabindex="0"
       >
         <span
           class="ant-btn-icon"
@@ -977,6 +978,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
     <a
       class="ant-btn ant-btn-primary"
       href="https://ant.design/index-cn"
+      tabindex="0"
     >
       <span>
         Href Primary
@@ -985,6 +987,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
     <a
       class="ant-btn ant-btn-primary ant-btn-disabled"
       href="https://ant.design/index-cn"
+      tabindex="-1"
     >
       <span>
         Href Primary(disabled)
@@ -1375,6 +1378,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
     <a
       class="ant-btn ant-btn-default ant-btn-icon-only"
       href="https://www.google.com"
+      tabindex="0"
     >
       <span
         class="ant-btn-icon"
diff --git a/components/button/__tests__/__snapshots__/index.test.tsx.snap b/components/button/__tests__/__snapshots__/index.test.tsx.snap
index 14af7fb3be..88a1b6a324 100644
--- a/components/button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -383,6 +383,7 @@ exports[`Button should support link button 1`] = `
 <a
   class="ant-btn ant-btn-default"
   href="https://ant.design"
+  tabindex="0"
   target="_blank"
 >
   <span>
diff --git a/components/button/button.tsx b/components/button/button.tsx
index d224167f09..ef67defd8a 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -263,6 +263,7 @@ const InternalButton: React.ForwardRefRenderFunction<
         style={fullStyle}
         onClick={handleClick}
         ref={buttonRef as React.Ref<HTMLAnchorElement>}
+        tabIndex={mergedDisabled ? -1 : 0}
       >
         {iconNode}
         {kids}
diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
index d18d6490a2..a6fd8e063e 100644
--- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
+++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`DropdownButton should support href like Button 1`] = `
   <a
     class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     href="https://ant.design"
+    tabindex="0"
   />
   <button
     class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3b3773654d..6b20f73f7e 100644
--- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -293,6 +293,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
         <a
           class="ant-btn ant-btn-primary"
           href="https://ant.design"
+          tabindex="0"
           target="_blank"
         >
           <span>
diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
index 3bd7aec005..6d50abb1f5 100644
--- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
@@ -289,6 +289,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
         <a
           class="ant-btn ant-btn-primary"
           href="https://ant.design"
+          tabindex="0"
           target="_blank"
         >
           <span>

From efbaf8d186205ae9bdd20032fe17c7adae93afe9 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Thu, 16 Nov 2023 20:14:27 +0800
Subject: [PATCH 3/8] chore: update Next.js docs (#45907)

* docs: update Nextjs docs

* Update use-with-next.en-US.md

Signed-off-by: lijianan <574980606@qq.com>

* Update use-with-next.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* update

* Update use-with-next.en-US.md

Signed-off-by: lijianan <574980606@qq.com>

* Update use-with-next.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
---
 docs/react/use-with-next.en-US.md | 8 ++++++++
 docs/react/use-with-next.zh-CN.md | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md
index ba17657503..4d88094df7 100644
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@@ -57,6 +57,10 @@ If you are using the App Router in Next.js and using antd as your component libr
 
 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)
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. Create `lib/AntdRegistry.tsx`
@@ -159,6 +163,10 @@ 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)
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 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 eee7b29211..23ae50f8e3 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -57,6 +57,10 @@ export default Home;
 
 1. 安装 `@ant-design/cssinjs`
 
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. 创建 `lib/AntdRegistry.tsx`
@@ -159,6 +163,10 @@ export default HomePage;
 
 1. 安装 `@ant-design/cssinjs`
 
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. 改写 `pages/_document.tsx`

From dd05e18bcacec946b2083fedd05ddfb8d9b8a045 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 17 Nov 2023 09:49:54 +0800
Subject: [PATCH 4/8] chore: add image to Next.js doc (#45929)

* chore: add image to Next.js doc

* Update use-with-next.en-US.md

Signed-off-by: lijianan <574980606@qq.com>

* Update use-with-next.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
---
 docs/react/use-with-next.en-US.md | 4 ++++
 docs/react/use-with-next.zh-CN.md | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md
index 4d88094df7..120fb6bf33 100644
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@@ -60,6 +60,8 @@ If you are using the App Router in Next.js and using antd as your component libr
 > 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)
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
 
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
@@ -166,6 +168,8 @@ If you are using the Pages Router in Next.js and using antd as your component li
 > 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)
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
 
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md
index 23ae50f8e3..d145415eed 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -60,6 +60,8 @@ export default Home;
 > 开发者注意事项：
 >
 > 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
 
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
@@ -166,6 +168,8 @@ export default HomePage;
 > 开发者注意事项：
 >
 > 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
 
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 

From 29126fe69c49b2e0f38bb256f4eee3d0958399bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 17 Nov 2023 10:26:03 +0800
Subject: [PATCH 5/8] chore: script update (#45937)

---
 scripts/ci-mock-project-build.sh | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/scripts/ci-mock-project-build.sh b/scripts/ci-mock-project-build.sh
index 6c559be160..d54b0f1986 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

From 9078b2b2119d4eb5c9a82b93a2bdf7b0506381af Mon Sep 17 00:00:00 2001
From: Peach <scdzwyxst@gmail.com>
Date: Fri, 17 Nov 2023 10:44:56 +0800
Subject: [PATCH 6/8] feat: export sider context from layout (#45916)

* feat: export sider context from layout

* refactor: use internal naming
---
 components/layout/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/layout/index.ts b/components/layout/index.ts
index 1cd8a7a70e..843c18b415 100644
--- a/components/layout/index.ts
+++ b/components/layout/index.ts
@@ -1,5 +1,5 @@
 import InternalLayout, { Content, Footer, Header } from './layout';
-import Sider from './Sider';
+import Sider, { SiderContext } from './Sider';
 
 export type { BasicProps as LayoutProps } from './layout';
 export type { SiderProps } from './Sider';
@@ -11,6 +11,8 @@ type CompoundedComponent = InternalLayoutType & {
   Footer: typeof Footer;
   Content: typeof Content;
   Sider: typeof Sider;
+  /** @private Internal Context. Do not use in your production. */
+  _InternalSiderContext: typeof SiderContext;
 };
 
 const Layout = InternalLayout as CompoundedComponent;
@@ -19,5 +21,6 @@ Layout.Header = Header;
 Layout.Footer = Footer;
 Layout.Content = Content;
 Layout.Sider = Sider;
+Layout._InternalSiderContext = SiderContext;
 
 export default Layout;

From dc25579c20bd3dae50ad87b42686ec597f033468 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 17 Nov 2023 10:54:19 +0800
Subject: [PATCH 7/8] fix: zIndex miss of message (#45911)

* fix: zIndex miss of message

* fix: modal static index

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: fix zIndex test

* test: update test case

* chore: clean up

* test: coverage
---
 .dumi/theme/slots/Header/index.tsx            |   2 +-
 components/_util/__tests__/useZIndex.test.tsx |  37 +++++-
 components/_util/hooks/useZIndex.tsx          |  30 +++--
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  48 ++++----
 .../__snapshots__/demo-extend.test.tsx.snap   |  12 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 components/message/style/index.tsx            |   6 +-
 components/modal/ConfirmDialog.tsx            | 110 +++++++++++-------
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__snapshots__/demo.test.tsx.snap          |   2 +-
 components/modal/__tests__/hook.test.tsx      |   5 +
 components/modal/demo/nested.tsx              |  51 +++++++-
 components/notification/style/index.ts        |   6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 scripts/post-script.ts                        |   1 +
 19 files changed, 224 insertions(+), 108 deletions(-)

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index d4a82e70ef..af16184672 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -44,7 +44,7 @@ const useStyle = createStyles(({ token, css }) => {
     header: css`
       position: sticky;
       top: 0;
-      z-index: 2000;
+      z-index: 1000;
       max-width: 100%;
       background: ${token.colorBgContainer};
       box-shadow: ${token.boxShadowTertiary};
diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
index eb5062efb3..52df2a2252 100644
--- a/components/_util/__tests__/useZIndex.test.tsx
+++ b/components/_util/__tests__/useZIndex.test.tsx
@@ -234,7 +234,8 @@ describe('Test useZIndex hooks', () => {
           );
           render(<App />);
           expect(fn).toHaveBeenLastCalledWith(
-            (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 3 +
+            1000 +
+              containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
               consumerBaseZIndexOffset[key as ZIndexConsumer],
           );
         });
@@ -272,7 +273,7 @@ describe('Test useZIndex hooks', () => {
             comps.forEach((comp) => {
               const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
               const consumerOffset = isColorPicker
-                ? 1000 + containerBaseZIndexOffset.Popover
+                ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
@@ -287,11 +288,12 @@ describe('Test useZIndex hooks', () => {
             comps.forEach((comp) => {
               const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
               const consumerOffset = isColorPicker
-                ? 1000 + containerBaseZIndexOffset.Popover
+                ? containerBaseZIndexOffset.Popover
                 : consumerBaseZIndexOffset[key as ZIndexConsumer];
               expect((comp as HTMLDivElement).style.zIndex).toBe(
                 String(
-                  (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
+                  1000 +
+                    containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
                     consumerOffset,
                 ),
               );
@@ -317,7 +319,8 @@ describe('Test useZIndex hooks', () => {
 
             expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
               String(
-                (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
+                1000 +
+                  containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
                   consumerBaseZIndexOffset[key as ZIndexConsumer],
               ),
             );
@@ -328,4 +331,28 @@ describe('Test useZIndex hooks', () => {
       });
     });
   });
+
+  it('Modal static func should always use max zIndex', async () => {
+    jest.useFakeTimers();
+
+    const instance = Modal.confirm({
+      title: 'bamboo',
+      content: 'little',
+    });
+
+    await waitFakeTimer();
+
+    expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+      zIndex: '2000',
+    });
+
+    instance.destroy();
+
+    await waitFakeTimer();
+
+    // Clean up for static method
+    document.body.innerHTML = '';
+
+    jest.useRealTimers();
+  });
 });
diff --git a/components/_util/hooks/useZIndex.tsx b/components/_util/hooks/useZIndex.tsx
index be90054cf4..33a4726e91 100644
--- a/components/_util/hooks/useZIndex.tsx
+++ b/components/_util/hooks/useZIndex.tsx
@@ -7,13 +7,23 @@ export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'T
 
 export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';
 
+// Z-Index control range
+// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
+// Popover: offset 50
+// Notification: Container Max zIndex + componentOffset
+
+const CONTAINER_OFFSET = 100;
+const CONTAINER_OFFSET_MAX_COUNT = 10;
+
+export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
+
 export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
-  Modal: 0,
-  Drawer: 0,
-  Popover: 70,
-  Popconfirm: 70,
-  Tooltip: 70,
-  Tour: 70,
+  Modal: CONTAINER_OFFSET,
+  Drawer: CONTAINER_OFFSET,
+  Popover: CONTAINER_OFFSET,
+  Popconfirm: CONTAINER_OFFSET,
+  Tooltip: CONTAINER_OFFSET,
+  Tour: CONTAINER_OFFSET,
 };
 export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
   SelectLike: 50,
@@ -35,7 +45,13 @@ export function useZIndex(
   const isContainer = isContainerType(componentType);
   let zIndex = parentZIndex ?? 0;
   if (isContainer) {
-    zIndex += token.zIndexPopupBase + containerBaseZIndexOffset[componentType];
+    zIndex +=
+      // Use preset token zIndex by default but not stack when has parent container
+      (parentZIndex ? 0 : token.zIndexPopupBase) +
+      // Container offset
+      containerBaseZIndexOffset[componentType];
+
+    zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
   } else {
     zIndex += consumerBaseZIndexOffset[componentType];
   }
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 359e1128f3..69105054c4 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -439,7 +439,7 @@ Array [
                 </span>
                 <div
                   class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
                 >
                   <div
                     class="ant-tooltip-arrow"
@@ -822,7 +822,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -948,7 +948,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -1074,7 +1074,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1b06c54833..02bf8b6337 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -159,7 +159,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -542,7 +542,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -927,7 +927,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1310,7 +1310,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1698,7 +1698,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2060,7 +2060,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2385,7 +2385,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -2793,7 +2793,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -3419,7 +3419,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -4069,7 +4069,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div
@@ -4900,7 +4900,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                               >
                                 <div>
                                   <div
@@ -5290,7 +5290,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -6050,7 +6050,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 150; width: 68px;"
                   >
                     <div>
                       <div
@@ -6453,7 +6453,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -6833,7 +6833,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7213,7 +7213,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7606,7 +7606,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7991,7 +7991,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8376,7 +8376,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8772,7 +8772,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9159,7 +9159,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9563,7 +9563,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9944,7 +9944,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -10327,7 +10327,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index c01bd5256e..ad975b9934 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1049,7 +1049,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1226,7 +1226,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1408,7 +1408,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1635,7 +1635,7 @@ Array [
                             </div>
                             <div
                               class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                             >
                               <div
                                 class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
@@ -2867,7 +2867,7 @@ Array [
             </button>
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
-              style="z-index: 2000;"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div
@@ -3537,7 +3537,7 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
             Some contents...
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
-              style="z-index: 2000;"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 192ce4f1f4..6492d8b21a 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -21299,7 +21299,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index f58d433bf3..91a5b5b6ff 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -1,7 +1,9 @@
 // deps-lint-skip-all
+import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { CSSProperties } from 'react';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -195,7 +197,7 @@ export default genComponentStyleHook(
     return [genMessageStyle(combinedToken)];
   },
   (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 ff3c064f1b..7e4c719964 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<ConfirmDialogProps> = (props) => {
     prefixCls,
     wrapClassName,
     rootPrefixCls,
-    iconPrefixCls,
-    theme,
     bodyStyle,
     closable = false,
     closeIcon,
@@ -215,6 +219,63 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (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 (
+    <Dialog
+      prefixCls={prefixCls}
+      className={classString}
+      wrapClassName={classNames(
+        { [`${confirmPrefixCls}-centered`]: !!props.centered },
+        wrapClassName,
+      )}
+      onCancel={() => {
+        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}
+    >
+      <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
+    </Dialog>
+  );
+};
+
+const ConfirmDialogWrapper: React.FC<ConfirmDialogProps> = (props) => {
+  const { rootPrefixCls, iconPrefixCls, direction, theme } = props;
+
   return (
     <ConfigProvider
       prefixCls={rootPrefixCls}
@@ -222,53 +283,14 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       direction={direction}
       theme={theme}
     >
-      <Dialog
-        prefixCls={prefixCls}
-        className={classString}
-        wrapClassName={classNames(
-          { [`${confirmPrefixCls}-centered`]: !!props.centered },
-          wrapClassName,
-        )}
-        onCancel={() => {
-          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}
-      >
-        <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
-      </Dialog>
+      <ConfirmDialog {...props} />
     </ConfigProvider>
   );
 };
 
 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 e214278cd9..f45cbb2bb1 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"
 >
   <div
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index 6cb2a465a4..21e8d6d062 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -644,7 +644,7 @@ exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
   aria-checked="false"
   class="ant-switch"
   role="switch"
-  style="position:relative;z-index:4000"
+  style="position:relative;z-index:0"
   type="button"
 >
   <div
diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx
index 3ed782691a..cdf94dedb2 100644
--- a/components/modal/__tests__/hook.test.tsx
+++ b/components/modal/__tests__/hook.test.tsx
@@ -35,6 +35,7 @@ describe('Modal.hook', () => {
           <Button
             onClick={() => {
               instance = modal.confirm({
+                zIndex: 903,
                 content: (
                   <Context.Consumer>
                     {(name) => <div className="test-hook">{name}</div>}
@@ -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 d48ca08f51..45095455de 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<boolean>(false);
 
   return (
     <>
       <Switch
-        style={{ position: 'relative', zIndex: 4000 }}
+        style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
         checkedChildren="Open"
         unCheckedChildren="Close"
         onChange={(open) => setIsModalOpen(open)}
@@ -78,12 +81,50 @@ const App: React.FC = () => {
               },
             }}
           >
-            <Select open value="1" options={options} />
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  Modal.confirm({
+                    title: 'Are you OK?',
+                    content: 'I am OK',
+                  });
+                }}
+              >
+                Static Confirm
+              </Button>
+
+              <Button
+                onClick={() => {
+                  message.success('Hello World');
+                  notification.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Static Message, Notification
+              </Button>
+
+              <Button
+                onClick={() => {
+                  messageInstance.success('Hello World');
+                  notificationInstance.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Hook Message, Notification
+              </Button>
+
+              <Select open value="1" options={options} />
+            </Space>
           </Modal>
         </Modal>
       </Modal>
+
+      {messageHolder}
+      {notificationHolder}
     </>
   );
 };
 
-export default App;
+export default Demo;
diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
index 9cb156fba1..48e95294cd 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 } 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';
@@ -255,7 +257,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
 // ============================== Export ==============================
 export const prepareComponentToken = (token: AliasToken) => ({
-  zIndexPopup: token.zIndexPopupBase + 50,
+  zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
 });
 
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0ae0d90656..5100bf3afc 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 [
   </button>,
   <div
     class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
   >
     <div
       class="ant-popover-arrow"
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index b60e671f5b..ddac8b825d 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
               </div>
               <div
                 class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
-                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
               >
                 <div
                   class="ant-picker-panel-container"
@@ -11388,7 +11388,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                 >
                   <div>
                     <div
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0fcdb950ba..4c2f994cd0 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1566,7 +1566,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
       </div>
       <div
         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
       >
         <div>
           <div
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index bd23d89a07..bdbac0ff09 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -275,7 +275,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div
diff --git a/scripts/post-script.ts b/scripts/post-script.ts
index 6bbeb54c5c..501b97aa8c 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) {

From 6cfbace3cd54f0c6504841871047124925991a8a Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Fri, 17 Nov 2023 14:09:58 +0800
Subject: [PATCH 8/8] revert: menu token (#45939)

* chore: migrate to webpack@5

* Revert "feat: support popupBg and darkPopupBg (#45826)"

This reverts commit 496ac3326f21d9be82d1d6ee713f4659b7a2ddcc.

* chore: update
---
 .../__snapshots__/demo-extend.test.ts.snap    | 734 ------------------
 .../__snapshots__/demo.test.tsx.snap          | 185 -----
 components/menu/demo/component-token.tsx      |  22 +-
 components/menu/style/index.tsx               |  13 +-
 components/menu/style/theme.tsx               |   5 -
 5 files changed, 3 insertions(+), 956 deletions(-)

diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index c546f540df..9a45484846 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1227,740 +1227,6 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
       </div>
     </div>
   </div>
-  <div
-    class="ant-space-item"
-  >
-    <ul
-      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
-      data-menu-list="true"
-      role="menu"
-      tabindex="0"
-    >
-      <li
-        class="ant-menu-item ant-menu-item-selected"
-        data-menu-id="rc-menu-uuid-test-1"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="pie-chart"
-          class="anticon anticon-pie-chart ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="pie-chart"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 1
-        </span>
-      </li>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 1
-          </div>
-        </div>
-      </div>
-      <li
-        class="ant-menu-item"
-        data-menu-id="rc-menu-uuid-test-2"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="desktop"
-          class="anticon anticon-desktop ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="desktop"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 2
-        </span>
-      </li>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 2
-          </div>
-        </div>
-      </div>
-      <li
-        class="ant-menu-item"
-        data-menu-id="rc-menu-uuid-test-3"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="container"
-          class="anticon anticon-container ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="container"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 3
-        </span>
-      </li>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 3
-          </div>
-        </div>
-      </div>
-      <li
-        class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
-        role="none"
-      >
-        <div
-          aria-controls="rc-menu-uuid-test-sub1-popup"
-          aria-expanded="true"
-          aria-haspopup="true"
-          class="ant-menu-submenu-title"
-          data-menu-id="rc-menu-uuid-test-sub1"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            aria-label="mail"
-            class="anticon anticon-mail ant-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="mail"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-menu-title-content"
-          >
-            Navigation One
-          </span>
-          <i
-            class="ant-menu-submenu-arrow"
-          />
-        </div>
-        <div
-          class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
-          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-        >
-          <ul
-            class="ant-menu ant-menu-sub ant-menu-vertical"
-            data-menu-list="true"
-            id="rc-menu-uuid-test-sub1-popup"
-            role="menu"
-          >
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-5"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 5
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-6"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 6
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-7"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 7
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-8"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 8
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-          </ul>
-        </div>
-      </li>
-      <li
-        class="ant-menu-submenu ant-menu-submenu-vertical"
-        role="none"
-      >
-        <div
-          aria-controls="rc-menu-uuid-test-sub2-popup"
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-menu-submenu-title"
-          data-menu-id="rc-menu-uuid-test-sub2"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            aria-label="appstore"
-            class="anticon anticon-appstore ant-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="appstore"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-menu-title-content"
-          >
-            Navigation Two
-          </span>
-          <i
-            class="ant-menu-submenu-arrow"
-          />
-        </div>
-        <div
-          class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
-          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-        >
-          <ul
-            class="ant-menu ant-menu-sub ant-menu-vertical"
-            data-menu-list="true"
-            id="rc-menu-uuid-test-sub2-popup"
-            role="menu"
-          >
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-9"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 9
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-            <li
-              class="ant-menu-item ant-menu-item-only-child"
-              data-menu-id="rc-menu-uuid-test-10"
-              role="menuitem"
-              tabindex="-1"
-            >
-              <span
-                class="ant-menu-title-content"
-              >
-                Option 10
-              </span>
-            </li>
-            <div
-              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-            >
-              <div
-                class="ant-tooltip-arrow"
-                style="position: absolute; top: 0px; left: 0px;"
-              />
-              <div
-                class="ant-tooltip-content"
-              >
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                />
-              </div>
-            </div>
-            <li
-              class="ant-menu-submenu ant-menu-submenu-vertical"
-              role="none"
-            >
-              <div
-                aria-controls="rc-menu-uuid-test-sub3-popup"
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="ant-menu-submenu-title"
-                data-menu-id="rc-menu-uuid-test-sub3"
-                role="menuitem"
-                tabindex="-1"
-              >
-                <span
-                  class="ant-menu-title-content"
-                >
-                  Submenu
-                </span>
-                <i
-                  class="ant-menu-submenu-arrow"
-                />
-              </div>
-              <div
-                class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
-                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-              >
-                <ul
-                  class="ant-menu ant-menu-sub ant-menu-vertical"
-                  data-menu-list="true"
-                  id="rc-menu-uuid-test-sub3-popup"
-                  role="menu"
-                >
-                  <li
-                    class="ant-menu-item ant-menu-item-only-child"
-                    data-menu-id="rc-menu-uuid-test-11"
-                    role="menuitem"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="ant-menu-title-content"
-                    >
-                      Option 11
-                    </span>
-                  </li>
-                  <div
-                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-                  >
-                    <div
-                      class="ant-tooltip-arrow"
-                      style="position: absolute; top: 0px; left: 0px;"
-                    />
-                    <div
-                      class="ant-tooltip-content"
-                    >
-                      <div
-                        class="ant-tooltip-inner"
-                        role="tooltip"
-                      />
-                    </div>
-                  </div>
-                  <li
-                    class="ant-menu-item ant-menu-item-only-child"
-                    data-menu-id="rc-menu-uuid-test-12"
-                    role="menuitem"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="ant-menu-title-content"
-                    >
-                      Option 12
-                    </span>
-                  </li>
-                  <div
-                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-                  >
-                    <div
-                      class="ant-tooltip-arrow"
-                      style="position: absolute; top: 0px; left: 0px;"
-                    />
-                    <div
-                      class="ant-tooltip-content"
-                    >
-                      <div
-                        class="ant-tooltip-inner"
-                        role="tooltip"
-                      />
-                    </div>
-                  </div>
-                </ul>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-    <div
-      aria-hidden="true"
-      style="display: none;"
-    >
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 1
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 2
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Option 3
-          </div>
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-      >
-        <div
-          class="ant-tooltip-arrow"
-          style="position: absolute; top: 0px; left: 0px;"
-        />
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
diff --git a/components/menu/__tests__/__snapshots__/demo.test.tsx.snap b/components/menu/__tests__/__snapshots__/demo.test.tsx.snap
index 0baff728e5..92374427b1 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"
     />
   </div>
-  <div
-    class="ant-space-item"
-  >
-    <ul
-      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
-      data-menu-list="true"
-      role="menu"
-      tabindex="0"
-    >
-      <li
-        class="ant-menu-item ant-menu-item-selected"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="pie-chart"
-          class="anticon anticon-pie-chart ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="pie-chart"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 1
-        </span>
-      </li>
-      <li
-        class="ant-menu-item"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="desktop"
-          class="anticon anticon-desktop ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="desktop"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 2
-        </span>
-      </li>
-      <li
-        class="ant-menu-item"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="container"
-          class="anticon anticon-container ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="container"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Option 3
-        </span>
-      </li>
-      <li
-        class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
-        role="none"
-      >
-        <div
-          aria-expanded="true"
-          aria-haspopup="true"
-          class="ant-menu-submenu-title"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            aria-label="mail"
-            class="anticon anticon-mail ant-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="mail"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-menu-title-content"
-          >
-            Navigation One
-          </span>
-          <i
-            class="ant-menu-submenu-arrow"
-          />
-        </div>
-      </li>
-      <li
-        class="ant-menu-submenu ant-menu-submenu-vertical"
-        role="none"
-      >
-        <div
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-menu-submenu-title"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            aria-label="appstore"
-            class="anticon anticon-appstore ant-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="appstore"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-menu-title-content"
-          >
-            Navigation Two
-          </span>
-          <i
-            class="ant-menu-submenu-arrow"
-          />
-        </div>
-      </li>
-    </ul>
-    <div
-      aria-hidden="true"
-      style="display:none"
-    />
-  </div>
 </div>
 `;
 
diff --git a/components/menu/demo/component-token.tsx b/components/menu/demo/component-token.tsx
index 340b4fb9a2..5cce0cf0d4 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 = () => {
           }}
         />
       </ConfigProvider>
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              darkPopupBg: 'red',
-            },
-          },
-        }}
-      >
-        <Menu
-          inlineCollapsed
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
-          mode="inline"
-          theme="dark"
-          items={items2}
-        />
-      </ConfigProvider>
     </Space>
   );
 };
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index fe821e8fcf..ef5f9cfda6 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -1,7 +1,6 @@
-import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-
+import type { CSSProperties } from 'react';
 import { clearFix, resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
@@ -288,12 +287,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
@@ -821,7 +814,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         darkItemColor,
         darkDangerItemColor,
         darkItemBg,
-        darkPopupBg,
         darkSubMenuItemBg,
         darkItemSelectedColor,
         darkItemSelectedBg,
@@ -852,7 +844,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,
@@ -1008,7 +1000,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         darkItemColor: colorTextDark,
         darkDangerItemColor: colorError,
         darkItemBg: '#001529',
-        darkPopupBg: '#001529',
         darkSubMenuItemBg: '#000c17',
         darkItemSelectedColor: colorTextLightSolid,
         darkItemSelectedBg: colorPrimary,
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index ffcfecf729..3b2215b924 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -1,5 +1,4 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-
 import type { MenuToken } from '.';
 import { genFocusOutline } from '../../style';
 
@@ -159,10 +158,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
         backgroundColor: menuSubMenuBg,
       },
 
-      [`&${componentCls}-submenu-popup > ${componentCls}`]: {
-        backgroundColor: popupBg,
-      },
-
       [`&${componentCls}-popup > ${componentCls}`]: {
         backgroundColor: popupBg,
       },