@zag-js/interact-outside - npm Package Compare versions

Comparing version 0.0.0-dev-20240605193509 to 0.0.0-dev-20240605203045

dist/index.js

@@ -1,2 +0,201 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{trackInteractOutside:()=>trackInteractOutside});module.exports=__toCommonJS(src_exports);var import_dom_event=require("@zag-js/dom-event");var import_dom_query=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");function getWindowFrames(win){const frames={each(cb){for(let i=0;i<win.frames?.length;i+=1){const frame=win.frames[i];if(frame)cb(frame)}},addEventListener(event,listener,options){frames.each(frame=>{try{frame.document.addEventListener(event,listener,options)}catch{}});return()=>{try{frames.removeEventListener(event,listener,options)}catch{}}},removeEventListener(event,listener,options){frames.each(frame=>{try{frame.document.removeEventListener(event,listener,options)}catch{}})}};return frames}var POINTER_OUTSIDE_EVENT="pointerdown.outside";var FOCUS_OUTSIDE_EVENT="focus.outside";function isComposedPathFocusable(composedPath){for(const node of composedPath){if((0,import_dom_query.isHTMLElement)(node)&&(0,import_dom_query.isFocusable)(node))return true}return false}var isPointerEvent=event=>"clientY"in event;function isEventPointWithin(node,event){if(!isPointerEvent(event)||!node)return false;const rect=node.getBoundingClientRect();if(rect.width===0||rect.height===0)return false;return rect.top<=event.clientY&&event.clientY<=rect.top+rect.height&&rect.left<=event.clientX&&event.clientX<=rect.left+rect.width}function isEventWithinScrollbar(event){const target=(0,import_dom_query.getEventTarget)(event);if(!target||!isPointerEvent(event))return false;const isScrollableY=target.scrollHeight>target.clientHeight;const onScrollbarY=isScrollableY&&event.clientX>target.clientWidth;const isScrollableX=target.scrollWidth>target.clientWidth;const onScrollbarX=isScrollableX&&event.clientY>target.clientHeight;return onScrollbarY||onScrollbarX}function trackInteractOutsideImpl(node,options){const{exclude,onFocusOutside,onPointerDownOutside,onInteractOutside,defer}=options;if(!node)return;const doc=(0,import_dom_query.getDocument)(node);const win=(0,import_dom_query.getWindow)(node);const frames=getWindowFrames(win);function isEventOutside(event){const target=(0,import_dom_query.getEventTarget)(event);if(!(0,import_dom_query.isHTMLElement)(target))return false;if((0,import_dom_query.contains)(node,target))return false;if(isEventPointWithin(node,event))return false;if(isEventWithinScrollbar(event))return false;return!exclude?.(target)}let clickHandler;function onPointerDown(event){function handler(){const func=defer?import_dom_query.raf:v=>v();const composedPath=event.composedPath?.()??[event.target];func(()=>{if(!node||!isEventOutside(event))return;if(onPointerDownOutside||onInteractOutside){const handler2=(0,import_utils.callAll)(onPointerDownOutside,onInteractOutside);node.addEventListener(POINTER_OUTSIDE_EVENT,handler2,{once:true})}(0,import_dom_event.fireCustomEvent)(node,POINTER_OUTSIDE_EVENT,{bubbles:false,cancelable:true,detail:{originalEvent:event,contextmenu:(0,import_dom_event.isContextMenuEvent)(event),focusable:isComposedPathFocusable(composedPath)}})})}if(event.pointerType==="touch"){frames.removeEventListener("click",handler);doc.removeEventListener("click",handler);clickHandler=handler;doc.addEventListener("click",handler,{once:true});frames.addEventListener("click",handler,{once:true})}else{handler()}}const cleanups=new Set;const timer=setTimeout(()=>{cleanups.add(frames.addEventListener("pointerdown",onPointerDown,true));cleanups.add((0,import_dom_event.addDomEvent)(doc,"pointerdown",onPointerDown,true))},0);function onFocusin(event){const func=defer?import_dom_query.raf:v=>v();func(()=>{if(!node||!isEventOutside(event))return;if(onFocusOutside||onInteractOutside){const handler=(0,import_utils.callAll)(onFocusOutside,onInteractOutside);node.addEventListener(FOCUS_OUTSIDE_EVENT,handler,{once:true})}(0,import_dom_event.fireCustomEvent)(node,FOCUS_OUTSIDE_EVENT,{bubbles:false,cancelable:true,detail:{originalEvent:event,contextmenu:false,focusable:(0,import_dom_query.isFocusable)((0,import_dom_query.getEventTarget)(event))}})})}cleanups.add((0,import_dom_event.addDomEvent)(doc,"focusin",onFocusin,true));cleanups.add(frames.addEventListener("focusin",onFocusin,true));return()=>{clearTimeout(timer);if(clickHandler){frames.removeEventListener("click",clickHandler);doc.removeEventListener("click",clickHandler)}cleanups.forEach(fn=>fn())}}function trackInteractOutside(nodeOrFn,options){const{defer}=options;const func=defer?import_dom_query.raf:v=>v();const cleanups=[];cleanups.push(func(()=>{const node=typeof nodeOrFn==="function"?nodeOrFn():nodeOrFn;cleanups.push(trackInteractOutsideImpl(node,options))}));return()=>{cleanups.forEach(fn=>fn?.())}}0&&(module.exports={trackInteractOutside});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  trackInteractOutside: () => trackInteractOutside
+});
+module.exports = __toCommonJS(src_exports);
+var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+
+// src/get-window-frames.ts
+function getWindowFrames(win) {
+  const frames = {
+    each(cb) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i];
+        if (frame)
+          cb(frame);
+      }
+    },
+    addEventListener(event, listener, options) {
+      frames.each((frame) => {
+        try {
+          frame.document.addEventListener(event, listener, options);
+        } catch {
+        }
+      });
+      return () => {
+        try {
+          frames.removeEventListener(event, listener, options);
+        } catch {
+        }
+      };
+    },
+    removeEventListener(event, listener, options) {
+      frames.each((frame) => {
+        try {
+          frame.document.removeEventListener(event, listener, options);
+        } catch {
+        }
+      });
+    }
+  };
+  return frames;
+}
+
+// src/index.ts
+var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+var FOCUS_OUTSIDE_EVENT = "focus.outside";
+function isComposedPathFocusable(composedPath) {
+  for (const node of composedPath) {
+    if ((0, import_dom_query.isHTMLElement)(node) && (0, import_dom_query.isFocusable)(node))
+      return true;
+  }
+  return false;
+}
+var isPointerEvent = (event) => "clientY" in event;
+function isEventPointWithin(node, event) {
+  if (!isPointerEvent(event) || !node)
+    return false;
+  const rect = node.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0)
+    return false;
+  return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+}
+function isEventWithinScrollbar(event) {
+  const target = (0, import_dom_query.getEventTarget)(event);
+  if (!target || !isPointerEvent(event))
+    return false;
+  const isScrollableY = target.scrollHeight > target.clientHeight;
+  const onScrollbarY = isScrollableY && event.clientX > target.clientWidth;
+  const isScrollableX = target.scrollWidth > target.clientWidth;
+  const onScrollbarX = isScrollableX && event.clientY > target.clientHeight;
+  return onScrollbarY || onScrollbarX;
+}
+function trackInteractOutsideImpl(node, options) {
+  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options;
+  if (!node)
+    return;
+  const doc = (0, import_dom_query.getDocument)(node);
+  const win = (0, import_dom_query.getWindow)(node);
+  const frames = getWindowFrames(win);
+  function isEventOutside(event) {
+    const target = (0, import_dom_query.getEventTarget)(event);
+    if (!(0, import_dom_query.isHTMLElement)(target))
+      return false;
+    if ((0, import_dom_query.contains)(node, target))
+      return false;
+    if (isEventPointWithin(node, event))
+      return false;
+    if (isEventWithinScrollbar(event))
+      return false;
+    return !exclude?.(target);
+  }
+  let clickHandler;
+  function onPointerDown(event) {
+    function handler() {
+      const func = defer ? import_dom_query.raf : (v) => v();
+      const composedPath = event.composedPath?.() ?? [event.target];
+      func(() => {
+        if (!node || !isEventOutside(event))
+          return;
+        if (onPointerDownOutside || onInteractOutside) {
+          const handler2 = (0, import_utils.callAll)(onPointerDownOutside, onInteractOutside);
+          node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
+        }
+        (0, import_dom_event.fireCustomEvent)(node, POINTER_OUTSIDE_EVENT, {
+          bubbles: false,
+          cancelable: true,
+          detail: {
+            originalEvent: event,
+            contextmenu: (0, import_dom_event.isContextMenuEvent)(event),
+            focusable: isComposedPathFocusable(composedPath)
+          }
+        });
+      });
+    }
+    if (event.pointerType === "touch") {
+      frames.removeEventListener("click", handler);
+      doc.removeEventListener("click", handler);
+      clickHandler = handler;
+      doc.addEventListener("click", handler, { once: true });
+      frames.addEventListener("click", handler, { once: true });
+    } else {
+      handler();
+    }
+  }
+  const cleanups = /* @__PURE__ */ new Set();
+  const timer = setTimeout(() => {
+    cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
+    cleanups.add((0, import_dom_event.addDomEvent)(doc, "pointerdown", onPointerDown, true));
+  }, 0);
+  function onFocusin(event) {
+    const func = defer ? import_dom_query.raf : (v) => v();
+    func(() => {
+      if (!node || !isEventOutside(event))
+        return;
+      if (onFocusOutside || onInteractOutside) {
+        const handler = (0, import_utils.callAll)(onFocusOutside, onInteractOutside);
+        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
+      }
+      (0, import_dom_event.fireCustomEvent)(node, FOCUS_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: false,
+          focusable: (0, import_dom_query.isFocusable)((0, import_dom_query.getEventTarget)(event))
+        }
+      });
+    });
+  }
+  cleanups.add((0, import_dom_event.addDomEvent)(doc, "focusin", onFocusin, true));
+  cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  return () => {
+    clearTimeout(timer);
+    if (clickHandler) {
+      frames.removeEventListener("click", clickHandler);
+      doc.removeEventListener("click", clickHandler);
+    }
+    cleanups.forEach((fn) => fn());
+  };
+}
+function trackInteractOutside(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? import_dom_query.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+      cleanups.push(trackInteractOutsideImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackInteractOutside
+});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@zag-js/interact-outside",
-  "version": "0.0.0-dev-20240605193509",
+  "version": "0.0.0-dev-20240605203045",
   "description": "Track interations or focus outside an element",
@@ -20,5 +20,5 @@ "keywords": [
   "dependencies": {
-    "@zag-js/dom-query": "0.0.0-dev-20240605193509",
-    "@zag-js/dom-event": "0.0.0-dev-20240605193509",
-    "@zag-js/utils": "0.0.0-dev-20240605193509"
+    "@zag-js/dom-query": "0.0.0-dev-20240605203045",
+    "@zag-js/dom-event": "0.0.0-dev-20240605203045",
+    "@zag-js/utils": "0.0.0-dev-20240605203045"
   },
@@ -25,0 +25,0 @@ "devDependencies": {

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47613

increased by8.34%

Lines of code

588

increased by129.69%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@zag-js/dom-event@0.0.0-dev-20240605203045(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240605203045(transitive)

• + Added@zag-js/text-selection@0.0.0-dev-20240605203045(transitive)

• + Added@zag-js/types@0.0.0-dev-20240605203045(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240605203045(transitive)

• - Removed@zag-js/dom-event@0.0.0-dev-20240605193509(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240605193509(transitive)

• - Removed@zag-js/text-selection@0.0.0-dev-20240605193509(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240605193509(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240605193509(transitive)

• Updated@zag-js/dom-event@0.0.0-dev-20240605203045

• Updated@zag-js/dom-query@0.0.0-dev-20240605203045

• Updated@zag-js/utils@0.0.0-dev-20240605203045