@zag-js/popover 0.0.0-dev-20220706194607 → 0.0.0-dev-20220709094240

package/dist/index.js

@@ -43,6 +43,22 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -51,9 +67,37 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
 function isFrame(element) {
   return element.localName === "iframe";
 }
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function contains(parent, child) {
   if (!parent)
     return false;
@@ -180,45 +224,33 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = withRootHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
   getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
   getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
@@ -240,7 +272,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -345,13 +377,18 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow(value) {
+function isDocument2(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument(el) {
+function getDocument2(el) {
   var _a;
-  if (isWindow(el))
+  if (isWindow2(el))
     return el.document;
+  if (isDocument2(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getWindow(el) {
@@ -382,7 +419,8 @@ var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaK
 function fireCustomEvent(el, type, init) {
   if (!el)
     return;
-  const event = new CustomEvent(type, init);
+  const win = getWindow(el);
+  const event = new win.CustomEvent(type, init);
   return el.dispatchEvent(event);
 }
 var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
@@ -405,7 +443,7 @@ function trackInteractOutside(node, options) {
   const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getDocument(node);
+  const doc = getDocument2(node);
   const win = getWindow(node);
   function isEventOutside(event) {
     const target = getEventTarget(event);
@@ -481,13 +519,18 @@ var runIfFn4 = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-function isWindow2(value) {
+function isDocument3(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow3(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument2(el) {
+function getDocument3(el) {
   var _a;
-  if (isWindow2(el))
+  if (isWindow3(el))
     return el.document;
+  if (isDocument3(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getEventTarget2(event) {
@@ -542,14 +585,14 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return (layer == null ? void 0 : layer.node) === node;
   },
-  getChildLayers(node) {
-    return this.layers.slice(this.indexOf(node));
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
   },
-  isInChildLayer(node, target) {
-    return this.getChildLayers(node).some((layer) => contains3(layer.node, target));
+  isInNestedLayer(node, target) {
+    return this.getNestedLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains3(branch, target));
+    return Array.from(this.branches).some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -559,10 +602,13 @@ var layerStack = {
   },
   remove(node) {
     const index = this.indexOf(node);
-    if (index + 1 < this.count() - 1) {
-      this.layers.splice(index, this.count()).forEach((item) => item.dismiss());
+    if (index < 0)
+      return;
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layer.dismiss());
     }
-    this.layers = this.layers.filter((item) => item.node !== node);
+    this.layers.splice(index, 1);
   },
   removeBranch(node) {
     const index = this.branches.indexOf(node);
@@ -591,7 +637,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument2(node);
+  const doc = getDocument3(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -609,7 +655,7 @@ function disablePointerEventsOutside(node) {
 function trackDismissableElement(node, options) {
   if (!node)
     return;
-  const { onDismiss, pointerBlocking, exclude: excludeContainers } = options;
+  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
   const layer = { dismiss: onDismiss, node, pointerBlocking };
   layerStack.add(layer);
   assignPointerEventToLayers();
@@ -622,6 +668,9 @@ function trackDismissableElement(node, options) {
     (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
     if (event.defaultPrevented)
       return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
     onDismiss == null ? void 0 : onDismiss();
   }
   function onFocusOutside(event) {
@@ -633,6 +682,9 @@ function trackDismissableElement(node, options) {
     (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
     if (event.defaultPrevented)
       return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
     onDismiss == null ? void 0 : onDismiss();
   }
   function onEscapeKeyDown(event) {
@@ -646,9 +698,11 @@ function trackDismissableElement(node, options) {
     }
   }
   function exclude(target) {
+    if (!node)
+      return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const inContainers = Array.isArray(containers) ? containers : [containers];
-    return inContainers.some((node2) => contains3(node2, target)) || layerStack.isInChildLayer(node, target);
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    return _containers.some((node2) => contains3(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,
@@ -668,12 +722,11 @@ var import_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
 var { and, or, not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -683,7 +736,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
-      preventReturnFocus: false,
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
@@ -698,7 +751,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
@@ -773,7 +826,7 @@ function machine(ctx = {}) {
             (_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
             if (ctx2.closeOnEsc)
               return;
-            ctx2.preventReturnFocus = false;
+            ctx2.focusTriggerOnClose = true;
             event.preventDefault();
           },
           onInteractOutside(event) {
@@ -781,7 +834,7 @@ function machine(ctx = {}) {
             (_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
             if (event.defaultPrevented)
               return;
-            ctx2.preventReturnFocus = event.detail.focusable || event.detail.contextmenu;
+            ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
             if (!ctx2.closeOnInteractOutside) {
               event.preventDefault();
             }
@@ -872,13 +925,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
@@ -889,15 +935,11 @@ function machine(ctx = {}) {
         });
       },
       focusTriggerIfNeeded(ctx2) {
-        const focus = () => {
+        if (!ctx2.focusTriggerOnClose)
+          return;
+        raf(() => {
           var _a;
           return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
-        };
-        raf(() => {
-          if (!ctx2.preventReturnFocus) {
-            focus();
-            ctx2.preventReturnFocus = false;
-          }
         });
       },
       focusFirstTabbableElement(ctx2, evt) {

package/dist/index.mjs

@@ -19,6 +19,22 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -27,9 +43,37 @@ var runIfFn = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
 function isFrame(element) {
   return element.localName === "iframe";
 }
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function withRootHelpers(domUtils) {
+  const roots = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(roots.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = roots.getDoc(ctx).defaultView) != null ? _a : window;
+    }
+  };
+  return __spreadValues2(__spreadValues2({}, roots), domUtils);
+}
 function contains(parent, child) {
   if (!parent)
     return false;
@@ -156,45 +200,33 @@ var runIfFn2 = (v, ...a) => {
 };
 
 // src/popover.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
+var dom = withRootHelpers({
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
   getAnchorId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
   },
   getTriggerId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.uid}:trigger`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
   },
   getContentId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.uid}:content`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
   },
-  getPositionerId: (ctx) => `popover:${ctx.uid}:popper`,
-  getArrowId: (ctx) => `popover:${ctx.uid}:arrow`,
+  getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
   getTitleId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.uid}:title`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
   },
   getDescriptionId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.uid}:desc`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
   },
   getCloseButtonId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.id}:close-button`;
   },
   getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
   getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
@@ -216,7 +248,7 @@ var dom = {
       el = dom.getContentEl(ctx);
     return el;
   }
-};
+});
 
 // src/popover.connect.ts
 function connect(state, send, normalize) {
@@ -304,7 +336,7 @@ function connect(state, send, normalize) {
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 
 // ../../utilities/interact-outside/dist/index.mjs
 var runIfFn3 = (v, ...a) => {
@@ -321,13 +353,18 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow(value) {
+function isDocument2(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument(el) {
+function getDocument2(el) {
   var _a;
-  if (isWindow(el))
+  if (isWindow2(el))
     return el.document;
+  if (isDocument2(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getWindow(el) {
@@ -358,7 +395,8 @@ var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaK
 function fireCustomEvent(el, type, init) {
   if (!el)
     return;
-  const event = new CustomEvent(type, init);
+  const win = getWindow(el);
+  const event = new win.CustomEvent(type, init);
   return el.dispatchEvent(event);
 }
 var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
@@ -381,7 +419,7 @@ function trackInteractOutside(node, options) {
   const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getDocument(node);
+  const doc = getDocument2(node);
   const win = getWindow(node);
   function isEventOutside(event) {
     const target = getEventTarget(event);
@@ -457,13 +495,18 @@ var runIfFn4 = (v, ...a) => {
   return res != null ? res : void 0;
 };
 var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-function isWindow2(value) {
+function isDocument3(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow3(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument2(el) {
+function getDocument3(el) {
   var _a;
-  if (isWindow2(el))
+  if (isWindow3(el))
     return el.document;
+  if (isDocument3(el))
+    return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
 function getEventTarget2(event) {
@@ -518,14 +561,14 @@ var layerStack = {
     const layer = this.layers[this.count() - 1];
     return (layer == null ? void 0 : layer.node) === node;
   },
-  getChildLayers(node) {
-    return this.layers.slice(this.indexOf(node));
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
   },
-  isInChildLayer(node, target) {
-    return this.getChildLayers(node).some((layer) => contains3(layer.node, target));
+  isInNestedLayer(node, target) {
+    return this.getNestedLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains3(branch, target));
+    return Array.from(this.branches).some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -535,10 +578,13 @@ var layerStack = {
   },
   remove(node) {
     const index = this.indexOf(node);
-    if (index + 1 < this.count() - 1) {
-      this.layers.splice(index, this.count()).forEach((item) => item.dismiss());
+    if (index < 0)
+      return;
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layer.dismiss());
     }
-    this.layers = this.layers.filter((item) => item.node !== node);
+    this.layers.splice(index, 1);
   },
   removeBranch(node) {
     const index = this.branches.indexOf(node);
@@ -567,7 +613,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument2(node);
+  const doc = getDocument3(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -585,7 +631,7 @@ function disablePointerEventsOutside(node) {
 function trackDismissableElement(node, options) {
   if (!node)
     return;
-  const { onDismiss, pointerBlocking, exclude: excludeContainers } = options;
+  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
   const layer = { dismiss: onDismiss, node, pointerBlocking };
   layerStack.add(layer);
   assignPointerEventToLayers();
@@ -598,6 +644,9 @@ function trackDismissableElement(node, options) {
     (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
     if (event.defaultPrevented)
       return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
     onDismiss == null ? void 0 : onDismiss();
   }
   function onFocusOutside(event) {
@@ -609,6 +658,9 @@ function trackDismissableElement(node, options) {
     (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
     if (event.defaultPrevented)
       return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
     onDismiss == null ? void 0 : onDismiss();
   }
   function onEscapeKeyDown(event) {
@@ -622,9 +674,11 @@ function trackDismissableElement(node, options) {
     }
   }
   function exclude(target) {
+    if (!node)
+      return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
-    const inContainers = Array.isArray(containers) ? containers : [containers];
-    return inContainers.some((node2) => contains3(node2, target)) || layerStack.isInChildLayer(node, target);
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    return _containers.some((node2) => contains3(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,
@@ -644,12 +698,11 @@ import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
 import { createFocusTrap } from "focus-trap";
 var { and, or, not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "popover",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "",
       closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
@@ -659,7 +712,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
-      preventReturnFocus: false,
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
@@ -674,7 +727,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: ctx.defaultOpen ? "open" : "closed",
-            actions: ["setupDocument", "checkRenderedElements"]
+            actions: "checkRenderedElements"
           }
         }
       },
@@ -749,7 +802,7 @@ function machine(ctx = {}) {
             (_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
             if (ctx2.closeOnEsc)
               return;
-            ctx2.preventReturnFocus = false;
+            ctx2.focusTriggerOnClose = true;
             event.preventDefault();
           },
           onInteractOutside(event) {
@@ -757,7 +810,7 @@ function machine(ctx = {}) {
             (_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
             if (event.defaultPrevented)
               return;
-            ctx2.preventReturnFocus = event.detail.focusable || event.detail.contextmenu;
+            ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
             if (!ctx2.closeOnInteractOutside) {
               event.preventDefault();
             }
@@ -848,13 +901,6 @@ function machine(ctx = {}) {
           });
         });
       },
-      setupDocument(ctx2, evt) {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
-      },
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
@@ -865,15 +911,11 @@ function machine(ctx = {}) {
         });
       },
       focusTriggerIfNeeded(ctx2) {
-        const focus = () => {
+        if (!ctx2.focusTriggerOnClose)
+          return;
+        raf(() => {
           var _a;
           return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
-        };
-        raf(() => {
-          if (!ctx2.preventReturnFocus) {
-            focus();
-            ctx2.preventReturnFocus = false;
-          }
         });
       },
       focusFirstTabbableElement(ctx2, evt) {

package/dist/popover.dom.d.ts

@@ -1,9 +1,16 @@
 import type { MachineContext as Ctx } from "./popover.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getWin: (ctx: Ctx) => Window & typeof globalThis;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+} & {
     getActiveEl: (ctx: Ctx) => Element;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
     getAnchorId: (ctx: Ctx) => string;
     getTriggerId: (ctx: Ctx) => string;
     getContentId: (ctx: Ctx) => string;

package/dist/popover.machine.d.ts

@@ -1,2 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/popover.types.d.ts

@@ -1,7 +1,7 @@
 import type { StateMachine as S } from "@zag-js/core";
 import type { DismissableElementHandlers } from "@zag-js/dimissable";
 import type { PositioningOptions, Placement } from "@zag-js/popper";
-import type { Context, MaybeElement } from "@zag-js/types";
+import type { CommonProperties, Context, MaybeElement, RequiredBy } from "@zag-js/types";
 declare type ElementIds = Partial<{
     anchor: string;
     trigger: string;
@@ -10,7 +10,7 @@ declare type ElementIds = Partial<{
     description: string;
     closeBtn: string;
 }>;
-declare type PublicContext = DismissableElementHandlers & {
+declare type PublicContext = DismissableElementHandlers & CommonProperties & {
     /**
      * The ids of the elements in the popover. Useful for composition.
      */
@@ -59,7 +59,7 @@ declare type PublicContext = DismissableElementHandlers & {
      */
     defaultOpen?: boolean;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed
@@ -90,7 +90,7 @@ declare type PrivateContext = Context<{
     /**
      * Whether to prevent returning focus to the trigger
      */
-    preventReturnFocus?: boolean;
+    focusTriggerOnClose?: boolean;
 }>;
 export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
 export declare type MachineState = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.0.0-dev-20220706194607",
+  "version": "0.0.0-dev-20220709094240",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@zag-js/aria-hidden": "0.1.0",
-    "@zag-js/core": "0.0.0-dev-20220706194607",
-    "@zag-js/dom-utils": "0.0.0-dev-20220706194607",
-    "@zag-js/popper": "0.0.0-dev-20220706194607",
-    "@zag-js/remove-scroll": "0.0.0-dev-20220706194607",
-    "@zag-js/types": "0.0.0-dev-20220706194607",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.0.0-dev-20220709094240",
+    "@zag-js/popper": "0.0.0-dev-20220709094240",
+    "@zag-js/remove-scroll": "0.0.0-dev-20220709094240",
+    "@zag-js/types": "0.0.0-dev-20220709094240",
     "@zag-js/utils": "0.1.2",
     "focus-trap": "6.9.4"
   },