From e7acb487f3d485b9af0d8cde38d47764cc23d562 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Wed, 1 Mar 2023 11:14:10 +0800
Subject: [PATCH] feat(tour): tour support custom zIndex (#40982)

* feat: tour support custom zIndex

* feat: update snapshots
---
 .../__snapshots__/index.test.tsx.snap         | 50 +++++++++----------
 components/tour/index.en-US.md                |  1 +
 components/tour/index.zh-CN.md                |  1 +
 package.json                                  |  2 +-
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
index fb6021d9b3..61bfbbfd7c 100644
--- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Tour Primary 1`] = `
     </button>
     <div
       class="ant-tour ant-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1090;"
+      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="ant-tour-arrow"
@@ -80,16 +80,10 @@ exports[`Tour Primary 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
   <div>
     <div
       class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
+      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
     >
       <svg
         style="width: 100%; height: 100%;"
@@ -159,6 +153,12 @@ exports[`Tour Primary 1`] = `
       </svg>
     </div>
   </div>
+  <div>
+    <div
+      class="ant-tour-target-placeholder"
+      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
+    />
+  </div>
 </body>
 `;
 
@@ -209,7 +209,7 @@ exports[`Tour button props onClick 1`] = `
 exports[`Tour custom step pre btn & next btn className & style 1`] = `
 <div
   class="ant-tour ant-tour-placement-bottom"
-  style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1090;"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
 >
   <div
     class="ant-tour-content"
@@ -296,7 +296,7 @@ exports[`Tour single 1`] = `
     </button>
     <div
       class="ant-tour ant-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1090;"
+      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="ant-tour-arrow"
@@ -365,16 +365,10 @@ exports[`Tour single 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
   <div>
     <div
       class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
+      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
     >
       <svg
         style="width: 100%; height: 100%;"
@@ -444,6 +438,12 @@ exports[`Tour single 1`] = `
       </svg>
     </div>
   </div>
+  <div>
+    <div
+      class="ant-tour-target-placeholder"
+      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
+    />
+  </div>
 </body>
 `;
 
@@ -458,7 +458,7 @@ exports[`Tour step support Primary 1`] = `
     </button>
     <div
       class="ant-tour ant-tour-placement-bottom"
-      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1090;"
+      style="left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
         class="ant-tour-arrow"
@@ -545,16 +545,10 @@ exports[`Tour step support Primary 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
   <div>
     <div
       class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
+      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
     >
       <svg
         style="width: 100%; height: 100%;"
@@ -624,6 +618,12 @@ exports[`Tour step support Primary 1`] = `
       </svg>
     </div>
   </div>
+  <div>
+    <div
+      class="ant-tour-target-placeholder"
+      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
+    />
+  </div>
 </body>
 `;
 
diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md
index 64ab0d55e8..457fa1f195 100644
--- a/components/tour/index.en-US.md
+++ b/components/tour/index.en-US.md
@@ -40,6 +40,7 @@ Use when you want to guide users through a product.
 | current | What is the current step | `number` | - |  |
 | scrollIntoViewOptions | support pass custom scrollIntoView options | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
 | indicatorsRender | custom indicator | `(current: number, total: number) => ReactNode` | - | 5.2.0 |
+| zIndex | Tour's zIndex | number | 1001 | 5.3.0 |
 
 ### TourStep
 
diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md
index 9e59c8a125..53e4de3504 100644
--- a/components/tour/index.zh-CN.md
+++ b/components/tour/index.zh-CN.md
@@ -42,6 +42,7 @@ demo:
 | current | 当前处于哪一步 | `number` | - |  |
 | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
 | indicatorsRender | 自定义指示器 | `(current: number, total: number) => ReactNode` | - | 5.2.0 |
+| zIndex | Tour 的层级 | number | 1001 | 5.3.0 |
 
 ### TourStep 引导步骤卡片
 
diff --git a/package.json b/package.json
index 792fb56185..16a2beb7f0 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.6.0",
     "@rc-component/mutate-observer": "^1.0.0",
-    "@rc-component/tour": "~1.7.1",
+    "@rc-component/tour": "~1.8.0",
     "@rc-component/trigger": "^1.3.6",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",