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

package/dist/index.js

@@ -84,10 +84,6 @@ function getDocument(el) {
     return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
-}
 function withRootHelpers(domUtils) {
   const roots = {
     getRootNode: (ctx) => {
@@ -399,7 +395,7 @@ function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
-function getEventTarget2(event) {
+function getEventTarget(event) {
   var _a, _b;
   return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
 }
@@ -450,7 +446,7 @@ function trackInteractOutside(node, options) {
   const doc = getDocument2(node);
   const win = getWindow(node);
   function isEventOutside(event) {
-    const target = getEventTarget2(event);
+    const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
@@ -476,7 +472,7 @@ function trackInteractOutside(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
+          focusable: isFocusable2(getEventTarget(event))
         }
       });
     }
@@ -504,7 +500,7 @@ function trackInteractOutside(node, options) {
       detail: {
         originalEvent: event,
         contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
+        focusable: isFocusable2(getEventTarget(event))
       }
     });
   }
@@ -517,16 +513,53 @@ function trackInteractOutside(node, options) {
   };
 }
 
-// ../../utilities/dismissable/src/escape-keydown.ts
+// ../../utilities/dismissable/dist/index.mjs
+var runIfFn4 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument3(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow3(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument3(el) {
+  var _a;
+  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) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+}
+function contains3(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
+}
+function isHTMLElement3(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+var isRef3 = (v) => hasProp3(v, "current");
+function addDomEvent3(target, eventName, handler, options) {
+  const node = isRef3(target) ? target.current : runIfFn4(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
 function trackEscapeKeydown(fn) {
   const handleKeyDown = (event) => {
     if (event.key === "Escape")
       fn == null ? void 0 : fn(event);
   };
-  return addDomEvent(document, "keydown", handleKeyDown);
+  return addDomEvent3(document, "keydown", handleKeyDown);
 }
-
-// ../../utilities/dismissable/src/layer-stack.ts
 var layerStack = {
   layers: [],
   branches: [],
@@ -556,10 +589,10 @@ var layerStack = {
     return Array.from(this.layers).slice(this.indexOf(node) + 1);
   },
   isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+    return this.getNestedLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return Array.from(this.branches).some((branch) => contains(branch, target));
+    return Array.from(this.branches).some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -593,8 +626,6 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
 var originalBodyPointerEvents;
 function assignPointerEventToLayers() {
   layerStack.layers.forEach(({ node }) => {
@@ -606,7 +637,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
+  const doc = getDocument3(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -621,8 +652,6 @@ function disablePointerEventsOutside(node) {
       doc.body.removeAttribute("style");
   };
 }
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
 function trackDismissableElement(node, options) {
   if (!node)
     return;
@@ -632,7 +661,7 @@ function trackDismissableElement(node, options) {
   assignPointerEventToLayers();
   function onPointerDownOutside(event) {
     var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
+    const target = getEventTarget2(event.detail.originalEvent);
     if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
       return;
     (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
@@ -646,7 +675,7 @@ function trackDismissableElement(node, options) {
   }
   function onFocusOutside(event) {
     var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
+    const target = getEventTarget2(event.detail.originalEvent);
     if (layerStack.isInBranch(target))
       return;
     (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
@@ -673,7 +702,7 @@ function trackDismissableElement(node, options) {
       return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
     const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
+    return _containers.some((node2) => contains3(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,

package/dist/index.mjs

@@ -60,10 +60,6 @@ function getDocument(el) {
     return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getEventTarget(event) {
-  var _a, _b;
-  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
-}
 function withRootHelpers(domUtils) {
   const roots = {
     getRootNode: (ctx) => {
@@ -375,7 +371,7 @@ function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
-function getEventTarget2(event) {
+function getEventTarget(event) {
   var _a, _b;
   return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
 }
@@ -426,7 +422,7 @@ function trackInteractOutside(node, options) {
   const doc = getDocument2(node);
   const win = getWindow(node);
   function isEventOutside(event) {
-    const target = getEventTarget2(event);
+    const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
@@ -452,7 +448,7 @@ function trackInteractOutside(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
+          focusable: isFocusable2(getEventTarget(event))
         }
       });
     }
@@ -480,7 +476,7 @@ function trackInteractOutside(node, options) {
       detail: {
         originalEvent: event,
         contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
+        focusable: isFocusable2(getEventTarget(event))
       }
     });
   }
@@ -493,16 +489,53 @@ function trackInteractOutside(node, options) {
   };
 }
 
-// ../../utilities/dismissable/src/escape-keydown.ts
+// ../../utilities/dismissable/dist/index.mjs
+var runIfFn4 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isDocument3(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow3(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument3(el) {
+  var _a;
+  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) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+}
+function contains3(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
+}
+function isHTMLElement3(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+var isRef3 = (v) => hasProp3(v, "current");
+function addDomEvent3(target, eventName, handler, options) {
+  const node = isRef3(target) ? target.current : runIfFn4(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
 function trackEscapeKeydown(fn) {
   const handleKeyDown = (event) => {
     if (event.key === "Escape")
       fn == null ? void 0 : fn(event);
   };
-  return addDomEvent(document, "keydown", handleKeyDown);
+  return addDomEvent3(document, "keydown", handleKeyDown);
 }
-
-// ../../utilities/dismissable/src/layer-stack.ts
 var layerStack = {
   layers: [],
   branches: [],
@@ -532,10 +565,10 @@ var layerStack = {
     return Array.from(this.layers).slice(this.indexOf(node) + 1);
   },
   isInNestedLayer(node, target) {
-    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+    return this.getNestedLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return Array.from(this.branches).some((branch) => contains(branch, target));
+    return Array.from(this.branches).some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -569,8 +602,6 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
 var originalBodyPointerEvents;
 function assignPointerEventToLayers() {
   layerStack.layers.forEach(({ node }) => {
@@ -582,7 +613,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
+  const doc = getDocument3(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -597,8 +628,6 @@ function disablePointerEventsOutside(node) {
       doc.body.removeAttribute("style");
   };
 }
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
 function trackDismissableElement(node, options) {
   if (!node)
     return;
@@ -608,7 +637,7 @@ function trackDismissableElement(node, options) {
   assignPointerEventToLayers();
   function onPointerDownOutside(event) {
     var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
+    const target = getEventTarget2(event.detail.originalEvent);
     if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
       return;
     (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
@@ -622,7 +651,7 @@ function trackDismissableElement(node, options) {
   }
   function onFocusOutside(event) {
     var _a, _b;
-    const target = getEventTarget(event.detail.originalEvent);
+    const target = getEventTarget2(event.detail.originalEvent);
     if (layerStack.isInBranch(target))
       return;
     (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
@@ -649,7 +678,7 @@ function trackDismissableElement(node, options) {
       return false;
     const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
     const _containers = Array.isArray(containers) ? containers : [containers];
-    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
+    return _containers.some((node2) => contains3(node2, target)) || layerStack.isInNestedLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,

package/dist/popover.dom.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.0.0-dev-20220708193601",
+  "version": "0.0.0-dev-20220709094240",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -31,10 +31,10 @@
   "dependencies": {
     "@zag-js/aria-hidden": "0.1.0",
     "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.0.0-dev-20220708193601",
-    "@zag-js/popper": "0.0.0-dev-20220708193601",
-    "@zag-js/remove-scroll": "0.0.0-dev-20220708193601",
-    "@zag-js/types": "0.0.0-dev-20220708193601",
+    "@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"
   },