@tent-official/react-walkthrough 1.1.79 → 1.1.81

package/dist/index.js

@@ -567,7 +567,7 @@ var WalkthroughOverlay = ({
   prevColor,
   skipColor
 } = {}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   injectKeyframes();
   const { activeTour } = useGlobalState();
   const instanceIdRef = react.useRef(null);
@@ -591,100 +591,99 @@ var WalkthroughOverlay = ({
   const [popoverHidden, setPopoverHidden] = react.useState(false);
   const displayStepRef = react.useRef(null);
   const displayPosRef = react.useRef(null);
-  const delayDoneForRef = react.useRef(null);
+  const [validSteps, setValidSteps] = react.useState([]);
   const [isDelaying, setIsDelaying] = react.useState(false);
-  const currentTourName = (_a = activeTour == null ? void 0 : activeTour.name) != null ? _a : null;
+  const waitingForElsRef = react.useRef(false);
+  const delayDoneForRef = react.useRef(null);
   react.useEffect(() => {
     var _a2;
     if (!activeTour) {
-      delayDoneForRef.current = null;
-      setIsDelaying(false);
-      return;
-    }
-    if (delayDoneForRef.current === activeTour.name) return;
-    const ms = (_a2 = activeTour.delay) != null ? _a2 : 0;
-    if (ms <= 0) {
-      delayDoneForRef.current = activeTour.name;
-      return;
-    }
-    setIsDelaying(true);
-    const timer = setTimeout(() => {
-      delayDoneForRef.current = activeTour.name;
-      setIsDelaying(false);
-    }, ms);
-    return () => clearTimeout(timer);
-  }, [currentTourName, activeTour]);
-  const [validSteps, setValidSteps] = react.useState([]);
-  const waitingForElsRef = react.useRef(false);
-  const elReadyRef = react.useRef(false);
-  react.useEffect(() => {
-    var _a2, _b2, _c2;
-    if (!activeTour || isDelaying) {
       setValidSteps([]);
+      setIsDelaying(false);
       waitingForElsRef.current = false;
-      elReadyRef.current = false;
+      delayDoneForRef.current = null;
       return;
     }
-    waitingForElsRef.current = true;
+    let cancelled = false;
     const abortController = new AbortController();
     const compute = () => activeTour.steps.map((s, i) => ({ ...s, _originalIdx: i })).filter((s) => document.getElementById(resolveElId(s.el)));
-    const found = compute();
-    if (found.length > 0) {
-      const currentStepIdx = (_a2 = activeTour.currentStep) != null ? _a2 : 0;
-      const currentStepInFound = found.some((s) => s._originalIdx === currentStepIdx);
-      if (currentStepInFound) {
+    const readElements = () => {
+      var _a3, _b2, _c2;
+      if (cancelled) return;
+      waitingForElsRef.current = true;
+      const found = compute();
+      if (found.length > 0) {
+        const currentStepIdx = (_a3 = activeTour.currentStep) != null ? _a3 : 0;
+        const currentStepInFound = found.some((s) => s._originalIdx === currentStepIdx);
+        if (currentStepInFound) {
+          setValidSteps(found);
+          waitingForElsRef.current = false;
+          return;
+        }
         setValidSteps(found);
-        waitingForElsRef.current = false;
-        elReadyRef.current = true;
+        const currentStepEl = (_b2 = activeTour.steps[currentStepIdx]) == null ? void 0 : _b2.el;
+        if (!currentStepEl) {
+          waitingForElsRef.current = false;
+          return;
+        }
+        readElement(currentStepEl, { signal: abortController.signal }).then((el) => {
+          if (el && !cancelled) {
+            waitingForElsRef.current = false;
+            setValidSteps(compute());
+          }
+        });
         return;
       }
-      setValidSteps(found);
-      elReadyRef.current = true;
-      const currentStepEl = (_b2 = activeTour.steps[currentStepIdx]) == null ? void 0 : _b2.el;
-      if (!currentStepEl) {
+      setValidSteps([]);
+      const firstStepEl = (_c2 = activeTour.steps[0]) == null ? void 0 : _c2.el;
+      if (!firstStepEl) {
         waitingForElsRef.current = false;
         return;
       }
-      readElement(currentStepEl, { signal: abortController.signal }).then((el) => {
-        if (el && !abortController.signal.aborted) {
-          waitingForElsRef.current = false;
-          setValidSteps(compute());
+      readElement(firstStepEl, { signal: abortController.signal }).then((el) => {
+        if (el && !cancelled) {
+          const updated = compute();
+          if (updated.length > 0) {
+            waitingForElsRef.current = false;
+            setValidSteps(updated);
+          }
         }
       });
+    };
+    const needsDelay = delayDoneForRef.current !== activeTour.name && ((_a2 = activeTour.delay) != null ? _a2 : 0) > 0;
+    if (needsDelay) {
+      setIsDelaying(true);
+      setValidSteps([]);
+      waitingForElsRef.current = true;
+      const timer = setTimeout(() => {
+        if (cancelled) return;
+        delayDoneForRef.current = activeTour.name;
+        setIsDelaying(false);
+        readElements();
+      }, activeTour.delay);
       return () => {
+        cancelled = true;
+        clearTimeout(timer);
         abortController.abort();
         waitingForElsRef.current = false;
       };
     }
-    setValidSteps([]);
-    const firstStepEl = (_c2 = activeTour.steps[0]) == null ? void 0 : _c2.el;
-    if (!firstStepEl) {
-      waitingForElsRef.current = false;
-      elReadyRef.current = true;
-      return;
-    }
-    readElement(firstStepEl, { signal: abortController.signal }).then((el) => {
-      if (el && !abortController.signal.aborted) {
-        const updated = compute();
-        if (updated.length > 0) {
-          waitingForElsRef.current = false;
-          elReadyRef.current = true;
-          setValidSteps(updated);
-        }
-      }
-    });
+    delayDoneForRef.current = activeTour.name;
+    setIsDelaying(false);
+    readElements();
     return () => {
+      cancelled = true;
       abortController.abort();
       waitingForElsRef.current = false;
     };
-  }, [activeTour, isDelaying]);
-  const currentOriginalIdx = (_b = activeTour == null ? void 0 : activeTour.currentStep) != null ? _b : 0;
+  }, [activeTour]);
+  const currentOriginalIdx = (_a = activeTour == null ? void 0 : activeTour.currentStep) != null ? _a : 0;
   const currentValidPos = validSteps.findIndex(
     (s) => s._originalIdx === currentOriginalIdx
   );
   const rawStep = currentValidPos !== -1 ? validSteps[currentValidPos] : null;
   const step = isDelaying ? null : rawStep;
-  const tourAnimationSpeed = (_c = activeTour == null ? void 0 : activeTour.animationSpeed) != null ? _c : 350;
+  const tourAnimationSpeed = (_b = activeTour == null ? void 0 : activeTour.animationSpeed) != null ? _b : 350;
   const { rect, isAnimating } = useAnimatedRect(step, tourAnimationSpeed, activeTour == null ? void 0 : activeTour.containerElement, !!activeTour, activeTour == null ? void 0 : activeTour.name);
   const completeTour = react.useCallback(() => {
     if (!activeTour) return;
@@ -696,9 +695,13 @@ var WalkthroughOverlay = ({
   react.useEffect(() => {
     if (!activeTour) return;
     if (isDelaying) return;
-    if (!elReadyRef.current) return;
     if (currentValidPos !== -1) return;
     if (waitingForElsRef.current) return;
+    const currentStepDef = activeTour.steps[currentOriginalIdx];
+    if (currentStepDef) {
+      const elInDom = document.getElementById(resolveElId(currentStepDef.el));
+      if (elInDom) return;
+    }
     if (validSteps.length === 0) {
       completeTour();
       return;
@@ -853,10 +856,10 @@ var WalkthroughOverlay = ({
   }
   const totalSteps = validSteps.length;
   const isLast = currentValidPos === totalSteps - 1;
-  const stepOffset = (_d = activeTour.displayStepOffset) != null ? _d : 0;
+  const stepOffset = (_c = activeTour.displayStepOffset) != null ? _c : 0;
   const displayCurrentStep = currentValidPos + 1 + stepOffset;
-  const displayTotalSteps = (_e = activeTour.displayTotal) != null ? _e : totalSteps;
-  const borderRadius = (_f = step.borderRadius) != null ? _f : 10;
+  const displayTotalSteps = (_d = activeTour.displayTotal) != null ? _d : totalSteps;
+  const borderRadius = (_e = step.borderRadius) != null ? _e : 10;
   const {
     isShowSkip = true,
     isShowPrev = true,
@@ -866,22 +869,11 @@ var WalkthroughOverlay = ({
     skipLabel: tourSkipLabel = "Skip",
     doneLabel = "Done"
   } = activeTour;
-  const nextLabel = (_g = step.nextLabel) != null ? _g : tourNextLabel;
-  const prevLabel = (_h = step.prevLabel) != null ? _h : tourPrevLabel;
-  const skipLabel = (_i = step.skipLabel) != null ? _i : tourSkipLabel;
-  const next = () => {
+  const nextLabel = (_f = step.nextLabel) != null ? _f : tourNextLabel;
+  const prevLabel = (_g = step.prevLabel) != null ? _g : tourPrevLabel;
+  const skipLabel = (_h = step.skipLabel) != null ? _h : tourSkipLabel;
+  const advanceStep = (hasTrigger) => {
     var _a2;
-    const hasTrigger = !!step.triggerElOnNext;
-    if (hasTrigger) {
-      const triggerTarget = typeof step.triggerElOnNext === "string" ? document.getElementById(resolveElId(step.triggerElOnNext)) : document.getElementById(resolveElId(step.el));
-      if (triggerTarget) {
-        triggerTarget.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true, button: 0, ctrlKey: false, pointerId: 1, pointerType: "mouse" }));
-        triggerTarget.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: 0 }));
-        triggerTarget.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, cancelable: true, button: 0, ctrlKey: false, pointerId: 1, pointerType: "mouse" }));
-        triggerTarget.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, button: 0 }));
-        triggerTarget.click();
-      }
-    }
     const currentOrigIdx = validSteps[currentValidPos]._originalIdx;
     const hasMoreOriginalSteps = currentOrigIdx < activeTour.steps.length - 1;
     const effectiveIsLast = isLast && !(hasTrigger && hasMoreOriginalSteps);
@@ -897,6 +889,50 @@ var WalkthroughOverlay = ({
       }));
     }
   };
+  const next = () => {
+    const hasTrigger = !!step.triggerElOnNext;
+    if (hasTrigger) {
+      const triggerTarget = typeof step.triggerElOnNext === "string" ? document.getElementById(resolveElId(step.triggerElOnNext)) : document.getElementById(resolveElId(step.el));
+      if (triggerTarget) {
+        triggerTarget.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true, button: 0, ctrlKey: false, pointerId: 1, pointerType: "mouse" }));
+        triggerTarget.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: 0 }));
+        triggerTarget.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, cancelable: true, button: 0, ctrlKey: false, pointerId: 1, pointerType: "mouse" }));
+        triggerTarget.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, button: 0 }));
+        triggerTarget.click();
+      }
+      const currentOrigIdx = validSteps[currentValidPos]._originalIdx;
+      const nextOrigIdx = currentOrigIdx + 1;
+      const nextStepDef = activeTour.steps[nextOrigIdx];
+      if (nextStepDef) {
+        const nextElId = resolveElId(nextStepDef.el);
+        const alreadyExists = document.getElementById(nextElId);
+        if (alreadyExists) {
+          advanceStep(hasTrigger);
+        } else {
+          setPopoverHidden(true);
+          waitingForElsRef.current = true;
+          const observer = new MutationObserver(() => {
+            const found = document.getElementById(nextElId);
+            if (found) {
+              observer.disconnect();
+              waitingForElsRef.current = false;
+              advanceStep(hasTrigger);
+            }
+          });
+          observer.observe(document.body, { childList: true, subtree: true });
+          setTimeout(() => {
+            observer.disconnect();
+            if (waitingForElsRef.current) {
+              waitingForElsRef.current = false;
+              advanceStep(hasTrigger);
+            }
+          }, 3e3);
+        }
+        return;
+      }
+    }
+    advanceStep(hasTrigger);
+  };
   const prev = () => {
     if (currentValidPos > 0) {
       setPopoverHidden(true);
@@ -999,7 +1035,7 @@ var WalkthroughOverlay = ({
       /* @__PURE__ */ jsxRuntime.jsxs(PopoverBody, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
           pStep.title ? /* @__PURE__ */ jsxRuntime.jsx(PopoverTitle, { children: pStep.title }) : "",
-          ((_j = pStep.isShowStep) != null ? _j : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
+          ((_i = pStep.isShowStep) != null ? _i : pIsShowStep) && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#a1a1aa", fontSize: "12px", fontWeight: "400" }, children: [
             pDisplayCurrentStep,
             "/",
             pDisplayTotalSteps
@@ -1024,7 +1060,7 @@ var WalkthroughOverlay = ({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
-          ((_k = pStep.isShowPrev) != null ? _k : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ((_j = pStep.isShowPrev) != null ? _j : pIsShowPrev) && pCurrentValidPos > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: "wt-btn",