@zag-js/popover 0.53.0 → 0.54.0

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/index.d.mts CHANGED
@@ -116,16 +116,16 @@ interface MachineApi<T extends PropTypes = PropTypes> {
116
116
  * Function to reposition the popover
117
117
  */
118
118
  reposition(options?: Partial<PositioningOptions>): void;
119
- arrowProps: T["element"];
120
- arrowTipProps: T["element"];
121
- anchorProps: T["element"];
122
- triggerProps: T["button"];
123
- indicatorProps: T["element"];
124
- positionerProps: T["element"];
125
- contentProps: T["element"];
126
- titleProps: T["element"];
127
- descriptionProps: T["element"];
128
- closeTriggerProps: T["button"];
119
+ getArrowProps(): T["element"];
120
+ getArrowTipProps(): T["element"];
121
+ getAnchorProps(): T["element"];
122
+ getTriggerProps(): T["button"];
123
+ getIndicatorProps(): T["element"];
124
+ getPositionerProps(): T["element"];
125
+ getContentProps(): T["element"];
126
+ getTitleProps(): T["element"];
127
+ getDescriptionProps(): T["element"];
128
+ getCloseTriggerProps(): T["button"];
129
129
  }
130
130
 
131
131
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
package/dist/index.d.ts CHANGED
@@ -116,16 +116,16 @@ interface MachineApi<T extends PropTypes = PropTypes> {
116
116
  * Function to reposition the popover
117
117
  */
118
118
  reposition(options?: Partial<PositioningOptions>): void;
119
- arrowProps: T["element"];
120
- arrowTipProps: T["element"];
121
- anchorProps: T["element"];
122
- triggerProps: T["button"];
123
- indicatorProps: T["element"];
124
- positionerProps: T["element"];
125
- contentProps: T["element"];
126
- titleProps: T["element"];
127
- descriptionProps: T["element"];
128
- closeTriggerProps: T["button"];
119
+ getArrowProps(): T["element"];
120
+ getArrowTipProps(): T["element"];
121
+ getAnchorProps(): T["element"];
122
+ getTriggerProps(): T["button"];
123
+ getIndicatorProps(): T["element"];
124
+ getPositionerProps(): T["element"];
125
+ getContentProps(): T["element"];
126
+ getTitleProps(): T["element"];
127
+ getDescriptionProps(): T["element"];
128
+ getCloseTriggerProps(): T["button"];
129
129
  }
130
130
 
131
131
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
package/dist/index.js CHANGED
@@ -1,2 +1,494 @@
1
- "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine,props:()=>props,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("popover").parts("arrow","arrowTip","anchor","trigger","indicator","positioner","content","title","description","closeTrigger");var parts=anatomy.build();var import_dom_query2=require("@zag-js/dom-query");var import_popper=require("@zag-js/popper");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getAnchorId:ctx=>ctx.ids?.anchor??`popover:${ctx.id}:anchor`,getTriggerId:ctx=>ctx.ids?.trigger??`popover:${ctx.id}:trigger`,getContentId:ctx=>ctx.ids?.content??`popover:${ctx.id}:content`,getPositionerId:ctx=>ctx.ids?.positioner??`popover:${ctx.id}:popper`,getArrowId:ctx=>ctx.ids?.arrow??`popover:${ctx.id}:arrow`,getTitleId:ctx=>ctx.ids?.title??`popover:${ctx.id}:title`,getDescriptionId:ctx=>ctx.ids?.description??`popover:${ctx.id}:desc`,getCloseTriggerId:ctx=>ctx.ids?.closeTrigger??`popover:${ctx.id}:close`,getAnchorEl:ctx=>dom.getById(ctx,dom.getAnchorId(ctx)),getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getTitleEl:ctx=>dom.getById(ctx,dom.getTitleId(ctx)),getDescriptionEl:ctx=>dom.getById(ctx,dom.getDescriptionId(ctx)),getFocusableEls:ctx=>(0,import_dom_query.getFocusables)(dom.getContentEl(ctx)),getFirstFocusableEl:ctx=>dom.getFocusableEls(ctx)[0]});function connect(state,send,normalize){const open=state.matches("open");const currentPlacement=state.context.currentPlacement;const portalled=state.context.currentPortalled;const rendered=state.context.renderedElements;const popperStyles=(0,import_popper.getPlacementStyles)({...state.context.positioning,placement:currentPlacement});return{portalled,open,setOpen(nextOpen){if(nextOpen===open)return;send(nextOpen?"OPEN":"CLOSE")},reposition(options={}){send({type:"POSITIONING.SET",options})},arrowProps:normalize.element({id:dom.getArrowId(state.context),...parts.arrow.attrs,dir:state.context.dir,style:popperStyles.arrow}),arrowTipProps:normalize.element({...parts.arrowTip.attrs,dir:state.context.dir,style:popperStyles.arrowTip}),anchorProps:normalize.element({...parts.anchor.attrs,dir:state.context.dir,id:dom.getAnchorId(state.context)}),triggerProps:normalize.button({...parts.trigger.attrs,dir:state.context.dir,type:"button","data-placement":currentPlacement,id:dom.getTriggerId(state.context),"aria-haspopup":"dialog","aria-expanded":open,"data-state":open?"open":"closed","aria-controls":dom.getContentId(state.context),onClick(event){if(event.defaultPrevented)return;send("TOGGLE")},onBlur(event){send({type:"TRIGGER_BLUR",target:event.relatedTarget})}}),indicatorProps:normalize.element({...parts.indicator.attrs,dir:state.context.dir,"data-state":open?"open":"closed"}),positionerProps:normalize.element({id:dom.getPositionerId(state.context),...parts.positioner.attrs,dir:state.context.dir,style:popperStyles.floating}),contentProps:normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context),tabIndex:-1,role:"dialog",hidden:!open,"data-state":open?"open":"closed","data-expanded":(0,import_dom_query2.dataAttr)(open),"aria-labelledby":rendered.title?dom.getTitleId(state.context):void 0,"aria-describedby":rendered.description?dom.getDescriptionId(state.context):void 0,"data-placement":currentPlacement}),titleProps:normalize.element({...parts.title.attrs,id:dom.getTitleId(state.context),dir:state.context.dir}),descriptionProps:normalize.element({...parts.description.attrs,id:dom.getDescriptionId(state.context),dir:state.context.dir}),closeTriggerProps:normalize.button({...parts.closeTrigger.attrs,dir:state.context.dir,id:dom.getCloseTriggerId(state.context),type:"button","aria-label":"close",onClick(event){if(event.defaultPrevented)return;send("CLOSE")}})}}var import_aria_hidden=require("@zag-js/aria-hidden");var import_core=require("@zag-js/core");var import_dismissable=require("@zag-js/dismissable");var import_dom_query3=require("@zag-js/dom-query");var import_popper2=require("@zag-js/popper");var import_remove_scroll=require("@zag-js/remove-scroll");var import_utils=require("@zag-js/utils");var import_focus_trap=require("focus-trap");function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"popover",initial:ctx.open?"open":"closed",context:{closeOnInteractOutside:true,closeOnEscape:true,autoFocus:true,modal:false,portalled:true,positioning:{placement:"bottom",...ctx.positioning},currentPlacement:void 0,...ctx,renderedElements:{title:true,description:true}},computed:{currentPortalled:ctx2=>!!ctx2.modal||!!ctx2.portalled},watch:{open:["toggleVisibility"]},entry:["checkRenderedElements"],states:{closed:{on:{"CONTROLLED.OPEN":{target:"open",actions:["setInitialFocus"]},TOGGLE:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}],OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}]}},open:{activities:["trapFocus","preventScroll","hideContentBelow","trackPositioning","trackDismissableElement","proxyTabFocus"],on:{"CONTROLLED.CLOSE":{target:"closed",actions:["setFinalFocus"]},CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"closed",actions:["invokeOnClose","setFinalFocus"]}],TOGGLE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"closed",actions:["invokeOnClose"]}],"POSITIONING.SET":{actions:"reposition"}}}}},{guards:{isOpenControlled:ctx2=>!!ctx2["open.controlled"]},activities:{trackPositioning(ctx2){ctx2.currentPlacement=ctx2.positioning.placement;const anchorEl=dom.getAnchorEl(ctx2)??dom.getTriggerEl(ctx2);const getPositionerEl=()=>dom.getPositionerEl(ctx2);return(0,import_popper2.getPlacement)(anchorEl,getPositionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackDismissableElement(ctx2,_evt,{send}){const getContentEl=()=>dom.getContentEl(ctx2);let restoreFocus=true;return(0,import_dismissable.trackDismissableElement)(getContentEl,{pointerBlocking:ctx2.modal,exclude:dom.getTriggerEl(ctx2),defer:true,onEscapeKeyDown(event){ctx2.onEscapeKeyDown?.(event);if(ctx2.closeOnEscape)return;event.preventDefault()},onInteractOutside(event){ctx2.onInteractOutside?.(event);if(event.defaultPrevented)return;restoreFocus=!(event.detail.focusable||event.detail.contextmenu);if(!ctx2.closeOnInteractOutside){event.preventDefault()}},onPointerDownOutside:ctx2.onPointerDownOutside,onFocusOutside:ctx2.onFocusOutside,persistentElements:ctx2.persistentElements,onDismiss(){send({type:"CLOSE",src:"interact-outside",restoreFocus})}})},proxyTabFocus(ctx2){if(ctx2.modal||!ctx2.portalled)return;const getContentEl=()=>dom.getContentEl(ctx2);return(0,import_dom_query3.proxyTabFocus)(getContentEl,{triggerElement:dom.getTriggerEl(ctx2),defer:true,onFocus(el){el.focus({preventScroll:true})}})},hideContentBelow(ctx2){if(!ctx2.modal)return;const getElements=()=>[dom.getContentEl(ctx2),dom.getTriggerEl(ctx2)];return(0,import_aria_hidden.ariaHidden)(getElements,{defer:true})},preventScroll(ctx2){if(!ctx2.modal)return;return(0,import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2))},trapFocus(ctx2){if(!ctx2.modal)return;let trap;(0,import_dom_query3.nextTick)(()=>{const contentEl=dom.getContentEl(ctx2);if(!contentEl)return;trap=(0,import_focus_trap.createFocusTrap)(contentEl,{escapeDeactivates:false,allowOutsideClick:true,preventScroll:true,returnFocusOnDeactivate:true,document:dom.getDoc(ctx2),fallbackFocus:contentEl,initialFocus:(0,import_dom_query3.getInitialFocus)({root:dom.getContentEl(ctx2),getInitialEl:ctx2.initialFocusEl,enabled:ctx2.autoFocus})});try{trap.activate()}catch{}});return()=>trap?.deactivate()}},actions:{reposition(ctx2,evt){const anchorEl=dom.getAnchorEl(ctx2)??dom.getTriggerEl(ctx2);const getPositionerEl=()=>dom.getPositionerEl(ctx2);(0,import_popper2.getPlacement)(anchorEl,getPositionerEl,{...ctx2.positioning,...evt.options,defer:true,listeners:false,onComplete(data){ctx2.currentPlacement=data.placement}})},checkRenderedElements(ctx2){(0,import_dom_query3.raf)(()=>{Object.assign(ctx2.renderedElements,{title:!!dom.getTitleEl(ctx2),description:!!dom.getDescriptionEl(ctx2)})})},setInitialFocus(ctx2){if(ctx2.modal)return;(0,import_dom_query3.raf)(()=>{const element=(0,import_dom_query3.getInitialFocus)({root:dom.getContentEl(ctx2),getInitialEl:ctx2.initialFocusEl,enabled:ctx2.autoFocus});element?.focus({preventScroll:true})})},setFinalFocus(ctx2,evt){if(!evt.restoreFocus)return;(0,import_dom_query3.raf)(()=>{const element=dom.getTriggerEl(ctx2);element?.focus({preventScroll:true})})},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})}}})}var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["autoFocus","closeOnEscape","closeOnInteractOutside","dir","getRootNode","id","ids","initialFocusEl","modal","onEscapeKeyDown","onFocusOutside","onInteractOutside","onOpenChange","onPointerDownOutside","open.controlled","open","persistentElements","portalled","positioning"]);var splitProps=(0,import_utils2.createSplitProps)(props);0&&(module.exports={anatomy,connect,machine,props,splitProps});
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/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ anatomy: () => anatomy,
24
+ connect: () => connect,
25
+ machine: () => machine,
26
+ props: () => props,
27
+ splitProps: () => splitProps
28
+ });
29
+ module.exports = __toCommonJS(src_exports);
30
+
31
+ // src/popover.anatomy.ts
32
+ var import_anatomy = require("@zag-js/anatomy");
33
+ var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
34
+ "arrow",
35
+ "arrowTip",
36
+ "anchor",
37
+ "trigger",
38
+ "indicator",
39
+ "positioner",
40
+ "content",
41
+ "title",
42
+ "description",
43
+ "closeTrigger"
44
+ );
45
+ var parts = anatomy.build();
46
+
47
+ // src/popover.connect.ts
48
+ var import_dom_query2 = require("@zag-js/dom-query");
49
+ var import_popper = require("@zag-js/popper");
50
+
51
+ // src/popover.dom.ts
52
+ var import_dom_query = require("@zag-js/dom-query");
53
+ var dom = (0, import_dom_query.createScope)({
54
+ getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
55
+ getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
56
+ getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
57
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
58
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
59
+ getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
60
+ getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
61
+ getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
62
+ getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
63
+ getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
64
+ getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
65
+ getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
66
+ getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
67
+ getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
68
+ getFocusableEls: (ctx) => (0, import_dom_query.getFocusables)(dom.getContentEl(ctx)),
69
+ getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0]
70
+ });
71
+
72
+ // src/popover.connect.ts
73
+ function connect(state, send, normalize) {
74
+ const open = state.matches("open");
75
+ const currentPlacement = state.context.currentPlacement;
76
+ const portalled = state.context.currentPortalled;
77
+ const rendered = state.context.renderedElements;
78
+ const popperStyles = (0, import_popper.getPlacementStyles)({
79
+ ...state.context.positioning,
80
+ placement: currentPlacement
81
+ });
82
+ return {
83
+ portalled,
84
+ open,
85
+ setOpen(nextOpen) {
86
+ if (nextOpen === open)
87
+ return;
88
+ send(nextOpen ? "OPEN" : "CLOSE");
89
+ },
90
+ reposition(options = {}) {
91
+ send({ type: "POSITIONING.SET", options });
92
+ },
93
+ getArrowProps() {
94
+ return normalize.element({
95
+ id: dom.getArrowId(state.context),
96
+ ...parts.arrow.attrs,
97
+ dir: state.context.dir,
98
+ style: popperStyles.arrow
99
+ });
100
+ },
101
+ getArrowTipProps() {
102
+ return normalize.element({
103
+ ...parts.arrowTip.attrs,
104
+ dir: state.context.dir,
105
+ style: popperStyles.arrowTip
106
+ });
107
+ },
108
+ getAnchorProps() {
109
+ return normalize.element({
110
+ ...parts.anchor.attrs,
111
+ dir: state.context.dir,
112
+ id: dom.getAnchorId(state.context)
113
+ });
114
+ },
115
+ getTriggerProps() {
116
+ return normalize.button({
117
+ ...parts.trigger.attrs,
118
+ dir: state.context.dir,
119
+ type: "button",
120
+ "data-placement": currentPlacement,
121
+ id: dom.getTriggerId(state.context),
122
+ "aria-haspopup": "dialog",
123
+ "aria-expanded": open,
124
+ "data-state": open ? "open" : "closed",
125
+ "aria-controls": dom.getContentId(state.context),
126
+ onClick(event) {
127
+ if (event.defaultPrevented)
128
+ return;
129
+ send("TOGGLE");
130
+ },
131
+ onBlur(event) {
132
+ send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
133
+ }
134
+ });
135
+ },
136
+ getIndicatorProps() {
137
+ return normalize.element({
138
+ ...parts.indicator.attrs,
139
+ dir: state.context.dir,
140
+ "data-state": open ? "open" : "closed"
141
+ });
142
+ },
143
+ getPositionerProps() {
144
+ return normalize.element({
145
+ id: dom.getPositionerId(state.context),
146
+ ...parts.positioner.attrs,
147
+ dir: state.context.dir,
148
+ style: popperStyles.floating
149
+ });
150
+ },
151
+ getContentProps() {
152
+ return normalize.element({
153
+ ...parts.content.attrs,
154
+ dir: state.context.dir,
155
+ id: dom.getContentId(state.context),
156
+ tabIndex: -1,
157
+ role: "dialog",
158
+ hidden: !open,
159
+ "data-state": open ? "open" : "closed",
160
+ "data-expanded": (0, import_dom_query2.dataAttr)(open),
161
+ "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
162
+ "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
163
+ "data-placement": currentPlacement
164
+ });
165
+ },
166
+ getTitleProps() {
167
+ return normalize.element({
168
+ ...parts.title.attrs,
169
+ id: dom.getTitleId(state.context),
170
+ dir: state.context.dir
171
+ });
172
+ },
173
+ getDescriptionProps() {
174
+ return normalize.element({
175
+ ...parts.description.attrs,
176
+ id: dom.getDescriptionId(state.context),
177
+ dir: state.context.dir
178
+ });
179
+ },
180
+ getCloseTriggerProps() {
181
+ return normalize.button({
182
+ ...parts.closeTrigger.attrs,
183
+ dir: state.context.dir,
184
+ id: dom.getCloseTriggerId(state.context),
185
+ type: "button",
186
+ "aria-label": "close",
187
+ onClick(event) {
188
+ if (event.defaultPrevented)
189
+ return;
190
+ send("CLOSE");
191
+ }
192
+ });
193
+ }
194
+ };
195
+ }
196
+
197
+ // src/popover.machine.ts
198
+ var import_aria_hidden = require("@zag-js/aria-hidden");
199
+ var import_core = require("@zag-js/core");
200
+ var import_dismissable = require("@zag-js/dismissable");
201
+ var import_dom_query3 = require("@zag-js/dom-query");
202
+ var import_popper2 = require("@zag-js/popper");
203
+ var import_remove_scroll = require("@zag-js/remove-scroll");
204
+ var import_utils = require("@zag-js/utils");
205
+ var import_focus_trap = require("focus-trap");
206
+ function machine(userContext) {
207
+ const ctx = (0, import_utils.compact)(userContext);
208
+ return (0, import_core.createMachine)(
209
+ {
210
+ id: "popover",
211
+ initial: ctx.open ? "open" : "closed",
212
+ context: {
213
+ closeOnInteractOutside: true,
214
+ closeOnEscape: true,
215
+ autoFocus: true,
216
+ modal: false,
217
+ portalled: true,
218
+ positioning: {
219
+ placement: "bottom",
220
+ ...ctx.positioning
221
+ },
222
+ currentPlacement: void 0,
223
+ ...ctx,
224
+ renderedElements: {
225
+ title: true,
226
+ description: true
227
+ }
228
+ },
229
+ computed: {
230
+ currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
231
+ },
232
+ watch: {
233
+ open: ["toggleVisibility"]
234
+ },
235
+ entry: ["checkRenderedElements"],
236
+ states: {
237
+ closed: {
238
+ on: {
239
+ "CONTROLLED.OPEN": {
240
+ target: "open",
241
+ actions: ["setInitialFocus"]
242
+ },
243
+ TOGGLE: [
244
+ {
245
+ guard: "isOpenControlled",
246
+ actions: ["invokeOnOpen"]
247
+ },
248
+ {
249
+ target: "open",
250
+ actions: ["invokeOnOpen", "setInitialFocus"]
251
+ }
252
+ ],
253
+ OPEN: [
254
+ {
255
+ guard: "isOpenControlled",
256
+ actions: ["invokeOnOpen"]
257
+ },
258
+ {
259
+ target: "open",
260
+ actions: ["invokeOnOpen", "setInitialFocus"]
261
+ }
262
+ ]
263
+ }
264
+ },
265
+ open: {
266
+ activities: [
267
+ "trapFocus",
268
+ "preventScroll",
269
+ "hideContentBelow",
270
+ "trackPositioning",
271
+ "trackDismissableElement",
272
+ "proxyTabFocus"
273
+ ],
274
+ on: {
275
+ "CONTROLLED.CLOSE": {
276
+ target: "closed",
277
+ actions: ["setFinalFocus"]
278
+ },
279
+ CLOSE: [
280
+ {
281
+ guard: "isOpenControlled",
282
+ actions: ["invokeOnClose"]
283
+ },
284
+ {
285
+ target: "closed",
286
+ actions: ["invokeOnClose", "setFinalFocus"]
287
+ }
288
+ ],
289
+ TOGGLE: [
290
+ {
291
+ guard: "isOpenControlled",
292
+ actions: ["invokeOnClose"]
293
+ },
294
+ {
295
+ target: "closed",
296
+ actions: ["invokeOnClose"]
297
+ }
298
+ ],
299
+ "POSITIONING.SET": {
300
+ actions: "reposition"
301
+ }
302
+ }
303
+ }
304
+ }
305
+ },
306
+ {
307
+ guards: {
308
+ isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
309
+ },
310
+ activities: {
311
+ trackPositioning(ctx2) {
312
+ ctx2.currentPlacement = ctx2.positioning.placement;
313
+ const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
314
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
315
+ return (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
316
+ ...ctx2.positioning,
317
+ defer: true,
318
+ onComplete(data) {
319
+ ctx2.currentPlacement = data.placement;
320
+ }
321
+ });
322
+ },
323
+ trackDismissableElement(ctx2, _evt, { send }) {
324
+ const getContentEl = () => dom.getContentEl(ctx2);
325
+ let restoreFocus = true;
326
+ return (0, import_dismissable.trackDismissableElement)(getContentEl, {
327
+ pointerBlocking: ctx2.modal,
328
+ exclude: dom.getTriggerEl(ctx2),
329
+ defer: true,
330
+ onEscapeKeyDown(event) {
331
+ ctx2.onEscapeKeyDown?.(event);
332
+ if (ctx2.closeOnEscape)
333
+ return;
334
+ event.preventDefault();
335
+ },
336
+ onInteractOutside(event) {
337
+ ctx2.onInteractOutside?.(event);
338
+ if (event.defaultPrevented)
339
+ return;
340
+ restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
341
+ if (!ctx2.closeOnInteractOutside) {
342
+ event.preventDefault();
343
+ }
344
+ },
345
+ onPointerDownOutside: ctx2.onPointerDownOutside,
346
+ onFocusOutside: ctx2.onFocusOutside,
347
+ persistentElements: ctx2.persistentElements,
348
+ onDismiss() {
349
+ send({ type: "CLOSE", src: "interact-outside", restoreFocus });
350
+ }
351
+ });
352
+ },
353
+ proxyTabFocus(ctx2) {
354
+ if (ctx2.modal || !ctx2.portalled)
355
+ return;
356
+ const getContentEl = () => dom.getContentEl(ctx2);
357
+ return (0, import_dom_query3.proxyTabFocus)(getContentEl, {
358
+ triggerElement: dom.getTriggerEl(ctx2),
359
+ defer: true,
360
+ onFocus(el) {
361
+ el.focus({ preventScroll: true });
362
+ }
363
+ });
364
+ },
365
+ hideContentBelow(ctx2) {
366
+ if (!ctx2.modal)
367
+ return;
368
+ const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
369
+ return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
370
+ },
371
+ preventScroll(ctx2) {
372
+ if (!ctx2.modal)
373
+ return;
374
+ return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
375
+ },
376
+ trapFocus(ctx2) {
377
+ if (!ctx2.modal)
378
+ return;
379
+ let trap;
380
+ (0, import_dom_query3.nextTick)(() => {
381
+ const contentEl = dom.getContentEl(ctx2);
382
+ if (!contentEl)
383
+ return;
384
+ trap = (0, import_focus_trap.createFocusTrap)(contentEl, {
385
+ escapeDeactivates: false,
386
+ allowOutsideClick: true,
387
+ preventScroll: true,
388
+ returnFocusOnDeactivate: true,
389
+ document: dom.getDoc(ctx2),
390
+ fallbackFocus: contentEl,
391
+ initialFocus: (0, import_dom_query3.getInitialFocus)({
392
+ root: dom.getContentEl(ctx2),
393
+ getInitialEl: ctx2.initialFocusEl,
394
+ enabled: ctx2.autoFocus
395
+ })
396
+ });
397
+ try {
398
+ trap.activate();
399
+ } catch {
400
+ }
401
+ });
402
+ return () => trap?.deactivate();
403
+ }
404
+ },
405
+ actions: {
406
+ reposition(ctx2, evt) {
407
+ const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
408
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
409
+ (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
410
+ ...ctx2.positioning,
411
+ ...evt.options,
412
+ defer: true,
413
+ listeners: false,
414
+ onComplete(data) {
415
+ ctx2.currentPlacement = data.placement;
416
+ }
417
+ });
418
+ },
419
+ checkRenderedElements(ctx2) {
420
+ (0, import_dom_query3.raf)(() => {
421
+ Object.assign(ctx2.renderedElements, {
422
+ title: !!dom.getTitleEl(ctx2),
423
+ description: !!dom.getDescriptionEl(ctx2)
424
+ });
425
+ });
426
+ },
427
+ setInitialFocus(ctx2) {
428
+ if (ctx2.modal)
429
+ return;
430
+ (0, import_dom_query3.raf)(() => {
431
+ const element = (0, import_dom_query3.getInitialFocus)({
432
+ root: dom.getContentEl(ctx2),
433
+ getInitialEl: ctx2.initialFocusEl,
434
+ enabled: ctx2.autoFocus
435
+ });
436
+ element?.focus({ preventScroll: true });
437
+ });
438
+ },
439
+ setFinalFocus(ctx2, evt) {
440
+ if (!evt.restoreFocus)
441
+ return;
442
+ (0, import_dom_query3.raf)(() => {
443
+ const element = dom.getTriggerEl(ctx2);
444
+ element?.focus({ preventScroll: true });
445
+ });
446
+ },
447
+ invokeOnOpen(ctx2) {
448
+ ctx2.onOpenChange?.({ open: true });
449
+ },
450
+ invokeOnClose(ctx2) {
451
+ ctx2.onOpenChange?.({ open: false });
452
+ },
453
+ toggleVisibility(ctx2, evt, { send }) {
454
+ send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
455
+ }
456
+ }
457
+ }
458
+ );
459
+ }
460
+
461
+ // src/popover.props.ts
462
+ var import_types = require("@zag-js/types");
463
+ var import_utils2 = require("@zag-js/utils");
464
+ var props = (0, import_types.createProps)()([
465
+ "autoFocus",
466
+ "closeOnEscape",
467
+ "closeOnInteractOutside",
468
+ "dir",
469
+ "getRootNode",
470
+ "id",
471
+ "ids",
472
+ "initialFocusEl",
473
+ "modal",
474
+ "onEscapeKeyDown",
475
+ "onFocusOutside",
476
+ "onInteractOutside",
477
+ "onOpenChange",
478
+ "onPointerDownOutside",
479
+ "open.controlled",
480
+ "open",
481
+ "persistentElements",
482
+ "portalled",
483
+ "positioning"
484
+ ]);
485
+ var splitProps = (0, import_utils2.createSplitProps)(props);
486
+ // Annotate the CommonJS export names for ESM import in node:
487
+ 0 && (module.exports = {
488
+ anatomy,
489
+ connect,
490
+ machine,
491
+ props,
492
+ splitProps
493
+ });
2
494
  //# sourceMappingURL=index.js.map