feat(tour): tour support custom zIndex (#40982)

* feat: tour support custom zIndex

* feat: update snapshots

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

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
 

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 引导步骤卡片
 

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",