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

package/dist/index.js

@@ -51,22 +51,9 @@ var runIfFn = (v, ...a) => {
   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]";
-}
 function isFrame(element) {
   return element.localName === "iframe";
 }
-function getDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  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 contains(parent, child) {
   if (!parent)
     return false;
@@ -358,12 +345,12 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow2(value) {
+function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument2(el) {
+function getDocument(el) {
   var _a;
-  if (isWindow2(el))
+  if (isWindow(el))
     return el.document;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
@@ -371,7 +358,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;
 }
@@ -418,10 +405,10 @@ function trackInteractOutside(node, options) {
   const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getDocument2(node);
+  const doc = getDocument(node);
   const win = getWindow(node);
   function isEventOutside(event) {
-    const target = getEventTarget2(event);
+    const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
@@ -447,7 +434,7 @@ function trackInteractOutside(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
+          focusable: isFocusable2(getEventTarget(event))
         }
       });
     }
@@ -475,7 +462,7 @@ function trackInteractOutside(node, options) {
       detail: {
         originalEvent: event,
         contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
+        focusable: isFocusable2(getEventTarget(event))
       }
     });
   }
@@ -488,16 +475,48 @@ 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 isWindow2(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument2(el) {
+  var _a;
+  if (isWindow2(el))
+    return el.document;
+  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: [],
@@ -527,10 +546,10 @@ var layerStack = {
     return this.layers.slice(this.indexOf(node));
   },
   isInChildLayer(node, target) {
-    return this.getChildLayers(node).some((layer) => contains(layer.node, target));
+    return this.getChildLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains(branch, target));
+    return [...this.branches].some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -561,8 +580,6 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
 var originalBodyPointerEvents;
 function assignPointerEventToLayers() {
   layerStack.layers.forEach(({ node }) => {
@@ -574,7 +591,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
+  const doc = getDocument2(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -589,8 +606,6 @@ function disablePointerEventsOutside(node) {
       doc.body.removeAttribute("style");
   };
 }
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
 function trackDismissableElement(node, options) {
   if (!node)
     return;
@@ -600,7 +615,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);
@@ -611,7 +626,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);
@@ -633,7 +648,7 @@ function trackDismissableElement(node, options) {
   function exclude(target) {
     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);
+    return inContainers.some((node2) => contains3(node2, target)) || layerStack.isInChildLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,

package/dist/index.mjs

@@ -27,22 +27,9 @@ var runIfFn = (v, ...a) => {
   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]";
-}
 function isFrame(element) {
   return element.localName === "iframe";
 }
-function getDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  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 contains(parent, child) {
   if (!parent)
     return false;
@@ -334,12 +321,12 @@ function getPlatform() {
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
-function isWindow2(value) {
+function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getDocument2(el) {
+function getDocument(el) {
   var _a;
-  if (isWindow2(el))
+  if (isWindow(el))
     return el.document;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
@@ -347,7 +334,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;
 }
@@ -394,10 +381,10 @@ function trackInteractOutside(node, options) {
   const { exclude, onFocusOutside, onPointerDownOutside } = options;
   if (!node)
     return;
-  const doc = getDocument2(node);
+  const doc = getDocument(node);
   const win = getWindow(node);
   function isEventOutside(event) {
-    const target = getEventTarget2(event);
+    const target = getEventTarget(event);
     if (!(target instanceof win.HTMLElement)) {
       return false;
     }
@@ -423,7 +410,7 @@ function trackInteractOutside(node, options) {
         detail: {
           originalEvent: event,
           contextmenu: isContextMenuEvent(event),
-          focusable: isFocusable2(getEventTarget2(event))
+          focusable: isFocusable2(getEventTarget(event))
         }
       });
     }
@@ -451,7 +438,7 @@ function trackInteractOutside(node, options) {
       detail: {
         originalEvent: event,
         contextmenu: false,
-        focusable: isFocusable2(getEventTarget2(event))
+        focusable: isFocusable2(getEventTarget(event))
       }
     });
   }
@@ -464,16 +451,48 @@ 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 isWindow2(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument2(el) {
+  var _a;
+  if (isWindow2(el))
+    return el.document;
+  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: [],
@@ -503,10 +522,10 @@ var layerStack = {
     return this.layers.slice(this.indexOf(node));
   },
   isInChildLayer(node, target) {
-    return this.getChildLayers(node).some((layer) => contains(layer.node, target));
+    return this.getChildLayers(node).some((layer) => contains3(layer.node, target));
   },
   isInBranch(target) {
-    return [...this.branches].some((branch) => contains(branch, target));
+    return [...this.branches].some((branch) => contains3(branch, target));
   },
   add(layer) {
     this.layers.push(layer);
@@ -537,8 +556,6 @@ var layerStack = {
     this.remove(this.layers[0].node);
   }
 };
-
-// ../../utilities/dismissable/src/pointer-event-outside.ts
 var originalBodyPointerEvents;
 function assignPointerEventToLayers() {
   layerStack.layers.forEach(({ node }) => {
@@ -550,7 +567,7 @@ function clearPointerEvent(node) {
 }
 var DATA_ATTR = "data-inert";
 function disablePointerEventsOutside(node) {
-  const doc = getDocument(node);
+  const doc = getDocument2(node);
   if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
     originalBodyPointerEvents = document.body.style.pointerEvents;
     doc.body.style.pointerEvents = "none";
@@ -565,8 +582,6 @@ function disablePointerEventsOutside(node) {
       doc.body.removeAttribute("style");
   };
 }
-
-// ../../utilities/dismissable/src/dismissable-layer.ts
 function trackDismissableElement(node, options) {
   if (!node)
     return;
@@ -576,7 +591,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);
@@ -587,7 +602,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);
@@ -609,7 +624,7 @@ function trackDismissableElement(node, options) {
   function exclude(target) {
     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);
+    return inContainers.some((node2) => contains3(node2, target)) || layerStack.isInChildLayer(node, target);
   }
   const cleanups = [
     pointerBlocking ? disablePointerEventsOutside(node) : void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.0.0-dev-20220704163406",
+  "version": "0.0.0-dev-20220706194607",
   "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-20220704163406",
-    "@zag-js/dom-utils": "0.0.0-dev-20220704163406",
-    "@zag-js/popper": "0.0.0-dev-20220704163406",
-    "@zag-js/remove-scroll": "0.0.0-dev-20220704163406",
-    "@zag-js/types": "0.0.0-dev-20220704163406",
+    "@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/utils": "0.1.2",
     "focus-trap": "6.9.4"
   },