@zag-js/interact-outside 1.24.1 → 1.25.0

package/dist/index.d.mts

@@ -15,6 +15,14 @@ interface InteractOutsideHandlers {
 interface InteractOutsideOptions extends InteractOutsideHandlers {
     exclude?: ((target: HTMLElement) => boolean) | undefined;
     defer?: boolean | undefined;
+    /**
+     * Default: `true`. If `true`, the interact outside detection will recursively include elements
+     * that are controlled by elements within the trap via `aria-controls`. Only elements
+     * with `aria-expanded="true"` and interactive container roles (menu, listbox, dialog, etc.)
+     * will be included. This allows nested menus, select dropdowns, and other portalled
+     * content to remain within the interaction boundary.
+     */
+    followControlledElements?: boolean | undefined;
 }
 interface EventDetails<T> {
     originalEvent: T;

package/dist/index.d.ts

@@ -15,6 +15,14 @@ interface InteractOutsideHandlers {
 interface InteractOutsideOptions extends InteractOutsideHandlers {
     exclude?: ((target: HTMLElement) => boolean) | undefined;
     defer?: boolean | undefined;
+    /**
+     * Default: `true`. If `true`, the interact outside detection will recursively include elements
+     * that are controlled by elements within the trap via `aria-controls`. Only elements
+     * with `aria-expanded="true"` and interactive container roles (menu, listbox, dialog, etc.)
+     * will be included. This allows nested menus, select dropdowns, and other portalled
+     * content to remain within the interaction boundary.
+     */
+    followControlledElements?: boolean | undefined;
 }
 interface EventDetails<T> {
     originalEvent: T;

package/dist/index.js

@@ -102,7 +102,14 @@ function isEventWithinScrollbar(event, ancestor) {
   return onScrollbarY || onScrollbarX;
 }
 function trackInteractOutsideImpl(node, options) {
-  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options;
+  const {
+    exclude,
+    onFocusOutside,
+    onPointerDownOutside,
+    onInteractOutside,
+    defer,
+    followControlledElements = true
+  } = options;
   if (!node) return;
   const doc = domQuery.getDocument(node);
   const win = domQuery.getWindow(node);
@@ -113,6 +120,7 @@ function trackInteractOutsideImpl(node, options) {
     if (!target.isConnected) return false;
     if (domQuery.contains(node, target)) return false;
     if (isEventPointWithin(node, event)) return false;
+    if (followControlledElements && domQuery.isControlledElement(node, target)) return false;
     const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
     if (triggerEl) {
       const triggerAncestor = domQuery.getNearestOverflowAncestor(triggerEl);

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { raf, getDocument, getWindow, isShadowRoot, addDomEvent, isTouchDevice, getEventTarget, isFocusable, isContextMenuEvent, isHTMLElement, contains, getNearestOverflowAncestor } from '@zag-js/dom-query';
+import { raf, getDocument, getWindow, isShadowRoot, addDomEvent, isTouchDevice, getEventTarget, isFocusable, isContextMenuEvent, isHTMLElement, contains, isControlledElement, getNearestOverflowAncestor } from '@zag-js/dom-query';
 import { callAll } from '@zag-js/utils';
 
 // src/index.ts
@@ -100,7 +100,14 @@ function isEventWithinScrollbar(event, ancestor) {
   return onScrollbarY || onScrollbarX;
 }
 function trackInteractOutsideImpl(node, options) {
-  const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options;
+  const {
+    exclude,
+    onFocusOutside,
+    onPointerDownOutside,
+    onInteractOutside,
+    defer,
+    followControlledElements = true
+  } = options;
   if (!node) return;
   const doc = getDocument(node);
   const win = getWindow(node);
@@ -111,6 +118,7 @@ function trackInteractOutsideImpl(node, options) {
     if (!target.isConnected) return false;
     if (contains(node, target)) return false;
     if (isEventPointWithin(node, event)) return false;
+    if (followControlledElements && isControlledElement(node, target)) return false;
     const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
     if (triggerEl) {
       const triggerAncestor = getNearestOverflowAncestor(triggerEl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/interact-outside",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "Track interactions or focus outside an element",
   "keywords": [
     "js",
@@ -16,8 +16,8 @@
     "dist"
   ],
   "dependencies": {
-    "@zag-js/dom-query": "1.24.1",
-    "@zag-js/utils": "1.24.1"
+    "@zag-js/dom-query": "1.25.0",
+    "@zag-js/utils": "1.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"