@zag-js/dismissable 0.10.5 → 0.11.1

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.
@@ -0,0 +1,19 @@
1
+ import { InteractOutsideHandlers } from '@zag-js/interact-outside';
2
+ export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
3
+
4
+ type MaybeElement = HTMLElement | null;
5
+ type Container = MaybeElement | Array<MaybeElement>;
6
+ type NodeOrFn = MaybeElement | (() => MaybeElement);
7
+ type DismissableElementHandlers = InteractOutsideHandlers & {
8
+ onEscapeKeyDown?: (event: KeyboardEvent) => void;
9
+ };
10
+ type DismissableElementOptions = DismissableElementHandlers & {
11
+ debug?: boolean;
12
+ pointerBlocking?: boolean;
13
+ onDismiss: () => void;
14
+ exclude?: Container | (() => Container);
15
+ defer?: boolean;
16
+ };
17
+ declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
18
+
19
+ export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement };
package/dist/index.d.ts CHANGED
@@ -1,2 +1,19 @@
1
- export * from "./dismissable-layer";
2
- export type { InteractOutsideEvent, PointerDownOutsideEvent, FocusOutsideEvent } from "@zag-js/interact-outside";
1
+ import { InteractOutsideHandlers } from '@zag-js/interact-outside';
2
+ export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
3
+
4
+ type MaybeElement = HTMLElement | null;
5
+ type Container = MaybeElement | Array<MaybeElement>;
6
+ type NodeOrFn = MaybeElement | (() => MaybeElement);
7
+ type DismissableElementHandlers = InteractOutsideHandlers & {
8
+ onEscapeKeyDown?: (event: KeyboardEvent) => void;
9
+ };
10
+ type DismissableElementOptions = DismissableElementHandlers & {
11
+ debug?: boolean;
12
+ pointerBlocking?: boolean;
13
+ onDismiss: () => void;
14
+ exclude?: Container | (() => Container);
15
+ defer?: boolean;
16
+ };
17
+ declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
18
+
19
+ export { DismissableElementHandlers, DismissableElementOptions, trackDismissableElement };
package/dist/index.js CHANGED
@@ -1,9 +1,221 @@
1
- 'use strict';
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
2
19
 
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ trackDismissableElement: () => trackDismissableElement
24
+ });
25
+ module.exports = __toCommonJS(src_exports);
4
26
 
5
- const dismissableLayer = require('./dismissable-layer.js');
27
+ // src/dismissable-layer.ts
28
+ var import_dom_query4 = require("@zag-js/dom-query");
29
+ var import_interact_outside = require("@zag-js/interact-outside");
30
+ var import_utils = require("@zag-js/utils");
6
31
 
32
+ // src/escape-keydown.ts
33
+ var import_dom_event = require("@zag-js/dom-event");
34
+ var import_dom_query = require("@zag-js/dom-query");
35
+ function trackEscapeKeydown(node, fn) {
36
+ const handleKeyDown = (event) => {
37
+ if (event.key === "Escape")
38
+ fn?.(event);
39
+ };
40
+ return (0, import_dom_event.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown);
41
+ }
7
42
 
43
+ // src/layer-stack.ts
44
+ var import_dom_query2 = require("@zag-js/dom-query");
45
+ var layerStack = {
46
+ layers: [],
47
+ branches: [],
48
+ count() {
49
+ return this.layers.length;
50
+ },
51
+ pointerBlockingLayers() {
52
+ return this.layers.filter((layer) => layer.pointerBlocking);
53
+ },
54
+ topMostPointerBlockingLayer() {
55
+ return [...this.pointerBlockingLayers()].slice(-1)[0];
56
+ },
57
+ hasPointerBlockingLayer() {
58
+ return this.pointerBlockingLayers().length > 0;
59
+ },
60
+ isBelowPointerBlockingLayer(node) {
61
+ const index = this.indexOf(node);
62
+ const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
63
+ return index < highestBlockingIndex;
64
+ },
65
+ isTopMost(node) {
66
+ const layer = this.layers[this.count() - 1];
67
+ return layer?.node === node;
68
+ },
69
+ getNestedLayers(node) {
70
+ return Array.from(this.layers).slice(this.indexOf(node) + 1);
71
+ },
72
+ isInNestedLayer(node, target) {
73
+ return this.getNestedLayers(node).some((layer) => (0, import_dom_query2.contains)(layer.node, target));
74
+ },
75
+ isInBranch(target) {
76
+ return Array.from(this.branches).some((branch) => (0, import_dom_query2.contains)(branch, target));
77
+ },
78
+ add(layer) {
79
+ this.layers.push(layer);
80
+ },
81
+ addBranch(node) {
82
+ this.branches.push(node);
83
+ },
84
+ remove(node) {
85
+ const index = this.indexOf(node);
86
+ if (index < 0)
87
+ return;
88
+ if (index < this.count() - 1) {
89
+ const _layers = this.getNestedLayers(node);
90
+ _layers.forEach((layer) => layer.dismiss());
91
+ }
92
+ this.layers.splice(index, 1);
93
+ },
94
+ removeBranch(node) {
95
+ const index = this.branches.indexOf(node);
96
+ if (index >= 0)
97
+ this.branches.splice(index, 1);
98
+ },
99
+ indexOf(node) {
100
+ return this.layers.findIndex((layer) => layer.node === node);
101
+ },
102
+ dismiss(node) {
103
+ this.layers[this.indexOf(node)]?.dismiss();
104
+ },
105
+ clear() {
106
+ this.remove(this.layers[0].node);
107
+ }
108
+ };
8
109
 
9
- exports.trackDismissableElement = dismissableLayer.trackDismissableElement;
110
+ // src/pointer-event-outside.ts
111
+ var import_dom_query3 = require("@zag-js/dom-query");
112
+ var originalBodyPointerEvents;
113
+ function assignPointerEventToLayers() {
114
+ layerStack.layers.forEach(({ node }) => {
115
+ node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
116
+ });
117
+ }
118
+ function clearPointerEvent(node) {
119
+ node.style.pointerEvents = "";
120
+ }
121
+ var DATA_ATTR = "data-inert";
122
+ function disablePointerEventsOutside(node) {
123
+ const doc = (0, import_dom_query3.getDocument)(node);
124
+ if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
125
+ originalBodyPointerEvents = document.body.style.pointerEvents;
126
+ doc.body.style.pointerEvents = "none";
127
+ doc.body.setAttribute(DATA_ATTR, "");
128
+ }
129
+ return () => {
130
+ if (layerStack.hasPointerBlockingLayer())
131
+ return;
132
+ doc.body.style.pointerEvents = originalBodyPointerEvents;
133
+ doc.body.removeAttribute(DATA_ATTR);
134
+ if (doc.body.style.length === 0)
135
+ doc.body.removeAttribute("style");
136
+ };
137
+ }
138
+
139
+ // src/dismissable-layer.ts
140
+ function trackDismissableElementImpl(node, options) {
141
+ if (!node) {
142
+ (0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
143
+ return;
144
+ }
145
+ const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
146
+ const layer = { dismiss: onDismiss, node, pointerBlocking };
147
+ layerStack.add(layer);
148
+ assignPointerEventToLayers();
149
+ function onPointerDownOutside(event) {
150
+ const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
151
+ if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
152
+ return;
153
+ options.onPointerDownOutside?.(event);
154
+ options.onInteractOutside?.(event);
155
+ if (event.defaultPrevented)
156
+ return;
157
+ if (debug) {
158
+ console.log("onPointerDownOutside:", event.detail.originalEvent);
159
+ }
160
+ onDismiss?.();
161
+ }
162
+ function onFocusOutside(event) {
163
+ const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
164
+ if (layerStack.isInBranch(target))
165
+ return;
166
+ options.onFocusOutside?.(event);
167
+ options.onInteractOutside?.(event);
168
+ if (event.defaultPrevented)
169
+ return;
170
+ if (debug) {
171
+ console.log("onFocusOutside:", event.detail.originalEvent);
172
+ }
173
+ onDismiss?.();
174
+ }
175
+ function onEscapeKeyDown(event) {
176
+ if (!layerStack.isTopMost(node))
177
+ return;
178
+ options.onEscapeKeyDown?.(event);
179
+ if (!event.defaultPrevented && onDismiss) {
180
+ event.preventDefault();
181
+ onDismiss();
182
+ }
183
+ }
184
+ function exclude(target) {
185
+ if (!node)
186
+ return false;
187
+ const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
188
+ const _containers = Array.isArray(containers) ? containers : [containers];
189
+ return _containers.some((node2) => (0, import_dom_query4.contains)(node2, target)) || layerStack.isInNestedLayer(node, target);
190
+ }
191
+ const cleanups = [
192
+ pointerBlocking ? disablePointerEventsOutside(node) : void 0,
193
+ trackEscapeKeydown(node, onEscapeKeyDown),
194
+ (0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside })
195
+ ];
196
+ return () => {
197
+ layerStack.remove(node);
198
+ assignPointerEventToLayers();
199
+ clearPointerEvent(node);
200
+ cleanups.forEach((fn) => fn?.());
201
+ };
202
+ }
203
+ function trackDismissableElement(nodeOrFn, options) {
204
+ const { defer } = options;
205
+ const func = defer ? import_dom_query4.raf : (v) => v();
206
+ const cleanups = [];
207
+ cleanups.push(
208
+ func(() => {
209
+ const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
210
+ cleanups.push(trackDismissableElementImpl(node, options));
211
+ })
212
+ );
213
+ return () => {
214
+ cleanups.forEach((fn) => fn?.());
215
+ };
216
+ }
217
+ // Annotate the CommonJS export names for ESM import in node:
218
+ 0 && (module.exports = {
219
+ trackDismissableElement
220
+ });
221
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["export * from \"./dismissable-layer\"\nexport type { InteractOutsideEvent, PointerDownOutsideEvent, FocusOutsideEvent } from \"@zag-js/interact-outside\"\n","import { contains, getEventTarget, raf } from \"@zag-js/dom-query\"\nimport {\n FocusOutsideEvent,\n InteractOutsideHandlers,\n PointerDownOutsideEvent,\n trackInteractOutside,\n} from \"@zag-js/interact-outside\"\nimport { warn } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { Layer, layerStack } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeElement | (() => MaybeElement)\n\nexport type DismissableElementHandlers = InteractOutsideHandlers & {\n onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport type DismissableElementOptions = DismissableElementHandlers & {\n debug?: boolean\n pointerBlocking?: boolean\n onDismiss: () => void\n exclude?: Container | (() => Container)\n defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n if (!node) {\n warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n return\n }\n\n const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n layerStack.add(layer)\n assignPointerEventToLayers()\n\n function onPointerDownOutside(event: PointerDownOutsideEvent) {\n const target = getEventTarget(event.detail.originalEvent)\n if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n options.onPointerDownOutside?.(event)\n options.onInteractOutside?.(event)\n if (event.defaultPrevented) return\n if (debug) {\n console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n }\n onDismiss?.()\n }\n\n function onFocusOutside(event: FocusOutsideEvent) {\n const target = getEventTarget(event.detail.originalEvent)\n if (layerStack.isInBranch(target)) return\n options.onFocusOutside?.(event)\n options.onInteractOutside?.(event)\n if (event.defaultPrevented) return\n if (debug) {\n console.log(\"onFocusOutside:\", event.detail.originalEvent)\n }\n onDismiss?.()\n }\n\n function onEscapeKeyDown(event: KeyboardEvent) {\n if (!layerStack.isTopMost(node!)) return\n options.onEscapeKeyDown?.(event)\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault()\n onDismiss()\n }\n }\n\n function exclude(target: Element) {\n if (!node) return false\n const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n const _containers = Array.isArray(containers) ? containers : [containers]\n return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n }\n\n const cleanups = [\n pointerBlocking ? disablePointerEventsOutside(node) : undefined,\n trackEscapeKeydown(node, onEscapeKeyDown),\n trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside }),\n ]\n\n return () => {\n layerStack.remove(node!)\n // re-assign pointer event to remaining layers\n assignPointerEventToLayers()\n // remove pointer event from removed layer\n clearPointerEvent(node!)\n cleanups.forEach((fn) => fn?.())\n }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n const { defer } = options\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n cleanups.push(trackDismissableElementImpl(node, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") fn?.(event)\n }\n return addDomEvent(getDocument(node), \"keydown\", handleKeyDown)\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport type Layer = {\n dismiss: VoidFunction\n node: HTMLElement\n pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n layers: [] as Layer[],\n branches: [] as HTMLElement[],\n count(): number {\n return this.layers.length\n },\n pointerBlockingLayers(): Layer[] {\n return this.layers.filter((layer) => layer.pointerBlocking)\n },\n topMostPointerBlockingLayer(): Layer | undefined {\n return [...this.pointerBlockingLayers()].slice(-1)[0]\n },\n hasPointerBlockingLayer(): boolean {\n return this.pointerBlockingLayers().length > 0\n },\n isBelowPointerBlockingLayer(node: HTMLElement) {\n const index = this.indexOf(node)\n const highestBlockingIndex = this.topMostPointerBlockingLayer()\n ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n : -1\n return index < highestBlockingIndex\n },\n isTopMost(node: HTMLElement | null) {\n const layer = this.layers[this.count() - 1]\n return layer?.node === node\n },\n getNestedLayers(node: HTMLElement) {\n return Array.from(this.layers).slice(this.indexOf(node) + 1)\n },\n isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n },\n isInBranch(target: HTMLElement | EventTarget | null) {\n return Array.from(this.branches).some((branch) => contains(branch, target))\n },\n add(layer: Layer) {\n this.layers.push(layer)\n },\n addBranch(node: HTMLElement) {\n this.branches.push(node)\n },\n remove(node: HTMLElement) {\n const index = this.indexOf(node)\n if (index < 0) return\n\n // dismiss nested layers\n if (index < this.count() - 1) {\n const _layers = this.getNestedLayers(node)\n _layers.forEach((layer) => layer.dismiss())\n }\n // remove this layer\n this.layers.splice(index, 1)\n },\n removeBranch(node: HTMLElement) {\n const index = this.branches.indexOf(node)\n if (index >= 0) this.branches.splice(index, 1)\n },\n indexOf(node: HTMLElement | undefined) {\n return this.layers.findIndex((layer) => layer.node === node)\n },\n dismiss(node: HTMLElement) {\n this.layers[this.indexOf(node)]?.dismiss()\n },\n clear() {\n this.remove(this.layers[0].node)\n },\n}\n","import { getDocument } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n layerStack.layers.forEach(({ node }) => {\n node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n node.style.pointerEvents = \"\"\n}\n\nconst DATA_ATTR = \"data-inert\"\n\nexport function disablePointerEventsOutside(node: HTMLElement) {\n const doc = getDocument(node)\n\n if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {\n originalBodyPointerEvents = document.body.style.pointerEvents\n doc.body.style.pointerEvents = \"none\"\n doc.body.setAttribute(DATA_ATTR, \"\")\n }\n\n return () => {\n if (layerStack.hasPointerBlockingLayer()) return\n doc.body.style.pointerEvents = originalBodyPointerEvents\n doc.body.removeAttribute(DATA_ATTR)\n if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n }\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_dom_query","node"]}
package/dist/index.mjs CHANGED
@@ -1 +1,196 @@
1
- export { trackDismissableElement } from './dismissable-layer.mjs';
1
+ // src/dismissable-layer.ts
2
+ import { contains as contains2, getEventTarget, raf } from "@zag-js/dom-query";
3
+ import {
4
+ trackInteractOutside
5
+ } from "@zag-js/interact-outside";
6
+ import { warn } from "@zag-js/utils";
7
+
8
+ // src/escape-keydown.ts
9
+ import { addDomEvent } from "@zag-js/dom-event";
10
+ import { getDocument } from "@zag-js/dom-query";
11
+ function trackEscapeKeydown(node, fn) {
12
+ const handleKeyDown = (event) => {
13
+ if (event.key === "Escape")
14
+ fn?.(event);
15
+ };
16
+ return addDomEvent(getDocument(node), "keydown", handleKeyDown);
17
+ }
18
+
19
+ // src/layer-stack.ts
20
+ import { contains } from "@zag-js/dom-query";
21
+ var layerStack = {
22
+ layers: [],
23
+ branches: [],
24
+ count() {
25
+ return this.layers.length;
26
+ },
27
+ pointerBlockingLayers() {
28
+ return this.layers.filter((layer) => layer.pointerBlocking);
29
+ },
30
+ topMostPointerBlockingLayer() {
31
+ return [...this.pointerBlockingLayers()].slice(-1)[0];
32
+ },
33
+ hasPointerBlockingLayer() {
34
+ return this.pointerBlockingLayers().length > 0;
35
+ },
36
+ isBelowPointerBlockingLayer(node) {
37
+ const index = this.indexOf(node);
38
+ const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
39
+ return index < highestBlockingIndex;
40
+ },
41
+ isTopMost(node) {
42
+ const layer = this.layers[this.count() - 1];
43
+ return layer?.node === node;
44
+ },
45
+ getNestedLayers(node) {
46
+ return Array.from(this.layers).slice(this.indexOf(node) + 1);
47
+ },
48
+ isInNestedLayer(node, target) {
49
+ return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
50
+ },
51
+ isInBranch(target) {
52
+ return Array.from(this.branches).some((branch) => contains(branch, target));
53
+ },
54
+ add(layer) {
55
+ this.layers.push(layer);
56
+ },
57
+ addBranch(node) {
58
+ this.branches.push(node);
59
+ },
60
+ remove(node) {
61
+ const index = this.indexOf(node);
62
+ if (index < 0)
63
+ return;
64
+ if (index < this.count() - 1) {
65
+ const _layers = this.getNestedLayers(node);
66
+ _layers.forEach((layer) => layer.dismiss());
67
+ }
68
+ this.layers.splice(index, 1);
69
+ },
70
+ removeBranch(node) {
71
+ const index = this.branches.indexOf(node);
72
+ if (index >= 0)
73
+ this.branches.splice(index, 1);
74
+ },
75
+ indexOf(node) {
76
+ return this.layers.findIndex((layer) => layer.node === node);
77
+ },
78
+ dismiss(node) {
79
+ this.layers[this.indexOf(node)]?.dismiss();
80
+ },
81
+ clear() {
82
+ this.remove(this.layers[0].node);
83
+ }
84
+ };
85
+
86
+ // src/pointer-event-outside.ts
87
+ import { getDocument as getDocument2 } from "@zag-js/dom-query";
88
+ var originalBodyPointerEvents;
89
+ function assignPointerEventToLayers() {
90
+ layerStack.layers.forEach(({ node }) => {
91
+ node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
92
+ });
93
+ }
94
+ function clearPointerEvent(node) {
95
+ node.style.pointerEvents = "";
96
+ }
97
+ var DATA_ATTR = "data-inert";
98
+ function disablePointerEventsOutside(node) {
99
+ const doc = getDocument2(node);
100
+ if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
101
+ originalBodyPointerEvents = document.body.style.pointerEvents;
102
+ doc.body.style.pointerEvents = "none";
103
+ doc.body.setAttribute(DATA_ATTR, "");
104
+ }
105
+ return () => {
106
+ if (layerStack.hasPointerBlockingLayer())
107
+ return;
108
+ doc.body.style.pointerEvents = originalBodyPointerEvents;
109
+ doc.body.removeAttribute(DATA_ATTR);
110
+ if (doc.body.style.length === 0)
111
+ doc.body.removeAttribute("style");
112
+ };
113
+ }
114
+
115
+ // src/dismissable-layer.ts
116
+ function trackDismissableElementImpl(node, options) {
117
+ if (!node) {
118
+ warn("[@zag-js/dismissable] node is `null` or `undefined`");
119
+ return;
120
+ }
121
+ const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
122
+ const layer = { dismiss: onDismiss, node, pointerBlocking };
123
+ layerStack.add(layer);
124
+ assignPointerEventToLayers();
125
+ function onPointerDownOutside(event) {
126
+ const target = getEventTarget(event.detail.originalEvent);
127
+ if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
128
+ return;
129
+ options.onPointerDownOutside?.(event);
130
+ options.onInteractOutside?.(event);
131
+ if (event.defaultPrevented)
132
+ return;
133
+ if (debug) {
134
+ console.log("onPointerDownOutside:", event.detail.originalEvent);
135
+ }
136
+ onDismiss?.();
137
+ }
138
+ function onFocusOutside(event) {
139
+ const target = getEventTarget(event.detail.originalEvent);
140
+ if (layerStack.isInBranch(target))
141
+ return;
142
+ options.onFocusOutside?.(event);
143
+ options.onInteractOutside?.(event);
144
+ if (event.defaultPrevented)
145
+ return;
146
+ if (debug) {
147
+ console.log("onFocusOutside:", event.detail.originalEvent);
148
+ }
149
+ onDismiss?.();
150
+ }
151
+ function onEscapeKeyDown(event) {
152
+ if (!layerStack.isTopMost(node))
153
+ return;
154
+ options.onEscapeKeyDown?.(event);
155
+ if (!event.defaultPrevented && onDismiss) {
156
+ event.preventDefault();
157
+ onDismiss();
158
+ }
159
+ }
160
+ function exclude(target) {
161
+ if (!node)
162
+ return false;
163
+ const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
164
+ const _containers = Array.isArray(containers) ? containers : [containers];
165
+ return _containers.some((node2) => contains2(node2, target)) || layerStack.isInNestedLayer(node, target);
166
+ }
167
+ const cleanups = [
168
+ pointerBlocking ? disablePointerEventsOutside(node) : void 0,
169
+ trackEscapeKeydown(node, onEscapeKeyDown),
170
+ trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
171
+ ];
172
+ return () => {
173
+ layerStack.remove(node);
174
+ assignPointerEventToLayers();
175
+ clearPointerEvent(node);
176
+ cleanups.forEach((fn) => fn?.());
177
+ };
178
+ }
179
+ function trackDismissableElement(nodeOrFn, options) {
180
+ const { defer } = options;
181
+ const func = defer ? raf : (v) => v();
182
+ const cleanups = [];
183
+ cleanups.push(
184
+ func(() => {
185
+ const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
186
+ cleanups.push(trackDismissableElementImpl(node, options));
187
+ })
188
+ );
189
+ return () => {
190
+ cleanups.forEach((fn) => fn?.());
191
+ };
192
+ }
193
+ export {
194
+ trackDismissableElement
195
+ };
196
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/dismissable-layer.ts","../src/escape-keydown.ts","../src/layer-stack.ts","../src/pointer-event-outside.ts"],"sourcesContent":["import { contains, getEventTarget, raf } from \"@zag-js/dom-query\"\nimport {\n FocusOutsideEvent,\n InteractOutsideHandlers,\n PointerDownOutsideEvent,\n trackInteractOutside,\n} from \"@zag-js/interact-outside\"\nimport { warn } from \"@zag-js/utils\"\nimport { trackEscapeKeydown } from \"./escape-keydown\"\nimport { Layer, layerStack } from \"./layer-stack\"\nimport { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside } from \"./pointer-event-outside\"\n\ntype MaybeElement = HTMLElement | null\ntype Container = MaybeElement | Array<MaybeElement>\ntype NodeOrFn = MaybeElement | (() => MaybeElement)\n\nexport type DismissableElementHandlers = InteractOutsideHandlers & {\n onEscapeKeyDown?: (event: KeyboardEvent) => void\n}\n\nexport type DismissableElementOptions = DismissableElementHandlers & {\n debug?: boolean\n pointerBlocking?: boolean\n onDismiss: () => void\n exclude?: Container | (() => Container)\n defer?: boolean\n}\n\nfunction trackDismissableElementImpl(node: MaybeElement, options: DismissableElementOptions) {\n if (!node) {\n warn(\"[@zag-js/dismissable] node is `null` or `undefined`\")\n return\n }\n\n const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options\n\n const layer: Layer = { dismiss: onDismiss, node, pointerBlocking }\n\n layerStack.add(layer)\n assignPointerEventToLayers()\n\n function onPointerDownOutside(event: PointerDownOutsideEvent) {\n const target = getEventTarget(event.detail.originalEvent)\n if (layerStack.isBelowPointerBlockingLayer(node!) || layerStack.isInBranch(target)) return\n options.onPointerDownOutside?.(event)\n options.onInteractOutside?.(event)\n if (event.defaultPrevented) return\n if (debug) {\n console.log(\"onPointerDownOutside:\", event.detail.originalEvent)\n }\n onDismiss?.()\n }\n\n function onFocusOutside(event: FocusOutsideEvent) {\n const target = getEventTarget(event.detail.originalEvent)\n if (layerStack.isInBranch(target)) return\n options.onFocusOutside?.(event)\n options.onInteractOutside?.(event)\n if (event.defaultPrevented) return\n if (debug) {\n console.log(\"onFocusOutside:\", event.detail.originalEvent)\n }\n onDismiss?.()\n }\n\n function onEscapeKeyDown(event: KeyboardEvent) {\n if (!layerStack.isTopMost(node!)) return\n options.onEscapeKeyDown?.(event)\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault()\n onDismiss()\n }\n }\n\n function exclude(target: Element) {\n if (!node) return false\n const containers = typeof excludeContainers === \"function\" ? excludeContainers() : excludeContainers\n const _containers = Array.isArray(containers) ? containers : [containers]\n return _containers.some((node) => contains(node, target)) || layerStack.isInNestedLayer(node, target)\n }\n\n const cleanups = [\n pointerBlocking ? disablePointerEventsOutside(node) : undefined,\n trackEscapeKeydown(node, onEscapeKeyDown),\n trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside }),\n ]\n\n return () => {\n layerStack.remove(node!)\n // re-assign pointer event to remaining layers\n assignPointerEventToLayers()\n // remove pointer event from removed layer\n clearPointerEvent(node!)\n cleanups.forEach((fn) => fn?.())\n }\n}\n\nexport function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions) {\n const { defer } = options\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const node = typeof nodeOrFn === \"function\" ? nodeOrFn() : nodeOrFn\n cleanups.push(trackDismissableElementImpl(node, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { addDomEvent } from \"@zag-js/dom-event\"\nimport { getDocument } from \"@zag-js/dom-query\"\n\nexport function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") fn?.(event)\n }\n return addDomEvent(getDocument(node), \"keydown\", handleKeyDown)\n}\n","import { contains } from \"@zag-js/dom-query\"\n\nexport type Layer = {\n dismiss: VoidFunction\n node: HTMLElement\n pointerBlocking?: boolean\n}\n\nexport const layerStack = {\n layers: [] as Layer[],\n branches: [] as HTMLElement[],\n count(): number {\n return this.layers.length\n },\n pointerBlockingLayers(): Layer[] {\n return this.layers.filter((layer) => layer.pointerBlocking)\n },\n topMostPointerBlockingLayer(): Layer | undefined {\n return [...this.pointerBlockingLayers()].slice(-1)[0]\n },\n hasPointerBlockingLayer(): boolean {\n return this.pointerBlockingLayers().length > 0\n },\n isBelowPointerBlockingLayer(node: HTMLElement) {\n const index = this.indexOf(node)\n const highestBlockingIndex = this.topMostPointerBlockingLayer()\n ? this.indexOf(this.topMostPointerBlockingLayer()?.node)\n : -1\n return index < highestBlockingIndex\n },\n isTopMost(node: HTMLElement | null) {\n const layer = this.layers[this.count() - 1]\n return layer?.node === node\n },\n getNestedLayers(node: HTMLElement) {\n return Array.from(this.layers).slice(this.indexOf(node) + 1)\n },\n isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null) {\n return this.getNestedLayers(node).some((layer) => contains(layer.node, target))\n },\n isInBranch(target: HTMLElement | EventTarget | null) {\n return Array.from(this.branches).some((branch) => contains(branch, target))\n },\n add(layer: Layer) {\n this.layers.push(layer)\n },\n addBranch(node: HTMLElement) {\n this.branches.push(node)\n },\n remove(node: HTMLElement) {\n const index = this.indexOf(node)\n if (index < 0) return\n\n // dismiss nested layers\n if (index < this.count() - 1) {\n const _layers = this.getNestedLayers(node)\n _layers.forEach((layer) => layer.dismiss())\n }\n // remove this layer\n this.layers.splice(index, 1)\n },\n removeBranch(node: HTMLElement) {\n const index = this.branches.indexOf(node)\n if (index >= 0) this.branches.splice(index, 1)\n },\n indexOf(node: HTMLElement | undefined) {\n return this.layers.findIndex((layer) => layer.node === node)\n },\n dismiss(node: HTMLElement) {\n this.layers[this.indexOf(node)]?.dismiss()\n },\n clear() {\n this.remove(this.layers[0].node)\n },\n}\n","import { getDocument } from \"@zag-js/dom-query\"\nimport { layerStack } from \"./layer-stack\"\n\nlet originalBodyPointerEvents: string\n\nexport function assignPointerEventToLayers() {\n layerStack.layers.forEach(({ node }) => {\n node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? \"none\" : \"auto\"\n })\n}\n\nexport function clearPointerEvent(node: HTMLElement) {\n node.style.pointerEvents = \"\"\n}\n\nconst DATA_ATTR = \"data-inert\"\n\nexport function disablePointerEventsOutside(node: HTMLElement) {\n const doc = getDocument(node)\n\n if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {\n originalBodyPointerEvents = document.body.style.pointerEvents\n doc.body.style.pointerEvents = \"none\"\n doc.body.setAttribute(DATA_ATTR, \"\")\n }\n\n return () => {\n if (layerStack.hasPointerBlockingLayer()) return\n doc.body.style.pointerEvents = originalBodyPointerEvents\n doc.body.removeAttribute(DATA_ATTR)\n if (doc.body.style.length === 0) doc.body.removeAttribute(\"style\")\n }\n}\n"],"mappings":"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","names":["contains","getDocument","getDocument","node","contains"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/dismissable",
3
- "version": "0.10.5",
3
+ "version": "0.11.1",
4
4
  "description": "Dismissable layer utilities for the DOM",
5
5
  "keywords": [
6
6
  "js",
@@ -24,10 +24,10 @@
24
24
  "access": "public"
25
25
  },
26
26
  "dependencies": {
27
- "@zag-js/interact-outside": "0.10.5",
28
- "@zag-js/dom-query": "0.10.5",
29
- "@zag-js/dom-event": "0.10.5",
30
- "@zag-js/utils": "0.10.5"
27
+ "@zag-js/interact-outside": "0.11.1",
28
+ "@zag-js/dom-query": "0.11.1",
29
+ "@zag-js/dom-event": "0.11.1",
30
+ "@zag-js/utils": "0.11.1"
31
31
  },
32
32
  "devDependencies": {
33
33
  "clean-package": "2.2.0"
@@ -48,7 +48,7 @@
48
48
  "./package.json": "./package.json"
49
49
  },
50
50
  "scripts": {
51
- "build": "vite build -c ../../../vite.config.ts",
51
+ "build": "tsup",
52
52
  "test": "jest --config ../../../jest.config.js --rootDir tests",
53
53
  "lint": "eslint src --ext .ts,.tsx",
54
54
  "test-ci": "pnpm test --ci --runInBand -u",
@@ -1,16 +0,0 @@
1
- import { InteractOutsideHandlers } from "@zag-js/interact-outside";
2
- type MaybeElement = HTMLElement | null;
3
- type Container = MaybeElement | Array<MaybeElement>;
4
- type NodeOrFn = MaybeElement | (() => MaybeElement);
5
- export type DismissableElementHandlers = InteractOutsideHandlers & {
6
- onEscapeKeyDown?: (event: KeyboardEvent) => void;
7
- };
8
- export type DismissableElementOptions = DismissableElementHandlers & {
9
- debug?: boolean;
10
- pointerBlocking?: boolean;
11
- onDismiss: () => void;
12
- exclude?: Container | (() => Container);
13
- defer?: boolean;
14
- };
15
- export declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
16
- export {};
@@ -1,90 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const domQuery = require('@zag-js/dom-query');
6
- const interactOutside = require('@zag-js/interact-outside');
7
- const utils = require('@zag-js/utils');
8
- const escapeKeydown = require('./escape-keydown.js');
9
- const layerStack = require('./layer-stack.js');
10
- const pointerEventOutside = require('./pointer-event-outside.js');
11
-
12
- function trackDismissableElementImpl(node, options) {
13
- if (!node) {
14
- utils.warn("[@zag-js/dismissable] node is `null` or `undefined`");
15
- return;
16
- }
17
- const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
18
- const layer = { dismiss: onDismiss, node, pointerBlocking };
19
- layerStack.layerStack.add(layer);
20
- pointerEventOutside.assignPointerEventToLayers();
21
- function onPointerDownOutside(event) {
22
- const target = domQuery.getEventTarget(event.detail.originalEvent);
23
- if (layerStack.layerStack.isBelowPointerBlockingLayer(node) || layerStack.layerStack.isInBranch(target))
24
- return;
25
- options.onPointerDownOutside?.(event);
26
- options.onInteractOutside?.(event);
27
- if (event.defaultPrevented)
28
- return;
29
- if (debug) {
30
- console.log("onPointerDownOutside:", event.detail.originalEvent);
31
- }
32
- onDismiss?.();
33
- }
34
- function onFocusOutside(event) {
35
- const target = domQuery.getEventTarget(event.detail.originalEvent);
36
- if (layerStack.layerStack.isInBranch(target))
37
- return;
38
- options.onFocusOutside?.(event);
39
- options.onInteractOutside?.(event);
40
- if (event.defaultPrevented)
41
- return;
42
- if (debug) {
43
- console.log("onFocusOutside:", event.detail.originalEvent);
44
- }
45
- onDismiss?.();
46
- }
47
- function onEscapeKeyDown(event) {
48
- if (!layerStack.layerStack.isTopMost(node))
49
- return;
50
- options.onEscapeKeyDown?.(event);
51
- if (!event.defaultPrevented && onDismiss) {
52
- event.preventDefault();
53
- onDismiss();
54
- }
55
- }
56
- function exclude(target) {
57
- if (!node)
58
- return false;
59
- const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
60
- const _containers = Array.isArray(containers) ? containers : [containers];
61
- return _containers.some((node2) => domQuery.contains(node2, target)) || layerStack.layerStack.isInNestedLayer(node, target);
62
- }
63
- const cleanups = [
64
- pointerBlocking ? pointerEventOutside.disablePointerEventsOutside(node) : void 0,
65
- escapeKeydown.trackEscapeKeydown(node, onEscapeKeyDown),
66
- interactOutside.trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
67
- ];
68
- return () => {
69
- layerStack.layerStack.remove(node);
70
- pointerEventOutside.assignPointerEventToLayers();
71
- pointerEventOutside.clearPointerEvent(node);
72
- cleanups.forEach((fn) => fn?.());
73
- };
74
- }
75
- function trackDismissableElement(nodeOrFn, options) {
76
- const { defer } = options;
77
- const func = defer ? domQuery.raf : (v) => v();
78
- const cleanups = [];
79
- cleanups.push(
80
- func(() => {
81
- const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
82
- cleanups.push(trackDismissableElementImpl(node, options));
83
- })
84
- );
85
- return () => {
86
- cleanups.forEach((fn) => fn?.());
87
- };
88
- }
89
-
90
- exports.trackDismissableElement = trackDismissableElement;
@@ -1,86 +0,0 @@
1
- import { raf, getEventTarget, contains } from '@zag-js/dom-query';
2
- import { trackInteractOutside } from '@zag-js/interact-outside';
3
- import { warn } from '@zag-js/utils';
4
- import { trackEscapeKeydown } from './escape-keydown.mjs';
5
- import { layerStack } from './layer-stack.mjs';
6
- import { assignPointerEventToLayers, disablePointerEventsOutside, clearPointerEvent } from './pointer-event-outside.mjs';
7
-
8
- function trackDismissableElementImpl(node, options) {
9
- if (!node) {
10
- warn("[@zag-js/dismissable] node is `null` or `undefined`");
11
- return;
12
- }
13
- const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
14
- const layer = { dismiss: onDismiss, node, pointerBlocking };
15
- layerStack.add(layer);
16
- assignPointerEventToLayers();
17
- function onPointerDownOutside(event) {
18
- const target = getEventTarget(event.detail.originalEvent);
19
- if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
20
- return;
21
- options.onPointerDownOutside?.(event);
22
- options.onInteractOutside?.(event);
23
- if (event.defaultPrevented)
24
- return;
25
- if (debug) {
26
- console.log("onPointerDownOutside:", event.detail.originalEvent);
27
- }
28
- onDismiss?.();
29
- }
30
- function onFocusOutside(event) {
31
- const target = getEventTarget(event.detail.originalEvent);
32
- if (layerStack.isInBranch(target))
33
- return;
34
- options.onFocusOutside?.(event);
35
- options.onInteractOutside?.(event);
36
- if (event.defaultPrevented)
37
- return;
38
- if (debug) {
39
- console.log("onFocusOutside:", event.detail.originalEvent);
40
- }
41
- onDismiss?.();
42
- }
43
- function onEscapeKeyDown(event) {
44
- if (!layerStack.isTopMost(node))
45
- return;
46
- options.onEscapeKeyDown?.(event);
47
- if (!event.defaultPrevented && onDismiss) {
48
- event.preventDefault();
49
- onDismiss();
50
- }
51
- }
52
- function exclude(target) {
53
- if (!node)
54
- return false;
55
- const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
56
- const _containers = Array.isArray(containers) ? containers : [containers];
57
- return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
58
- }
59
- const cleanups = [
60
- pointerBlocking ? disablePointerEventsOutside(node) : void 0,
61
- trackEscapeKeydown(node, onEscapeKeyDown),
62
- trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
63
- ];
64
- return () => {
65
- layerStack.remove(node);
66
- assignPointerEventToLayers();
67
- clearPointerEvent(node);
68
- cleanups.forEach((fn) => fn?.());
69
- };
70
- }
71
- function trackDismissableElement(nodeOrFn, options) {
72
- const { defer } = options;
73
- const func = defer ? raf : (v) => v();
74
- const cleanups = [];
75
- cleanups.push(
76
- func(() => {
77
- const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
78
- cleanups.push(trackDismissableElementImpl(node, options));
79
- })
80
- );
81
- return () => {
82
- cleanups.forEach((fn) => fn?.());
83
- };
84
- }
85
-
86
- export { trackDismissableElement };
@@ -1 +0,0 @@
1
- export declare function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void): () => void;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const domEvent = require('@zag-js/dom-event');
6
- const domQuery = require('@zag-js/dom-query');
7
-
8
- function trackEscapeKeydown(node, fn) {
9
- const handleKeyDown = (event) => {
10
- if (event.key === "Escape")
11
- fn?.(event);
12
- };
13
- return domEvent.addDomEvent(domQuery.getDocument(node), "keydown", handleKeyDown);
14
- }
15
-
16
- exports.trackEscapeKeydown = trackEscapeKeydown;
@@ -1,12 +0,0 @@
1
- import { addDomEvent } from '@zag-js/dom-event';
2
- import { getDocument } from '@zag-js/dom-query';
3
-
4
- function trackEscapeKeydown(node, fn) {
5
- const handleKeyDown = (event) => {
6
- if (event.key === "Escape")
7
- fn?.(event);
8
- };
9
- return addDomEvent(getDocument(node), "keydown", handleKeyDown);
10
- }
11
-
12
- export { trackEscapeKeydown };
@@ -1,25 +0,0 @@
1
- export type Layer = {
2
- dismiss: VoidFunction;
3
- node: HTMLElement;
4
- pointerBlocking?: boolean;
5
- };
6
- export declare const layerStack: {
7
- layers: Layer[];
8
- branches: HTMLElement[];
9
- count(): number;
10
- pointerBlockingLayers(): Layer[];
11
- topMostPointerBlockingLayer(): Layer | undefined;
12
- hasPointerBlockingLayer(): boolean;
13
- isBelowPointerBlockingLayer(node: HTMLElement): boolean;
14
- isTopMost(node: HTMLElement | null): boolean;
15
- getNestedLayers(node: HTMLElement): Layer[];
16
- isInNestedLayer(node: HTMLElement, target: HTMLElement | EventTarget | null): boolean;
17
- isInBranch(target: HTMLElement | EventTarget | null): boolean;
18
- add(layer: Layer): void;
19
- addBranch(node: HTMLElement): void;
20
- remove(node: HTMLElement): void;
21
- removeBranch(node: HTMLElement): void;
22
- indexOf(node: HTMLElement | undefined): number;
23
- dismiss(node: HTMLElement): void;
24
- clear(): void;
25
- };
@@ -1,72 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const domQuery = require('@zag-js/dom-query');
6
-
7
- const layerStack = {
8
- layers: [],
9
- branches: [],
10
- count() {
11
- return this.layers.length;
12
- },
13
- pointerBlockingLayers() {
14
- return this.layers.filter((layer) => layer.pointerBlocking);
15
- },
16
- topMostPointerBlockingLayer() {
17
- return [...this.pointerBlockingLayers()].slice(-1)[0];
18
- },
19
- hasPointerBlockingLayer() {
20
- return this.pointerBlockingLayers().length > 0;
21
- },
22
- isBelowPointerBlockingLayer(node) {
23
- const index = this.indexOf(node);
24
- const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
25
- return index < highestBlockingIndex;
26
- },
27
- isTopMost(node) {
28
- const layer = this.layers[this.count() - 1];
29
- return layer?.node === node;
30
- },
31
- getNestedLayers(node) {
32
- return Array.from(this.layers).slice(this.indexOf(node) + 1);
33
- },
34
- isInNestedLayer(node, target) {
35
- return this.getNestedLayers(node).some((layer) => domQuery.contains(layer.node, target));
36
- },
37
- isInBranch(target) {
38
- return Array.from(this.branches).some((branch) => domQuery.contains(branch, target));
39
- },
40
- add(layer) {
41
- this.layers.push(layer);
42
- },
43
- addBranch(node) {
44
- this.branches.push(node);
45
- },
46
- remove(node) {
47
- const index = this.indexOf(node);
48
- if (index < 0)
49
- return;
50
- if (index < this.count() - 1) {
51
- const _layers = this.getNestedLayers(node);
52
- _layers.forEach((layer) => layer.dismiss());
53
- }
54
- this.layers.splice(index, 1);
55
- },
56
- removeBranch(node) {
57
- const index = this.branches.indexOf(node);
58
- if (index >= 0)
59
- this.branches.splice(index, 1);
60
- },
61
- indexOf(node) {
62
- return this.layers.findIndex((layer) => layer.node === node);
63
- },
64
- dismiss(node) {
65
- this.layers[this.indexOf(node)]?.dismiss();
66
- },
67
- clear() {
68
- this.remove(this.layers[0].node);
69
- }
70
- };
71
-
72
- exports.layerStack = layerStack;
@@ -1,68 +0,0 @@
1
- import { contains } from '@zag-js/dom-query';
2
-
3
- const layerStack = {
4
- layers: [],
5
- branches: [],
6
- count() {
7
- return this.layers.length;
8
- },
9
- pointerBlockingLayers() {
10
- return this.layers.filter((layer) => layer.pointerBlocking);
11
- },
12
- topMostPointerBlockingLayer() {
13
- return [...this.pointerBlockingLayers()].slice(-1)[0];
14
- },
15
- hasPointerBlockingLayer() {
16
- return this.pointerBlockingLayers().length > 0;
17
- },
18
- isBelowPointerBlockingLayer(node) {
19
- const index = this.indexOf(node);
20
- const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
21
- return index < highestBlockingIndex;
22
- },
23
- isTopMost(node) {
24
- const layer = this.layers[this.count() - 1];
25
- return layer?.node === node;
26
- },
27
- getNestedLayers(node) {
28
- return Array.from(this.layers).slice(this.indexOf(node) + 1);
29
- },
30
- isInNestedLayer(node, target) {
31
- return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
32
- },
33
- isInBranch(target) {
34
- return Array.from(this.branches).some((branch) => contains(branch, target));
35
- },
36
- add(layer) {
37
- this.layers.push(layer);
38
- },
39
- addBranch(node) {
40
- this.branches.push(node);
41
- },
42
- remove(node) {
43
- const index = this.indexOf(node);
44
- if (index < 0)
45
- return;
46
- if (index < this.count() - 1) {
47
- const _layers = this.getNestedLayers(node);
48
- _layers.forEach((layer) => layer.dismiss());
49
- }
50
- this.layers.splice(index, 1);
51
- },
52
- removeBranch(node) {
53
- const index = this.branches.indexOf(node);
54
- if (index >= 0)
55
- this.branches.splice(index, 1);
56
- },
57
- indexOf(node) {
58
- return this.layers.findIndex((layer) => layer.node === node);
59
- },
60
- dismiss(node) {
61
- this.layers[this.indexOf(node)]?.dismiss();
62
- },
63
- clear() {
64
- this.remove(this.layers[0].node);
65
- }
66
- };
67
-
68
- export { layerStack };
@@ -1,3 +0,0 @@
1
- export declare function assignPointerEventToLayers(): void;
2
- export declare function clearPointerEvent(node: HTMLElement): void;
3
- export declare function disablePointerEventsOutside(node: HTMLElement): () => void;
@@ -1,37 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const domQuery = require('@zag-js/dom-query');
6
- const layerStack = require('./layer-stack.js');
7
-
8
- let originalBodyPointerEvents;
9
- function assignPointerEventToLayers() {
10
- layerStack.layerStack.layers.forEach(({ node }) => {
11
- node.style.pointerEvents = layerStack.layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
12
- });
13
- }
14
- function clearPointerEvent(node) {
15
- node.style.pointerEvents = "";
16
- }
17
- const DATA_ATTR = "data-inert";
18
- function disablePointerEventsOutside(node) {
19
- const doc = domQuery.getDocument(node);
20
- if (layerStack.layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
21
- originalBodyPointerEvents = document.body.style.pointerEvents;
22
- doc.body.style.pointerEvents = "none";
23
- doc.body.setAttribute(DATA_ATTR, "");
24
- }
25
- return () => {
26
- if (layerStack.layerStack.hasPointerBlockingLayer())
27
- return;
28
- doc.body.style.pointerEvents = originalBodyPointerEvents;
29
- doc.body.removeAttribute(DATA_ATTR);
30
- if (doc.body.style.length === 0)
31
- doc.body.removeAttribute("style");
32
- };
33
- }
34
-
35
- exports.assignPointerEventToLayers = assignPointerEventToLayers;
36
- exports.clearPointerEvent = clearPointerEvent;
37
- exports.disablePointerEventsOutside = disablePointerEventsOutside;
@@ -1,31 +0,0 @@
1
- import { getDocument } from '@zag-js/dom-query';
2
- import { layerStack } from './layer-stack.mjs';
3
-
4
- let originalBodyPointerEvents;
5
- function assignPointerEventToLayers() {
6
- layerStack.layers.forEach(({ node }) => {
7
- node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
8
- });
9
- }
10
- function clearPointerEvent(node) {
11
- node.style.pointerEvents = "";
12
- }
13
- const DATA_ATTR = "data-inert";
14
- function disablePointerEventsOutside(node) {
15
- const doc = getDocument(node);
16
- if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
17
- originalBodyPointerEvents = document.body.style.pointerEvents;
18
- doc.body.style.pointerEvents = "none";
19
- doc.body.setAttribute(DATA_ATTR, "");
20
- }
21
- return () => {
22
- if (layerStack.hasPointerBlockingLayer())
23
- return;
24
- doc.body.style.pointerEvents = originalBodyPointerEvents;
25
- doc.body.removeAttribute(DATA_ATTR);
26
- if (doc.body.style.length === 0)
27
- doc.body.removeAttribute("style");
28
- };
29
- }
30
-
31
- export { assignPointerEventToLayers, clearPointerEvent, disablePointerEventsOutside };