From 674ddb054afd38f6ac416a2b30cb5c507bc2d4f1 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Thu, 16 Jan 2025 16:32:36 +0000
Subject: [PATCH] fix(tour): sync z-index for dialog step

---
 .changeset/spotty-rivers-eat.md               |  5 ++++
 .../machines/dialog/src/dialog.machine.ts     |  6 ++--
 packages/machines/tour/src/tour.machine.ts    | 28 +++++++++++++++++--
 packages/machines/tour/src/utils/step.ts      |  4 +++
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/spotty-rivers-eat.md

diff --git a/.changeset/spotty-rivers-eat.md b/.changeset/spotty-rivers-eat.md
new file mode 100644
index 0000000000..8dc74d8e87
--- /dev/null
+++ b/.changeset/spotty-rivers-eat.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/tour": patch
+---
+
+Fix issue where dialog tour step doesn't sync its z-index with the content.
diff --git a/packages/machines/dialog/src/dialog.machine.ts b/packages/machines/dialog/src/dialog.machine.ts
index 4adc2248e0..2b806dcccc 100644
--- a/packages/machines/dialog/src/dialog.machine.ts
+++ b/packages/machines/dialog/src/dialog.machine.ts
@@ -1,7 +1,7 @@
 import { ariaHidden } from "@zag-js/aria-hidden"
 import { createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { raf } from "@zag-js/dom-query"
+import { raf, getComputedStyle } from "@zag-js/dom-query"
 import { trapFocus } from "@zag-js/focus-trap"
 import { preventBodyScroll } from "@zag-js/remove-scroll"
 import { compact } from "@zag-js/utils"
@@ -164,9 +164,7 @@ export function machine(userContext: UserDefinedContext) {
             const contentEl = dom.getContentEl(ctx)
             if (!contentEl) return
 
-            const win = dom.getWin(ctx)
-            const styles = win.getComputedStyle(contentEl)
-
+            const styles = getComputedStyle(contentEl)
             const elems = [dom.getPositionerEl(ctx), dom.getBackdropEl(ctx)]
             elems.forEach((node) => {
               node?.style.setProperty("--z-index", styles.zIndex)
diff --git a/packages/machines/tour/src/tour.machine.ts b/packages/machines/tour/src/tour.machine.ts
index f6c05c7ef3..c2e68e9c5e 100644
--- a/packages/machines/tour/src/tour.machine.ts
+++ b/packages/machines/tour/src/tour.machine.ts
@@ -1,13 +1,13 @@
 import { createMachine, guards, ref } from "@zag-js/core"
 import { trackDismissableBranch } from "@zag-js/dismissable"
-import { contains, isHTMLElement } from "@zag-js/dom-query"
+import { contains, getComputedStyle, isHTMLElement, raf } from "@zag-js/dom-query"
 import { trapFocus } from "@zag-js/focus-trap"
 import { trackInteractOutside } from "@zag-js/interact-outside"
 import { getPlacement } from "@zag-js/popper"
 import { compact, isEqual, isString, nextIndex, prevIndex } from "@zag-js/utils"
 import { dom } from "./tour.dom"
 import type { MachineContext, MachineState, StepBaseDetails, StepStatus, UserDefinedContext } from "./tour.types"
-import { findStep, findStepIndex, isTooltipStep } from "./utils/step"
+import { findStep, findStepIndex, isDialogStep, isTooltipStep } from "./utils/step"
 import { isEventInRect, offset } from "./utils/rect"
 
 const { and } = guards
@@ -388,10 +388,11 @@ export function machine(userContext: UserDefinedContext) {
 
           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.step.placement ?? "bottom",
@@ -415,6 +416,27 @@ export function machine(userContext: UserDefinedContext) {
   )
 }
 
+function syncZIndex(ctx: MachineContext) {
+  return raf(() => {
+    // sync z-index of positioner with content
+    const contentEl = dom.getContentEl(ctx)
+    if (!contentEl) return
+
+    const styles = getComputedStyle(contentEl)
+    const positionerEl = dom.getPositionerEl(ctx)
+    const backdropEl = dom.getBackdropEl(ctx)
+
+    if (positionerEl) {
+      positionerEl.style.setProperty("--z-index", styles.zIndex)
+      positionerEl.style.setProperty("z-index", "var(--z-index)")
+    }
+
+    if (backdropEl) {
+      backdropEl.style.setProperty("--z-index", styles.zIndex)
+    }
+  })
+}
+
 const invoke = {
   stepChange(ctx: MachineContext) {
     const effectiveLength = ctx.steps.filter((step) => step.type !== "wait").length
diff --git a/packages/machines/tour/src/utils/step.ts b/packages/machines/tour/src/utils/step.ts
index ce01261cfe..838ae00b18 100644
--- a/packages/machines/tour/src/utils/step.ts
+++ b/packages/machines/tour/src/utils/step.ts
@@ -7,6 +7,10 @@ export const isTooltipStep = (
   return step?.type === "tooltip"
 }
 
+export const isDialogStep = (step: StepDetails | null) => {
+  return step?.type === "dialog"
+}
+
 export const isTooltipPlacement = (placement: StepPlacement | undefined): placement is Placement => {
   return placement != null && placement != "center"
 }