@zag-js/popover 0.2.5 → 0.2.7
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-AVX6BWXB.mjs +353 -0
- package/dist/chunk-KTOPDXGV.mjs +19 -0
- package/dist/chunk-NDF4K3W7.mjs +100 -0
- package/dist/chunk-VCEKTSBU.mjs +173 -0
- package/dist/index.d.ts +9 -952
- package/dist/index.js +47 -53
- 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 +299 -0
- package/dist/popover.connect.mjs +8 -0
- package/dist/popover.dom.d.ts +48 -0
- package/dist/popover.dom.js +192 -0
- package/dist/popover.dom.mjs +6 -0
- package/dist/popover.machine.d.ts +9 -0
- package/dist/popover.machine.js +541 -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,23 @@
|
|
|
1
|
+
import { PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import { State, Send } from './popover.types.js';
|
|
3
|
+
import '@zag-js/core';
|
|
4
|
+
import '@zag-js/dismissable';
|
|
5
|
+
import '@zag-js/popper';
|
|
6
|
+
|
|
7
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
8
|
+
portalled: boolean;
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
open(): void;
|
|
11
|
+
close(): void;
|
|
12
|
+
arrowProps: T["element"];
|
|
13
|
+
arrowTipProps: T["element"];
|
|
14
|
+
anchorProps: T["element"];
|
|
15
|
+
triggerProps: T["button"];
|
|
16
|
+
positionerProps: T["element"];
|
|
17
|
+
contentProps: T["element"];
|
|
18
|
+
titleProps: T["element"];
|
|
19
|
+
descriptionProps: T["element"];
|
|
20
|
+
closeTriggerProps: T["button"];
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { connect };
|
|
@@ -0,0 +1,299 @@
|
|
|
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.connect.ts
|
|
21
|
+
var popover_connect_exports = {};
|
|
22
|
+
__export(popover_connect_exports, {
|
|
23
|
+
connect: () => connect
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(popover_connect_exports);
|
|
26
|
+
|
|
27
|
+
// ../../utilities/dom/src/attrs.ts
|
|
28
|
+
var dataAttr = (guard) => {
|
|
29
|
+
return guard ? "" : void 0;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// ../../utilities/core/src/functions.ts
|
|
33
|
+
var runIfFn = (v, ...a) => {
|
|
34
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
35
|
+
return res != null ? res : void 0;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// ../../utilities/dom/src/query.ts
|
|
39
|
+
function isDocument(el) {
|
|
40
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
41
|
+
}
|
|
42
|
+
function isWindow(value) {
|
|
43
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
44
|
+
}
|
|
45
|
+
function isFrame(element) {
|
|
46
|
+
return element.localName === "iframe";
|
|
47
|
+
}
|
|
48
|
+
function getDocument(el) {
|
|
49
|
+
var _a;
|
|
50
|
+
if (isWindow(el))
|
|
51
|
+
return el.document;
|
|
52
|
+
if (isDocument(el))
|
|
53
|
+
return el;
|
|
54
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
55
|
+
}
|
|
56
|
+
function defineDomHelpers(helpers) {
|
|
57
|
+
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
|
+
},
|
|
62
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
63
|
+
getWin: (ctx) => {
|
|
64
|
+
var _a;
|
|
65
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
66
|
+
},
|
|
67
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
68
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
69
|
+
};
|
|
70
|
+
return {
|
|
71
|
+
...dom2,
|
|
72
|
+
...helpers
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
function isHTMLElement(v) {
|
|
76
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
77
|
+
}
|
|
78
|
+
function isVisible(el) {
|
|
79
|
+
if (!isHTMLElement(el))
|
|
80
|
+
return false;
|
|
81
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// ../../utilities/dom/src/focusable.ts
|
|
85
|
+
function hasNegativeTabIndex(element) {
|
|
86
|
+
const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
|
|
87
|
+
return tabIndex < 0;
|
|
88
|
+
}
|
|
89
|
+
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";
|
|
90
|
+
var getFocusables = (container, includeContainer = false) => {
|
|
91
|
+
if (!container)
|
|
92
|
+
return [];
|
|
93
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
94
|
+
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
95
|
+
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
96
|
+
elements.unshift(container);
|
|
97
|
+
}
|
|
98
|
+
const focusableElements = elements.filter(isFocusable);
|
|
99
|
+
focusableElements.forEach((element, i) => {
|
|
100
|
+
if (isFrame(element) && element.contentDocument) {
|
|
101
|
+
const frameBody = element.contentDocument.body;
|
|
102
|
+
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
return focusableElements;
|
|
106
|
+
};
|
|
107
|
+
function isFocusable(element) {
|
|
108
|
+
if (!element)
|
|
109
|
+
return false;
|
|
110
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
111
|
+
}
|
|
112
|
+
function getTabbables(container, includeContainer) {
|
|
113
|
+
if (!container)
|
|
114
|
+
return [];
|
|
115
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
116
|
+
const tabbableElements = elements.filter(isTabbable);
|
|
117
|
+
if (includeContainer && isTabbable(container)) {
|
|
118
|
+
tabbableElements.unshift(container);
|
|
119
|
+
}
|
|
120
|
+
tabbableElements.forEach((element, i) => {
|
|
121
|
+
if (isFrame(element) && element.contentDocument) {
|
|
122
|
+
const frameBody = element.contentDocument.body;
|
|
123
|
+
const allFrameTabbable = getTabbables(frameBody);
|
|
124
|
+
tabbableElements.splice(i, 1, ...allFrameTabbable);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
if (!tabbableElements.length && includeContainer) {
|
|
128
|
+
return elements;
|
|
129
|
+
}
|
|
130
|
+
return tabbableElements;
|
|
131
|
+
}
|
|
132
|
+
function isTabbable(el) {
|
|
133
|
+
return isFocusable(el) && !hasNegativeTabIndex(el);
|
|
134
|
+
}
|
|
135
|
+
function getFirstTabbable(container, includeContainer) {
|
|
136
|
+
const [first] = getTabbables(container, includeContainer);
|
|
137
|
+
return first || null;
|
|
138
|
+
}
|
|
139
|
+
function getLastTabbable(container, includeContainer) {
|
|
140
|
+
const elements = getTabbables(container, includeContainer);
|
|
141
|
+
return elements[elements.length - 1] || null;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// src/popover.connect.ts
|
|
145
|
+
var import_popper = require("@zag-js/popper");
|
|
146
|
+
|
|
147
|
+
// src/popover.dom.ts
|
|
148
|
+
var dom = defineDomHelpers({
|
|
149
|
+
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
150
|
+
getAnchorId: (ctx) => {
|
|
151
|
+
var _a, _b;
|
|
152
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
|
|
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
|
+
},
|
|
162
|
+
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
163
|
+
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
164
|
+
getTitleId: (ctx) => {
|
|
165
|
+
var _a, _b;
|
|
166
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
|
|
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
|
+
},
|
|
176
|
+
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
177
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
178
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
179
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
180
|
+
getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
|
|
181
|
+
getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
|
|
182
|
+
getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
|
|
183
|
+
getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
|
|
184
|
+
getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
|
|
185
|
+
getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
|
|
186
|
+
getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
187
|
+
getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
188
|
+
getInitialFocusEl: (ctx) => {
|
|
189
|
+
let el = runIfFn(ctx.initialFocusEl);
|
|
190
|
+
if (!el && ctx.autoFocus)
|
|
191
|
+
el = dom.getFirstFocusableEl(ctx);
|
|
192
|
+
if (!el)
|
|
193
|
+
el = dom.getContentEl(ctx);
|
|
194
|
+
return el;
|
|
195
|
+
}
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
// src/popover.anatomy.ts
|
|
199
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
200
|
+
var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
|
|
201
|
+
"arrow",
|
|
202
|
+
"arrowTip",
|
|
203
|
+
"anchor",
|
|
204
|
+
"trigger",
|
|
205
|
+
"positioner",
|
|
206
|
+
"content",
|
|
207
|
+
"title",
|
|
208
|
+
"description",
|
|
209
|
+
"closeTrigger"
|
|
210
|
+
);
|
|
211
|
+
var parts = anatomy.build();
|
|
212
|
+
|
|
213
|
+
// src/popover.connect.ts
|
|
214
|
+
function connect(state, send, normalize) {
|
|
215
|
+
const isOpen = state.matches("open");
|
|
216
|
+
const currentPlacement = state.context.currentPlacement;
|
|
217
|
+
const portalled = state.context.currentPortalled;
|
|
218
|
+
const rendered = state.context.renderedElements;
|
|
219
|
+
const popperStyles = (0, import_popper.getPlacementStyles)({
|
|
220
|
+
measured: !!state.context.isPlacementComplete,
|
|
221
|
+
placement: currentPlacement
|
|
222
|
+
});
|
|
223
|
+
return {
|
|
224
|
+
portalled,
|
|
225
|
+
isOpen,
|
|
226
|
+
open() {
|
|
227
|
+
send("OPEN");
|
|
228
|
+
},
|
|
229
|
+
close() {
|
|
230
|
+
send("CLOSE");
|
|
231
|
+
},
|
|
232
|
+
arrowProps: normalize.element({
|
|
233
|
+
id: dom.getArrowId(state.context),
|
|
234
|
+
...parts.arrow.attrs,
|
|
235
|
+
style: popperStyles.arrow
|
|
236
|
+
}),
|
|
237
|
+
arrowTipProps: normalize.element({
|
|
238
|
+
...parts.arrowTip.attrs,
|
|
239
|
+
style: popperStyles.arrowTip
|
|
240
|
+
}),
|
|
241
|
+
anchorProps: normalize.element({
|
|
242
|
+
...parts.anchor.attrs,
|
|
243
|
+
id: dom.getAnchorId(state.context)
|
|
244
|
+
}),
|
|
245
|
+
triggerProps: normalize.button({
|
|
246
|
+
...parts.trigger.attrs,
|
|
247
|
+
type: "button",
|
|
248
|
+
"data-placement": currentPlacement,
|
|
249
|
+
id: dom.getTriggerId(state.context),
|
|
250
|
+
"aria-haspopup": "dialog",
|
|
251
|
+
"aria-expanded": isOpen,
|
|
252
|
+
"data-expanded": dataAttr(isOpen),
|
|
253
|
+
"aria-controls": dom.getContentId(state.context),
|
|
254
|
+
onClick() {
|
|
255
|
+
send("TOGGLE");
|
|
256
|
+
},
|
|
257
|
+
onBlur(event) {
|
|
258
|
+
send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
|
|
259
|
+
}
|
|
260
|
+
}),
|
|
261
|
+
positionerProps: normalize.element({
|
|
262
|
+
id: dom.getPositionerId(state.context),
|
|
263
|
+
...parts.positioner.attrs,
|
|
264
|
+
style: popperStyles.floating
|
|
265
|
+
}),
|
|
266
|
+
contentProps: normalize.element({
|
|
267
|
+
...parts.content.attrs,
|
|
268
|
+
id: dom.getContentId(state.context),
|
|
269
|
+
tabIndex: -1,
|
|
270
|
+
role: "dialog",
|
|
271
|
+
hidden: !isOpen,
|
|
272
|
+
"data-expanded": dataAttr(isOpen),
|
|
273
|
+
"aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
|
|
274
|
+
"aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
|
|
275
|
+
"data-placement": currentPlacement
|
|
276
|
+
}),
|
|
277
|
+
titleProps: normalize.element({
|
|
278
|
+
...parts.title.attrs,
|
|
279
|
+
id: dom.getTitleId(state.context)
|
|
280
|
+
}),
|
|
281
|
+
descriptionProps: normalize.element({
|
|
282
|
+
...parts.description.attrs,
|
|
283
|
+
id: dom.getDescriptionId(state.context)
|
|
284
|
+
}),
|
|
285
|
+
closeTriggerProps: normalize.button({
|
|
286
|
+
...parts.closeTrigger.attrs,
|
|
287
|
+
id: dom.getCloseTriggerId(state.context),
|
|
288
|
+
type: "button",
|
|
289
|
+
"aria-label": "close",
|
|
290
|
+
onClick() {
|
|
291
|
+
send("REQUEST_CLOSE");
|
|
292
|
+
}
|
|
293
|
+
})
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
297
|
+
0 && (module.exports = {
|
|
298
|
+
connect
|
|
299
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { MachineContext } from './popover.types.js';
|
|
2
|
+
import '@zag-js/core';
|
|
3
|
+
import '@zag-js/dismissable';
|
|
4
|
+
import '@zag-js/popper';
|
|
5
|
+
import '@zag-js/types';
|
|
6
|
+
|
|
7
|
+
declare const dom: {
|
|
8
|
+
getRootNode: (ctx: {
|
|
9
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
10
|
+
}) => Document | ShadowRoot;
|
|
11
|
+
getDoc: (ctx: {
|
|
12
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
13
|
+
}) => Document;
|
|
14
|
+
getWin: (ctx: {
|
|
15
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
16
|
+
}) => Window & typeof globalThis;
|
|
17
|
+
getActiveElement: (ctx: {
|
|
18
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
19
|
+
}) => HTMLElement | null;
|
|
20
|
+
getById: <T = HTMLElement>(ctx: {
|
|
21
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
22
|
+
}, id: string) => T | null;
|
|
23
|
+
} & {
|
|
24
|
+
getActiveEl: (ctx: MachineContext) => Element | null;
|
|
25
|
+
getAnchorId: (ctx: MachineContext) => string;
|
|
26
|
+
getTriggerId: (ctx: MachineContext) => string;
|
|
27
|
+
getContentId: (ctx: MachineContext) => string;
|
|
28
|
+
getPositionerId: (ctx: MachineContext) => string;
|
|
29
|
+
getArrowId: (ctx: MachineContext) => string;
|
|
30
|
+
getTitleId: (ctx: MachineContext) => string;
|
|
31
|
+
getDescriptionId: (ctx: MachineContext) => string;
|
|
32
|
+
getCloseTriggerId: (ctx: MachineContext) => string;
|
|
33
|
+
getAnchorEl: (ctx: MachineContext) => HTMLElement | null;
|
|
34
|
+
getTriggerEl: (ctx: MachineContext) => HTMLElement | null;
|
|
35
|
+
getContentEl: (ctx: MachineContext) => HTMLElement | null;
|
|
36
|
+
getPositionerEl: (ctx: MachineContext) => HTMLElement | null;
|
|
37
|
+
getTitleEl: (ctx: MachineContext) => HTMLElement | null;
|
|
38
|
+
getDescriptionEl: (ctx: MachineContext) => HTMLElement | null;
|
|
39
|
+
getFocusableEls: (ctx: MachineContext) => HTMLElement[];
|
|
40
|
+
getFirstFocusableEl: (ctx: MachineContext) => HTMLElement;
|
|
41
|
+
getDocTabbableEls: (ctx: MachineContext) => HTMLElement[];
|
|
42
|
+
getTabbableEls: (ctx: MachineContext) => HTMLElement[];
|
|
43
|
+
getFirstTabbableEl: (ctx: MachineContext) => HTMLElement;
|
|
44
|
+
getLastTabbableEl: (ctx: MachineContext) => HTMLElement;
|
|
45
|
+
getInitialFocusEl: (ctx: MachineContext) => HTMLElement | null;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { dom };
|
|
@@ -0,0 +1,192 @@
|
|
|
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.dom.ts
|
|
21
|
+
var popover_dom_exports = {};
|
|
22
|
+
__export(popover_dom_exports, {
|
|
23
|
+
dom: () => dom
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(popover_dom_exports);
|
|
26
|
+
|
|
27
|
+
// ../../utilities/core/src/functions.ts
|
|
28
|
+
var runIfFn = (v, ...a) => {
|
|
29
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
+
return res != null ? res : void 0;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// ../../utilities/dom/src/query.ts
|
|
34
|
+
function isDocument(el) {
|
|
35
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
36
|
+
}
|
|
37
|
+
function isWindow(value) {
|
|
38
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
39
|
+
}
|
|
40
|
+
function isFrame(element) {
|
|
41
|
+
return element.localName === "iframe";
|
|
42
|
+
}
|
|
43
|
+
function getDocument(el) {
|
|
44
|
+
var _a;
|
|
45
|
+
if (isWindow(el))
|
|
46
|
+
return el.document;
|
|
47
|
+
if (isDocument(el))
|
|
48
|
+
return el;
|
|
49
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
50
|
+
}
|
|
51
|
+
function defineDomHelpers(helpers) {
|
|
52
|
+
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
|
+
},
|
|
57
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
58
|
+
getWin: (ctx) => {
|
|
59
|
+
var _a;
|
|
60
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
61
|
+
},
|
|
62
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
63
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
64
|
+
};
|
|
65
|
+
return {
|
|
66
|
+
...dom2,
|
|
67
|
+
...helpers
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
function isHTMLElement(v) {
|
|
71
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
72
|
+
}
|
|
73
|
+
function isVisible(el) {
|
|
74
|
+
if (!isHTMLElement(el))
|
|
75
|
+
return false;
|
|
76
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// ../../utilities/dom/src/focusable.ts
|
|
80
|
+
function hasNegativeTabIndex(element) {
|
|
81
|
+
const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
|
|
82
|
+
return tabIndex < 0;
|
|
83
|
+
}
|
|
84
|
+
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";
|
|
85
|
+
var getFocusables = (container, includeContainer = false) => {
|
|
86
|
+
if (!container)
|
|
87
|
+
return [];
|
|
88
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
89
|
+
const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
|
|
90
|
+
if (include && isHTMLElement(container) && isFocusable(container)) {
|
|
91
|
+
elements.unshift(container);
|
|
92
|
+
}
|
|
93
|
+
const focusableElements = elements.filter(isFocusable);
|
|
94
|
+
focusableElements.forEach((element, i) => {
|
|
95
|
+
if (isFrame(element) && element.contentDocument) {
|
|
96
|
+
const frameBody = element.contentDocument.body;
|
|
97
|
+
focusableElements.splice(i, 1, ...getFocusables(frameBody));
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
return focusableElements;
|
|
101
|
+
};
|
|
102
|
+
function isFocusable(element) {
|
|
103
|
+
if (!element)
|
|
104
|
+
return false;
|
|
105
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
106
|
+
}
|
|
107
|
+
function getTabbables(container, includeContainer) {
|
|
108
|
+
if (!container)
|
|
109
|
+
return [];
|
|
110
|
+
const elements = Array.from(container.querySelectorAll(focusableSelector));
|
|
111
|
+
const tabbableElements = elements.filter(isTabbable);
|
|
112
|
+
if (includeContainer && isTabbable(container)) {
|
|
113
|
+
tabbableElements.unshift(container);
|
|
114
|
+
}
|
|
115
|
+
tabbableElements.forEach((element, i) => {
|
|
116
|
+
if (isFrame(element) && element.contentDocument) {
|
|
117
|
+
const frameBody = element.contentDocument.body;
|
|
118
|
+
const allFrameTabbable = getTabbables(frameBody);
|
|
119
|
+
tabbableElements.splice(i, 1, ...allFrameTabbable);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
if (!tabbableElements.length && includeContainer) {
|
|
123
|
+
return elements;
|
|
124
|
+
}
|
|
125
|
+
return tabbableElements;
|
|
126
|
+
}
|
|
127
|
+
function isTabbable(el) {
|
|
128
|
+
return isFocusable(el) && !hasNegativeTabIndex(el);
|
|
129
|
+
}
|
|
130
|
+
function getFirstTabbable(container, includeContainer) {
|
|
131
|
+
const [first] = getTabbables(container, includeContainer);
|
|
132
|
+
return first || null;
|
|
133
|
+
}
|
|
134
|
+
function getLastTabbable(container, includeContainer) {
|
|
135
|
+
const elements = getTabbables(container, includeContainer);
|
|
136
|
+
return elements[elements.length - 1] || null;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// src/popover.dom.ts
|
|
140
|
+
var dom = defineDomHelpers({
|
|
141
|
+
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
142
|
+
getAnchorId: (ctx) => {
|
|
143
|
+
var _a, _b;
|
|
144
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.id}:anchor`;
|
|
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
|
+
},
|
|
154
|
+
getPositionerId: (ctx) => `popover:${ctx.id}:popper`,
|
|
155
|
+
getArrowId: (ctx) => `popover:${ctx.id}:arrow`,
|
|
156
|
+
getTitleId: (ctx) => {
|
|
157
|
+
var _a, _b;
|
|
158
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.title) != null ? _b : `popover:${ctx.id}:title`;
|
|
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
|
+
},
|
|
168
|
+
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
169
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
170
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
171
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
172
|
+
getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
|
|
173
|
+
getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
|
|
174
|
+
getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
|
|
175
|
+
getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
|
|
176
|
+
getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
|
|
177
|
+
getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
|
|
178
|
+
getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
179
|
+
getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
180
|
+
getInitialFocusEl: (ctx) => {
|
|
181
|
+
let el = runIfFn(ctx.initialFocusEl);
|
|
182
|
+
if (!el && ctx.autoFocus)
|
|
183
|
+
el = dom.getFirstFocusableEl(ctx);
|
|
184
|
+
if (!el)
|
|
185
|
+
el = dom.getContentEl(ctx);
|
|
186
|
+
return el;
|
|
187
|
+
}
|
|
188
|
+
});
|
|
189
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
190
|
+
0 && (module.exports = {
|
|
191
|
+
dom
|
|
192
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
2
|
+
import { UserDefinedContext, MachineContext, MachineState } from './popover.types.js';
|
|
3
|
+
import '@zag-js/dismissable';
|
|
4
|
+
import '@zag-js/popper';
|
|
5
|
+
import '@zag-js/types';
|
|
6
|
+
|
|
7
|
+
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
8
|
+
|
|
9
|
+
export { machine };
|