@destyler/tour 0.2.10 → 0.2.12

package/dist/index.d.mts

@@ -1,12 +1,9 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { AnchorRect, Placement } from "@destyler/popper";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/dismissable";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, Required, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"content" | "actionTrigger" | "closeTrigger" | "progressText" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"content" | "actionTrigger" | "closeTrigger" | "progressText" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
 //#endregion
 //#region src/utils/rect.d.ts
 interface Point {
@@ -361,23 +358,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+export declare const props: ("ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
 //#endregion
 //#region src/utils/wait.d.ts
-interface WaitOptions {
+export interface WaitOptions {
   timeout: number;
   rootNode?: Document | ShadowRoot | undefined;
 }
 type WaitForPromiseReturn<T> = [Promise<T>, () => void];
-declare function waitForElement(target: () => HTMLElement, options: WaitOptions): WaitForPromiseReturn<HTMLElement>;
+export declare function waitForElement(target: () => HTMLElement, options: WaitOptions): WaitForPromiseReturn<HTMLElement>;
 type EditableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-declare function waitForElementValue(target: () => EditableElement | null, value: string, options: WaitOptions): WaitForPromiseReturn<void>;
+export declare function waitForElementValue(target: () => EditableElement | null, value: string, options: WaitOptions): WaitForPromiseReturn<void>;
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type IntlTranslations, type Point, type PointerDownOutsideEvent, type ProgressTextDetails, type Service, type StatusChangeDetails, type StepAction, type StepActionMap, type StepActionTriggerProps, type StepBaseDetails, type StepChangeDetails, type StepDetails, type StepEffectArgs, type StepPlacement, type StepStatus, type StepType, WaitOptions, anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue };
+export type { MachineApi as Api, UserDefinedContext as Context, ElementIds, FocusOutsideEvent, InteractOutsideEvent, IntlTranslations, Point, PointerDownOutsideEvent, ProgressTextDetails, Service, StatusChangeDetails, StepAction, StepActionMap, StepActionTriggerProps, StepBaseDetails, StepChangeDetails, StepDetails, StepEffectArgs, StepPlacement, StepStatus, StepType };

package/dist/index.mjs

@@ -7,11 +7,9 @@ import { trapFocus } from "@destyler/focus-trap";
 import { trackInteractOutside } from "@destyler/interact-outside";
 import { compact, createSplitProps, isEqual, isString, nextIndex, prevIndex } from "@destyler/utils";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("tour").parts("content", "actionTrigger", "closeTrigger", "progressText", "title", "description", "positioner", "arrow", "arrowTip", "backdrop", "spotlight");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -25,7 +23,6 @@ const dom = createScope({
 	getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
 	getBackdropEl: (ctx) => dom.getById(ctx, dom.getBackdropId(ctx))
 });
-
 //#endregion
 //#region src/utils/clip-path.ts
 function getClipPath(options) {
@@ -53,7 +50,6 @@ function getClipPath(options) {
   a${topRight},${topRight},0,0,0-${topRight}-${topRight}\
   Z`;
 }
-
 //#endregion
 //#region src/utils/step.ts
 function isTooltipStep(step) {
@@ -93,7 +89,6 @@ function findStep(steps, id) {
 function findStepIndex(steps, id) {
 	return id != null ? steps.findIndex((step) => step.id === id) : -1;
 }
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -154,31 +149,31 @@ function connect(state, send, normalize) {
 		hasPrevStep,
 		firstStep,
 		lastStep,
-		addStep(step$1) {
+		addStep(step) {
 			send({
 				type: "STEPS.SET",
-				value: steps.concat(step$1),
+				value: steps.concat(step),
 				src: "addStep"
 			});
 		},
 		removeStep(id) {
 			send({
 				type: "STEPS.SET",
-				value: steps.filter((step$1) => step$1.id !== id),
+				value: steps.filter((step) => step.id !== id),
 				src: "removeStep"
 			});
 		},
 		updateStep(id, stepOverrides) {
 			send({
 				type: "STEPS.SET",
-				value: steps.map((step$1) => step$1.id === id ? mergeProps(step$1, stepOverrides) : step$1),
+				value: steps.map((step) => step.id === id ? mergeProps(step, stepOverrides) : step),
 				src: "updateStep"
 			});
 		},
-		setSteps(steps$1) {
+		setSteps(steps) {
 			send({
 				type: "STEPS.SET",
-				value: steps$1,
+				value: steps,
 				src: "setSteps"
 			});
 		},
@@ -195,7 +190,7 @@ function connect(state, send, normalize) {
 			});
 		},
 		isValidStep(id) {
-			return steps.some((step$1) => step$1.id === id);
+			return steps.some((step) => step.id === id);
 		},
 		isCurrentStep(id) {
 			return Boolean(step?.id === id);
@@ -210,7 +205,7 @@ function connect(state, send, normalize) {
 			return stepIndex / steps.length * 100;
 		},
 		getProgressText() {
-			const effectiveSteps = steps.filter((step$1) => step$1.type !== "wait");
+			const effectiveSteps = steps.filter((step) => step.type !== "wait");
 			const details = {
 				current: findStepIndex(effectiveSteps, step?.id),
 				total: effectiveSteps.length
@@ -306,20 +301,18 @@ function connect(state, send, normalize) {
 					const isRtl = state.context.dir === "rtl";
 					switch (event.key) {
 						case "ArrowRight":
-							if (!hasNextStep) return;
+							if (isRtl ? !hasPrevStep : !hasNextStep) return;
 							send({
 								type: isRtl ? "STEP.PREV" : "STEP.NEXT",
 								src: "keydown"
 							});
 							break;
 						case "ArrowLeft":
-							if (!hasPrevStep) return;
+							if (isRtl ? !hasNextStep : !hasPrevStep) return;
 							send({
 								type: isRtl ? "STEP.NEXT" : "STEP.PREV",
 								src: "keydown"
 							});
-							break;
-						default: break;
 					}
 				}
 			});
@@ -339,15 +332,16 @@ function connect(state, send, normalize) {
 			});
 		},
 		getCloseTriggerProps() {
-			return normalize.element({
+			return normalize.button({
+				"type": "button",
 				...parts.closeTrigger.attrs,
 				"data-type": step?.type,
 				"aria-label": state.context.translations.close,
 				"onClick": actionMap.dismiss
 			});
 		},
-		getActionTriggerProps(props$1) {
-			const { action, attrs } = props$1.action;
+		getActionTriggerProps(props) {
+			const { action, attrs } = props.action;
 			let actionProps = {};
 			switch (action) {
 				case "next":
@@ -375,14 +369,12 @@ function connect(state, send, normalize) {
 						"onClick": actionMap.dismiss
 					};
 					break;
-				default:
-					actionProps = {
-						"data-type": "custom",
-						onClick() {
-							if (typeof action === "function") action(actionMap);
-						}
-					};
-					break;
+				default: actionProps = {
+					"data-type": "custom",
+					onClick() {
+						if (typeof action === "function") action(actionMap);
+					}
+				};
 			}
 			return normalize.button({
 				...parts.actionTrigger.attrs,
@@ -393,7 +385,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/utils/rect.ts
 function getFrameElement(win) {
@@ -433,7 +424,6 @@ function offset(r, i) {
 		height: r.height + dy + dy
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { and } = guards;
@@ -488,13 +478,13 @@ const set = { step(ctx, idx) {
 		};
 	};
 	const next = () => {
-		const idx$1 = nextIndex(ctx.steps, ctx.stepIndex);
-		ctx.stepId = ctx.steps[idx$1].id;
+		const idx = nextIndex(ctx.steps, ctx.stepIndex);
+		ctx.stepId = ctx.steps[idx].id;
 		invoke.stepChange(ctx);
 	};
 	const goto = (id) => {
-		const idx$1 = ctx.steps.findIndex((s) => s.id === id);
-		ctx.stepId = ctx.steps[idx$1].id;
+		const idx = ctx.steps.findIndex((s) => s.id === id);
+		ctx.stepId = ctx.steps[idx].id;
 		invoke.stepChange(ctx);
 	};
 	const dismiss = () => {
@@ -558,12 +548,12 @@ function machine(userContext) {
 			})
 		},
 		computed: {
-			stepIndex: (ctx$1) => findStepIndex(ctx$1.steps, ctx$1.stepId),
-			step: (ctx$1) => findStep(ctx$1.steps, ctx$1.stepId),
-			hasNextStep: (ctx$1) => ctx$1.stepIndex < ctx$1.steps.length - 1,
-			hasPrevStep: (ctx$1) => ctx$1.stepIndex > 0,
-			isFirstStep: (ctx$1) => ctx$1.stepIndex === 0,
-			isLastStep: (ctx$1) => ctx$1.stepIndex === ctx$1.steps.length - 1
+			stepIndex: (ctx) => findStepIndex(ctx.steps, ctx.stepId),
+			step: (ctx) => findStep(ctx.steps, ctx.stepId),
+			hasNextStep: (ctx) => ctx.stepIndex < ctx.steps.length - 1,
+			hasPrevStep: (ctx) => ctx.stepIndex > 0,
+			isFirstStep: (ctx) => ctx.stepIndex === 0,
+			isLastStep: (ctx) => ctx.stepIndex === ctx.steps.length - 1
 		},
 		created: ["validateSteps"],
 		watch: { stepId: [
@@ -623,7 +613,7 @@ function machine(userContext) {
 				} },
 				on: { "TARGET.RESOLVED": {
 					target: "target.scrolling",
-					actions: ["setResolvedTarget"]
+					actions: ["setResolvedTarget", "syncTargetAttrs"]
 				} }
 			},
 			"target.scrolling": {
@@ -653,92 +643,98 @@ function machine(userContext) {
 	}, {
 		delays: { MISSING_TARGET_TIMEOUT: 3e3 },
 		guards: {
-			isLastStep: (ctx$1) => ctx$1.isLastStep,
-			isValidStep: (ctx$1) => ctx$1.stepId != null,
-			hasTarget: (ctx$1) => ctx$1.step?.target != null,
-			hasResolvedTarget: (ctx$1) => ctx$1.resolvedTarget.value != null,
-			isWaitingStep: (ctx$1) => ctx$1.step?.type === "wait"
+			isLastStep: (ctx) => ctx.isLastStep,
+			isValidStep: (ctx) => ctx.stepId != null,
+			hasTarget: (ctx) => ctx.step?.target != null,
+			hasResolvedTarget: (ctx) => ctx.resolvedTarget.value != null,
+			isWaitingStep: (ctx) => ctx.step?.type === "wait"
 		},
 		actions: {
-			scrollToTarget(ctx$1, _evt) {
-				ctx$1.resolvedTarget.value?.scrollIntoView({
+			scrollToTarget(ctx, _evt) {
+				ctx.resolvedTarget.value?.scrollIntoView({
 					behavior: "instant",
 					block: "center",
 					inline: "center"
 				});
 			},
-			setStep(ctx$1, evt) {
-				set.step(ctx$1, evt.value);
+			setStep(ctx, evt) {
+				set.step(ctx, findStepIndex(ctx.steps, evt.value));
 			},
-			clearStep(ctx$1) {
-				ctx$1.targetRect = ref({
+			clearStep(ctx) {
+				ctx.targetRect = ref({
 					width: 0,
 					height: 0,
 					x: 0,
 					y: 0
 				});
-				set.step(ctx$1, -1);
+				set.step(ctx, -1);
 			},
-			setInitialStep(ctx$1, evt) {
-				if (ctx$1.steps.length === 0) return;
+			setInitialStep(ctx, evt) {
+				if (ctx.steps.length === 0) return;
 				if (isString(evt.id)) {
-					const idx = findStepIndex(ctx$1.steps, evt.id);
-					set.step(ctx$1, idx);
+					const idx = findStepIndex(ctx.steps, evt.id);
+					set.step(ctx, idx);
 					return;
 				}
-				set.step(ctx$1, 0);
+				set.step(ctx, 0);
 			},
-			setNextStep(ctx$1) {
-				const idx = nextIndex(ctx$1.steps, ctx$1.stepIndex);
-				set.step(ctx$1, idx);
+			setNextStep(ctx) {
+				const idx = nextIndex(ctx.steps, ctx.stepIndex);
+				set.step(ctx, idx);
 			},
-			setPrevStep(ctx$1) {
-				const idx = prevIndex(ctx$1.steps, ctx$1.stepIndex);
-				set.step(ctx$1, idx);
+			setPrevStep(ctx) {
+				const idx = prevIndex(ctx.steps, ctx.stepIndex);
+				set.step(ctx, idx);
 			},
-			invokeOnStart(ctx$1) {
-				invoke.statusChange(ctx$1, "started");
+			invokeOnStart(ctx) {
+				invoke.statusChange(ctx, "started");
 			},
-			invokeOnDismiss(ctx$1) {
-				invoke.statusChange(ctx$1, "dismissed");
+			invokeOnDismiss(ctx) {
+				invoke.statusChange(ctx, "dismissed");
 			},
-			invokeOnComplete(ctx$1) {
-				invoke.statusChange(ctx$1, "completed");
+			invokeOnComplete(ctx) {
+				invoke.statusChange(ctx, "completed");
 			},
-			invokeOnSkip(ctx$1) {
-				invoke.statusChange(ctx$1, "skipped");
+			invokeOnSkip(ctx) {
+				invoke.statusChange(ctx, "skipped");
 			},
-			invokeOnNotFound(ctx$1) {
-				invoke.statusChange(ctx$1, "not-found");
+			invokeOnNotFound(ctx) {
+				invoke.statusChange(ctx, "not-found");
 			},
 			raiseStepChange(_ctx, _evt, { send }) {
 				send({ type: "STEP.CHANGED" });
 			},
-			setResolvedTarget(ctx$1, evt) {
-				const node = evt.node ?? ctx$1.step?.target?.();
-				ctx$1.resolvedTarget.value = node ?? null;
+			setResolvedTarget(ctx, evt) {
+				const node = evt.node ?? ctx.step?.target?.();
+				ctx.resolvedTarget.value = node ?? null;
 			},
-			syncTargetAttrs(ctx$1) {
-				ctx$1._targetCleanup?.();
-				ctx$1._targetCleanup = void 0;
-				const targetEl = ctx$1.resolvedTarget.value;
+			syncTargetAttrs(ctx) {
+				ctx._targetCleanup?.();
+				ctx._targetCleanup = void 0;
+				const targetEl = ctx.resolvedTarget.value;
 				if (!targetEl) return;
-				if (ctx$1.preventInteraction) targetEl.inert = true;
+				const preventInteraction = ctx.preventInteraction;
+				const inert = targetEl.inert;
+				const highlighted = targetEl.getAttribute("data-tour-highlighted");
+				if (preventInteraction) targetEl.inert = true;
 				targetEl.setAttribute("data-tour-highlighted", "");
-				ctx$1._targetCleanup = () => {
-					if (ctx$1.preventInteraction) targetEl.inert = false;
-					targetEl.removeAttribute("data-tour-highlighted");
+				ctx._targetCleanup = () => {
+					if (preventInteraction && targetEl.inert) targetEl.inert = inert;
+					if (targetEl.getAttribute("data-tour-highlighted") === "") {
+						if (highlighted == null) targetEl.removeAttribute("data-tour-highlighted");
+						else targetEl.setAttribute("data-tour-highlighted", highlighted);
+					}
 				};
 			},
-			cleanupFns(ctx$1) {
-				ctx$1._targetCleanup?.();
-				ctx$1._targetCleanup = void 0;
-				ctx$1._effectCleanup?.();
-				ctx$1._effectCleanup = void 0;
+			cleanupFns(ctx) {
+				ctx._targetCleanup?.();
+				ctx._targetCleanup = void 0;
+				ctx._effectCleanup?.();
+				ctx._effectCleanup = void 0;
 			},
-			validateSteps(ctx$1) {
+			validateSteps(ctx) {
 				const ids = /* @__PURE__ */ new Set();
-				ctx$1.steps.forEach((step) => {
+				ctx.steps.forEach((step) => {
 					if (ids.has(step.id)) throw new Error(`[destyler/tour] Duplicate step id: ${step.id}`);
 					if (step.target == null && step.type == null) throw new Error(`[destyler/tour] Step ${step.id} has no target or type. At least one of those is required.`);
 					ids.add(step.id);
@@ -746,10 +742,10 @@ function machine(userContext) {
 			}
 		},
 		activities: {
-			waitForTarget(ctx$1, _evt, { send }) {
-				const targetEl = ctx$1.step?.target;
-				const win = dom.getWin(ctx$1);
-				const rootNode = dom.getRootNode(ctx$1);
+			waitForTarget(ctx, _evt, { send }) {
+				const targetEl = ctx.step?.target;
+				const win = dom.getWin(ctx);
+				const rootNode = dom.getRootNode(ctx);
 				const observer = new win.MutationObserver(() => {
 					const node = targetEl?.();
 					if (node) {
@@ -769,12 +765,12 @@ function machine(userContext) {
 					observer.disconnect();
 				};
 			},
-			trackBoundarySize(ctx$1) {
-				const win = dom.getWin(ctx$1);
-				const doc = dom.getDoc(ctx$1);
+			trackBoundarySize(ctx) {
+				const win = dom.getWin(ctx);
+				const doc = dom.getDoc(ctx);
 				const onResize = () => {
-					ctx$1.boundarySize = {
-						width: visualViewport?.width ?? win.innerWidth,
+					ctx.boundarySize = {
+						width: win.visualViewport?.width ?? win.innerWidth,
 						height: doc.documentElement.scrollHeight
 					};
 				};
@@ -783,9 +779,9 @@ function machine(userContext) {
 				viewport.addEventListener("resize", onResize);
 				return () => viewport.removeEventListener("resize", onResize);
 			},
-			trackEscapeKeydown(ctx$1, _evt, { send }) {
-				if (!ctx$1.closeOnEscape) return;
-				const doc = dom.getDoc(ctx$1);
+			trackEscapeKeydown(ctx, _evt, { send }) {
+				if (!ctx.closeOnEscape) return;
+				const doc = dom.getDoc(ctx);
 				const onKeyDown = (event) => {
 					if (event.key === "Escape") {
 						event.preventDefault();
@@ -801,28 +797,28 @@ function machine(userContext) {
 					doc.removeEventListener("keydown", onKeyDown, true);
 				};
 			},
-			trackInteractOutside(ctx$1, _evt, { send }) {
-				if (ctx$1.step == null) return;
-				const contentEl = () => dom.getContentEl(ctx$1);
+			trackInteractOutside(ctx, _evt, { send }) {
+				if (ctx.step == null) return;
+				const contentEl = () => dom.getContentEl(ctx);
 				return trackInteractOutside(contentEl, {
 					defer: true,
 					exclude(target) {
-						return contains(ctx$1.step?.target?.(), target);
+						return contains(ctx.step?.target?.(), target);
 					},
 					onFocusOutside(event) {
-						ctx$1.onFocusOutside?.(event);
-						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+						ctx.onFocusOutside?.(event);
+						if (!ctx.closeOnInteractOutside) event.preventDefault();
 					},
 					onPointerDownOutside(event) {
-						ctx$1.onPointerDownOutside?.(event);
-						if (isEventInRect(ctx$1.targetRect, event.detail.originalEvent)) {
+						ctx.onPointerDownOutside?.(event);
+						if (isEventInRect(ctx.targetRect, event.detail.originalEvent)) {
 							event.preventDefault();
 							return;
 						}
-						if (!ctx$1.closeOnInteractOutside) event.preventDefault();
+						if (!ctx.closeOnInteractOutside) event.preventDefault();
 					},
 					onInteractOutside(event) {
-						ctx$1.onInteractOutside?.(event);
+						ctx.onInteractOutside?.(event);
 						if (event.defaultPrevented) return;
 						send({
 							type: "DISMISS",
@@ -831,13 +827,13 @@ function machine(userContext) {
 					}
 				});
 			},
-			trackDismissableBranch(ctx$1) {
-				if (ctx$1.step == null) return;
-				const contentEl = () => dom.getContentEl(ctx$1);
+			trackDismissableBranch(ctx) {
+				if (ctx.step == null) return;
+				const contentEl = () => dom.getContentEl(ctx);
 				return trackDismissableBranch(contentEl, { defer: !contentEl() });
 			},
-			trapFocus(ctx$1) {
-				const contentEl = () => dom.getContentEl(ctx$1);
+			trapFocus(ctx) {
+				const contentEl = () => dom.getContentEl(ctx);
 				return trapFocus(contentEl, {
 					escapeDeactivates: false,
 					allowOutsideClick: true,
@@ -845,33 +841,32 @@ function machine(userContext) {
 					returnFocusOnDeactivate: false
 				});
 			},
-			trackPlacement(ctx$1) {
-				if (ctx$1.step == null) return;
-				ctx$1.currentPlacement = ctx$1.step.placement ?? "bottom";
-				if (isDialogStep(ctx$1.step)) return syncZIndex(ctx$1);
-				if (!isTooltipStep(ctx$1.step)) return;
-				const positionerEl = () => dom.getPositionerEl(ctx$1);
-				return getPlacement(ctx$1.resolvedTarget.value, positionerEl, {
+			trackPlacement(ctx) {
+				if (ctx.step == null) return;
+				ctx.currentPlacement = ctx.step.placement ?? "bottom";
+				if (isDialogStep(ctx.step)) return syncZIndex(ctx);
+				if (!isTooltipStep(ctx.step)) return;
+				const positionerEl = () => dom.getPositionerEl(ctx);
+				return getPlacement(ctx.resolvedTarget.value, positionerEl, {
 					defer: true,
-					placement: ctx$1.step.placement ?? "bottom",
+					placement: ctx.step.placement ?? "bottom",
 					strategy: "absolute",
 					gutter: 10,
-					offset: ctx$1.step.offset,
+					offset: ctx.step.offset,
 					getAnchorRect(el) {
 						if (!isHTMLElement(el)) return null;
-						return offset(el.getBoundingClientRect(), ctx$1.spotlightOffset);
+						return offset(el.getBoundingClientRect(), ctx.spotlightOffset);
 					},
 					onComplete(data) {
 						const { rects } = data.middlewareData;
-						ctx$1.currentPlacement = data.placement;
-						ctx$1.targetRect = rects.reference;
+						ctx.currentPlacement = data.placement;
+						ctx.targetRect = rects.reference;
 					}
 				});
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -895,39 +890,36 @@ const props = createProps()([
 	"translations"
 ]);
 const splitProps = createSplitProps(props);
-
 //#endregion
 //#region src/utils/wait.ts
-function waitForPromise(promise, controller, timeout) {
+function waitForPromise(promise, controller, timeout, cleanup) {
 	const { signal } = controller;
-	const wrappedPromise = new Promise((resolve, reject) => {
-		const timeoutId = setTimeout(() => {
-			reject(/* @__PURE__ */ new Error(`Timeout of ${timeout}ms exceeded`));
-		}, timeout);
-		signal.addEventListener("abort", () => {
+	return [new Promise((resolve, reject) => {
+		let settled = false;
+		let timeoutId;
+		let onAbort;
+		const finish = (callback) => {
+			if (settled) return;
+			settled = true;
 			clearTimeout(timeoutId);
-			reject(/* @__PURE__ */ new Error("Promise aborted"));
-		});
-		promise.then((result) => {
-			if (!signal.aborted) {
-				clearTimeout(timeoutId);
-				resolve(result);
-			}
-		}).catch((error) => {
-			if (!signal.aborted) {
-				clearTimeout(timeoutId);
-				reject(error);
-			}
-		});
-	});
-	const abort = () => controller.abort();
-	return [wrappedPromise, abort];
+			signal.removeEventListener("abort", onAbort);
+			cleanup();
+			callback();
+		};
+		onAbort = () => finish(() => reject(/* @__PURE__ */ new Error("Promise aborted")));
+		timeoutId = setTimeout(() => {
+			finish(() => reject(/* @__PURE__ */ new Error(`Timeout of ${timeout}ms exceeded`)));
+		}, timeout);
+		signal.addEventListener("abort", onAbort);
+		promise.then((result) => finish(() => resolve(result)), (error) => finish(() => reject(error)));
+	}), () => controller.abort()];
 }
 function waitForElement(target, options) {
 	const { timeout, rootNode } = options;
 	const win = getWindow(rootNode);
 	const doc = getDocument(rootNode);
 	const controller = new win.AbortController();
+	let cleanup = () => {};
 	return waitForPromise(new Promise((resolve) => {
 		const el = target();
 		if (el) {
@@ -935,34 +927,33 @@ function waitForElement(target, options) {
 			return;
 		}
 		const observer = new win.MutationObserver(() => {
-			const el$1 = target();
-			if (el$1) {
-				observer.disconnect();
-				resolve(el$1);
-			}
+			const el = target();
+			if (el) resolve(el);
 		});
-		observer.observe(doc.body, {
+		cleanup = () => observer.disconnect();
+		observer.observe(rootNode ?? doc.body, {
 			childList: true,
 			subtree: true
 		});
-	}), controller, timeout);
+	}), controller, timeout, () => cleanup());
 }
 function waitForElementValue(target, value, options) {
 	const { timeout, rootNode } = options;
 	const controller = new (getWindow(rootNode)).AbortController();
+	let cleanup = () => {};
 	return waitForPromise(new Promise((resolve) => {
 		const el = target();
 		if (!el) return;
+		if (el.value === value) {
+			resolve();
+			return;
+		}
 		const checkValue = () => {
-			if (el.value === value) {
-				resolve();
-				el.removeEventListener("input", checkValue);
-			}
+			if (el.value === value) resolve();
 		};
-		checkValue();
+		cleanup = () => el.removeEventListener("input", checkValue);
 		el.addEventListener("input", checkValue, { signal: controller.signal });
-	}), controller, timeout);
+	}), controller, timeout, () => cleanup());
 }
-
 //#endregion
-export { anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue };
+export { anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/tour",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "A guided tour that helps users understand the interface.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/focus-trap": "0.2.10",
-    "@destyler/dismissable": "0.2.10",
-    "@destyler/popper": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/utils": "0.2.10",
-    "@destyler/xstate": "0.2.10",
-    "@destyler/interact-outside": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/dismissable": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/focus-trap": "0.2.12",
+    "@destyler/interact-outside": "0.2.12",
+    "@destyler/popper": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"