@zag-js/popover 2.0.0-next.1 → 2.0.0-next.2
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.connect.js +5 -1
- package/dist/popover.connect.mjs +5 -1
- package/dist/popover.machine.js +92 -82
- package/dist/popover.machine.mjs +92 -82
- package/dist/popover.types.d.mts +15 -14
- package/dist/popover.types.d.ts +15 -14
- package/package.json +12 -12
package/dist/popover.connect.js
CHANGED
|
@@ -36,12 +36,16 @@ module.exports = __toCommonJS(popover_connect_exports);
|
|
|
36
36
|
var import_dismissable = require("@zag-js/dismissable");
|
|
37
37
|
var import_dom_query = require("@zag-js/dom-query");
|
|
38
38
|
var import_popper = require("@zag-js/popper");
|
|
39
|
+
var import_utils = require("@zag-js/utils");
|
|
39
40
|
var import_popover = require("./popover.anatomy.js");
|
|
40
41
|
var dom = __toESM(require("./popover.dom.js"));
|
|
42
|
+
var defaultTranslations = {
|
|
43
|
+
closeTriggerLabel: "close"
|
|
44
|
+
};
|
|
41
45
|
function connect(service, normalize) {
|
|
42
46
|
const { state, context, send, prop, scope } = service;
|
|
43
47
|
const layer = context.get("layer");
|
|
44
|
-
const translations = prop("translations");
|
|
48
|
+
const translations = (0, import_utils.mergeWithDefault)(defaultTranslations, prop("translations"));
|
|
45
49
|
const open = state.matches("open");
|
|
46
50
|
const currentPlacement = context.get("currentPlacement");
|
|
47
51
|
const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
|
package/dist/popover.connect.mjs
CHANGED
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
import { getDismissableLayerAttrs, getDismissableLayerStyle } from "@zag-js/dismissable";
|
|
3
3
|
import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
|
|
4
4
|
import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
|
|
5
|
+
import { mergeWithDefault } from "@zag-js/utils";
|
|
5
6
|
import { parts } from "./popover.anatomy.mjs";
|
|
6
7
|
import * as dom from "./popover.dom.mjs";
|
|
8
|
+
var defaultTranslations = {
|
|
9
|
+
closeTriggerLabel: "close"
|
|
10
|
+
};
|
|
7
11
|
function connect(service, normalize) {
|
|
8
12
|
const { state, context, send, prop, scope } = service;
|
|
9
13
|
const layer = context.get("layer");
|
|
10
|
-
const translations = prop("translations");
|
|
14
|
+
const translations = mergeWithDefault(defaultTranslations, prop("translations"));
|
|
11
15
|
const open = state.matches("open");
|
|
12
16
|
const currentPlacement = context.get("currentPlacement");
|
|
13
17
|
const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
|
package/dist/popover.machine.js
CHANGED
|
@@ -50,10 +50,6 @@ var machine = (0, import_core.createMachine)({
|
|
|
50
50
|
modal: false,
|
|
51
51
|
restoreFocus: true,
|
|
52
52
|
...props,
|
|
53
|
-
translations: {
|
|
54
|
-
closeTriggerLabel: "close",
|
|
55
|
-
...props.translations
|
|
56
|
-
},
|
|
57
53
|
positioning: {
|
|
58
54
|
placement: "bottom",
|
|
59
55
|
...props.positioning
|
|
@@ -185,93 +181,107 @@ var machine = (0, import_core.createMachine)({
|
|
|
185
181
|
}
|
|
186
182
|
});
|
|
187
183
|
},
|
|
188
|
-
trackDismissableElement({ send, prop, scope, context }) {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
},
|
|
204
|
-
onInteractOutside(event) {
|
|
205
|
-
prop("onInteractOutside")?.(event);
|
|
206
|
-
if (event.defaultPrevented) return;
|
|
207
|
-
restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
|
|
208
|
-
if (!prop("closeOnInteractOutside")) {
|
|
184
|
+
trackDismissableElement({ send, prop, scope, context, watchEffect }) {
|
|
185
|
+
return watchEffect([() => prop("modal")], () => {
|
|
186
|
+
const getContentEl2 = () => dom.getContentEl(scope);
|
|
187
|
+
let restoreFocus = true;
|
|
188
|
+
return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
|
|
189
|
+
type: "popover",
|
|
190
|
+
pointerBlocking: prop("modal"),
|
|
191
|
+
onLayerChange(layer) {
|
|
192
|
+
context.set("layer", layer);
|
|
193
|
+
},
|
|
194
|
+
exclude: dom.getTriggerEls(scope),
|
|
195
|
+
defer: true,
|
|
196
|
+
onEscapeKeyDown(event) {
|
|
197
|
+
prop("onEscapeKeyDown")?.(event);
|
|
198
|
+
if (prop("closeOnEscape")) return;
|
|
209
199
|
event.preventDefault();
|
|
200
|
+
},
|
|
201
|
+
onInteractOutside(event) {
|
|
202
|
+
prop("onInteractOutside")?.(event);
|
|
203
|
+
if (event.defaultPrevented) return;
|
|
204
|
+
restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
|
|
205
|
+
if (!prop("closeOnInteractOutside")) {
|
|
206
|
+
event.preventDefault();
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
onPointerDownOutside: prop("onPointerDownOutside"),
|
|
210
|
+
onFocusOutside: prop("onFocusOutside"),
|
|
211
|
+
persistentElements: prop("persistentElements"),
|
|
212
|
+
onRequestDismiss: prop("onRequestDismiss"),
|
|
213
|
+
onDismiss() {
|
|
214
|
+
send({ type: "CLOSE", src: "interact-outside", restoreFocus });
|
|
210
215
|
}
|
|
211
|
-
}
|
|
212
|
-
onPointerDownOutside: prop("onPointerDownOutside"),
|
|
213
|
-
onFocusOutside: prop("onFocusOutside"),
|
|
214
|
-
persistentElements: prop("persistentElements"),
|
|
215
|
-
onRequestDismiss: prop("onRequestDismiss"),
|
|
216
|
-
onDismiss() {
|
|
217
|
-
send({ type: "CLOSE", src: "interact-outside", restoreFocus });
|
|
218
|
-
}
|
|
216
|
+
});
|
|
219
217
|
});
|
|
220
218
|
},
|
|
221
|
-
proxyTabFocus({ prop, scope, context }) {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
const
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
el
|
|
234
|
-
|
|
219
|
+
proxyTabFocus({ prop, scope, context, watchEffect }) {
|
|
220
|
+
return watchEffect([() => prop("modal")], () => {
|
|
221
|
+
if (prop("modal")) return;
|
|
222
|
+
const getContentEl2 = () => dom.getContentEl(scope);
|
|
223
|
+
let cleanup;
|
|
224
|
+
const rafCleanup = (0, import_dom_query.raf)(() => {
|
|
225
|
+
const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
|
|
226
|
+
const contentEl = getContentEl2();
|
|
227
|
+
if (!triggerEl || !contentEl || (0, import_dom_query.contains)(triggerEl.parentElement, contentEl)) return;
|
|
228
|
+
cleanup = (0, import_dom_query.proxyTabFocus)(getContentEl2, {
|
|
229
|
+
triggerElement: triggerEl,
|
|
230
|
+
getShadowRoot: true,
|
|
231
|
+
onFocus(el) {
|
|
232
|
+
el.focus({ preventScroll: true });
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
235
|
});
|
|
236
|
+
return () => {
|
|
237
|
+
rafCleanup();
|
|
238
|
+
cleanup?.();
|
|
239
|
+
};
|
|
236
240
|
});
|
|
237
|
-
return () => {
|
|
238
|
-
rafCleanup();
|
|
239
|
-
cleanup?.();
|
|
240
|
-
};
|
|
241
241
|
},
|
|
242
|
-
hideContentBelow({ prop, scope, context }) {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
242
|
+
hideContentBelow({ prop, scope, context, watchEffect }) {
|
|
243
|
+
return watchEffect([() => prop("modal")], () => {
|
|
244
|
+
if (!prop("modal")) return;
|
|
245
|
+
const getElements = () => [
|
|
246
|
+
dom.getContentEl(scope),
|
|
247
|
+
dom.getActiveTriggerEl(scope, context.get("triggerValue"))
|
|
248
|
+
];
|
|
249
|
+
return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
|
|
250
|
+
});
|
|
246
251
|
},
|
|
247
|
-
preventScroll({ prop, scope }) {
|
|
248
|
-
|
|
249
|
-
|
|
252
|
+
preventScroll({ prop, scope, watchEffect }) {
|
|
253
|
+
return watchEffect([() => prop("modal")], () => {
|
|
254
|
+
if (!prop("modal")) return;
|
|
255
|
+
return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
|
|
256
|
+
});
|
|
250
257
|
},
|
|
251
|
-
trapFocus({ prop, scope, context }) {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
258
|
+
trapFocus({ prop, scope, context, watchEffect }) {
|
|
259
|
+
return watchEffect([() => prop("modal")], () => {
|
|
260
|
+
if (!prop("modal")) return;
|
|
261
|
+
const contentEl = () => dom.getContentEl(scope);
|
|
262
|
+
const destroy = (0, import_focus_trap.trapFocus)(contentEl, {
|
|
263
|
+
preventScroll: true,
|
|
264
|
+
returnFocusOnDeactivate: !!prop("restoreFocus"),
|
|
265
|
+
initialFocus: () => (0, import_dom_query.getInitialFocus)({
|
|
266
|
+
root: dom.getContentEl(scope),
|
|
267
|
+
getInitialEl: prop("initialFocusEl"),
|
|
268
|
+
enabled: prop("autoFocus")
|
|
269
|
+
}),
|
|
270
|
+
setReturnFocus: (el) => {
|
|
271
|
+
const finalFocusEl = prop("finalFocusEl")?.();
|
|
272
|
+
if (finalFocusEl) return finalFocusEl;
|
|
273
|
+
const triggerValue = context.get("triggerValue");
|
|
274
|
+
if (triggerValue) {
|
|
275
|
+
const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
|
|
276
|
+
if (activeTriggerEl) return activeTriggerEl;
|
|
277
|
+
}
|
|
278
|
+
const fallbackTrigger = dom.getTriggerEls(scope)[0];
|
|
279
|
+
if (fallbackTrigger) return fallbackTrigger;
|
|
280
|
+
return el;
|
|
281
|
+
},
|
|
282
|
+
getShadowRoot: true
|
|
283
|
+
});
|
|
284
|
+
return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
|
|
275
285
|
});
|
|
276
286
|
}
|
|
277
287
|
},
|
package/dist/popover.machine.mjs
CHANGED
|
@@ -16,10 +16,6 @@ var machine = createMachine({
|
|
|
16
16
|
modal: false,
|
|
17
17
|
restoreFocus: true,
|
|
18
18
|
...props,
|
|
19
|
-
translations: {
|
|
20
|
-
closeTriggerLabel: "close",
|
|
21
|
-
...props.translations
|
|
22
|
-
},
|
|
23
19
|
positioning: {
|
|
24
20
|
placement: "bottom",
|
|
25
21
|
...props.positioning
|
|
@@ -151,93 +147,107 @@ var machine = createMachine({
|
|
|
151
147
|
}
|
|
152
148
|
});
|
|
153
149
|
},
|
|
154
|
-
trackDismissableElement({ send, prop, scope, context }) {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
},
|
|
170
|
-
onInteractOutside(event) {
|
|
171
|
-
prop("onInteractOutside")?.(event);
|
|
172
|
-
if (event.defaultPrevented) return;
|
|
173
|
-
restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
|
|
174
|
-
if (!prop("closeOnInteractOutside")) {
|
|
150
|
+
trackDismissableElement({ send, prop, scope, context, watchEffect }) {
|
|
151
|
+
return watchEffect([() => prop("modal")], () => {
|
|
152
|
+
const getContentEl2 = () => dom.getContentEl(scope);
|
|
153
|
+
let restoreFocus = true;
|
|
154
|
+
return trackDismissableElement(getContentEl2, {
|
|
155
|
+
type: "popover",
|
|
156
|
+
pointerBlocking: prop("modal"),
|
|
157
|
+
onLayerChange(layer) {
|
|
158
|
+
context.set("layer", layer);
|
|
159
|
+
},
|
|
160
|
+
exclude: dom.getTriggerEls(scope),
|
|
161
|
+
defer: true,
|
|
162
|
+
onEscapeKeyDown(event) {
|
|
163
|
+
prop("onEscapeKeyDown")?.(event);
|
|
164
|
+
if (prop("closeOnEscape")) return;
|
|
175
165
|
event.preventDefault();
|
|
166
|
+
},
|
|
167
|
+
onInteractOutside(event) {
|
|
168
|
+
prop("onInteractOutside")?.(event);
|
|
169
|
+
if (event.defaultPrevented) return;
|
|
170
|
+
restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
|
|
171
|
+
if (!prop("closeOnInteractOutside")) {
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
onPointerDownOutside: prop("onPointerDownOutside"),
|
|
176
|
+
onFocusOutside: prop("onFocusOutside"),
|
|
177
|
+
persistentElements: prop("persistentElements"),
|
|
178
|
+
onRequestDismiss: prop("onRequestDismiss"),
|
|
179
|
+
onDismiss() {
|
|
180
|
+
send({ type: "CLOSE", src: "interact-outside", restoreFocus });
|
|
176
181
|
}
|
|
177
|
-
}
|
|
178
|
-
onPointerDownOutside: prop("onPointerDownOutside"),
|
|
179
|
-
onFocusOutside: prop("onFocusOutside"),
|
|
180
|
-
persistentElements: prop("persistentElements"),
|
|
181
|
-
onRequestDismiss: prop("onRequestDismiss"),
|
|
182
|
-
onDismiss() {
|
|
183
|
-
send({ type: "CLOSE", src: "interact-outside", restoreFocus });
|
|
184
|
-
}
|
|
182
|
+
});
|
|
185
183
|
});
|
|
186
184
|
},
|
|
187
|
-
proxyTabFocus({ prop, scope, context }) {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
const
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
el
|
|
200
|
-
|
|
185
|
+
proxyTabFocus({ prop, scope, context, watchEffect }) {
|
|
186
|
+
return watchEffect([() => prop("modal")], () => {
|
|
187
|
+
if (prop("modal")) return;
|
|
188
|
+
const getContentEl2 = () => dom.getContentEl(scope);
|
|
189
|
+
let cleanup;
|
|
190
|
+
const rafCleanup = raf(() => {
|
|
191
|
+
const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
|
|
192
|
+
const contentEl = getContentEl2();
|
|
193
|
+
if (!triggerEl || !contentEl || contains(triggerEl.parentElement, contentEl)) return;
|
|
194
|
+
cleanup = proxyTabFocus(getContentEl2, {
|
|
195
|
+
triggerElement: triggerEl,
|
|
196
|
+
getShadowRoot: true,
|
|
197
|
+
onFocus(el) {
|
|
198
|
+
el.focus({ preventScroll: true });
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
201
|
});
|
|
202
|
+
return () => {
|
|
203
|
+
rafCleanup();
|
|
204
|
+
cleanup?.();
|
|
205
|
+
};
|
|
202
206
|
});
|
|
203
|
-
return () => {
|
|
204
|
-
rafCleanup();
|
|
205
|
-
cleanup?.();
|
|
206
|
-
};
|
|
207
207
|
},
|
|
208
|
-
hideContentBelow({ prop, scope, context }) {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
208
|
+
hideContentBelow({ prop, scope, context, watchEffect }) {
|
|
209
|
+
return watchEffect([() => prop("modal")], () => {
|
|
210
|
+
if (!prop("modal")) return;
|
|
211
|
+
const getElements = () => [
|
|
212
|
+
dom.getContentEl(scope),
|
|
213
|
+
dom.getActiveTriggerEl(scope, context.get("triggerValue"))
|
|
214
|
+
];
|
|
215
|
+
return ariaHidden(getElements, { defer: true });
|
|
216
|
+
});
|
|
212
217
|
},
|
|
213
|
-
preventScroll({ prop, scope }) {
|
|
214
|
-
|
|
215
|
-
|
|
218
|
+
preventScroll({ prop, scope, watchEffect }) {
|
|
219
|
+
return watchEffect([() => prop("modal")], () => {
|
|
220
|
+
if (!prop("modal")) return;
|
|
221
|
+
return preventBodyScroll(scope.getDoc());
|
|
222
|
+
});
|
|
216
223
|
},
|
|
217
|
-
trapFocus({ prop, scope, context }) {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
224
|
+
trapFocus({ prop, scope, context, watchEffect }) {
|
|
225
|
+
return watchEffect([() => prop("modal")], () => {
|
|
226
|
+
if (!prop("modal")) return;
|
|
227
|
+
const contentEl = () => dom.getContentEl(scope);
|
|
228
|
+
const destroy = trapFocus(contentEl, {
|
|
229
|
+
preventScroll: true,
|
|
230
|
+
returnFocusOnDeactivate: !!prop("restoreFocus"),
|
|
231
|
+
initialFocus: () => getInitialFocus({
|
|
232
|
+
root: dom.getContentEl(scope),
|
|
233
|
+
getInitialEl: prop("initialFocusEl"),
|
|
234
|
+
enabled: prop("autoFocus")
|
|
235
|
+
}),
|
|
236
|
+
setReturnFocus: (el) => {
|
|
237
|
+
const finalFocusEl = prop("finalFocusEl")?.();
|
|
238
|
+
if (finalFocusEl) return finalFocusEl;
|
|
239
|
+
const triggerValue = context.get("triggerValue");
|
|
240
|
+
if (triggerValue) {
|
|
241
|
+
const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
|
|
242
|
+
if (activeTriggerEl) return activeTriggerEl;
|
|
243
|
+
}
|
|
244
|
+
const fallbackTrigger = dom.getTriggerEls(scope)[0];
|
|
245
|
+
if (fallbackTrigger) return fallbackTrigger;
|
|
246
|
+
return el;
|
|
247
|
+
},
|
|
248
|
+
getShadowRoot: true
|
|
249
|
+
});
|
|
250
|
+
return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
|
|
241
251
|
});
|
|
242
252
|
}
|
|
243
253
|
},
|
package/dist/popover.types.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
|
|
|
2
2
|
import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
|
|
3
3
|
import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
|
|
4
4
|
export { Placement, PositioningOptions } from '@zag-js/popper';
|
|
5
|
-
import { PropTypes,
|
|
5
|
+
import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
|
|
6
6
|
|
|
7
7
|
interface OpenChangeDetails {
|
|
8
8
|
open: boolean;
|
|
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
|
|
|
20
20
|
interface IntlTranslations {
|
|
21
21
|
closeTriggerLabel?: string | undefined;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
anchor
|
|
25
|
-
trigger
|
|
26
|
-
content
|
|
27
|
-
title
|
|
28
|
-
description
|
|
29
|
-
closeTrigger
|
|
30
|
-
positioner
|
|
31
|
-
arrow
|
|
32
|
-
}
|
|
23
|
+
interface ElementIds {
|
|
24
|
+
anchor?: string | undefined;
|
|
25
|
+
trigger?: (string | ((value?: string) => string)) | undefined;
|
|
26
|
+
content?: string | undefined;
|
|
27
|
+
title?: string | undefined;
|
|
28
|
+
description?: string | undefined;
|
|
29
|
+
closeTrigger?: string | undefined;
|
|
30
|
+
positioner?: string | undefined;
|
|
31
|
+
arrow?: string | undefined;
|
|
32
|
+
}
|
|
33
33
|
interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
|
|
34
34
|
/**
|
|
35
35
|
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
@@ -59,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
|
|
|
59
59
|
/**
|
|
60
60
|
* The element to focus on when the popover is opened.
|
|
61
61
|
*/
|
|
62
|
-
initialFocusEl?: (() => HTMLElement | null) | undefined;
|
|
62
|
+
initialFocusEl?: (() => HTMLElement | null) | null | undefined;
|
|
63
63
|
/**
|
|
64
64
|
* Element to receive focus when the popover is closed.
|
|
65
65
|
*/
|
|
@@ -134,7 +134,8 @@ interface PrivateContext {
|
|
|
134
134
|
triggerValue: string | null;
|
|
135
135
|
}
|
|
136
136
|
interface PopoverSchema {
|
|
137
|
-
props:
|
|
137
|
+
props: PopoverProps;
|
|
138
|
+
defaultPropKey: PropsWithDefault;
|
|
138
139
|
state: "open" | "closed";
|
|
139
140
|
context: PrivateContext;
|
|
140
141
|
computed: {};
|
|
@@ -149,7 +150,7 @@ interface TriggerProps {
|
|
|
149
150
|
/**
|
|
150
151
|
* The value that identifies this specific trigger
|
|
151
152
|
*/
|
|
152
|
-
value?: string;
|
|
153
|
+
value?: string | undefined;
|
|
153
154
|
}
|
|
154
155
|
interface TriggerState {
|
|
155
156
|
/**
|
package/dist/popover.types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
|
|
|
2
2
|
import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
|
|
3
3
|
import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
|
|
4
4
|
export { Placement, PositioningOptions } from '@zag-js/popper';
|
|
5
|
-
import { PropTypes,
|
|
5
|
+
import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
|
|
6
6
|
|
|
7
7
|
interface OpenChangeDetails {
|
|
8
8
|
open: boolean;
|
|
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
|
|
|
20
20
|
interface IntlTranslations {
|
|
21
21
|
closeTriggerLabel?: string | undefined;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
anchor
|
|
25
|
-
trigger
|
|
26
|
-
content
|
|
27
|
-
title
|
|
28
|
-
description
|
|
29
|
-
closeTrigger
|
|
30
|
-
positioner
|
|
31
|
-
arrow
|
|
32
|
-
}
|
|
23
|
+
interface ElementIds {
|
|
24
|
+
anchor?: string | undefined;
|
|
25
|
+
trigger?: (string | ((value?: string) => string)) | undefined;
|
|
26
|
+
content?: string | undefined;
|
|
27
|
+
title?: string | undefined;
|
|
28
|
+
description?: string | undefined;
|
|
29
|
+
closeTrigger?: string | undefined;
|
|
30
|
+
positioner?: string | undefined;
|
|
31
|
+
arrow?: string | undefined;
|
|
32
|
+
}
|
|
33
33
|
interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
|
|
34
34
|
/**
|
|
35
35
|
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
@@ -59,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
|
|
|
59
59
|
/**
|
|
60
60
|
* The element to focus on when the popover is opened.
|
|
61
61
|
*/
|
|
62
|
-
initialFocusEl?: (() => HTMLElement | null) | undefined;
|
|
62
|
+
initialFocusEl?: (() => HTMLElement | null) | null | undefined;
|
|
63
63
|
/**
|
|
64
64
|
* Element to receive focus when the popover is closed.
|
|
65
65
|
*/
|
|
@@ -134,7 +134,8 @@ interface PrivateContext {
|
|
|
134
134
|
triggerValue: string | null;
|
|
135
135
|
}
|
|
136
136
|
interface PopoverSchema {
|
|
137
|
-
props:
|
|
137
|
+
props: PopoverProps;
|
|
138
|
+
defaultPropKey: PropsWithDefault;
|
|
138
139
|
state: "open" | "closed";
|
|
139
140
|
context: PrivateContext;
|
|
140
141
|
computed: {};
|
|
@@ -149,7 +150,7 @@ interface TriggerProps {
|
|
|
149
150
|
/**
|
|
150
151
|
* The value that identifies this specific trigger
|
|
151
152
|
*/
|
|
152
|
-
value?: string;
|
|
153
|
+
value?: string | undefined;
|
|
153
154
|
}
|
|
154
155
|
interface TriggerState {
|
|
155
156
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popover",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.2",
|
|
4
4
|
"description": "Core logic for the popover widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/anatomy": "2.0.0-next.
|
|
33
|
-
"@zag-js/aria-hidden": "2.0.0-next.
|
|
34
|
-
"@zag-js/core": "2.0.0-next.
|
|
35
|
-
"@zag-js/dom-query": "2.0.0-next.
|
|
36
|
-
"@zag-js/utils": "2.0.0-next.
|
|
37
|
-
"@zag-js/dismissable": "2.0.0-next.
|
|
38
|
-
"@zag-js/popper": "2.0.0-next.
|
|
39
|
-
"@zag-js/remove-scroll": "2.0.0-next.
|
|
40
|
-
"@zag-js/types": "2.0.0-next.
|
|
41
|
-
"@zag-js/focus-trap": "2.0.0-next.
|
|
32
|
+
"@zag-js/anatomy": "2.0.0-next.2",
|
|
33
|
+
"@zag-js/aria-hidden": "2.0.0-next.2",
|
|
34
|
+
"@zag-js/core": "2.0.0-next.2",
|
|
35
|
+
"@zag-js/dom-query": "2.0.0-next.2",
|
|
36
|
+
"@zag-js/utils": "2.0.0-next.2",
|
|
37
|
+
"@zag-js/dismissable": "2.0.0-next.2",
|
|
38
|
+
"@zag-js/popper": "2.0.0-next.2",
|
|
39
|
+
"@zag-js/remove-scroll": "2.0.0-next.2",
|
|
40
|
+
"@zag-js/types": "2.0.0-next.2",
|
|
41
|
+
"@zag-js/focus-trap": "2.0.0-next.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"clean-package": "2.2.0"
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
},
|
|
73
73
|
"scripts": {
|
|
74
74
|
"build": "tsup",
|
|
75
|
-
"lint": "
|
|
75
|
+
"lint": "oxlint src",
|
|
76
76
|
"typecheck": "tsc --noEmit"
|
|
77
77
|
}
|
|
78
78
|
}
|