@zag-js/popover 0.0.0-dev-20220704151659 → 0.0.0-dev-20220707125149

package/dist/index.js

@@ -46,6 +46,11 @@ module.exports = __toCommonJS(src_exports);
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -75,6 +80,7 @@ function isVisible(el) {
     return false;
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function hasNegativeTabIndex(element) {
   const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
   return tabIndex < 0;
@@ -133,11 +139,6 @@ function getLastTabbable(container, includeContainer) {
   const elements = getTabbables(container, includeContainer);
   return elements[elements.length - 1] || null;
 }
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -186,7 +187,6 @@ function nextIndex(v, idx, opts = {}) {
 function next(v, idx, opts = {}) {
   return v[nextIndex(v, idx, opts)];
 }
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
@@ -344,6 +344,20 @@ var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
 
 // ../../utilities/interact-outside/dist/index.mjs
+var runIfFn3 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
 function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -374,10 +388,15 @@ function isVisible2(el) {
     return false;
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
 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";
@@ -386,11 +405,6 @@ function isFocusable2(element) {
     return false;
   return element.matches(focusableSelector2) && isVisible2(element);
 }
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var runIfFn3 = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
 var isRef2 = (v) => hasProp2(v, "current");
 function addDomEvent2(target, eventName, handler, options) {
   const node = isRef2(target) ? target.current : runIfFn3(target);
@@ -399,19 +413,6 @@ function addDomEvent2(target, eventName, handler, options) {
     node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
 }
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
 var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
 var FOCUS_OUTSIDE_EVENT = "focus.outside";
 function trackInteractOutside(node, options) {
@@ -523,14 +524,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) => contains(layer.node, target));
+  isInNestedLayer(node, target) {
+    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains(branch, target));
+    return Array.from(this.branches).some((branch) => contains(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -540,10 +541,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);
@@ -594,7 +598,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();
@@ -607,6 +611,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) {
@@ -618,6 +625,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) {
@@ -631,9 +641,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) => contains(node2, target)) || layerStack.isInChildLayer(node, target);
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,
@@ -668,7 +680,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
-      preventReturnFocus: false,
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
@@ -758,7 +770,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) {
@@ -766,7 +778,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();
             }
@@ -874,15 +886,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

@@ -22,6 +22,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -51,6 +56,7 @@ function isVisible(el) {
     return false;
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function hasNegativeTabIndex(element) {
   const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
   return tabIndex < 0;
@@ -109,11 +115,6 @@ function getLastTabbable(container, includeContainer) {
   const elements = getTabbables(container, includeContainer);
   return elements[elements.length - 1] || null;
 }
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -162,7 +163,6 @@ function nextIndex(v, idx, opts = {}) {
 function next(v, idx, opts = {}) {
   return v[nextIndex(v, idx, opts)];
 }
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
@@ -320,6 +320,20 @@ import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine, guards, ref } from "@zag-js/core";
 
 // ../../utilities/interact-outside/dist/index.mjs
+var runIfFn3 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
 function isWindow2(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
@@ -350,10 +364,15 @@ function isVisible2(el) {
     return false;
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
 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";
@@ -362,11 +381,6 @@ function isFocusable2(element) {
     return false;
   return element.matches(focusableSelector2) && isVisible2(element);
 }
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var runIfFn3 = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
 var isRef2 = (v) => hasProp2(v, "current");
 function addDomEvent2(target, eventName, handler, options) {
   const node = isRef2(target) ? target.current : runIfFn3(target);
@@ -375,19 +389,6 @@ function addDomEvent2(target, eventName, handler, options) {
     node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
 }
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  var _a;
-  const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isContextMenuEvent = (e) => {
-  return e.button === 2 || isCtrlKey(e) && e.button === 0;
-};
-var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
 var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
 var FOCUS_OUTSIDE_EVENT = "focus.outside";
 function trackInteractOutside(node, options) {
@@ -499,14 +500,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) => contains(layer.node, target));
+  isInNestedLayer(node, target) {
+    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains(branch, target));
+    return Array.from(this.branches).some((branch) => contains(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -516,10 +517,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);
@@ -570,7 +574,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();
@@ -583,6 +587,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) {
@@ -594,6 +601,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) {
@@ -607,9 +617,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) => contains(node2, target)) || layerStack.isInChildLayer(node, target);
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,
@@ -644,7 +656,7 @@ function machine(ctx = {}) {
       }, ctx.positioning),
       currentPlacement: void 0
     }, ctx), {
-      preventReturnFocus: false,
+      focusTriggerOnClose: true,
       renderedElements: {
         title: true,
         description: true,
@@ -734,7 +746,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) {
@@ -742,7 +754,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();
             }
@@ -850,15 +862,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.types.d.ts

@@ -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-20220704151659",
+  "version": "0.0.0-dev-20220707125149",
   "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-20220704151659",
-    "@zag-js/dom-utils": "0.0.0-dev-20220704151659",
-    "@zag-js/popper": "0.0.0-dev-20220704151659",
-    "@zag-js/remove-scroll": "0.1.0",
-    "@zag-js/types": "0.0.0-dev-20220704151659",
+    "@zag-js/core": "0.0.0-dev-20220707125149",
+    "@zag-js/dom-utils": "0.0.0-dev-20220707125149",
+    "@zag-js/popper": "0.0.0-dev-20220707125149",
+    "@zag-js/remove-scroll": "0.0.0-dev-20220707125149",
+    "@zag-js/types": "0.0.0-dev-20220707125149",
     "@zag-js/utils": "0.1.2",
     "focus-trap": "6.9.4"
   },