@zag-js/popover 0.0.0-dev-20230201173935 → 0.0.0-dev-20230201190914
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.
- package/dist/{chunk-G77EJ7HC.mjs → chunk-2EVL5G6H.mjs} +12 -37
- package/dist/{chunk-KEKENPIA.mjs → chunk-JNFEFPEH.mjs} +2 -2
- package/dist/{chunk-UGXSXC3K.mjs → chunk-KTOPDXGV.mjs} +0 -0
- package/dist/{chunk-XZOQ7WR6.mjs → chunk-ZG35X2QD.mjs} +15 -26
- package/dist/index.js +26 -62
- package/dist/index.mjs +4 -4
- package/dist/popover.anatomy.mjs +1 -1
- package/dist/popover.connect.js +12 -37
- package/dist/popover.connect.mjs +3 -3
- package/dist/popover.dom.js +12 -37
- package/dist/popover.dom.mjs +1 -1
- package/dist/popover.machine.js +26 -62
- package/dist/popover.machine.mjs +2 -2
- package/package.json +10 -10
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// ../../utilities/core/src/functions.ts
|
|
2
2
|
var runIfFn = (v, ...a) => {
|
|
3
3
|
const res = typeof v === "function" ? v(...a) : v;
|
|
4
|
-
return res
|
|
4
|
+
return res ?? void 0;
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
// ../../utilities/dom/src/query.ts
|
|
@@ -9,30 +9,23 @@ function isDocument(el) {
|
|
|
9
9
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
10
10
|
}
|
|
11
11
|
function isWindow(value) {
|
|
12
|
-
return
|
|
12
|
+
return value?.toString() === "[object Window]";
|
|
13
13
|
}
|
|
14
14
|
function isFrame(element) {
|
|
15
15
|
return element.localName === "iframe";
|
|
16
16
|
}
|
|
17
17
|
function getDocument(el) {
|
|
18
|
-
var _a;
|
|
19
18
|
if (isWindow(el))
|
|
20
19
|
return el.document;
|
|
21
20
|
if (isDocument(el))
|
|
22
21
|
return el;
|
|
23
|
-
return
|
|
22
|
+
return el?.ownerDocument ?? document;
|
|
24
23
|
}
|
|
25
24
|
function defineDomHelpers(helpers) {
|
|
26
25
|
const dom2 = {
|
|
27
|
-
getRootNode: (ctx) =>
|
|
28
|
-
var _a, _b;
|
|
29
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
30
|
-
},
|
|
26
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
31
27
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
32
|
-
getWin: (ctx) =>
|
|
33
|
-
var _a;
|
|
34
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
35
|
-
},
|
|
28
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
36
29
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
37
30
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
38
31
|
};
|
|
@@ -47,7 +40,7 @@ function contains(parent, child) {
|
|
|
47
40
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
48
41
|
}
|
|
49
42
|
function isHTMLElement(v) {
|
|
50
|
-
return typeof v === "object" &&
|
|
43
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
51
44
|
}
|
|
52
45
|
function isVisible(el) {
|
|
53
46
|
if (!isHTMLElement(el))
|
|
@@ -118,32 +111,14 @@ function getLastTabbable(container, includeContainer) {
|
|
|
118
111
|
// src/popover.dom.ts
|
|
119
112
|
var dom = defineDomHelpers({
|
|
120
113
|
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
121
|
-
getAnchorId: (ctx) => {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
},
|
|
125
|
-
getTriggerId: (ctx) => {
|
|
126
|
-
var _a, _b;
|
|
127
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
128
|
-
},
|
|
129
|
-
getContentId: (ctx) => {
|
|
130
|
-
var _a, _b;
|
|
131
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
132
|
-
},
|
|
114
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
115
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
116
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
133
117
|
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
134
118
|
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
135
|
-
getTitleId: (ctx) => {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
},
|
|
139
|
-
getDescriptionId: (ctx) => {
|
|
140
|
-
var _a, _b;
|
|
141
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
142
|
-
},
|
|
143
|
-
getCloseTriggerId: (ctx) => {
|
|
144
|
-
var _a, _b;
|
|
145
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
146
|
-
},
|
|
119
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
120
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
121
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
147
122
|
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
148
123
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
149
124
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
File without changes
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
contains,
|
|
3
3
|
dom,
|
|
4
4
|
runIfFn
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-2EVL5G6H.mjs";
|
|
6
6
|
|
|
7
7
|
// src/popover.machine.ts
|
|
8
8
|
import { ariaHidden } from "@zag-js/aria-hidden";
|
|
@@ -48,9 +48,9 @@ var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
|
48
48
|
var isRef = (v) => hasProp(v, "current");
|
|
49
49
|
function addDomEvent(target, eventName, handler, options) {
|
|
50
50
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
51
|
-
node
|
|
51
|
+
node?.addEventListener(eventName, handler, options);
|
|
52
52
|
return () => {
|
|
53
|
-
node
|
|
53
|
+
node?.removeEventListener(eventName, handler, options);
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -185,16 +185,14 @@ function machine(userContext) {
|
|
|
185
185
|
pointerBlocking: ctx2.modal,
|
|
186
186
|
exclude: dom.getTriggerEl(ctx2),
|
|
187
187
|
onEscapeKeyDown(event) {
|
|
188
|
-
|
|
189
|
-
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
188
|
+
ctx2.onEscapeKeyDown?.(event);
|
|
190
189
|
if (ctx2.closeOnEsc)
|
|
191
190
|
return;
|
|
192
191
|
ctx2.focusTriggerOnClose = true;
|
|
193
192
|
event.preventDefault();
|
|
194
193
|
},
|
|
195
194
|
onInteractOutside(event) {
|
|
196
|
-
|
|
197
|
-
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
195
|
+
ctx2.onInteractOutside?.(event);
|
|
198
196
|
if (event.defaultPrevented)
|
|
199
197
|
return;
|
|
200
198
|
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
@@ -203,12 +201,10 @@ function machine(userContext) {
|
|
|
203
201
|
}
|
|
204
202
|
},
|
|
205
203
|
onPointerDownOutside(event) {
|
|
206
|
-
|
|
207
|
-
(_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
204
|
+
ctx2.onPointerDownOutside?.(event);
|
|
208
205
|
},
|
|
209
206
|
onFocusOutside(event) {
|
|
210
|
-
|
|
211
|
-
(_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
207
|
+
ctx2.onFocusOutside?.(event);
|
|
212
208
|
if (ctx2.currentPortalled) {
|
|
213
209
|
event.preventDefault();
|
|
214
210
|
}
|
|
@@ -243,7 +239,7 @@ function machine(userContext) {
|
|
|
243
239
|
nextTick(() => {
|
|
244
240
|
cleanup = ariaHidden([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
|
|
245
241
|
});
|
|
246
|
-
return () => cleanup
|
|
242
|
+
return () => cleanup?.();
|
|
247
243
|
},
|
|
248
244
|
preventScroll(ctx2) {
|
|
249
245
|
if (!ctx2.modal)
|
|
@@ -271,7 +267,7 @@ function machine(userContext) {
|
|
|
271
267
|
} catch {
|
|
272
268
|
}
|
|
273
269
|
});
|
|
274
|
-
return () => trap
|
|
270
|
+
return () => trap?.deactivate();
|
|
275
271
|
}
|
|
276
272
|
},
|
|
277
273
|
guards: {
|
|
@@ -295,33 +291,26 @@ function machine(userContext) {
|
|
|
295
291
|
},
|
|
296
292
|
setInitialFocus(ctx2) {
|
|
297
293
|
raf(() => {
|
|
298
|
-
|
|
299
|
-
(_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
|
|
294
|
+
dom.getInitialFocusEl(ctx2)?.focus();
|
|
300
295
|
});
|
|
301
296
|
},
|
|
302
297
|
focusTriggerIfNeeded(ctx2) {
|
|
303
298
|
if (!ctx2.focusTriggerOnClose)
|
|
304
299
|
return;
|
|
305
|
-
raf(() =>
|
|
306
|
-
var _a;
|
|
307
|
-
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
308
|
-
});
|
|
300
|
+
raf(() => dom.getTriggerEl(ctx2)?.focus());
|
|
309
301
|
},
|
|
310
302
|
focusFirstTabbableElement(ctx2, evt) {
|
|
311
|
-
var _a;
|
|
312
303
|
evt.preventDefault();
|
|
313
|
-
|
|
304
|
+
dom.getFirstTabbableEl(ctx2)?.focus();
|
|
314
305
|
},
|
|
315
306
|
invokeOnOpen(ctx2, evt) {
|
|
316
|
-
var _a;
|
|
317
307
|
if (evt.type !== "SETUP") {
|
|
318
|
-
|
|
308
|
+
ctx2.onOpenChange?.(true);
|
|
319
309
|
}
|
|
320
310
|
},
|
|
321
311
|
invokeOnClose(ctx2, evt) {
|
|
322
|
-
var _a;
|
|
323
312
|
if (evt.type !== "SETUP") {
|
|
324
|
-
|
|
313
|
+
ctx2.onOpenChange?.(false);
|
|
325
314
|
}
|
|
326
315
|
},
|
|
327
316
|
focusNextTabbableElementAfterTrigger(ctx2, evt) {
|
|
@@ -341,7 +330,7 @@ function machine(userContext) {
|
|
|
341
330
|
if (!elementAfterTrigger || elementAfterTrigger === button)
|
|
342
331
|
return;
|
|
343
332
|
evt.preventDefault();
|
|
344
|
-
raf(() => elementAfterTrigger
|
|
333
|
+
raf(() => elementAfterTrigger?.focus());
|
|
345
334
|
}
|
|
346
335
|
}
|
|
347
336
|
}
|
package/dist/index.js
CHANGED
|
@@ -67,7 +67,7 @@ function next(v, idx, opts = {}) {
|
|
|
67
67
|
// ../../utilities/core/src/functions.ts
|
|
68
68
|
var runIfFn = (v, ...a) => {
|
|
69
69
|
const res = typeof v === "function" ? v(...a) : v;
|
|
70
|
-
return res
|
|
70
|
+
return res ?? void 0;
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
// ../../utilities/core/src/guard.ts
|
|
@@ -89,30 +89,23 @@ function isDocument(el) {
|
|
|
89
89
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
90
90
|
}
|
|
91
91
|
function isWindow(value) {
|
|
92
|
-
return
|
|
92
|
+
return value?.toString() === "[object Window]";
|
|
93
93
|
}
|
|
94
94
|
function isFrame(element) {
|
|
95
95
|
return element.localName === "iframe";
|
|
96
96
|
}
|
|
97
97
|
function getDocument(el) {
|
|
98
|
-
var _a;
|
|
99
98
|
if (isWindow(el))
|
|
100
99
|
return el.document;
|
|
101
100
|
if (isDocument(el))
|
|
102
101
|
return el;
|
|
103
|
-
return
|
|
102
|
+
return el?.ownerDocument ?? document;
|
|
104
103
|
}
|
|
105
104
|
function defineDomHelpers(helpers) {
|
|
106
105
|
const dom2 = {
|
|
107
|
-
getRootNode: (ctx) =>
|
|
108
|
-
var _a, _b;
|
|
109
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
110
|
-
},
|
|
106
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
111
107
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
112
|
-
getWin: (ctx) =>
|
|
113
|
-
var _a;
|
|
114
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
115
|
-
},
|
|
108
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
116
109
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
117
110
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
118
111
|
};
|
|
@@ -127,7 +120,7 @@ function contains(parent, child) {
|
|
|
127
120
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
128
121
|
}
|
|
129
122
|
function isHTMLElement(v) {
|
|
130
|
-
return typeof v === "object" &&
|
|
123
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
131
124
|
}
|
|
132
125
|
function isVisible(el) {
|
|
133
126
|
if (!isHTMLElement(el))
|
|
@@ -202,9 +195,9 @@ function getLastTabbable(container, includeContainer) {
|
|
|
202
195
|
var isRef = (v) => hasProp(v, "current");
|
|
203
196
|
function addDomEvent(target, eventName, handler, options) {
|
|
204
197
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
205
|
-
node
|
|
198
|
+
node?.addEventListener(eventName, handler, options);
|
|
206
199
|
return () => {
|
|
207
|
-
node
|
|
200
|
+
node?.removeEventListener(eventName, handler, options);
|
|
208
201
|
};
|
|
209
202
|
}
|
|
210
203
|
|
|
@@ -235,32 +228,14 @@ var import_popper = require("@zag-js/popper");
|
|
|
235
228
|
// src/popover.dom.ts
|
|
236
229
|
var dom = defineDomHelpers({
|
|
237
230
|
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
238
|
-
getAnchorId: (ctx) => {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
},
|
|
242
|
-
getTriggerId: (ctx) => {
|
|
243
|
-
var _a, _b;
|
|
244
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
245
|
-
},
|
|
246
|
-
getContentId: (ctx) => {
|
|
247
|
-
var _a, _b;
|
|
248
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
249
|
-
},
|
|
231
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
232
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
233
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
250
234
|
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
251
235
|
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
252
|
-
getTitleId: (ctx) => {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
},
|
|
256
|
-
getDescriptionId: (ctx) => {
|
|
257
|
-
var _a, _b;
|
|
258
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
259
|
-
},
|
|
260
|
-
getCloseTriggerId: (ctx) => {
|
|
261
|
-
var _a, _b;
|
|
262
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
263
|
-
},
|
|
236
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
237
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
238
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
264
239
|
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
265
240
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
266
241
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
@@ -480,16 +455,14 @@ function machine(userContext) {
|
|
|
480
455
|
pointerBlocking: ctx2.modal,
|
|
481
456
|
exclude: dom.getTriggerEl(ctx2),
|
|
482
457
|
onEscapeKeyDown(event) {
|
|
483
|
-
|
|
484
|
-
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
458
|
+
ctx2.onEscapeKeyDown?.(event);
|
|
485
459
|
if (ctx2.closeOnEsc)
|
|
486
460
|
return;
|
|
487
461
|
ctx2.focusTriggerOnClose = true;
|
|
488
462
|
event.preventDefault();
|
|
489
463
|
},
|
|
490
464
|
onInteractOutside(event) {
|
|
491
|
-
|
|
492
|
-
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
465
|
+
ctx2.onInteractOutside?.(event);
|
|
493
466
|
if (event.defaultPrevented)
|
|
494
467
|
return;
|
|
495
468
|
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
@@ -498,12 +471,10 @@ function machine(userContext) {
|
|
|
498
471
|
}
|
|
499
472
|
},
|
|
500
473
|
onPointerDownOutside(event) {
|
|
501
|
-
|
|
502
|
-
(_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
474
|
+
ctx2.onPointerDownOutside?.(event);
|
|
503
475
|
},
|
|
504
476
|
onFocusOutside(event) {
|
|
505
|
-
|
|
506
|
-
(_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
477
|
+
ctx2.onFocusOutside?.(event);
|
|
507
478
|
if (ctx2.currentPortalled) {
|
|
508
479
|
event.preventDefault();
|
|
509
480
|
}
|
|
@@ -538,7 +509,7 @@ function machine(userContext) {
|
|
|
538
509
|
nextTick(() => {
|
|
539
510
|
cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
|
|
540
511
|
});
|
|
541
|
-
return () => cleanup
|
|
512
|
+
return () => cleanup?.();
|
|
542
513
|
},
|
|
543
514
|
preventScroll(ctx2) {
|
|
544
515
|
if (!ctx2.modal)
|
|
@@ -566,7 +537,7 @@ function machine(userContext) {
|
|
|
566
537
|
} catch {
|
|
567
538
|
}
|
|
568
539
|
});
|
|
569
|
-
return () => trap
|
|
540
|
+
return () => trap?.deactivate();
|
|
570
541
|
}
|
|
571
542
|
},
|
|
572
543
|
guards: {
|
|
@@ -590,33 +561,26 @@ function machine(userContext) {
|
|
|
590
561
|
},
|
|
591
562
|
setInitialFocus(ctx2) {
|
|
592
563
|
raf(() => {
|
|
593
|
-
|
|
594
|
-
(_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
|
|
564
|
+
dom.getInitialFocusEl(ctx2)?.focus();
|
|
595
565
|
});
|
|
596
566
|
},
|
|
597
567
|
focusTriggerIfNeeded(ctx2) {
|
|
598
568
|
if (!ctx2.focusTriggerOnClose)
|
|
599
569
|
return;
|
|
600
|
-
raf(() =>
|
|
601
|
-
var _a;
|
|
602
|
-
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
603
|
-
});
|
|
570
|
+
raf(() => dom.getTriggerEl(ctx2)?.focus());
|
|
604
571
|
},
|
|
605
572
|
focusFirstTabbableElement(ctx2, evt) {
|
|
606
|
-
var _a;
|
|
607
573
|
evt.preventDefault();
|
|
608
|
-
|
|
574
|
+
dom.getFirstTabbableEl(ctx2)?.focus();
|
|
609
575
|
},
|
|
610
576
|
invokeOnOpen(ctx2, evt) {
|
|
611
|
-
var _a;
|
|
612
577
|
if (evt.type !== "SETUP") {
|
|
613
|
-
|
|
578
|
+
ctx2.onOpenChange?.(true);
|
|
614
579
|
}
|
|
615
580
|
},
|
|
616
581
|
invokeOnClose(ctx2, evt) {
|
|
617
|
-
var _a;
|
|
618
582
|
if (evt.type !== "SETUP") {
|
|
619
|
-
|
|
583
|
+
ctx2.onOpenChange?.(false);
|
|
620
584
|
}
|
|
621
585
|
},
|
|
622
586
|
focusNextTabbableElementAfterTrigger(ctx2, evt) {
|
|
@@ -636,7 +600,7 @@ function machine(userContext) {
|
|
|
636
600
|
if (!elementAfterTrigger || elementAfterTrigger === button)
|
|
637
601
|
return;
|
|
638
602
|
evt.preventDefault();
|
|
639
|
-
raf(() => elementAfterTrigger
|
|
603
|
+
raf(() => elementAfterTrigger?.focus());
|
|
640
604
|
}
|
|
641
605
|
}
|
|
642
606
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-JNFEFPEH.mjs";
|
|
4
4
|
import {
|
|
5
5
|
anatomy
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-KTOPDXGV.mjs";
|
|
7
7
|
import {
|
|
8
8
|
machine
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-ZG35X2QD.mjs";
|
|
10
|
+
import "./chunk-2EVL5G6H.mjs";
|
|
11
11
|
export {
|
|
12
12
|
anatomy,
|
|
13
13
|
connect,
|
package/dist/popover.anatomy.mjs
CHANGED
package/dist/popover.connect.js
CHANGED
|
@@ -32,7 +32,7 @@ var dataAttr = (guard) => {
|
|
|
32
32
|
// ../../utilities/core/src/functions.ts
|
|
33
33
|
var runIfFn = (v, ...a) => {
|
|
34
34
|
const res = typeof v === "function" ? v(...a) : v;
|
|
35
|
-
return res
|
|
35
|
+
return res ?? void 0;
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
// ../../utilities/dom/src/query.ts
|
|
@@ -40,30 +40,23 @@ function isDocument(el) {
|
|
|
40
40
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
41
41
|
}
|
|
42
42
|
function isWindow(value) {
|
|
43
|
-
return
|
|
43
|
+
return value?.toString() === "[object Window]";
|
|
44
44
|
}
|
|
45
45
|
function isFrame(element) {
|
|
46
46
|
return element.localName === "iframe";
|
|
47
47
|
}
|
|
48
48
|
function getDocument(el) {
|
|
49
|
-
var _a;
|
|
50
49
|
if (isWindow(el))
|
|
51
50
|
return el.document;
|
|
52
51
|
if (isDocument(el))
|
|
53
52
|
return el;
|
|
54
|
-
return
|
|
53
|
+
return el?.ownerDocument ?? document;
|
|
55
54
|
}
|
|
56
55
|
function defineDomHelpers(helpers) {
|
|
57
56
|
const dom2 = {
|
|
58
|
-
getRootNode: (ctx) =>
|
|
59
|
-
var _a, _b;
|
|
60
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
61
|
-
},
|
|
57
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
62
58
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
63
|
-
getWin: (ctx) =>
|
|
64
|
-
var _a;
|
|
65
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
66
|
-
},
|
|
59
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
67
60
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
68
61
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
69
62
|
};
|
|
@@ -73,7 +66,7 @@ function defineDomHelpers(helpers) {
|
|
|
73
66
|
};
|
|
74
67
|
}
|
|
75
68
|
function isHTMLElement(v) {
|
|
76
|
-
return typeof v === "object" &&
|
|
69
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
77
70
|
}
|
|
78
71
|
function isVisible(el) {
|
|
79
72
|
if (!isHTMLElement(el))
|
|
@@ -147,32 +140,14 @@ var import_popper = require("@zag-js/popper");
|
|
|
147
140
|
// src/popover.dom.ts
|
|
148
141
|
var dom = defineDomHelpers({
|
|
149
142
|
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
150
|
-
getAnchorId: (ctx) => {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
},
|
|
154
|
-
getTriggerId: (ctx) => {
|
|
155
|
-
var _a, _b;
|
|
156
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
157
|
-
},
|
|
158
|
-
getContentId: (ctx) => {
|
|
159
|
-
var _a, _b;
|
|
160
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
161
|
-
},
|
|
143
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
144
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
145
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
162
146
|
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
163
147
|
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
164
|
-
getTitleId: (ctx) => {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
},
|
|
168
|
-
getDescriptionId: (ctx) => {
|
|
169
|
-
var _a, _b;
|
|
170
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
171
|
-
},
|
|
172
|
-
getCloseTriggerId: (ctx) => {
|
|
173
|
-
var _a, _b;
|
|
174
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
175
|
-
},
|
|
148
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
149
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
150
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
176
151
|
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
177
152
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
178
153
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
package/dist/popover.connect.mjs
CHANGED
package/dist/popover.dom.js
CHANGED
|
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(popover_dom_exports);
|
|
|
27
27
|
// ../../utilities/core/src/functions.ts
|
|
28
28
|
var runIfFn = (v, ...a) => {
|
|
29
29
|
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res
|
|
30
|
+
return res ?? void 0;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
// ../../utilities/dom/src/query.ts
|
|
@@ -35,30 +35,23 @@ function isDocument(el) {
|
|
|
35
35
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
36
36
|
}
|
|
37
37
|
function isWindow(value) {
|
|
38
|
-
return
|
|
38
|
+
return value?.toString() === "[object Window]";
|
|
39
39
|
}
|
|
40
40
|
function isFrame(element) {
|
|
41
41
|
return element.localName === "iframe";
|
|
42
42
|
}
|
|
43
43
|
function getDocument(el) {
|
|
44
|
-
var _a;
|
|
45
44
|
if (isWindow(el))
|
|
46
45
|
return el.document;
|
|
47
46
|
if (isDocument(el))
|
|
48
47
|
return el;
|
|
49
|
-
return
|
|
48
|
+
return el?.ownerDocument ?? document;
|
|
50
49
|
}
|
|
51
50
|
function defineDomHelpers(helpers) {
|
|
52
51
|
const dom2 = {
|
|
53
|
-
getRootNode: (ctx) =>
|
|
54
|
-
var _a, _b;
|
|
55
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
56
|
-
},
|
|
52
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
57
53
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
58
|
-
getWin: (ctx) =>
|
|
59
|
-
var _a;
|
|
60
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
61
|
-
},
|
|
54
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
62
55
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
63
56
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
64
57
|
};
|
|
@@ -68,7 +61,7 @@ function defineDomHelpers(helpers) {
|
|
|
68
61
|
};
|
|
69
62
|
}
|
|
70
63
|
function isHTMLElement(v) {
|
|
71
|
-
return typeof v === "object" &&
|
|
64
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
72
65
|
}
|
|
73
66
|
function isVisible(el) {
|
|
74
67
|
if (!isHTMLElement(el))
|
|
@@ -139,32 +132,14 @@ function getLastTabbable(container, includeContainer) {
|
|
|
139
132
|
// src/popover.dom.ts
|
|
140
133
|
var dom = defineDomHelpers({
|
|
141
134
|
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
142
|
-
getAnchorId: (ctx) => {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
},
|
|
146
|
-
getTriggerId: (ctx) => {
|
|
147
|
-
var _a, _b;
|
|
148
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
149
|
-
},
|
|
150
|
-
getContentId: (ctx) => {
|
|
151
|
-
var _a, _b;
|
|
152
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
153
|
-
},
|
|
135
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
136
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
137
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
154
138
|
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
155
139
|
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
156
|
-
getTitleId: (ctx) => {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
},
|
|
160
|
-
getDescriptionId: (ctx) => {
|
|
161
|
-
var _a, _b;
|
|
162
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
163
|
-
},
|
|
164
|
-
getCloseTriggerId: (ctx) => {
|
|
165
|
-
var _a, _b;
|
|
166
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
167
|
-
},
|
|
140
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
141
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
142
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
168
143
|
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
169
144
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
170
145
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
package/dist/popover.dom.mjs
CHANGED
package/dist/popover.machine.js
CHANGED
|
@@ -48,7 +48,7 @@ function next(v, idx, opts = {}) {
|
|
|
48
48
|
// ../../utilities/core/src/functions.ts
|
|
49
49
|
var runIfFn = (v, ...a) => {
|
|
50
50
|
const res = typeof v === "function" ? v(...a) : v;
|
|
51
|
-
return res
|
|
51
|
+
return res ?? void 0;
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
// ../../utilities/core/src/guard.ts
|
|
@@ -70,30 +70,23 @@ function isDocument(el) {
|
|
|
70
70
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
71
71
|
}
|
|
72
72
|
function isWindow(value) {
|
|
73
|
-
return
|
|
73
|
+
return value?.toString() === "[object Window]";
|
|
74
74
|
}
|
|
75
75
|
function isFrame(element) {
|
|
76
76
|
return element.localName === "iframe";
|
|
77
77
|
}
|
|
78
78
|
function getDocument(el) {
|
|
79
|
-
var _a;
|
|
80
79
|
if (isWindow(el))
|
|
81
80
|
return el.document;
|
|
82
81
|
if (isDocument(el))
|
|
83
82
|
return el;
|
|
84
|
-
return
|
|
83
|
+
return el?.ownerDocument ?? document;
|
|
85
84
|
}
|
|
86
85
|
function defineDomHelpers(helpers) {
|
|
87
86
|
const dom2 = {
|
|
88
|
-
getRootNode: (ctx) =>
|
|
89
|
-
var _a, _b;
|
|
90
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
91
|
-
},
|
|
87
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
92
88
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
93
|
-
getWin: (ctx) =>
|
|
94
|
-
var _a;
|
|
95
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
96
|
-
},
|
|
89
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
97
90
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
98
91
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
99
92
|
};
|
|
@@ -108,7 +101,7 @@ function contains(parent, child) {
|
|
|
108
101
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
109
102
|
}
|
|
110
103
|
function isHTMLElement(v) {
|
|
111
|
-
return typeof v === "object" &&
|
|
104
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
112
105
|
}
|
|
113
106
|
function isVisible(el) {
|
|
114
107
|
if (!isHTMLElement(el))
|
|
@@ -183,9 +176,9 @@ function getLastTabbable(container, includeContainer) {
|
|
|
183
176
|
var isRef = (v) => hasProp(v, "current");
|
|
184
177
|
function addDomEvent(target, eventName, handler, options) {
|
|
185
178
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
186
|
-
node
|
|
179
|
+
node?.addEventListener(eventName, handler, options);
|
|
187
180
|
return () => {
|
|
188
|
-
node
|
|
181
|
+
node?.removeEventListener(eventName, handler, options);
|
|
189
182
|
};
|
|
190
183
|
}
|
|
191
184
|
|
|
@@ -218,32 +211,14 @@ var import_focus_trap = require("focus-trap");
|
|
|
218
211
|
// src/popover.dom.ts
|
|
219
212
|
var dom = defineDomHelpers({
|
|
220
213
|
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
221
|
-
getAnchorId: (ctx) => {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
},
|
|
225
|
-
getTriggerId: (ctx) => {
|
|
226
|
-
var _a, _b;
|
|
227
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
228
|
-
},
|
|
229
|
-
getContentId: (ctx) => {
|
|
230
|
-
var _a, _b;
|
|
231
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
232
|
-
},
|
|
214
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
215
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
216
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
233
217
|
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
234
218
|
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
235
|
-
getTitleId: (ctx) => {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
},
|
|
239
|
-
getDescriptionId: (ctx) => {
|
|
240
|
-
var _a, _b;
|
|
241
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
242
|
-
},
|
|
243
|
-
getCloseTriggerId: (ctx) => {
|
|
244
|
-
var _a, _b;
|
|
245
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
246
|
-
},
|
|
219
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
220
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
221
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
247
222
|
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
248
223
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
249
224
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
@@ -373,16 +348,14 @@ function machine(userContext) {
|
|
|
373
348
|
pointerBlocking: ctx2.modal,
|
|
374
349
|
exclude: dom.getTriggerEl(ctx2),
|
|
375
350
|
onEscapeKeyDown(event) {
|
|
376
|
-
|
|
377
|
-
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
351
|
+
ctx2.onEscapeKeyDown?.(event);
|
|
378
352
|
if (ctx2.closeOnEsc)
|
|
379
353
|
return;
|
|
380
354
|
ctx2.focusTriggerOnClose = true;
|
|
381
355
|
event.preventDefault();
|
|
382
356
|
},
|
|
383
357
|
onInteractOutside(event) {
|
|
384
|
-
|
|
385
|
-
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
358
|
+
ctx2.onInteractOutside?.(event);
|
|
386
359
|
if (event.defaultPrevented)
|
|
387
360
|
return;
|
|
388
361
|
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
@@ -391,12 +364,10 @@ function machine(userContext) {
|
|
|
391
364
|
}
|
|
392
365
|
},
|
|
393
366
|
onPointerDownOutside(event) {
|
|
394
|
-
|
|
395
|
-
(_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
367
|
+
ctx2.onPointerDownOutside?.(event);
|
|
396
368
|
},
|
|
397
369
|
onFocusOutside(event) {
|
|
398
|
-
|
|
399
|
-
(_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
370
|
+
ctx2.onFocusOutside?.(event);
|
|
400
371
|
if (ctx2.currentPortalled) {
|
|
401
372
|
event.preventDefault();
|
|
402
373
|
}
|
|
@@ -431,7 +402,7 @@ function machine(userContext) {
|
|
|
431
402
|
nextTick(() => {
|
|
432
403
|
cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
|
|
433
404
|
});
|
|
434
|
-
return () => cleanup
|
|
405
|
+
return () => cleanup?.();
|
|
435
406
|
},
|
|
436
407
|
preventScroll(ctx2) {
|
|
437
408
|
if (!ctx2.modal)
|
|
@@ -459,7 +430,7 @@ function machine(userContext) {
|
|
|
459
430
|
} catch {
|
|
460
431
|
}
|
|
461
432
|
});
|
|
462
|
-
return () => trap
|
|
433
|
+
return () => trap?.deactivate();
|
|
463
434
|
}
|
|
464
435
|
},
|
|
465
436
|
guards: {
|
|
@@ -483,33 +454,26 @@ function machine(userContext) {
|
|
|
483
454
|
},
|
|
484
455
|
setInitialFocus(ctx2) {
|
|
485
456
|
raf(() => {
|
|
486
|
-
|
|
487
|
-
(_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
|
|
457
|
+
dom.getInitialFocusEl(ctx2)?.focus();
|
|
488
458
|
});
|
|
489
459
|
},
|
|
490
460
|
focusTriggerIfNeeded(ctx2) {
|
|
491
461
|
if (!ctx2.focusTriggerOnClose)
|
|
492
462
|
return;
|
|
493
|
-
raf(() =>
|
|
494
|
-
var _a;
|
|
495
|
-
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
496
|
-
});
|
|
463
|
+
raf(() => dom.getTriggerEl(ctx2)?.focus());
|
|
497
464
|
},
|
|
498
465
|
focusFirstTabbableElement(ctx2, evt) {
|
|
499
|
-
var _a;
|
|
500
466
|
evt.preventDefault();
|
|
501
|
-
|
|
467
|
+
dom.getFirstTabbableEl(ctx2)?.focus();
|
|
502
468
|
},
|
|
503
469
|
invokeOnOpen(ctx2, evt) {
|
|
504
|
-
var _a;
|
|
505
470
|
if (evt.type !== "SETUP") {
|
|
506
|
-
|
|
471
|
+
ctx2.onOpenChange?.(true);
|
|
507
472
|
}
|
|
508
473
|
},
|
|
509
474
|
invokeOnClose(ctx2, evt) {
|
|
510
|
-
var _a;
|
|
511
475
|
if (evt.type !== "SETUP") {
|
|
512
|
-
|
|
476
|
+
ctx2.onOpenChange?.(false);
|
|
513
477
|
}
|
|
514
478
|
},
|
|
515
479
|
focusNextTabbableElementAfterTrigger(ctx2, evt) {
|
|
@@ -529,7 +493,7 @@ function machine(userContext) {
|
|
|
529
493
|
if (!elementAfterTrigger || elementAfterTrigger === button)
|
|
530
494
|
return;
|
|
531
495
|
evt.preventDefault();
|
|
532
|
-
raf(() => elementAfterTrigger
|
|
496
|
+
raf(() => elementAfterTrigger?.focus());
|
|
533
497
|
}
|
|
534
498
|
}
|
|
535
499
|
}
|
package/dist/popover.machine.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popover",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20230201190914",
|
|
4
4
|
"description": "Core logic for the popover widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"focus-trap": "7.2.0",
|
|
30
|
-
"@zag-js/anatomy": "0.
|
|
31
|
-
"@zag-js/aria-hidden": "0.
|
|
32
|
-
"@zag-js/core": "0.0.0-dev-
|
|
33
|
-
"@zag-js/dismissable": "0.
|
|
34
|
-
"@zag-js/popper": "0.
|
|
35
|
-
"@zag-js/remove-scroll": "0.
|
|
36
|
-
"@zag-js/types": "0.0.0-dev-
|
|
30
|
+
"@zag-js/anatomy": "0.0.0-dev-20230201190914",
|
|
31
|
+
"@zag-js/aria-hidden": "0.0.0-dev-20230201190914",
|
|
32
|
+
"@zag-js/core": "0.0.0-dev-20230201190914",
|
|
33
|
+
"@zag-js/dismissable": "0.0.0-dev-20230201190914",
|
|
34
|
+
"@zag-js/popper": "0.0.0-dev-20230201190914",
|
|
35
|
+
"@zag-js/remove-scroll": "0.0.0-dev-20230201190914",
|
|
36
|
+
"@zag-js/types": "0.0.0-dev-20230201190914"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0",
|
|
40
|
-
"@zag-js/dom-utils": "0.0.0-dev-
|
|
41
|
-
"@zag-js/utils": "0.
|
|
40
|
+
"@zag-js/dom-utils": "0.0.0-dev-20230201190914",
|
|
41
|
+
"@zag-js/utils": "0.0.0-dev-20230201190914"
|
|
42
42
|
},
|
|
43
43
|
"clean-package": "../../../clean-package.config.json",
|
|
44
44
|
"main": "dist/index.js",
|