@zag-js/popover 0.2.5 → 0.2.6
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-3IPU3K2L.mjs +191 -0
- package/dist/chunk-B4ONYBLM.mjs +100 -0
- package/dist/chunk-CHAXY3HY.mjs +353 -0
- package/dist/chunk-KTOPDXGV.mjs +19 -0
- package/dist/index.d.ts +9 -952
- package/dist/index.js +46 -34
- package/dist/index.mjs +10 -622
- package/dist/popover.anatomy.d.ts +6 -0
- package/dist/popover.anatomy.js +44 -0
- package/dist/popover.anatomy.mjs +8 -0
- package/dist/popover.connect.d.ts +23 -0
- package/dist/popover.connect.js +317 -0
- package/dist/popover.connect.mjs +8 -0
- package/dist/popover.dom.d.ts +52 -0
- package/dist/popover.dom.js +210 -0
- package/dist/popover.dom.mjs +6 -0
- package/dist/popover.machine.d.ts +9 -0
- package/dist/popover.machine.js +559 -0
- package/dist/popover.machine.mjs +7 -0
- package/dist/popover.types.d.ts +84 -0
- package/dist/popover.types.js +18 -0
- package/dist/popover.types.mjs +0 -0
- package/package.json +25 -15
|
@@ -0,0 +1,559 @@
|
|
|
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);
|
|
19
|
+
|
|
20
|
+
// src/popover.machine.ts
|
|
21
|
+
var popover_machine_exports = {};
|
|
22
|
+
__export(popover_machine_exports, {
|
|
23
|
+
machine: () => machine
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(popover_machine_exports);
|
|
26
|
+
var import_aria_hidden = require("@zag-js/aria-hidden");
|
|
27
|
+
var import_core = require("@zag-js/core");
|
|
28
|
+
var import_dismissable = require("@zag-js/dismissable");
|
|
29
|
+
|
|
30
|
+
// ../../utilities/core/src/array.ts
|
|
31
|
+
function nextIndex(v, idx, opts = {}) {
|
|
32
|
+
const { step = 1, loop = true } = opts;
|
|
33
|
+
const next2 = idx + step;
|
|
34
|
+
const len = v.length;
|
|
35
|
+
const last = len - 1;
|
|
36
|
+
if (idx === -1)
|
|
37
|
+
return step > 0 ? 0 : last;
|
|
38
|
+
if (next2 < 0)
|
|
39
|
+
return loop ? last : 0;
|
|
40
|
+
if (next2 >= len)
|
|
41
|
+
return loop ? 0 : idx > len ? len : idx;
|
|
42
|
+
return next2;
|
|
43
|
+
}
|
|
44
|
+
function next(v, idx, opts = {}) {
|
|
45
|
+
return v[nextIndex(v, idx, opts)];
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// ../../utilities/core/src/functions.ts
|
|
49
|
+
var runIfFn = (v, ...a) => {
|
|
50
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
51
|
+
return res != null ? res : void 0;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// ../../utilities/core/src/guard.ts
|
|
55
|
+
var isArray = (v) => Array.isArray(v);
|
|
56
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
57
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
58
|
+
|
|
59
|
+
// ../../utilities/core/src/object.ts
|
|
60
|
+
function compact(obj) {
|
|
61
|
+
if (obj === void 0)
|
|
62
|
+
return obj;
|
|
63
|
+
return Object.fromEntries(
|
|
64
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// ../../utilities/dom/src/query.ts
|
|
69
|
+
function isDocument(el) {
|
|
70
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
71
|
+
}
|
|
72
|
+
function isWindow(value) {
|
|
73
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
74
|
+
}
|
|
75
|
+
function isFrame(element) {
|
|
76
|
+
return element.localName === "iframe";
|
|
77
|
+
}
|
|
78
|
+
function getDocument(el) {
|
|
79
|
+
var _a;
|
|
80
|
+
if (isWindow(el))
|
|
81
|
+
return el.document;
|
|
82
|
+
if (isDocument(el))
|
|
83
|
+
return el;
|
|
84
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
85
|
+
}
|
|
86
|
+
function defineDomHelpers(helpers) {
|
|
87
|
+
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
|
+
},
|
|
92
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
93
|
+
getWin: (ctx) => {
|
|
94
|
+
var _a;
|
|
95
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
96
|
+
},
|
|
97
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
98
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
99
|
+
createEmitter: (ctx, target) => {
|
|
100
|
+
const win = dom2.getWin(ctx);
|
|
101
|
+
return function emit(evt, detail, options) {
|
|
102
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
103
|
+
const eventName = `zag:${evt}`;
|
|
104
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
105
|
+
const event = new win.CustomEvent(eventName, init);
|
|
106
|
+
target.dispatchEvent(event);
|
|
107
|
+
};
|
|
108
|
+
},
|
|
109
|
+
createListener: (target) => {
|
|
110
|
+
return function listen(evt, handler) {
|
|
111
|
+
const eventName = `zag:${evt}`;
|
|
112
|
+
const listener = (e) => handler(e);
|
|
113
|
+
target.addEventListener(eventName, listener);
|
|
114
|
+
return () => target.removeEventListener(eventName, listener);
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
return {
|
|
119
|
+
...dom2,
|
|
120
|
+
...helpers
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
function contains(parent, child) {
|
|
124
|
+
if (!parent)
|
|
125
|
+
return false;
|
|
126
|
+
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
127
|
+
}
|
|
128
|
+
function isHTMLElement(v) {
|
|
129
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
130
|
+
}
|
|
131
|
+
function isVisible(el) {
|
|
132
|
+
if (!isHTMLElement(el))
|
|
133
|
+
return false;
|
|
134
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// ../../utilities/dom/src/event.ts
|
|
138
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
139
|
+
|
|
140
|
+
// ../../utilities/dom/src/focusable.ts
|
|
141
|
+
function hasNegativeTabIndex(element) {
|
|
142
|
+
const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
|
|
143
|
+
return tabIndex < 0;
|
|
144
|
+
}
|
|
145
|
+
var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
|
|
146
|
+
var getFocusables = (container, includeContainer = false) => {
|
|
147
|
+
if (!container)
|
|
148
|
+
return [];
|
|
149
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
150
|
+
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
151
|
+
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
152
|
+
elements.unshift(container);
|
|
153
|
+
}
|
|
154
|
+
const focusableElements = elements.filter(isFocusable);
|
|
155
|
+
focusableElements.forEach((element, i) => {
|
|
156
|
+
if (isFrame(element) && element.contentDocument) {
|
|
157
|
+
const frameBody = element.contentDocument.body;
|
|
158
|
+
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
return focusableElements;
|
|
162
|
+
};
|
|
163
|
+
function isFocusable(element) {
|
|
164
|
+
if (!element)
|
|
165
|
+
return false;
|
|
166
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
167
|
+
}
|
|
168
|
+
function getTabbables(container, includeContainer) {
|
|
169
|
+
if (!container)
|
|
170
|
+
return [];
|
|
171
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
172
|
+
const tabbableElements = elements.filter(isTabbable);
|
|
173
|
+
if (includeContainer && isTabbable(container)) {
|
|
174
|
+
tabbableElements.unshift(container);
|
|
175
|
+
}
|
|
176
|
+
tabbableElements.forEach((element, i) => {
|
|
177
|
+
if (isFrame(element) && element.contentDocument) {
|
|
178
|
+
const frameBody = element.contentDocument.body;
|
|
179
|
+
const allFrameTabbable = getTabbables(frameBody);
|
|
180
|
+
tabbableElements.splice(i, 1, ...allFrameTabbable);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
if (!tabbableElements.length && includeContainer) {
|
|
184
|
+
return elements;
|
|
185
|
+
}
|
|
186
|
+
return tabbableElements;
|
|
187
|
+
}
|
|
188
|
+
function isTabbable(el) {
|
|
189
|
+
return isFocusable(el) && !hasNegativeTabIndex(el);
|
|
190
|
+
}
|
|
191
|
+
function getFirstTabbable(container, includeContainer) {
|
|
192
|
+
const [first] = getTabbables(container, includeContainer);
|
|
193
|
+
return first || null;
|
|
194
|
+
}
|
|
195
|
+
function getLastTabbable(container, includeContainer) {
|
|
196
|
+
const elements = getTabbables(container, includeContainer);
|
|
197
|
+
return elements[elements.length - 1] || null;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// ../../utilities/dom/src/listener.ts
|
|
201
|
+
var isRef = (v) => hasProp(v, "current");
|
|
202
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
203
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
204
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
205
|
+
return () => {
|
|
206
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// ../../utilities/dom/src/next-tick.ts
|
|
211
|
+
function nextTick(fn) {
|
|
212
|
+
const set = /* @__PURE__ */ new Set();
|
|
213
|
+
function raf2(fn2) {
|
|
214
|
+
const id = globalThis.requestAnimationFrame(fn2);
|
|
215
|
+
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
216
|
+
}
|
|
217
|
+
raf2(() => raf2(fn));
|
|
218
|
+
return function cleanup() {
|
|
219
|
+
set.forEach(function(fn2) {
|
|
220
|
+
fn2();
|
|
221
|
+
});
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
function raf(fn) {
|
|
225
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
226
|
+
return function cleanup() {
|
|
227
|
+
globalThis.cancelAnimationFrame(id);
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// src/popover.machine.ts
|
|
232
|
+
var import_popper = require("@zag-js/popper");
|
|
233
|
+
var import_remove_scroll = require("@zag-js/remove-scroll");
|
|
234
|
+
var import_focus_trap = require("focus-trap");
|
|
235
|
+
|
|
236
|
+
// src/popover.dom.ts
|
|
237
|
+
var dom = defineDomHelpers({
|
|
238
|
+
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
239
|
+
getAnchorId: (ctx) => {
|
|
240
|
+
var _a, _b;
|
|
241
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
|
|
242
|
+
},
|
|
243
|
+
getTriggerId: (ctx) => {
|
|
244
|
+
var _a, _b;
|
|
245
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `popover:${ctx.id}:trigger`;
|
|
246
|
+
},
|
|
247
|
+
getContentId: (ctx) => {
|
|
248
|
+
var _a, _b;
|
|
249
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `popover:${ctx.id}:content`;
|
|
250
|
+
},
|
|
251
|
+
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
252
|
+
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
253
|
+
getTitleId: (ctx) => {
|
|
254
|
+
var _a, _b;
|
|
255
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
|
|
256
|
+
},
|
|
257
|
+
getDescriptionId: (ctx) => {
|
|
258
|
+
var _a, _b;
|
|
259
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.description) != null ? _b : `popover:${ctx.id}:desc`;
|
|
260
|
+
},
|
|
261
|
+
getCloseTriggerId: (ctx) => {
|
|
262
|
+
var _a, _b;
|
|
263
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeTrigger) != null ? _b : `popover:${ctx.id}:close`;
|
|
264
|
+
},
|
|
265
|
+
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
266
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
267
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
268
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
269
|
+
getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
|
|
270
|
+
getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
|
|
271
|
+
getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
|
|
272
|
+
getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
|
|
273
|
+
getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
|
|
274
|
+
getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
|
|
275
|
+
getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
276
|
+
getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
277
|
+
getInitialFocusEl: (ctx) => {
|
|
278
|
+
let el = runIfFn(ctx.initialFocusEl);
|
|
279
|
+
if (!el && ctx.autoFocus)
|
|
280
|
+
el = dom.getFirstFocusableEl(ctx);
|
|
281
|
+
if (!el)
|
|
282
|
+
el = dom.getContentEl(ctx);
|
|
283
|
+
return el;
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
// src/popover.machine.ts
|
|
288
|
+
var { and, or, not } = import_core.guards;
|
|
289
|
+
function machine(userContext) {
|
|
290
|
+
const ctx = compact(userContext);
|
|
291
|
+
return (0, import_core.createMachine)(
|
|
292
|
+
{
|
|
293
|
+
id: "popover",
|
|
294
|
+
initial: "unknown",
|
|
295
|
+
context: {
|
|
296
|
+
closeOnInteractOutside: true,
|
|
297
|
+
closeOnEsc: true,
|
|
298
|
+
autoFocus: true,
|
|
299
|
+
modal: false,
|
|
300
|
+
positioning: {
|
|
301
|
+
placement: "bottom",
|
|
302
|
+
...ctx.positioning
|
|
303
|
+
},
|
|
304
|
+
currentPlacement: void 0,
|
|
305
|
+
...ctx,
|
|
306
|
+
focusTriggerOnClose: true,
|
|
307
|
+
renderedElements: {
|
|
308
|
+
title: true,
|
|
309
|
+
description: true,
|
|
310
|
+
anchor: false
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
computed: {
|
|
314
|
+
currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
|
|
315
|
+
},
|
|
316
|
+
states: {
|
|
317
|
+
unknown: {
|
|
318
|
+
on: {
|
|
319
|
+
SETUP: {
|
|
320
|
+
target: ctx.defaultOpen ? "open" : "closed",
|
|
321
|
+
actions: "checkRenderedElements"
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
closed: {
|
|
326
|
+
entry: "invokeOnClose",
|
|
327
|
+
on: {
|
|
328
|
+
TOGGLE: "open",
|
|
329
|
+
OPEN: "open"
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
open: {
|
|
333
|
+
activities: [
|
|
334
|
+
"trapFocus",
|
|
335
|
+
"preventScroll",
|
|
336
|
+
"hideContentBelow",
|
|
337
|
+
"computePlacement",
|
|
338
|
+
"trackInteractionOutside",
|
|
339
|
+
"trackTabKeyDown"
|
|
340
|
+
],
|
|
341
|
+
entry: ["setInitialFocus", "invokeOnOpen"],
|
|
342
|
+
on: {
|
|
343
|
+
CLOSE: "closed",
|
|
344
|
+
REQUEST_CLOSE: {
|
|
345
|
+
target: "closed",
|
|
346
|
+
actions: "focusTriggerIfNeeded"
|
|
347
|
+
},
|
|
348
|
+
TOGGLE: "closed",
|
|
349
|
+
TRIGGER_BLUR: {
|
|
350
|
+
guard: not("isRelatedTargetWithinContent"),
|
|
351
|
+
target: "closed"
|
|
352
|
+
},
|
|
353
|
+
TAB: [
|
|
354
|
+
{
|
|
355
|
+
guard: and("isTriggerFocused", "portalled"),
|
|
356
|
+
actions: "focusFirstTabbableElement"
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
|
|
360
|
+
target: "closed",
|
|
361
|
+
actions: "focusNextTabbableElementAfterTrigger"
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
SHIFT_TAB: {
|
|
365
|
+
guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
|
|
366
|
+
actions: "focusTriggerIfNeeded"
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
activities: {
|
|
374
|
+
computePlacement(ctx2) {
|
|
375
|
+
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
376
|
+
const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
|
|
377
|
+
return (0, import_popper.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), {
|
|
378
|
+
...ctx2.positioning,
|
|
379
|
+
onComplete(data) {
|
|
380
|
+
ctx2.currentPlacement = data.placement;
|
|
381
|
+
ctx2.isPlacementComplete = true;
|
|
382
|
+
},
|
|
383
|
+
onCleanup() {
|
|
384
|
+
ctx2.currentPlacement = void 0;
|
|
385
|
+
ctx2.isPlacementComplete = false;
|
|
386
|
+
}
|
|
387
|
+
});
|
|
388
|
+
},
|
|
389
|
+
trackInteractionOutside(ctx2, _evt, { send }) {
|
|
390
|
+
return (0, import_dismissable.trackDismissableElement)(dom.getContentEl(ctx2), {
|
|
391
|
+
pointerBlocking: ctx2.modal,
|
|
392
|
+
exclude: dom.getTriggerEl(ctx2),
|
|
393
|
+
onEscapeKeyDown(event) {
|
|
394
|
+
var _a;
|
|
395
|
+
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
396
|
+
if (ctx2.closeOnEsc)
|
|
397
|
+
return;
|
|
398
|
+
ctx2.focusTriggerOnClose = true;
|
|
399
|
+
event.preventDefault();
|
|
400
|
+
},
|
|
401
|
+
onInteractOutside(event) {
|
|
402
|
+
var _a;
|
|
403
|
+
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
404
|
+
if (event.defaultPrevented)
|
|
405
|
+
return;
|
|
406
|
+
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
407
|
+
if (!ctx2.closeOnInteractOutside) {
|
|
408
|
+
event.preventDefault();
|
|
409
|
+
}
|
|
410
|
+
},
|
|
411
|
+
onPointerDownOutside(event) {
|
|
412
|
+
var _a;
|
|
413
|
+
(_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
414
|
+
},
|
|
415
|
+
onFocusOutside(event) {
|
|
416
|
+
var _a;
|
|
417
|
+
(_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
418
|
+
if (ctx2.currentPortalled) {
|
|
419
|
+
event.preventDefault();
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
onDismiss() {
|
|
423
|
+
send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
|
|
424
|
+
}
|
|
425
|
+
});
|
|
426
|
+
},
|
|
427
|
+
trackTabKeyDown(ctx2, _evt, { send }) {
|
|
428
|
+
if (ctx2.modal)
|
|
429
|
+
return;
|
|
430
|
+
return addDomEvent(
|
|
431
|
+
dom.getWin(ctx2),
|
|
432
|
+
"keydown",
|
|
433
|
+
(event) => {
|
|
434
|
+
const isTabKey = event.key === "Tab" && !isModifiedEvent(event);
|
|
435
|
+
if (!isTabKey)
|
|
436
|
+
return;
|
|
437
|
+
send({
|
|
438
|
+
type: event.shiftKey ? "SHIFT_TAB" : "TAB",
|
|
439
|
+
preventDefault: () => event.preventDefault()
|
|
440
|
+
});
|
|
441
|
+
},
|
|
442
|
+
true
|
|
443
|
+
);
|
|
444
|
+
},
|
|
445
|
+
hideContentBelow(ctx2) {
|
|
446
|
+
if (!ctx2.modal)
|
|
447
|
+
return;
|
|
448
|
+
let cleanup;
|
|
449
|
+
nextTick(() => {
|
|
450
|
+
cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
|
|
451
|
+
});
|
|
452
|
+
return () => cleanup == null ? void 0 : cleanup();
|
|
453
|
+
},
|
|
454
|
+
preventScroll(ctx2) {
|
|
455
|
+
if (!ctx2.modal)
|
|
456
|
+
return;
|
|
457
|
+
return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
|
|
458
|
+
},
|
|
459
|
+
trapFocus(ctx2) {
|
|
460
|
+
if (!ctx2.modal)
|
|
461
|
+
return;
|
|
462
|
+
let trap;
|
|
463
|
+
nextTick(() => {
|
|
464
|
+
const el = dom.getContentEl(ctx2);
|
|
465
|
+
if (!el)
|
|
466
|
+
return;
|
|
467
|
+
trap = (0, import_focus_trap.createFocusTrap)(el, {
|
|
468
|
+
escapeDeactivates: false,
|
|
469
|
+
allowOutsideClick: true,
|
|
470
|
+
returnFocusOnDeactivate: true,
|
|
471
|
+
document: dom.getDoc(ctx2),
|
|
472
|
+
fallbackFocus: el,
|
|
473
|
+
initialFocus: runIfFn(ctx2.initialFocusEl)
|
|
474
|
+
});
|
|
475
|
+
try {
|
|
476
|
+
trap.activate();
|
|
477
|
+
} catch {
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
return () => trap == null ? void 0 : trap.deactivate();
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
guards: {
|
|
484
|
+
portalled: (ctx2) => ctx2.currentPortalled,
|
|
485
|
+
isRelatedTargetWithinContent: (ctx2, evt) => contains(dom.getContentEl(ctx2), evt.target),
|
|
486
|
+
closeOnInteractOutside: (ctx2) => !!ctx2.closeOnInteractOutside,
|
|
487
|
+
isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
|
|
488
|
+
isTriggerFocused: (ctx2) => dom.getTriggerEl(ctx2) === dom.getActiveEl(ctx2),
|
|
489
|
+
isFirstTabbableElement: (ctx2) => dom.getFirstTabbableEl(ctx2) === dom.getActiveEl(ctx2),
|
|
490
|
+
isLastTabbableElement: (ctx2) => dom.getLastTabbableEl(ctx2) === dom.getActiveEl(ctx2)
|
|
491
|
+
},
|
|
492
|
+
actions: {
|
|
493
|
+
checkRenderedElements(ctx2) {
|
|
494
|
+
raf(() => {
|
|
495
|
+
Object.assign(ctx2.renderedElements, {
|
|
496
|
+
title: !!dom.getTitleEl(ctx2),
|
|
497
|
+
description: !!dom.getDescriptionEl(ctx2),
|
|
498
|
+
anchor: !!dom.getAnchorEl(ctx2)
|
|
499
|
+
});
|
|
500
|
+
});
|
|
501
|
+
},
|
|
502
|
+
setInitialFocus(ctx2) {
|
|
503
|
+
raf(() => {
|
|
504
|
+
var _a;
|
|
505
|
+
(_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
|
|
506
|
+
});
|
|
507
|
+
},
|
|
508
|
+
focusTriggerIfNeeded(ctx2) {
|
|
509
|
+
if (!ctx2.focusTriggerOnClose)
|
|
510
|
+
return;
|
|
511
|
+
raf(() => {
|
|
512
|
+
var _a;
|
|
513
|
+
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
514
|
+
});
|
|
515
|
+
},
|
|
516
|
+
focusFirstTabbableElement(ctx2, evt) {
|
|
517
|
+
var _a;
|
|
518
|
+
evt.preventDefault();
|
|
519
|
+
(_a = dom.getFirstTabbableEl(ctx2)) == null ? void 0 : _a.focus();
|
|
520
|
+
},
|
|
521
|
+
invokeOnOpen(ctx2, evt) {
|
|
522
|
+
var _a;
|
|
523
|
+
if (evt.type !== "SETUP") {
|
|
524
|
+
(_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
|
|
525
|
+
}
|
|
526
|
+
},
|
|
527
|
+
invokeOnClose(ctx2, evt) {
|
|
528
|
+
var _a;
|
|
529
|
+
if (evt.type !== "SETUP") {
|
|
530
|
+
(_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
|
|
531
|
+
}
|
|
532
|
+
},
|
|
533
|
+
focusNextTabbableElementAfterTrigger(ctx2, evt) {
|
|
534
|
+
const content = dom.getContentEl(ctx2);
|
|
535
|
+
const button = dom.getTriggerEl(ctx2);
|
|
536
|
+
if (!content || !button)
|
|
537
|
+
return;
|
|
538
|
+
const lastTabbable = dom.getLastTabbableEl(ctx2);
|
|
539
|
+
if (lastTabbable !== dom.getActiveEl(ctx2))
|
|
540
|
+
return;
|
|
541
|
+
let tabbables = dom.getDocTabbableEls(ctx2);
|
|
542
|
+
let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
|
|
543
|
+
if (elementAfterTrigger === content) {
|
|
544
|
+
tabbables = tabbables.filter((el) => !contains(content, el));
|
|
545
|
+
elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
|
|
546
|
+
}
|
|
547
|
+
if (!elementAfterTrigger || elementAfterTrigger === button)
|
|
548
|
+
return;
|
|
549
|
+
evt.preventDefault();
|
|
550
|
+
raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
);
|
|
555
|
+
}
|
|
556
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
557
|
+
0 && (module.exports = {
|
|
558
|
+
machine
|
|
559
|
+
});
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { StateMachine } from '@zag-js/core';
|
|
2
|
+
import { DismissableElementHandlers } from '@zag-js/dismissable';
|
|
3
|
+
import { PositioningOptions } from '@zag-js/popper';
|
|
4
|
+
import { RequiredBy, CommonProperties, MaybeElement, Context } from '@zag-js/types';
|
|
5
|
+
|
|
6
|
+
type ElementIds = Partial<{
|
|
7
|
+
anchor: string;
|
|
8
|
+
trigger: string;
|
|
9
|
+
content: string;
|
|
10
|
+
title: string;
|
|
11
|
+
description: string;
|
|
12
|
+
closeTrigger: string;
|
|
13
|
+
}>;
|
|
14
|
+
type PublicContext = DismissableElementHandlers & CommonProperties & {
|
|
15
|
+
/**
|
|
16
|
+
* The ids of the elements in the popover. Useful for composition.
|
|
17
|
+
*/
|
|
18
|
+
ids?: ElementIds;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the popover should be modal. When set to `true`:
|
|
21
|
+
* - interaction with outside elements will be disabled
|
|
22
|
+
* - only popover content will be visible to screen readers
|
|
23
|
+
* - scrolling is blocked
|
|
24
|
+
* - focus is trapped within the popover
|
|
25
|
+
*
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
modal?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Whether the popover is rendered in a portal
|
|
31
|
+
*/
|
|
32
|
+
portalled?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Whether to automatically set focus on the first focusable
|
|
35
|
+
* content within the popover when opened.
|
|
36
|
+
*/
|
|
37
|
+
autoFocus?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* The element to focus on when the popover is opened.
|
|
40
|
+
*/
|
|
41
|
+
initialFocusEl?: MaybeElement | (() => MaybeElement);
|
|
42
|
+
/**
|
|
43
|
+
* Whether to close the popover when the user clicks outside of the popover.
|
|
44
|
+
*/
|
|
45
|
+
closeOnInteractOutside?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Whether to close the popover when the escape key is pressed.
|
|
48
|
+
*/
|
|
49
|
+
closeOnEsc?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Function invoked when the popover is opened.
|
|
52
|
+
*/
|
|
53
|
+
onOpenChange?: (open: boolean) => void;
|
|
54
|
+
/**
|
|
55
|
+
* The user provided options used to position the popover content
|
|
56
|
+
*/
|
|
57
|
+
positioning: PositioningOptions;
|
|
58
|
+
/**
|
|
59
|
+
* Whether to open the popover on page load
|
|
60
|
+
*/
|
|
61
|
+
defaultOpen?: boolean;
|
|
62
|
+
};
|
|
63
|
+
type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
64
|
+
type ComputedContext = Readonly<{
|
|
65
|
+
/**
|
|
66
|
+
* @computed
|
|
67
|
+
* The computed value of `portalled`
|
|
68
|
+
*/
|
|
69
|
+
currentPortalled: boolean;
|
|
70
|
+
}>;
|
|
71
|
+
type PrivateContext = Context<{
|
|
72
|
+
/**
|
|
73
|
+
* Whether to prevent returning focus to the trigger
|
|
74
|
+
*/
|
|
75
|
+
focusTriggerOnClose?: boolean;
|
|
76
|
+
}>;
|
|
77
|
+
type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
78
|
+
type MachineState = {
|
|
79
|
+
value: "unknown" | "open" | "closed";
|
|
80
|
+
};
|
|
81
|
+
type State = StateMachine.State<MachineContext, MachineState>;
|
|
82
|
+
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
83
|
+
|
|
84
|
+
export { MachineContext, MachineState, Send, State, UserDefinedContext };
|
|
@@ -0,0 +1,18 @@
|
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// src/popover.types.ts
|
|
17
|
+
var popover_types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(popover_types_exports);
|
|
File without changes
|