@zag-js/interact-outside 0.79.2 → 0.80.0

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 +27 -9
  2. package/dist/index.mjs +27 -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) {
@@ -101,9 +115,13 @@ function trackInteractOutsideImpl(node, options) {
101
115
  if (!target.isConnected) return false;
102
116
  if (domQuery.contains(node, target)) return false;
103
117
  if (isEventPointWithin(node, event)) return false;
104
- if (isEventWithinScrollbar(event, target)) return false;
105
- const scrollParent = domQuery.getNearestOverflowAncestor(node);
106
- 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;
107
125
  return !exclude?.(target);
108
126
  }
109
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) {
@@ -99,9 +113,13 @@ function trackInteractOutsideImpl(node, options) {
99
113
  if (!target.isConnected) return false;
100
114
  if (contains(node, target)) return false;
101
115
  if (isEventPointWithin(node, event)) return false;
102
- if (isEventWithinScrollbar(event, target)) return false;
103
- const scrollParent = getNearestOverflowAncestor(node);
104
- 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;
105
123
  return !exclude?.(target);
106
124
  }
107
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.2",
3
+ "version": "0.80.0",
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.2",
20
- "@zag-js/dom-event": "0.79.2",
21
- "@zag-js/utils": "0.79.2"
19
+ "@zag-js/dom-query": "0.80.0",
20
+ "@zag-js/dom-event": "0.80.0",
21
+ "@zag-js/utils": "0.80.0"
22
22
  },
23
23
  "devDependencies": {
24
24
  "clean-package": "2.2.0"