fix: placement should be center when target is null (#43694)

* fix: placement should be center when target is null

* test: update snapshot

components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -665,7 +665,7 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-tour ant-tour-placement-bottom"
+    class="ant-tour"
     style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
   >
     <div

components/tour/__tests__/__snapshots__/index.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`Tour controlled current 1`] = `
       </button>
     </div>
     <div
-      class="ant-tour ant-tour-primary ant-tour-placement-bottom"
+      class="ant-tour ant-tour-primary"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
@@ -338,7 +338,7 @@ exports[`Tour controlled current 1`] = `
 
 exports[`Tour custom step pre btn & next btn className & style 1`] = `
 <div
-  class="ant-tour ant-tour-placement-bottom"
+  class="ant-tour"
   style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
 >
   <div

components/tour/index.en-US.md

@@ -31,7 +31,7 @@ Use when you want to guide users through a product.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` |  |
-| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | Callback function on shutdown | `Function` | - |  |
 | mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | Type, affects the background color and text color | `default` `primary` | `default` |  |
@@ -51,7 +51,7 @@ Use when you want to guide users through a product.
 | cover | Displayed pictures or videos | `ReactNode` | - |  |
 | title | title | `ReactNode` | - |  |
 | description | description | `ReactNode` | - |  |
-| placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | Callback function on shutdown | `Function` | - |  |
 | mask | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | Type, affects the background color and text color | `default` `primary` | `default` |  |

components/tour/index.zh-CN.md

@@ -32,7 +32,7 @@ demo:
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` |  |
-| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
+| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | 关闭引导时的回调函数 | `Function` | - |  |
 | onFinish | 引导完成时的回调 | `Function` | - |  |
 | mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
@@ -53,7 +53,7 @@ demo:
 | cover | 展示的图片或者视频 | `ReactNode` | - |  |
 | title | 标题 | `ReactNode` | - |  |
 | description | 主要描述部分 | `ReactNode` | - |  |
-| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |  |  |
+| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |  |  |
 | onClose | 关闭引导时的回调函数 | `Function` | - |  |
 | mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |

package.json

@@ -116,7 +116,7 @@
     "@ctrl/tinycolor": "^3.6.0",
     "@rc-component/color-picker": "~1.4.0",
     "@rc-component/mutate-observer": "^1.0.0",
-    "@rc-component/tour": "~1.8.0",
+    "@rc-component/tour": "~1.8.1",
     "@rc-component/trigger": "^1.13.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",