From d7ec14a8d575a94cd81d05b9bc1f8a12cb0550a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 14 May 2025 17:36:21 +0800
Subject: [PATCH 1/2] chore: update ref logic

---
 src/Placeholder.tsx | 31 +++++++++++++++++++++++++++++++
 src/Tour.tsx        | 38 ++++++++++++++++++--------------------
 2 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 src/Placeholder.tsx

diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx
new file mode 100644
index 0000000..c050b0b
--- /dev/null
+++ b/src/Placeholder.tsx
@@ -0,0 +1,31 @@
+import Portal, { type PortalProps } from '@rc-component/portal';
+import * as React from 'react';
+
+export interface PlaceholderProps
+  extends Pick<PortalProps, 'open' | 'autoLock' | 'getContainer'> {
+  domRef: React.RefObject<HTMLDivElement>;
+  className: string;
+  style: React.CSSProperties;
+  proxyDom: () => HTMLElement | null;
+}
+
+const Placeholder = React.forwardRef<HTMLElement, PlaceholderProps>(
+  (props, ref) => {
+    const { open, autoLock, getContainer, domRef, className, style, proxyDom } =
+      props;
+
+    React.useImperativeHandle(ref, () => domRef.current || proxyDom());
+
+    return (
+      <Portal open={open} autoLock={autoLock} getContainer={getContainer}>
+        <div ref={domRef} className={className} style={style} />
+      </Portal>
+    );
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  Placeholder.displayName = 'Placeholder';
+}
+
+export default Placeholder;
diff --git a/src/Tour.tsx b/src/Tour.tsx
index 9e167a0..cc8bf0f 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -14,6 +14,7 @@ import Mask from './Mask';
 import { getPlacements } from './placements';
 import TourStep from './TourStep';
 import { getPlacement } from './util';
+import Placeholder from './Placeholder';
 
 const CENTER_PLACEHOLDER: React.CSSProperties = {
   left: '50%',
@@ -201,8 +202,8 @@ const Tour: React.FC<TourProps> = props => {
     typeof mergedMask === 'boolean' ? undefined : mergedMask;
 
   // when targetElement is not exist, use body as triggerDOMNode
-  const getTriggerDOMNode = node => {
-    return node || targetElement || document.body;
+  const proxyDom = () => {
+    return targetElement || document.body;
   };
 
   return (
@@ -237,29 +238,26 @@ const Tour: React.FC<TourProps> = props => {
         forceRender={false}
         autoDestroy
         zIndex={zIndex}
-        getTriggerDOMNode={getTriggerDOMNode}
         arrow={!!mergedArrow}
       >
-        <Portal
+        <Placeholder
           open={mergedOpen}
           autoLock={!inlineMode}
           getContainer={getPopupContainer as any}
-        >
-          <div
-            ref={placeholderRef}
-            className={classNames(
-              className,
-              rootClassName,
-              `${prefixCls}-target-placeholder`,
-            )}
-            style={{
-              ...(posInfo || CENTER_PLACEHOLDER),
-              position: inlineMode ? 'absolute' : 'fixed',
-              pointerEvents: 'none',
-              ...style,
-            }}
-          />
-        </Portal>
+          domRef={placeholderRef}
+          proxyDom={proxyDom}
+          className={classNames(
+            className,
+            rootClassName,
+            `${prefixCls}-target-placeholder`,
+          )}
+          style={{
+            ...(posInfo || CENTER_PLACEHOLDER),
+            position: inlineMode ? 'absolute' : 'fixed',
+            pointerEvents: 'none',
+            ...style,
+          }}
+        />
       </Trigger>
     </>
   );

From 7faa0e788968de267a6d0e0552d7b1c6a3c8b268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 14 May 2025 17:44:39 +0800
Subject: [PATCH 2/2] chore: support fallback

---
 src/Placeholder.tsx | 15 +++++++++++----
 src/Tour.tsx        |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx
index c050b0b..8ba1861 100644
--- a/src/Placeholder.tsx
+++ b/src/Placeholder.tsx
@@ -6,15 +6,22 @@ export interface PlaceholderProps
   domRef: React.RefObject<HTMLDivElement>;
   className: string;
   style: React.CSSProperties;
-  proxyDom: () => HTMLElement | null;
+  fallbackDOM: () => HTMLElement | null;
 }
 
 const Placeholder = React.forwardRef<HTMLElement, PlaceholderProps>(
   (props, ref) => {
-    const { open, autoLock, getContainer, domRef, className, style, proxyDom } =
-      props;
+    const {
+      open,
+      autoLock,
+      getContainer,
+      domRef,
+      className,
+      style,
+      fallbackDOM,
+    } = props;
 
-    React.useImperativeHandle(ref, () => domRef.current || proxyDom());
+    React.useImperativeHandle(ref, () => domRef.current || fallbackDOM());
 
     return (
       <Portal open={open} autoLock={autoLock} getContainer={getContainer}>
diff --git a/src/Tour.tsx b/src/Tour.tsx
index cc8bf0f..fd96306 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -202,7 +202,7 @@ const Tour: React.FC<TourProps> = props => {
     typeof mergedMask === 'boolean' ? undefined : mergedMask;
 
   // when targetElement is not exist, use body as triggerDOMNode
-  const proxyDom = () => {
+  const fallbackDOM = () => {
     return targetElement || document.body;
   };
 
@@ -245,7 +245,7 @@ const Tour: React.FC<TourProps> = props => {
           autoLock={!inlineMode}
           getContainer={getPopupContainer as any}
           domRef={placeholderRef}
-          proxyDom={proxyDom}
+          fallbackDOM={fallbackDOM}
           className={classNames(
             className,
             rootClassName,