fix(dismissable): restore layer style mirror after framework style rewrites

.changeset/fix-layer-style-mirror-rewrite.md

@@ -0,0 +1,8 @@
+---
+"@zag-js/dismissable": patch
+---
+
+Fix issue where layer stack metadata (`--layer-index`, `--nested-layer-count`,
+`--z-index`) disappeared from style targets like `Drawer.Backdrop` when a
+framework re-render replaced the inline style, e.g. while dragging drawer
+content.

packages/utilities/dismissable/src/layer-stack.ts

@@ -106,9 +106,11 @@ export const layerStack = {
     if (index < 0) return
 
     const layer = this.layers[index]
+    unobserveLayerStyleMirror(node)
     layer.styleTargets?.forEach((getTarget) => {
       const target = getTarget()
       if (target) {
+        unobserveLayerStyleMirror(target)
         clearLayerStyleMirror(target)
       }
     })
@@ -139,12 +141,14 @@ export const layerStack = {
   syncLayers() {
     this.layers.forEach((layer, index) => {
       applyLayerStackMetadata(layer, index, layer.node)
+      observeLayerStyleMirror(layer, layer.node)
       layer.styleTargets?.forEach((getTarget) => {
         const target = getTarget()
         if (!target || target === layer.node) return
         applyLayerStackMetadata(layer, index, target)
         const { zIndex } = getComputedStyle(layer.node)
         target.style.setProperty("--z-index", zIndex)
+        observeLayerStyleMirror(layer, target)
       })
     })
   },
@@ -206,6 +210,46 @@ function clearLayerStyleMirror(el: HTMLElement) {
   el.removeAttribute("data-has-nested")
 }
 
+interface LayerStyleMirror {
+  layer: Layer
+  observer: MutationObserver
+}
+
+const layerStyleMirrors = new WeakMap<HTMLElement, LayerStyleMirror>()
+
+// Framework re-renders can replace an element's inline style wholesale (e.g. a
+// drawer updating `--drawer-swipe-progress` on its backdrop while dragging),
+// wiping the metadata mirrored above. Watch the style attribute and re-apply
+// when the metadata disappears while the layer is still in the stack.
+function observeLayerStyleMirror(layer: Layer, target: HTMLElement) {
+  const existing = layerStyleMirrors.get(target)
+  if (existing) {
+    existing.layer = layer
+    return
+  }
+
+  const mirror: LayerStyleMirror = { layer, observer: null as unknown as MutationObserver }
+  const win = target.ownerDocument.defaultView || window
+  mirror.observer = new win.MutationObserver(() => {
+    if (target.style.getPropertyValue("--layer-index") !== "") return
+    const index = layerStack.indexOf(mirror.layer.node)
+    if (index === -1) return
+    applyLayerStackMetadata(mirror.layer, index, target)
+    if (target !== mirror.layer.node) {
+      const { zIndex } = getComputedStyle(mirror.layer.node)
+      target.style.setProperty("--z-index", zIndex)
+    }
+  })
+
+  mirror.observer.observe(target, { attributes: true, attributeFilter: ["style"] })
+  layerStyleMirrors.set(target, mirror)
+}
+
+function unobserveLayerStyleMirror(target: HTMLElement) {
+  layerStyleMirrors.get(target)?.observer.disconnect()
+  layerStyleMirrors.delete(target)
+}
+
 function fireCustomEvent(el: HTMLElement, type: string, detail?: LayerDismissEventDetail) {
   const win = el.ownerDocument.defaultView || window
   const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail })

packages/utilities/dismissable/tests/layer-stack.test.ts

@@ -26,6 +26,11 @@ function createLayer(
   })
 }
 
+/** Let queued MutationObserver callbacks run (they are delivered as microtasks) */
+function drainMicrotasks() {
+  return new Promise<void>((resolve) => setTimeout(resolve, 0))
+}
+
 /** Drain the double-rAF used by `nextTick` in `layerStack.remove` */
 function nextTick() {
   return new Promise<void>((resolve) => {
@@ -138,6 +143,53 @@ describe("layerStack", () => {
 
       expect(node.style.getPropertyValue("--layer-index")).toBe("0")
     })
+
+    // https://github.com/chakra-ui/zag/issues/3148
+    test("restores mirrored metadata after a framework rewrite of the style attribute", async () => {
+      const primary = document.createElement("div")
+      const backdrop = document.createElement("div")
+      document.body.append(primary, backdrop)
+
+      layerStack.add(
+        createLayer(primary, {
+          styleTargets: [() => backdrop],
+        }),
+      )
+
+      expect(backdrop.style.getPropertyValue("--layer-index")).toBe("0")
+
+      // a framework re-render replaces the whole inline style, e.g. the drawer
+      // machine updating `--drawer-swipe-progress` on its backdrop during a drag
+      backdrop.setAttribute("style", "--drawer-swipe-progress: 0.5")
+
+      await drainMicrotasks()
+
+      expect(backdrop.style.getPropertyValue("--layer-index")).toBe("0")
+      expect(backdrop.style.getPropertyValue("--nested-layer-count")).toBe("0")
+      expect(backdrop.style.getPropertyValue("--z-index")).toBe(getComputedStyle(primary).zIndex)
+      expect(backdrop.style.getPropertyValue("--drawer-swipe-progress")).toBe("0.5")
+    })
+
+    test("does not restore mirrored metadata after the layer is removed", async () => {
+      const primary = document.createElement("div")
+      const backdrop = document.createElement("div")
+      document.body.append(primary, backdrop)
+
+      layerStack.add(
+        createLayer(primary, {
+          styleTargets: [() => backdrop],
+        }),
+      )
+
+      layerStack.remove(primary)
+
+      backdrop.setAttribute("style", "--drawer-swipe-progress: 0.5")
+
+      await drainMicrotasks()
+
+      expect(backdrop.style.getPropertyValue("--layer-index")).toBe("")
+      expect(backdrop.style.getPropertyValue("--z-index")).toBe("")
+    })
   })
 
   describe("sync metadata (two layers, same type)", () => {