@zag-js/interact-outside 0.79.1 → 0.79.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +28 -9
  2. package/dist/index.mjs +28 -9
  3. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -80,12 +80,26 @@ function isEventPointWithin(node, event) {
80
80
  if (rect.width === 0 || rect.height === 0) return false;
81
81
  return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
82
82
  }
83
- function isEventWithinScrollbar(event, target) {
84
- if (!target || !isPointerEvent(event)) return false;
85
- const isScrollableY = target.scrollHeight > target.clientHeight;
86
- const onScrollbarY = isScrollableY && event.clientX > target.clientWidth;
87
- const isScrollableX = target.scrollWidth > target.clientWidth;
88
- const onScrollbarX = isScrollableX && event.clientY > target.clientHeight;
83
+ function isPointInRect(rect, point) {
84
+ return rect.y <= point.y && point.y <= rect.y + rect.height && rect.x <= point.x && point.x <= rect.x + rect.width;
85
+ }
86
+ function isEventWithinScrollbar(event, ancestor) {
87
+ if (!ancestor || !isPointerEvent(event)) return false;
88
+ const isScrollableY = ancestor.scrollHeight > ancestor.clientHeight;
89
+ const onScrollbarY = isScrollableY && event.clientX > ancestor.offsetLeft + ancestor.clientWidth;
90
+ const isScrollableX = ancestor.scrollWidth > ancestor.clientWidth;
91
+ const onScrollbarX = isScrollableX && event.clientY > ancestor.offsetTop + ancestor.clientHeight;
92
+ const rect = {
93
+ x: ancestor.offsetLeft,
94
+ y: ancestor.offsetTop,
95
+ width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
96
+ height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
97
+ };
98
+ const point = {
99
+ x: event.clientX,
100
+ y: event.clientY
101
+ };
102
+ if (!isPointInRect(rect, point)) return false;
89
103
  return onScrollbarY || onScrollbarX;
90
104
  }
91
105
  function trackInteractOutsideImpl(node, options) {
@@ -98,11 +112,16 @@ function trackInteractOutsideImpl(node, options) {
98
112
  function isEventOutside(event) {
99
113
  const target = domQuery.getEventTarget(event);
100
114
  if (!domQuery.isHTMLElement(target)) return false;
115
+ if (!target.isConnected) return false;
101
116
  if (domQuery.contains(node, target)) return false;
102
117
  if (isEventPointWithin(node, event)) return false;
103
- if (isEventWithinScrollbar(event, target)) return false;
104
- const scrollParent = domQuery.getNearestOverflowAncestor(node);
105
- if (isEventWithinScrollbar(event, scrollParent)) return false;
118
+ const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
119
+ if (triggerEl) {
120
+ const triggerAncestor = domQuery.getNearestOverflowAncestor(triggerEl);
121
+ if (isEventWithinScrollbar(event, triggerAncestor)) return false;
122
+ }
123
+ const nodeAncestor = domQuery.getNearestOverflowAncestor(node);
124
+ if (isEventWithinScrollbar(event, nodeAncestor)) return false;
106
125
  return !exclude?.(target);
107
126
  }
108
127
  const pointerdownCleanups = /* @__PURE__ */ new Set();
package/dist/index.mjs CHANGED
@@ -78,12 +78,26 @@ function isEventPointWithin(node, event) {
78
78
  if (rect.width === 0 || rect.height === 0) return false;
79
79
  return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
80
80
  }
81
- function isEventWithinScrollbar(event, target) {
82
- if (!target || !isPointerEvent(event)) return false;
83
- const isScrollableY = target.scrollHeight > target.clientHeight;
84
- const onScrollbarY = isScrollableY && event.clientX > target.clientWidth;
85
- const isScrollableX = target.scrollWidth > target.clientWidth;
86
- const onScrollbarX = isScrollableX && event.clientY > target.clientHeight;
81
+ function isPointInRect(rect, point) {
82
+ return rect.y <= point.y && point.y <= rect.y + rect.height && rect.x <= point.x && point.x <= rect.x + rect.width;
83
+ }
84
+ function isEventWithinScrollbar(event, ancestor) {
85
+ if (!ancestor || !isPointerEvent(event)) return false;
86
+ const isScrollableY = ancestor.scrollHeight > ancestor.clientHeight;
87
+ const onScrollbarY = isScrollableY && event.clientX > ancestor.offsetLeft + ancestor.clientWidth;
88
+ const isScrollableX = ancestor.scrollWidth > ancestor.clientWidth;
89
+ const onScrollbarX = isScrollableX && event.clientY > ancestor.offsetTop + ancestor.clientHeight;
90
+ const rect = {
91
+ x: ancestor.offsetLeft,
92
+ y: ancestor.offsetTop,
93
+ width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
94
+ height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
95
+ };
96
+ const point = {
97
+ x: event.clientX,
98
+ y: event.clientY
99
+ };
100
+ if (!isPointInRect(rect, point)) return false;
87
101
  return onScrollbarY || onScrollbarX;
88
102
  }
89
103
  function trackInteractOutsideImpl(node, options) {
@@ -96,11 +110,16 @@ function trackInteractOutsideImpl(node, options) {
96
110
  function isEventOutside(event) {
97
111
  const target = getEventTarget(event);
98
112
  if (!isHTMLElement(target)) return false;
113
+ if (!target.isConnected) return false;
99
114
  if (contains(node, target)) return false;
100
115
  if (isEventPointWithin(node, event)) return false;
101
- if (isEventWithinScrollbar(event, target)) return false;
102
- const scrollParent = getNearestOverflowAncestor(node);
103
- if (isEventWithinScrollbar(event, scrollParent)) return false;
116
+ const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
117
+ if (triggerEl) {
118
+ const triggerAncestor = getNearestOverflowAncestor(triggerEl);
119
+ if (isEventWithinScrollbar(event, triggerAncestor)) return false;
120
+ }
121
+ const nodeAncestor = getNearestOverflowAncestor(node);
122
+ if (isEventWithinScrollbar(event, nodeAncestor)) return false;
104
123
  return !exclude?.(target);
105
124
  }
106
125
  const pointerdownCleanups = /* @__PURE__ */ new Set();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/interact-outside",
3
- "version": "0.79.1",
3
+ "version": "0.79.3",
4
4
  "description": "Track interactions or focus outside an element",
5
5
  "keywords": [
6
6
  "js",
@@ -16,9 +16,9 @@
16
16
  "dist"
17
17
  ],
18
18
  "dependencies": {
19
- "@zag-js/dom-query": "0.79.1",
20
- "@zag-js/dom-event": "0.79.1",
21
- "@zag-js/utils": "0.79.1"
19
+ "@zag-js/dom-query": "0.79.3",
20
+ "@zag-js/dom-event": "0.79.3",
21
+ "@zag-js/utils": "0.79.3"
22
22
  },
23
23
  "devDependencies": {
24
24
  "clean-package": "2.2.0"