@zag-js/popover 0.10.5 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{popover.types.d.ts → index.d.mts} +51 -10
- package/dist/index.d.ts +124 -4
- package/dist/index.js +410 -8
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +386 -3
- package/dist/index.mjs.map +1 -0
- package/package.json +13 -13
- package/dist/popover.anatomy.d.ts +0 -3
- package/dist/popover.anatomy.js +0 -21
- package/dist/popover.anatomy.mjs +0 -16
- package/dist/popover.connect.d.ts +0 -34
- package/dist/popover.connect.js +0 -110
- package/dist/popover.connect.mjs +0 -106
- package/dist/popover.dom.d.ts +0 -44
- package/dist/popover.dom.js +0 -41
- package/dist/popover.dom.mjs +0 -37
- package/dist/popover.machine.d.ts +0 -3
- package/dist/popover.machine.js +0 -231
- package/dist/popover.machine.mjs +0 -227
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,386 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
// src/popover.anatomy.ts
|
|
2
|
+
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
+
var anatomy = createAnatomy("popover").parts(
|
|
4
|
+
"arrow",
|
|
5
|
+
"arrowTip",
|
|
6
|
+
"anchor",
|
|
7
|
+
"trigger",
|
|
8
|
+
"positioner",
|
|
9
|
+
"content",
|
|
10
|
+
"title",
|
|
11
|
+
"description",
|
|
12
|
+
"closeTrigger"
|
|
13
|
+
);
|
|
14
|
+
var parts = anatomy.build();
|
|
15
|
+
|
|
16
|
+
// src/popover.connect.ts
|
|
17
|
+
import { dataAttr } from "@zag-js/dom-query";
|
|
18
|
+
import { getPlacementStyles } from "@zag-js/popper";
|
|
19
|
+
|
|
20
|
+
// src/popover.dom.ts
|
|
21
|
+
import { createScope } from "@zag-js/dom-query";
|
|
22
|
+
import { getFirstTabbable, getFocusables, getLastTabbable, getTabbables } from "@zag-js/tabbable";
|
|
23
|
+
import { runIfFn } from "@zag-js/utils";
|
|
24
|
+
var dom = createScope({
|
|
25
|
+
getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
|
|
26
|
+
getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
|
|
27
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
|
|
28
|
+
getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
|
|
29
|
+
getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
|
|
30
|
+
getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
|
|
31
|
+
getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
|
|
32
|
+
getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
|
|
33
|
+
getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
|
|
34
|
+
getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
|
|
35
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
36
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
37
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
38
|
+
getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
|
|
39
|
+
getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
|
|
40
|
+
getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
|
|
41
|
+
getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
|
|
42
|
+
getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
|
|
43
|
+
getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
|
|
44
|
+
getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
45
|
+
getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
|
|
46
|
+
getInitialFocusEl: (ctx) => {
|
|
47
|
+
let el = runIfFn(ctx.initialFocusEl);
|
|
48
|
+
if (!el && ctx.autoFocus)
|
|
49
|
+
el = dom.getFirstFocusableEl(ctx);
|
|
50
|
+
if (!el)
|
|
51
|
+
el = dom.getContentEl(ctx);
|
|
52
|
+
return el;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
// src/popover.connect.ts
|
|
57
|
+
function connect(state, send, normalize) {
|
|
58
|
+
const isOpen = state.matches("open");
|
|
59
|
+
const currentPlacement = state.context.currentPlacement;
|
|
60
|
+
const portalled = state.context.currentPortalled;
|
|
61
|
+
const rendered = state.context.renderedElements;
|
|
62
|
+
const popperStyles = getPlacementStyles({
|
|
63
|
+
placement: currentPlacement
|
|
64
|
+
});
|
|
65
|
+
return {
|
|
66
|
+
/**
|
|
67
|
+
* Whether the popover is portalled
|
|
68
|
+
*/
|
|
69
|
+
portalled,
|
|
70
|
+
/**
|
|
71
|
+
* Whether the popover is open
|
|
72
|
+
*/
|
|
73
|
+
isOpen,
|
|
74
|
+
/**
|
|
75
|
+
* Function to open the popover
|
|
76
|
+
*/
|
|
77
|
+
open() {
|
|
78
|
+
send("OPEN");
|
|
79
|
+
},
|
|
80
|
+
/**
|
|
81
|
+
* Function to close the popover
|
|
82
|
+
*/
|
|
83
|
+
close() {
|
|
84
|
+
send("CLOSE");
|
|
85
|
+
},
|
|
86
|
+
/**
|
|
87
|
+
* Function to reposition the popover
|
|
88
|
+
*/
|
|
89
|
+
setPositioning(options = {}) {
|
|
90
|
+
send({ type: "SET_POSITIONING", options });
|
|
91
|
+
},
|
|
92
|
+
arrowProps: normalize.element({
|
|
93
|
+
id: dom.getArrowId(state.context),
|
|
94
|
+
...parts.arrow.attrs,
|
|
95
|
+
style: popperStyles.arrow
|
|
96
|
+
}),
|
|
97
|
+
arrowTipProps: normalize.element({
|
|
98
|
+
...parts.arrowTip.attrs,
|
|
99
|
+
style: popperStyles.arrowTip
|
|
100
|
+
}),
|
|
101
|
+
anchorProps: normalize.element({
|
|
102
|
+
...parts.anchor.attrs,
|
|
103
|
+
id: dom.getAnchorId(state.context)
|
|
104
|
+
}),
|
|
105
|
+
triggerProps: normalize.button({
|
|
106
|
+
...parts.trigger.attrs,
|
|
107
|
+
type: "button",
|
|
108
|
+
"data-placement": currentPlacement,
|
|
109
|
+
id: dom.getTriggerId(state.context),
|
|
110
|
+
"aria-haspopup": "dialog",
|
|
111
|
+
"aria-expanded": isOpen,
|
|
112
|
+
"data-expanded": dataAttr(isOpen),
|
|
113
|
+
"aria-controls": dom.getContentId(state.context),
|
|
114
|
+
onClick() {
|
|
115
|
+
send("TOGGLE");
|
|
116
|
+
},
|
|
117
|
+
onBlur(event) {
|
|
118
|
+
send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
|
|
119
|
+
}
|
|
120
|
+
}),
|
|
121
|
+
positionerProps: normalize.element({
|
|
122
|
+
id: dom.getPositionerId(state.context),
|
|
123
|
+
...parts.positioner.attrs,
|
|
124
|
+
style: popperStyles.floating
|
|
125
|
+
}),
|
|
126
|
+
contentProps: normalize.element({
|
|
127
|
+
...parts.content.attrs,
|
|
128
|
+
id: dom.getContentId(state.context),
|
|
129
|
+
tabIndex: -1,
|
|
130
|
+
role: "dialog",
|
|
131
|
+
hidden: !isOpen,
|
|
132
|
+
"data-expanded": dataAttr(isOpen),
|
|
133
|
+
"aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
|
|
134
|
+
"aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
|
|
135
|
+
"data-placement": currentPlacement
|
|
136
|
+
}),
|
|
137
|
+
titleProps: normalize.element({
|
|
138
|
+
...parts.title.attrs,
|
|
139
|
+
id: dom.getTitleId(state.context)
|
|
140
|
+
}),
|
|
141
|
+
descriptionProps: normalize.element({
|
|
142
|
+
...parts.description.attrs,
|
|
143
|
+
id: dom.getDescriptionId(state.context)
|
|
144
|
+
}),
|
|
145
|
+
closeTriggerProps: normalize.button({
|
|
146
|
+
...parts.closeTrigger.attrs,
|
|
147
|
+
id: dom.getCloseTriggerId(state.context),
|
|
148
|
+
type: "button",
|
|
149
|
+
"aria-label": "close",
|
|
150
|
+
onClick() {
|
|
151
|
+
send("REQUEST_CLOSE");
|
|
152
|
+
}
|
|
153
|
+
})
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// src/popover.machine.ts
|
|
158
|
+
import { ariaHidden } from "@zag-js/aria-hidden";
|
|
159
|
+
import { createMachine } from "@zag-js/core";
|
|
160
|
+
import { trackDismissableElement } from "@zag-js/dismissable";
|
|
161
|
+
import { nextTick, raf } from "@zag-js/dom-query";
|
|
162
|
+
import { getPlacement } from "@zag-js/popper";
|
|
163
|
+
import { preventBodyScroll } from "@zag-js/remove-scroll";
|
|
164
|
+
import { proxyTabFocus } from "@zag-js/tabbable";
|
|
165
|
+
import { compact, runIfFn as runIfFn2 } from "@zag-js/utils";
|
|
166
|
+
import { createFocusTrap } from "focus-trap";
|
|
167
|
+
function machine(userContext) {
|
|
168
|
+
const ctx = compact(userContext);
|
|
169
|
+
return createMachine(
|
|
170
|
+
{
|
|
171
|
+
id: "popover",
|
|
172
|
+
initial: ctx.open ? "open" : "closed",
|
|
173
|
+
context: {
|
|
174
|
+
closeOnInteractOutside: true,
|
|
175
|
+
closeOnEsc: true,
|
|
176
|
+
autoFocus: true,
|
|
177
|
+
modal: false,
|
|
178
|
+
positioning: {
|
|
179
|
+
placement: "bottom",
|
|
180
|
+
...ctx.positioning
|
|
181
|
+
},
|
|
182
|
+
currentPlacement: void 0,
|
|
183
|
+
...ctx,
|
|
184
|
+
renderedElements: {
|
|
185
|
+
title: true,
|
|
186
|
+
description: true
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
computed: {
|
|
190
|
+
currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
|
|
191
|
+
},
|
|
192
|
+
watch: {
|
|
193
|
+
open: ["toggleVisibility"]
|
|
194
|
+
},
|
|
195
|
+
entry: ["checkRenderedElements"],
|
|
196
|
+
states: {
|
|
197
|
+
closed: {
|
|
198
|
+
on: {
|
|
199
|
+
TOGGLE: {
|
|
200
|
+
target: "open",
|
|
201
|
+
actions: ["invokeOnOpen"]
|
|
202
|
+
},
|
|
203
|
+
OPEN: {
|
|
204
|
+
target: "open",
|
|
205
|
+
actions: ["invokeOnOpen"]
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
open: {
|
|
210
|
+
activities: [
|
|
211
|
+
"trapFocus",
|
|
212
|
+
"preventScroll",
|
|
213
|
+
"hideContentBelow",
|
|
214
|
+
"trackPositioning",
|
|
215
|
+
"trackDismissableElement",
|
|
216
|
+
"proxyTabFocus"
|
|
217
|
+
],
|
|
218
|
+
entry: ["setInitialFocus"],
|
|
219
|
+
on: {
|
|
220
|
+
CLOSE: {
|
|
221
|
+
target: "closed",
|
|
222
|
+
actions: ["invokeOnClose"]
|
|
223
|
+
},
|
|
224
|
+
REQUEST_CLOSE: {
|
|
225
|
+
target: "closed",
|
|
226
|
+
actions: ["restoreFocusIfNeeded", "invokeOnClose"]
|
|
227
|
+
},
|
|
228
|
+
TOGGLE: {
|
|
229
|
+
target: "closed",
|
|
230
|
+
actions: ["invokeOnClose"]
|
|
231
|
+
},
|
|
232
|
+
SET_POSITIONING: {
|
|
233
|
+
actions: "setPositioning"
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
activities: {
|
|
241
|
+
trackPositioning(ctx2) {
|
|
242
|
+
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
243
|
+
const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
|
|
244
|
+
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
245
|
+
return getPlacement(anchorEl, getPositionerEl, {
|
|
246
|
+
...ctx2.positioning,
|
|
247
|
+
defer: true,
|
|
248
|
+
onComplete(data) {
|
|
249
|
+
ctx2.currentPlacement = data.placement;
|
|
250
|
+
},
|
|
251
|
+
onCleanup() {
|
|
252
|
+
ctx2.currentPlacement = void 0;
|
|
253
|
+
}
|
|
254
|
+
});
|
|
255
|
+
},
|
|
256
|
+
trackDismissableElement(ctx2, _evt, { send }) {
|
|
257
|
+
const getContentEl = () => dom.getContentEl(ctx2);
|
|
258
|
+
let restoreFocus = true;
|
|
259
|
+
return trackDismissableElement(getContentEl, {
|
|
260
|
+
pointerBlocking: ctx2.modal,
|
|
261
|
+
exclude: dom.getTriggerEl(ctx2),
|
|
262
|
+
defer: true,
|
|
263
|
+
onEscapeKeyDown(event) {
|
|
264
|
+
ctx2.onEscapeKeyDown?.(event);
|
|
265
|
+
if (ctx2.closeOnEsc)
|
|
266
|
+
return;
|
|
267
|
+
event.preventDefault();
|
|
268
|
+
},
|
|
269
|
+
onInteractOutside(event) {
|
|
270
|
+
ctx2.onInteractOutside?.(event);
|
|
271
|
+
if (event.defaultPrevented)
|
|
272
|
+
return;
|
|
273
|
+
restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
|
|
274
|
+
if (!ctx2.closeOnInteractOutside) {
|
|
275
|
+
event.preventDefault();
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
onPointerDownOutside(event) {
|
|
279
|
+
ctx2.onPointerDownOutside?.(event);
|
|
280
|
+
},
|
|
281
|
+
onFocusOutside(event) {
|
|
282
|
+
ctx2.onFocusOutside?.(event);
|
|
283
|
+
},
|
|
284
|
+
onDismiss() {
|
|
285
|
+
send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
},
|
|
289
|
+
proxyTabFocus(ctx2) {
|
|
290
|
+
if (ctx2.modal || !ctx2.portalled)
|
|
291
|
+
return;
|
|
292
|
+
const getContentEl = () => dom.getContentEl(ctx2);
|
|
293
|
+
return proxyTabFocus(getContentEl, {
|
|
294
|
+
triggerElement: dom.getTriggerEl(ctx2),
|
|
295
|
+
defer: true,
|
|
296
|
+
onFocus(el) {
|
|
297
|
+
el.focus({ preventScroll: true });
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
},
|
|
301
|
+
hideContentBelow(ctx2) {
|
|
302
|
+
if (!ctx2.modal)
|
|
303
|
+
return;
|
|
304
|
+
const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
|
|
305
|
+
return ariaHidden(getElements, { defer: true });
|
|
306
|
+
},
|
|
307
|
+
preventScroll(ctx2) {
|
|
308
|
+
if (!ctx2.modal)
|
|
309
|
+
return;
|
|
310
|
+
return preventBodyScroll(dom.getDoc(ctx2));
|
|
311
|
+
},
|
|
312
|
+
trapFocus(ctx2) {
|
|
313
|
+
if (!ctx2.modal)
|
|
314
|
+
return;
|
|
315
|
+
let trap;
|
|
316
|
+
nextTick(() => {
|
|
317
|
+
const el = dom.getContentEl(ctx2);
|
|
318
|
+
if (!el)
|
|
319
|
+
return;
|
|
320
|
+
trap = createFocusTrap(el, {
|
|
321
|
+
escapeDeactivates: false,
|
|
322
|
+
allowOutsideClick: true,
|
|
323
|
+
preventScroll: true,
|
|
324
|
+
returnFocusOnDeactivate: true,
|
|
325
|
+
document: dom.getDoc(ctx2),
|
|
326
|
+
fallbackFocus: el,
|
|
327
|
+
initialFocus: runIfFn2(ctx2.initialFocusEl)
|
|
328
|
+
});
|
|
329
|
+
try {
|
|
330
|
+
trap.activate();
|
|
331
|
+
} catch {
|
|
332
|
+
}
|
|
333
|
+
});
|
|
334
|
+
return () => trap?.deactivate();
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
actions: {
|
|
338
|
+
setPositioning(ctx2, evt) {
|
|
339
|
+
const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
|
|
340
|
+
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
341
|
+
getPlacement(anchorEl, getPositionerEl, {
|
|
342
|
+
...ctx2.positioning,
|
|
343
|
+
...evt.options,
|
|
344
|
+
defer: true,
|
|
345
|
+
listeners: false
|
|
346
|
+
});
|
|
347
|
+
},
|
|
348
|
+
checkRenderedElements(ctx2) {
|
|
349
|
+
raf(() => {
|
|
350
|
+
Object.assign(ctx2.renderedElements, {
|
|
351
|
+
title: !!dom.getTitleEl(ctx2),
|
|
352
|
+
description: !!dom.getDescriptionEl(ctx2)
|
|
353
|
+
});
|
|
354
|
+
});
|
|
355
|
+
},
|
|
356
|
+
setInitialFocus(ctx2) {
|
|
357
|
+
raf(() => {
|
|
358
|
+
dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
|
|
359
|
+
});
|
|
360
|
+
},
|
|
361
|
+
restoreFocusIfNeeded(ctx2, evt) {
|
|
362
|
+
if (!evt.restoreFocus)
|
|
363
|
+
return;
|
|
364
|
+
raf(() => {
|
|
365
|
+
dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
|
|
366
|
+
});
|
|
367
|
+
},
|
|
368
|
+
invokeOnOpen(ctx2) {
|
|
369
|
+
ctx2.onOpen?.();
|
|
370
|
+
},
|
|
371
|
+
invokeOnClose(ctx2) {
|
|
372
|
+
ctx2.onClose?.();
|
|
373
|
+
},
|
|
374
|
+
toggleVisibility(ctx2, _evt, { send }) {
|
|
375
|
+
send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
);
|
|
380
|
+
}
|
|
381
|
+
export {
|
|
382
|
+
anatomy,
|
|
383
|
+
connect,
|
|
384
|
+
machine
|
|
385
|
+
};
|
|
386
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/popover.anatomy.ts","../src/popover.connect.ts","../src/popover.dom.ts","../src/popover.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"popover\").parts(\n \"arrow\",\n \"arrowTip\",\n \"anchor\",\n \"trigger\",\n \"positioner\",\n \"content\",\n \"title\",\n \"description\",\n \"closeTrigger\",\n)\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { PositioningOptions } from \"@zag-js/popper\"\nimport { getPlacementStyles } from \"@zag-js/popper\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./popover.anatomy\"\nimport { dom } from \"./popover.dom\"\nimport type { Send, State } from \"./popover.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n const isOpen = state.matches(\"open\")\n\n const currentPlacement = state.context.currentPlacement\n const portalled = state.context.currentPortalled\n const rendered = state.context.renderedElements\n\n const popperStyles = getPlacementStyles({\n placement: currentPlacement,\n })\n\n return {\n /**\n * Whether the popover is portalled\n */\n portalled,\n /**\n * Whether the popover is open\n */\n isOpen,\n /**\n * Function to open the popover\n */\n open() {\n send(\"OPEN\")\n },\n /**\n * Function to close the popover\n */\n close() {\n send(\"CLOSE\")\n },\n /**\n * Function to reposition the popover\n */\n setPositioning(options: Partial<PositioningOptions> = {}) {\n send({ type: \"SET_POSITIONING\", options })\n },\n\n arrowProps: normalize.element({\n id: dom.getArrowId(state.context),\n ...parts.arrow.attrs,\n style: popperStyles.arrow,\n }),\n\n arrowTipProps: normalize.element({\n ...parts.arrowTip.attrs,\n style: popperStyles.arrowTip,\n }),\n\n anchorProps: normalize.element({\n ...parts.anchor.attrs,\n id: dom.getAnchorId(state.context),\n }),\n\n triggerProps: normalize.button({\n ...parts.trigger.attrs,\n type: \"button\",\n \"data-placement\": currentPlacement,\n id: dom.getTriggerId(state.context),\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": isOpen,\n \"data-expanded\": dataAttr(isOpen),\n \"aria-controls\": dom.getContentId(state.context),\n onClick() {\n send(\"TOGGLE\")\n },\n onBlur(event) {\n send({ type: \"TRIGGER_BLUR\", target: event.relatedTarget })\n },\n }),\n\n positionerProps: normalize.element({\n id: dom.getPositionerId(state.context),\n ...parts.positioner.attrs,\n style: popperStyles.floating,\n }),\n\n contentProps: normalize.element({\n ...parts.content.attrs,\n id: dom.getContentId(state.context),\n tabIndex: -1,\n role: \"dialog\",\n hidden: !isOpen,\n \"data-expanded\": dataAttr(isOpen),\n \"aria-labelledby\": rendered.title ? dom.getTitleId(state.context) : undefined,\n \"aria-describedby\": rendered.description ? dom.getDescriptionId(state.context) : undefined,\n \"data-placement\": currentPlacement,\n }),\n\n titleProps: normalize.element({\n ...parts.title.attrs,\n id: dom.getTitleId(state.context),\n }),\n\n descriptionProps: normalize.element({\n ...parts.description.attrs,\n id: dom.getDescriptionId(state.context),\n }),\n\n closeTriggerProps: normalize.button({\n ...parts.closeTrigger.attrs,\n id: dom.getCloseTriggerId(state.context),\n type: \"button\",\n \"aria-label\": \"close\",\n onClick() {\n send(\"REQUEST_CLOSE\")\n },\n }),\n }\n}\n","import { createScope } from \"@zag-js/dom-query\"\nimport { getFirstTabbable, getFocusables, getLastTabbable, getTabbables } from \"@zag-js/tabbable\"\nimport { runIfFn } from \"@zag-js/utils\"\nimport type { MachineContext as Ctx } from \"./popover.types\"\n\nexport const dom = createScope({\n getActiveEl: (ctx: Ctx) => dom.getDoc(ctx).activeElement,\n\n getAnchorId: (ctx: Ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,\n getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,\n getContentId: (ctx: Ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,\n getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,\n getArrowId: (ctx: Ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,\n getTitleId: (ctx: Ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,\n getDescriptionId: (ctx: Ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,\n getCloseTriggerId: (ctx: Ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,\n\n getAnchorEl: (ctx: Ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),\n getTriggerEl: (ctx: Ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),\n getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),\n getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),\n getTitleEl: (ctx: Ctx) => dom.getById(ctx, dom.getTitleId(ctx)),\n getDescriptionEl: (ctx: Ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),\n\n getFocusableEls: (ctx: Ctx) => getFocusables(dom.getContentEl(ctx)),\n getFirstFocusableEl: (ctx: Ctx) => dom.getFocusableEls(ctx)[0],\n\n getDocTabbableEls: (ctx: Ctx) => getTabbables(dom.getDoc(ctx).body),\n getTabbableEls: (ctx: Ctx) => getTabbables(dom.getContentEl(ctx), \"if-empty\"),\n getFirstTabbableEl: (ctx: Ctx) => getFirstTabbable(dom.getContentEl(ctx), \"if-empty\"),\n getLastTabbableEl: (ctx: Ctx) => getLastTabbable(dom.getContentEl(ctx), \"if-empty\"),\n\n getInitialFocusEl: (ctx: Ctx) => {\n let el: HTMLElement | null = runIfFn(ctx.initialFocusEl)\n if (!el && ctx.autoFocus) el = dom.getFirstFocusableEl(ctx)\n if (!el) el = dom.getContentEl(ctx)\n return el\n },\n})\n","import { ariaHidden } from \"@zag-js/aria-hidden\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackDismissableElement } from \"@zag-js/dismissable\"\nimport { nextTick, raf } from \"@zag-js/dom-query\"\nimport { getPlacement } from \"@zag-js/popper\"\nimport { preventBodyScroll } from \"@zag-js/remove-scroll\"\nimport { proxyTabFocus } from \"@zag-js/tabbable\"\nimport { compact, runIfFn } from \"@zag-js/utils\"\nimport { FocusTrap, createFocusTrap } from \"focus-trap\"\nimport { dom } from \"./popover.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./popover.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"popover\",\n initial: ctx.open ? \"open\" : \"closed\",\n context: {\n closeOnInteractOutside: true,\n closeOnEsc: true,\n autoFocus: true,\n modal: false,\n positioning: {\n placement: \"bottom\",\n ...ctx.positioning,\n },\n currentPlacement: undefined,\n ...ctx,\n renderedElements: {\n title: true,\n description: true,\n },\n },\n\n computed: {\n currentPortalled: (ctx) => !!ctx.modal || !!ctx.portalled,\n },\n\n watch: {\n open: [\"toggleVisibility\"],\n },\n\n entry: [\"checkRenderedElements\"],\n\n states: {\n closed: {\n on: {\n TOGGLE: {\n target: \"open\",\n actions: [\"invokeOnOpen\"],\n },\n OPEN: {\n target: \"open\",\n actions: [\"invokeOnOpen\"],\n },\n },\n },\n\n open: {\n activities: [\n \"trapFocus\",\n \"preventScroll\",\n \"hideContentBelow\",\n \"trackPositioning\",\n \"trackDismissableElement\",\n \"proxyTabFocus\",\n ],\n entry: [\"setInitialFocus\"],\n on: {\n CLOSE: {\n target: \"closed\",\n actions: [\"invokeOnClose\"],\n },\n REQUEST_CLOSE: {\n target: \"closed\",\n actions: [\"restoreFocusIfNeeded\", \"invokeOnClose\"],\n },\n TOGGLE: {\n target: \"closed\",\n actions: [\"invokeOnClose\"],\n },\n SET_POSITIONING: {\n actions: \"setPositioning\",\n },\n },\n },\n },\n },\n {\n activities: {\n trackPositioning(ctx) {\n ctx.currentPlacement = ctx.positioning.placement\n const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx)\n const getPositionerEl = () => dom.getPositionerEl(ctx)\n return getPlacement(anchorEl, getPositionerEl, {\n ...ctx.positioning,\n defer: true,\n onComplete(data) {\n ctx.currentPlacement = data.placement\n },\n onCleanup() {\n ctx.currentPlacement = undefined\n },\n })\n },\n trackDismissableElement(ctx, _evt, { send }) {\n const getContentEl = () => dom.getContentEl(ctx)\n let restoreFocus = true\n return trackDismissableElement(getContentEl, {\n pointerBlocking: ctx.modal,\n exclude: dom.getTriggerEl(ctx),\n defer: true,\n onEscapeKeyDown(event) {\n ctx.onEscapeKeyDown?.(event)\n if (ctx.closeOnEsc) return\n event.preventDefault()\n },\n onInteractOutside(event) {\n ctx.onInteractOutside?.(event)\n if (event.defaultPrevented) return\n restoreFocus = !(event.detail.focusable || event.detail.contextmenu)\n if (!ctx.closeOnInteractOutside) {\n event.preventDefault()\n }\n },\n onPointerDownOutside(event) {\n ctx.onPointerDownOutside?.(event)\n },\n onFocusOutside(event) {\n ctx.onFocusOutside?.(event)\n },\n onDismiss() {\n send({ type: \"REQUEST_CLOSE\", src: \"interact-outside\", restoreFocus })\n },\n })\n },\n proxyTabFocus(ctx) {\n if (ctx.modal || !ctx.portalled) return\n const getContentEl = () => dom.getContentEl(ctx)\n return proxyTabFocus(getContentEl, {\n triggerElement: dom.getTriggerEl(ctx),\n defer: true,\n onFocus(el) {\n el.focus({ preventScroll: true })\n },\n })\n },\n hideContentBelow(ctx) {\n if (!ctx.modal) return\n const getElements = () => [dom.getContentEl(ctx), dom.getTriggerEl(ctx)]\n return ariaHidden(getElements, { defer: true })\n },\n preventScroll(ctx) {\n if (!ctx.modal) return\n return preventBodyScroll(dom.getDoc(ctx))\n },\n trapFocus(ctx) {\n if (!ctx.modal) return\n let trap: FocusTrap | undefined\n nextTick(() => {\n const el = dom.getContentEl(ctx)\n if (!el) return\n trap = createFocusTrap(el, {\n escapeDeactivates: false,\n allowOutsideClick: true,\n preventScroll: true,\n returnFocusOnDeactivate: true,\n document: dom.getDoc(ctx),\n fallbackFocus: el,\n initialFocus: runIfFn(ctx.initialFocusEl),\n })\n try {\n trap.activate()\n } catch {}\n })\n return () => trap?.deactivate()\n },\n },\n actions: {\n setPositioning(ctx, evt) {\n const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx)\n const getPositionerEl = () => dom.getPositionerEl(ctx)\n getPlacement(anchorEl, getPositionerEl, {\n ...ctx.positioning,\n ...evt.options,\n defer: true,\n listeners: false,\n })\n },\n checkRenderedElements(ctx) {\n raf(() => {\n Object.assign(ctx.renderedElements, {\n title: !!dom.getTitleEl(ctx),\n description: !!dom.getDescriptionEl(ctx),\n })\n })\n },\n setInitialFocus(ctx) {\n raf(() => {\n dom.getInitialFocusEl(ctx)?.focus({ preventScroll: true })\n })\n },\n restoreFocusIfNeeded(ctx, evt) {\n if (!evt.restoreFocus) return\n raf(() => {\n dom.getTriggerEl(ctx)?.focus({ preventScroll: true })\n })\n },\n invokeOnOpen(ctx) {\n ctx.onOpen?.()\n },\n invokeOnClose(ctx) {\n ctx.onClose?.()\n },\n toggleVisibility(ctx, _evt, { send }) {\n send({ type: ctx.open ? \"OPEN\" : \"CLOSE\", src: \"controlled\" })\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["runIfFn","ctx","runIfFn"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popover",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"description": "Core logic for the popover widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,17 +27,17 @@
|
|
|
27
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"focus-trap": "7.5.
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/aria-hidden": "0.
|
|
33
|
-
"@zag-js/core": "0.
|
|
34
|
-
"@zag-js/dom-query": "0.
|
|
35
|
-
"@zag-js/utils": "0.
|
|
36
|
-
"@zag-js/dismissable": "0.
|
|
37
|
-
"@zag-js/tabbable": "0.
|
|
38
|
-
"@zag-js/popper": "0.
|
|
39
|
-
"@zag-js/remove-scroll": "0.
|
|
40
|
-
"@zag-js/types": "0.
|
|
30
|
+
"focus-trap": "7.5.2",
|
|
31
|
+
"@zag-js/anatomy": "0.11.1",
|
|
32
|
+
"@zag-js/aria-hidden": "0.11.1",
|
|
33
|
+
"@zag-js/core": "0.11.1",
|
|
34
|
+
"@zag-js/dom-query": "0.11.1",
|
|
35
|
+
"@zag-js/utils": "0.11.1",
|
|
36
|
+
"@zag-js/dismissable": "0.11.1",
|
|
37
|
+
"@zag-js/tabbable": "0.11.1",
|
|
38
|
+
"@zag-js/popper": "0.11.1",
|
|
39
|
+
"@zag-js/remove-scroll": "0.11.1",
|
|
40
|
+
"@zag-js/types": "0.11.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"clean-package": "2.2.0"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"./package.json": "./package.json"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
|
-
"build": "
|
|
58
|
+
"build": "tsup",
|
|
59
59
|
"lint": "eslint src --ext .ts,.tsx",
|
|
60
60
|
"typecheck": "tsc --noEmit"
|
|
61
61
|
}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
|
|
2
|
-
export declare const anatomy: AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "positioner" | "description" | "closeTrigger">;
|
|
3
|
-
export declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "positioner" | "description" | "closeTrigger", AnatomyPart>;
|
package/dist/popover.anatomy.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
-
|
|
5
|
-
const anatomy$1 = require('@zag-js/anatomy');
|
|
6
|
-
|
|
7
|
-
const anatomy = anatomy$1.createAnatomy("popover").parts(
|
|
8
|
-
"arrow",
|
|
9
|
-
"arrowTip",
|
|
10
|
-
"anchor",
|
|
11
|
-
"trigger",
|
|
12
|
-
"positioner",
|
|
13
|
-
"content",
|
|
14
|
-
"title",
|
|
15
|
-
"description",
|
|
16
|
-
"closeTrigger"
|
|
17
|
-
);
|
|
18
|
-
const parts = anatomy.build();
|
|
19
|
-
|
|
20
|
-
exports.anatomy = anatomy;
|
|
21
|
-
exports.parts = parts;
|
package/dist/popover.anatomy.mjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { createAnatomy } from '@zag-js/anatomy';
|
|
2
|
-
|
|
3
|
-
const anatomy = createAnatomy("popover").parts(
|
|
4
|
-
"arrow",
|
|
5
|
-
"arrowTip",
|
|
6
|
-
"anchor",
|
|
7
|
-
"trigger",
|
|
8
|
-
"positioner",
|
|
9
|
-
"content",
|
|
10
|
-
"title",
|
|
11
|
-
"description",
|
|
12
|
-
"closeTrigger"
|
|
13
|
-
);
|
|
14
|
-
const parts = anatomy.build();
|
|
15
|
-
|
|
16
|
-
export { anatomy, parts };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import type { PositioningOptions } from "@zag-js/popper";
|
|
2
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
3
|
-
import type { Send, State } from "./popover.types";
|
|
4
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
5
|
-
/**
|
|
6
|
-
* Whether the popover is portalled
|
|
7
|
-
*/
|
|
8
|
-
portalled: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Whether the popover is open
|
|
11
|
-
*/
|
|
12
|
-
isOpen: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* Function to open the popover
|
|
15
|
-
*/
|
|
16
|
-
open(): void;
|
|
17
|
-
/**
|
|
18
|
-
* Function to close the popover
|
|
19
|
-
*/
|
|
20
|
-
close(): void;
|
|
21
|
-
/**
|
|
22
|
-
* Function to reposition the popover
|
|
23
|
-
*/
|
|
24
|
-
setPositioning(options?: Partial<PositioningOptions>): void;
|
|
25
|
-
arrowProps: T["element"];
|
|
26
|
-
arrowTipProps: T["element"];
|
|
27
|
-
anchorProps: T["element"];
|
|
28
|
-
triggerProps: T["button"];
|
|
29
|
-
positionerProps: T["element"];
|
|
30
|
-
contentProps: T["element"];
|
|
31
|
-
titleProps: T["element"];
|
|
32
|
-
descriptionProps: T["element"];
|
|
33
|
-
closeTriggerProps: T["button"];
|
|
34
|
-
};
|
package/dist/popover.connect.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
-
|
|
5
|
-
const domQuery = require('@zag-js/dom-query');
|
|
6
|
-
const popper = require('@zag-js/popper');
|
|
7
|
-
const popover_anatomy = require('./popover.anatomy.js');
|
|
8
|
-
const popover_dom = require('./popover.dom.js');
|
|
9
|
-
|
|
10
|
-
function connect(state, send, normalize) {
|
|
11
|
-
const isOpen = state.matches("open");
|
|
12
|
-
const currentPlacement = state.context.currentPlacement;
|
|
13
|
-
const portalled = state.context.currentPortalled;
|
|
14
|
-
const rendered = state.context.renderedElements;
|
|
15
|
-
const popperStyles = popper.getPlacementStyles({
|
|
16
|
-
placement: currentPlacement
|
|
17
|
-
});
|
|
18
|
-
return {
|
|
19
|
-
/**
|
|
20
|
-
* Whether the popover is portalled
|
|
21
|
-
*/
|
|
22
|
-
portalled,
|
|
23
|
-
/**
|
|
24
|
-
* Whether the popover is open
|
|
25
|
-
*/
|
|
26
|
-
isOpen,
|
|
27
|
-
/**
|
|
28
|
-
* Function to open the popover
|
|
29
|
-
*/
|
|
30
|
-
open() {
|
|
31
|
-
send("OPEN");
|
|
32
|
-
},
|
|
33
|
-
/**
|
|
34
|
-
* Function to close the popover
|
|
35
|
-
*/
|
|
36
|
-
close() {
|
|
37
|
-
send("CLOSE");
|
|
38
|
-
},
|
|
39
|
-
/**
|
|
40
|
-
* Function to reposition the popover
|
|
41
|
-
*/
|
|
42
|
-
setPositioning(options = {}) {
|
|
43
|
-
send({ type: "SET_POSITIONING", options });
|
|
44
|
-
},
|
|
45
|
-
arrowProps: normalize.element({
|
|
46
|
-
id: popover_dom.dom.getArrowId(state.context),
|
|
47
|
-
...popover_anatomy.parts.arrow.attrs,
|
|
48
|
-
style: popperStyles.arrow
|
|
49
|
-
}),
|
|
50
|
-
arrowTipProps: normalize.element({
|
|
51
|
-
...popover_anatomy.parts.arrowTip.attrs,
|
|
52
|
-
style: popperStyles.arrowTip
|
|
53
|
-
}),
|
|
54
|
-
anchorProps: normalize.element({
|
|
55
|
-
...popover_anatomy.parts.anchor.attrs,
|
|
56
|
-
id: popover_dom.dom.getAnchorId(state.context)
|
|
57
|
-
}),
|
|
58
|
-
triggerProps: normalize.button({
|
|
59
|
-
...popover_anatomy.parts.trigger.attrs,
|
|
60
|
-
type: "button",
|
|
61
|
-
"data-placement": currentPlacement,
|
|
62
|
-
id: popover_dom.dom.getTriggerId(state.context),
|
|
63
|
-
"aria-haspopup": "dialog",
|
|
64
|
-
"aria-expanded": isOpen,
|
|
65
|
-
"data-expanded": domQuery.dataAttr(isOpen),
|
|
66
|
-
"aria-controls": popover_dom.dom.getContentId(state.context),
|
|
67
|
-
onClick() {
|
|
68
|
-
send("TOGGLE");
|
|
69
|
-
},
|
|
70
|
-
onBlur(event) {
|
|
71
|
-
send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
|
|
72
|
-
}
|
|
73
|
-
}),
|
|
74
|
-
positionerProps: normalize.element({
|
|
75
|
-
id: popover_dom.dom.getPositionerId(state.context),
|
|
76
|
-
...popover_anatomy.parts.positioner.attrs,
|
|
77
|
-
style: popperStyles.floating
|
|
78
|
-
}),
|
|
79
|
-
contentProps: normalize.element({
|
|
80
|
-
...popover_anatomy.parts.content.attrs,
|
|
81
|
-
id: popover_dom.dom.getContentId(state.context),
|
|
82
|
-
tabIndex: -1,
|
|
83
|
-
role: "dialog",
|
|
84
|
-
hidden: !isOpen,
|
|
85
|
-
"data-expanded": domQuery.dataAttr(isOpen),
|
|
86
|
-
"aria-labelledby": rendered.title ? popover_dom.dom.getTitleId(state.context) : void 0,
|
|
87
|
-
"aria-describedby": rendered.description ? popover_dom.dom.getDescriptionId(state.context) : void 0,
|
|
88
|
-
"data-placement": currentPlacement
|
|
89
|
-
}),
|
|
90
|
-
titleProps: normalize.element({
|
|
91
|
-
...popover_anatomy.parts.title.attrs,
|
|
92
|
-
id: popover_dom.dom.getTitleId(state.context)
|
|
93
|
-
}),
|
|
94
|
-
descriptionProps: normalize.element({
|
|
95
|
-
...popover_anatomy.parts.description.attrs,
|
|
96
|
-
id: popover_dom.dom.getDescriptionId(state.context)
|
|
97
|
-
}),
|
|
98
|
-
closeTriggerProps: normalize.button({
|
|
99
|
-
...popover_anatomy.parts.closeTrigger.attrs,
|
|
100
|
-
id: popover_dom.dom.getCloseTriggerId(state.context),
|
|
101
|
-
type: "button",
|
|
102
|
-
"aria-label": "close",
|
|
103
|
-
onClick() {
|
|
104
|
-
send("REQUEST_CLOSE");
|
|
105
|
-
}
|
|
106
|
-
})
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
exports.connect = connect;
|