@zag-js/popover 0.70.0 → 0.72.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.js CHANGED
@@ -1,36 +1,18 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __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);
1
+ 'use strict';
19
2
 
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);
3
+ var anatomy$1 = require('@zag-js/anatomy');
4
+ var domQuery = require('@zag-js/dom-query');
5
+ var popper = require('@zag-js/popper');
6
+ var ariaHidden = require('@zag-js/aria-hidden');
7
+ var core = require('@zag-js/core');
8
+ var dismissable = require('@zag-js/dismissable');
9
+ var removeScroll = require('@zag-js/remove-scroll');
10
+ var utils = require('@zag-js/utils');
11
+ var focusTrap = require('focus-trap');
12
+ var types = require('@zag-js/types');
30
13
 
31
14
  // src/popover.anatomy.ts
32
- var import_anatomy = require("@zag-js/anatomy");
33
- var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
15
+ var anatomy = anatomy$1.createAnatomy("popover").parts(
34
16
  "arrow",
35
17
  "arrowTip",
36
18
  "anchor",
@@ -43,14 +25,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
43
25
  "closeTrigger"
44
26
  );
45
27
  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)({
28
+ var dom = domQuery.createScope({
54
29
  getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
55
30
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
56
31
  getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
@@ -65,7 +40,7 @@ var dom = (0, import_dom_query.createScope)({
65
40
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
66
41
  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
67
42
  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
68
- getFocusableEls: (ctx) => (0, import_dom_query.getFocusables)(dom.getContentEl(ctx)),
43
+ getFocusableEls: (ctx) => domQuery.getFocusables(dom.getContentEl(ctx)),
69
44
  getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0]
70
45
  });
71
46
 
@@ -75,7 +50,7 @@ function connect(state, send, normalize) {
75
50
  const currentPlacement = state.context.currentPlacement;
76
51
  const portalled = state.context.currentPortalled;
77
52
  const rendered = state.context.renderedElements;
78
- const popperStyles = (0, import_popper.getPlacementStyles)({
53
+ const popperStyles = popper.getPlacementStyles({
79
54
  ...state.context.positioning,
80
55
  placement: currentPlacement
81
56
  });
@@ -155,7 +130,7 @@ function connect(state, send, normalize) {
155
130
  role: "dialog",
156
131
  hidden: !open,
157
132
  "data-state": open ? "open" : "closed",
158
- "data-expanded": (0, import_dom_query2.dataAttr)(open),
133
+ "data-expanded": domQuery.dataAttr(open),
159
134
  "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
160
135
  "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
161
136
  "data-placement": currentPlacement
@@ -190,19 +165,9 @@ function connect(state, send, normalize) {
190
165
  }
191
166
  };
192
167
  }
193
-
194
- // src/popover.machine.ts
195
- var import_aria_hidden = require("@zag-js/aria-hidden");
196
- var import_core = require("@zag-js/core");
197
- var import_dismissable = require("@zag-js/dismissable");
198
- var import_dom_query3 = require("@zag-js/dom-query");
199
- var import_popper2 = require("@zag-js/popper");
200
- var import_remove_scroll = require("@zag-js/remove-scroll");
201
- var import_utils = require("@zag-js/utils");
202
- var import_focus_trap = require("focus-trap");
203
168
  function machine(userContext) {
204
- const ctx = (0, import_utils.compact)(userContext);
205
- return (0, import_core.createMachine)(
169
+ const ctx = utils.compact(userContext);
170
+ return core.createMachine(
206
171
  {
207
172
  id: "popover",
208
173
  initial: ctx.open ? "open" : "closed",
@@ -309,7 +274,7 @@ function machine(userContext) {
309
274
  ctx2.currentPlacement = ctx2.positioning.placement;
310
275
  const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
311
276
  const getPositionerEl = () => dom.getPositionerEl(ctx2);
312
- return (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
277
+ return popper.getPlacement(anchorEl, getPositionerEl, {
313
278
  ...ctx2.positioning,
314
279
  defer: true,
315
280
  onComplete(data) {
@@ -320,7 +285,7 @@ function machine(userContext) {
320
285
  trackDismissableElement(ctx2, _evt, { send }) {
321
286
  const getContentEl = () => dom.getContentEl(ctx2);
322
287
  let restoreFocus = true;
323
- return (0, import_dismissable.trackDismissableElement)(getContentEl, {
288
+ return dismissable.trackDismissableElement(getContentEl, {
324
289
  pointerBlocking: ctx2.modal,
325
290
  exclude: dom.getTriggerEl(ctx2),
326
291
  defer: true,
@@ -348,7 +313,7 @@ function machine(userContext) {
348
313
  proxyTabFocus(ctx2) {
349
314
  if (ctx2.modal || !ctx2.portalled) return;
350
315
  const getContentEl = () => dom.getContentEl(ctx2);
351
- return (0, import_dom_query3.proxyTabFocus)(getContentEl, {
316
+ return domQuery.proxyTabFocus(getContentEl, {
352
317
  triggerElement: dom.getTriggerEl(ctx2),
353
318
  defer: true,
354
319
  onFocus(el) {
@@ -359,26 +324,26 @@ function machine(userContext) {
359
324
  hideContentBelow(ctx2) {
360
325
  if (!ctx2.modal) return;
361
326
  const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
362
- return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
327
+ return ariaHidden.ariaHidden(getElements, { defer: true });
363
328
  },
364
329
  preventScroll(ctx2) {
365
330
  if (!ctx2.modal) return;
366
- return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
331
+ return removeScroll.preventBodyScroll(dom.getDoc(ctx2));
367
332
  },
368
333
  trapFocus(ctx2) {
369
334
  if (!ctx2.modal) return;
370
335
  let trap;
371
- (0, import_dom_query3.nextTick)(() => {
336
+ domQuery.nextTick(() => {
372
337
  const contentEl = dom.getContentEl(ctx2);
373
338
  if (!contentEl) return;
374
- trap = (0, import_focus_trap.createFocusTrap)(contentEl, {
339
+ trap = focusTrap.createFocusTrap(contentEl, {
375
340
  escapeDeactivates: false,
376
341
  allowOutsideClick: true,
377
342
  preventScroll: true,
378
343
  returnFocusOnDeactivate: true,
379
344
  document: dom.getDoc(ctx2),
380
345
  fallbackFocus: contentEl,
381
- initialFocus: (0, import_dom_query3.getInitialFocus)({
346
+ initialFocus: domQuery.getInitialFocus({
382
347
  root: dom.getContentEl(ctx2),
383
348
  getInitialEl: ctx2.initialFocusEl,
384
349
  enabled: ctx2.autoFocus
@@ -396,7 +361,7 @@ function machine(userContext) {
396
361
  reposition(ctx2, evt) {
397
362
  const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
398
363
  const getPositionerEl = () => dom.getPositionerEl(ctx2);
399
- (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
364
+ popper.getPlacement(anchorEl, getPositionerEl, {
400
365
  ...ctx2.positioning,
401
366
  ...evt.options,
402
367
  defer: true,
@@ -407,7 +372,7 @@ function machine(userContext) {
407
372
  });
408
373
  },
409
374
  checkRenderedElements(ctx2) {
410
- (0, import_dom_query3.raf)(() => {
375
+ domQuery.raf(() => {
411
376
  Object.assign(ctx2.renderedElements, {
412
377
  title: !!dom.getTitleEl(ctx2),
413
378
  description: !!dom.getDescriptionEl(ctx2)
@@ -416,8 +381,8 @@ function machine(userContext) {
416
381
  },
417
382
  setInitialFocus(ctx2) {
418
383
  if (ctx2.modal) return;
419
- (0, import_dom_query3.raf)(() => {
420
- const element = (0, import_dom_query3.getInitialFocus)({
384
+ domQuery.raf(() => {
385
+ const element = domQuery.getInitialFocus({
421
386
  root: dom.getContentEl(ctx2),
422
387
  getInitialEl: ctx2.initialFocusEl,
423
388
  enabled: ctx2.autoFocus
@@ -428,7 +393,7 @@ function machine(userContext) {
428
393
  setFinalFocus(ctx2, evt) {
429
394
  const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus;
430
395
  if (restoreFocus != null && !restoreFocus) return;
431
- (0, import_dom_query3.raf)(() => {
396
+ domQuery.raf(() => {
432
397
  const element = dom.getTriggerEl(ctx2);
433
398
  element?.focus({ preventScroll: true });
434
399
  });
@@ -446,11 +411,7 @@ function machine(userContext) {
446
411
  }
447
412
  );
448
413
  }
449
-
450
- // src/popover.props.ts
451
- var import_types = require("@zag-js/types");
452
- var import_utils2 = require("@zag-js/utils");
453
- var props = (0, import_types.createProps)()([
414
+ var props = types.createProps()([
454
415
  "autoFocus",
455
416
  "closeOnEscape",
456
417
  "closeOnInteractOutside",
@@ -471,13 +432,10 @@ var props = (0, import_types.createProps)()([
471
432
  "portalled",
472
433
  "positioning"
473
434
  ]);
474
- var splitProps = (0, import_utils2.createSplitProps)(props);
475
- // Annotate the CommonJS export names for ESM import in node:
476
- 0 && (module.exports = {
477
- anatomy,
478
- connect,
479
- machine,
480
- props,
481
- splitProps
482
- });
483
- //# sourceMappingURL=index.js.map
435
+ var splitProps = utils.createSplitProps(props);
436
+
437
+ exports.anatomy = anatomy;
438
+ exports.connect = connect;
439
+ exports.machine = machine;
440
+ exports.props = props;
441
+ exports.splitProps = splitProps;
package/dist/index.mjs CHANGED
@@ -1,5 +1,15 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ import { createScope, getFocusables, dataAttr, proxyTabFocus, nextTick, getInitialFocus, raf } from '@zag-js/dom-query';
3
+ import { getPlacementStyles, getPlacement } from '@zag-js/popper';
4
+ import { ariaHidden } from '@zag-js/aria-hidden';
5
+ import { createMachine } from '@zag-js/core';
6
+ import { trackDismissableElement } from '@zag-js/dismissable';
7
+ import { preventBodyScroll } from '@zag-js/remove-scroll';
8
+ import { createSplitProps, compact } from '@zag-js/utils';
9
+ import { createFocusTrap } from 'focus-trap';
10
+ import { createProps } from '@zag-js/types';
11
+
1
12
  // src/popover.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
13
  var anatomy = createAnatomy("popover").parts(
4
14
  "arrow",
5
15
  "arrowTip",
@@ -13,13 +23,6 @@ var anatomy = createAnatomy("popover").parts(
13
23
  "closeTrigger"
14
24
  );
15
25
  var parts = anatomy.build();
16
-
17
- // src/popover.connect.ts
18
- import { dataAttr } from "@zag-js/dom-query";
19
- import { getPlacementStyles } from "@zag-js/popper";
20
-
21
- // src/popover.dom.ts
22
- import { createScope, getFocusables } from "@zag-js/dom-query";
23
26
  var dom = createScope({
24
27
  getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
25
28
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
@@ -160,16 +163,6 @@ function connect(state, send, normalize) {
160
163
  }
161
164
  };
162
165
  }
163
-
164
- // src/popover.machine.ts
165
- import { ariaHidden } from "@zag-js/aria-hidden";
166
- import { createMachine } from "@zag-js/core";
167
- import { trackDismissableElement } from "@zag-js/dismissable";
168
- import { getInitialFocus, nextTick, proxyTabFocus, raf } from "@zag-js/dom-query";
169
- import { getPlacement } from "@zag-js/popper";
170
- import { preventBodyScroll } from "@zag-js/remove-scroll";
171
- import { compact } from "@zag-js/utils";
172
- import { createFocusTrap } from "focus-trap";
173
166
  function machine(userContext) {
174
167
  const ctx = compact(userContext);
175
168
  return createMachine(
@@ -416,10 +409,6 @@ function machine(userContext) {
416
409
  }
417
410
  );
418
411
  }
419
-
420
- // src/popover.props.ts
421
- import { createProps } from "@zag-js/types";
422
- import { createSplitProps } from "@zag-js/utils";
423
412
  var props = createProps()([
424
413
  "autoFocus",
425
414
  "closeOnEscape",
@@ -442,11 +431,5 @@ var props = createProps()([
442
431
  "positioning"
443
432
  ]);
444
433
  var splitProps = createSplitProps(props);
445
- export {
446
- anatomy,
447
- connect,
448
- machine,
449
- props,
450
- splitProps
451
- };
452
- //# sourceMappingURL=index.mjs.map
434
+
435
+ export { anatomy, connect, machine, props, splitProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popover",
3
- "version": "0.70.0",
3
+ "version": "0.72.0",
4
4
  "description": "Core logic for the popover widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -17,8 +17,7 @@
17
17
  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/popover",
18
18
  "sideEffects": false,
19
19
  "files": [
20
- "dist",
21
- "src"
20
+ "dist"
22
21
  ],
23
22
  "publishConfig": {
24
23
  "access": "public"
@@ -28,15 +27,15 @@
28
27
  },
29
28
  "dependencies": {
30
29
  "focus-trap": "7.6.0",
31
- "@zag-js/anatomy": "0.70.0",
32
- "@zag-js/aria-hidden": "0.70.0",
33
- "@zag-js/core": "0.70.0",
34
- "@zag-js/dom-query": "0.70.0",
35
- "@zag-js/utils": "0.70.0",
36
- "@zag-js/dismissable": "0.70.0",
37
- "@zag-js/popper": "0.70.0",
38
- "@zag-js/remove-scroll": "0.70.0",
39
- "@zag-js/types": "0.70.0"
30
+ "@zag-js/anatomy": "0.72.0",
31
+ "@zag-js/aria-hidden": "0.72.0",
32
+ "@zag-js/core": "0.72.0",
33
+ "@zag-js/dom-query": "0.72.0",
34
+ "@zag-js/utils": "0.72.0",
35
+ "@zag-js/dismissable": "0.72.0",
36
+ "@zag-js/popper": "0.72.0",
37
+ "@zag-js/remove-scroll": "0.72.0",
38
+ "@zag-js/types": "0.72.0"
40
39
  },
41
40
  "devDependencies": {
42
41
  "clean-package": "2.2.0"
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/popover.anatomy.ts","../src/popover.connect.ts","../src/popover.dom.ts","../src/popover.machine.ts","../src/popover.props.ts"],"sourcesContent":["export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from \"@zag-js/dismissable\"\nexport { anatomy } from \"./popover.anatomy\"\nexport { connect } from \"./popover.connect\"\nexport { machine } from \"./popover.machine\"\nexport * from \"./popover.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n OpenChangeDetails,\n Placement,\n PositioningOptions,\n Service,\n} from \"./popover.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"popover\").parts(\n \"arrow\",\n \"arrowTip\",\n \"anchor\",\n \"trigger\",\n \"indicator\",\n \"positioner\",\n \"content\",\n \"title\",\n \"description\",\n \"closeTrigger\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\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 { MachineApi, Send, State } from \"./popover.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const open = 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 ...state.context.positioning,\n placement: currentPlacement,\n })\n\n return {\n portalled,\n open: open,\n setOpen(nextOpen) {\n if (nextOpen === open) return\n send(nextOpen ? \"OPEN\" : \"CLOSE\")\n },\n reposition(options = {}) {\n send({ type: \"POSITIONING.SET\", options })\n },\n\n getArrowProps() {\n return normalize.element({\n id: dom.getArrowId(state.context),\n ...parts.arrow.attrs,\n dir: state.context.dir,\n style: popperStyles.arrow,\n })\n },\n\n getArrowTipProps() {\n return normalize.element({\n ...parts.arrowTip.attrs,\n dir: state.context.dir,\n style: popperStyles.arrowTip,\n })\n },\n\n getAnchorProps() {\n return normalize.element({\n ...parts.anchor.attrs,\n dir: state.context.dir,\n id: dom.getAnchorId(state.context),\n })\n },\n\n getTriggerProps() {\n return normalize.button({\n ...parts.trigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n \"data-placement\": currentPlacement,\n id: dom.getTriggerId(state.context),\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": open,\n \"data-state\": open ? \"open\" : \"closed\",\n \"aria-controls\": dom.getContentId(state.context),\n onClick(event) {\n if (event.defaultPrevented) return\n send(\"TOGGLE\")\n },\n onBlur(event) {\n send({ type: \"TRIGGER_BLUR\", target: event.relatedTarget })\n },\n })\n },\n\n getIndicatorProps() {\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-state\": open ? \"open\" : \"closed\",\n })\n },\n\n getPositionerProps() {\n return normalize.element({\n id: dom.getPositionerId(state.context),\n ...parts.positioner.attrs,\n dir: state.context.dir,\n style: popperStyles.floating,\n })\n },\n\n getContentProps() {\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: dom.getContentId(state.context),\n tabIndex: -1,\n role: \"dialog\",\n hidden: !open,\n \"data-state\": open ? \"open\" : \"closed\",\n \"data-expanded\": dataAttr(open),\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\n getTitleProps() {\n return normalize.element({\n ...parts.title.attrs,\n id: dom.getTitleId(state.context),\n dir: state.context.dir,\n })\n },\n\n getDescriptionProps() {\n return normalize.element({\n ...parts.description.attrs,\n id: dom.getDescriptionId(state.context),\n dir: state.context.dir,\n })\n },\n\n getCloseTriggerProps() {\n return normalize.button({\n ...parts.closeTrigger.attrs,\n dir: state.context.dir,\n id: dom.getCloseTriggerId(state.context),\n type: \"button\",\n \"aria-label\": \"close\",\n onClick(event) {\n if (event.defaultPrevented) return\n send(\"CLOSE\")\n },\n })\n },\n }\n}\n","import { createScope, getFocusables } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./popover.types\"\n\nexport const dom = createScope({\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","import { ariaHidden } from \"@zag-js/aria-hidden\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackDismissableElement } from \"@zag-js/dismissable\"\nimport { getInitialFocus, nextTick, proxyTabFocus, raf } from \"@zag-js/dom-query\"\nimport { getPlacement } from \"@zag-js/popper\"\nimport { preventBodyScroll } from \"@zag-js/remove-scroll\"\nimport { compact } from \"@zag-js/utils\"\nimport { createFocusTrap, type FocusTrap } 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 closeOnEscape: true,\n autoFocus: true,\n modal: false,\n portalled: true,\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 \"CONTROLLED.OPEN\": {\n target: \"open\",\n actions: [\"setInitialFocus\"],\n },\n TOGGLE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnOpen\"],\n },\n {\n target: \"open\",\n actions: [\"invokeOnOpen\", \"setInitialFocus\"],\n },\n ],\n OPEN: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnOpen\"],\n },\n {\n target: \"open\",\n actions: [\"invokeOnOpen\", \"setInitialFocus\"],\n },\n ],\n },\n },\n\n open: {\n activities: [\n \"trapFocus\",\n \"preventScroll\",\n \"hideContentBelow\",\n \"trackPositioning\",\n \"trackDismissableElement\",\n \"proxyTabFocus\",\n ],\n on: {\n \"CONTROLLED.CLOSE\": {\n target: \"closed\",\n actions: [\"setFinalFocus\"],\n },\n CLOSE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnClose\"],\n },\n {\n target: \"closed\",\n actions: [\"invokeOnClose\", \"setFinalFocus\"],\n },\n ],\n TOGGLE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnClose\"],\n },\n {\n target: \"closed\",\n actions: [\"invokeOnClose\"],\n },\n ],\n \"POSITIONING.SET\": {\n actions: \"reposition\",\n },\n },\n },\n },\n },\n {\n guards: {\n isOpenControlled: (ctx) => !!ctx[\"open.controlled\"],\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 })\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.closeOnEscape) 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: ctx.onPointerDownOutside,\n onFocusOutside: ctx.onFocusOutside,\n persistentElements: ctx.persistentElements,\n onDismiss() {\n send({ type: \"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 contentEl = dom.getContentEl(ctx)\n if (!contentEl) return\n trap = createFocusTrap(contentEl, {\n escapeDeactivates: false,\n allowOutsideClick: true,\n preventScroll: true,\n returnFocusOnDeactivate: true,\n document: dom.getDoc(ctx),\n fallbackFocus: contentEl,\n initialFocus: getInitialFocus({\n root: dom.getContentEl(ctx),\n getInitialEl: ctx.initialFocusEl,\n enabled: ctx.autoFocus,\n }),\n })\n\n try {\n trap.activate()\n } catch {}\n })\n return () => trap?.deactivate()\n },\n },\n actions: {\n reposition(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 onComplete(data) {\n ctx.currentPlacement = data.placement\n },\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 // handoff to `trapFocus` activity for initial focus\n if (ctx.modal) return\n raf(() => {\n const element = getInitialFocus({\n root: dom.getContentEl(ctx),\n getInitialEl: ctx.initialFocusEl,\n enabled: ctx.autoFocus,\n })\n element?.focus({ preventScroll: true })\n })\n },\n setFinalFocus(ctx, evt) {\n const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus\n if (restoreFocus != null && !restoreFocus) return\n raf(() => {\n const element = dom.getTriggerEl(ctx)\n element?.focus({ preventScroll: true })\n })\n },\n invokeOnOpen(ctx) {\n ctx.onOpenChange?.({ open: true })\n },\n invokeOnClose(ctx) {\n ctx.onOpenChange?.({ open: false })\n },\n toggleVisibility(ctx, evt, { send }) {\n send({ type: ctx.open ? \"CONTROLLED.OPEN\" : \"CONTROLLED.CLOSE\", previousEvent: evt })\n },\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./popover.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"autoFocus\",\n \"closeOnEscape\",\n \"closeOnInteractOutside\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"initialFocusEl\",\n \"modal\",\n \"onEscapeKeyDown\",\n \"onFocusOutside\",\n \"onInteractOutside\",\n \"onOpenChange\",\n \"onPointerDownOutside\",\n \"open.controlled\",\n \"open\",\n \"persistentElements\",\n \"portalled\",\n \"positioning\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,SAAS,EAAE;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,QAAQ,QAAQ,MAAM;;;ACfnC,IAAAA,oBAAyB;AACzB,oBAAmC;;;ACDnC,uBAA2C;AAGpC,IAAM,UAAM,8BAAY;AAAA,EAC7B,aAAa,CAAC,QAAa,IAAI,KAAK,UAAU,WAAW,IAAI,EAAE;AAAA,EAC/D,cAAc,CAAC,QAAa,IAAI,KAAK,WAAW,WAAW,IAAI,EAAE;AAAA,EACjE,cAAc,CAAC,QAAa,IAAI,KAAK,WAAW,WAAW,IAAI,EAAE;AAAA,EACjE,iBAAiB,CAAC,QAAa,IAAI,KAAK,cAAc,WAAW,IAAI,EAAE;AAAA,EACvE,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,WAAW,IAAI,EAAE;AAAA,EAC7D,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,WAAW,IAAI,EAAE;AAAA,EAC7D,kBAAkB,CAAC,QAAa,IAAI,KAAK,eAAe,WAAW,IAAI,EAAE;AAAA,EACzE,mBAAmB,CAAC,QAAa,IAAI,KAAK,gBAAgB,WAAW,IAAI,EAAE;AAAA,EAE3E,aAAa,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,YAAY,GAAG,CAAC;AAAA,EAChE,cAAc,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,EAClE,cAAc,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,EAClE,iBAAiB,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,gBAAgB,GAAG,CAAC;AAAA,EACxE,YAAY,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,WAAW,GAAG,CAAC;AAAA,EAC9D,kBAAkB,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,iBAAiB,GAAG,CAAC;AAAA,EAE1E,iBAAiB,CAAC,YAAa,gCAAc,IAAI,aAAa,GAAG,CAAC;AAAA,EAClE,qBAAqB,CAAC,QAAa,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC/D,CAAC;;;ADfM,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,OAAO,MAAM,QAAQ,MAAM;AAEjC,QAAM,mBAAmB,MAAM,QAAQ;AACvC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,WAAW,MAAM,QAAQ;AAE/B,QAAM,mBAAe,kCAAmB;AAAA,IACtC,GAAG,MAAM,QAAQ;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ,UAAU;AAChB,UAAI,aAAa,KAAM;AACvB,WAAK,WAAW,SAAS,OAAO;AAAA,IAClC;AAAA,IACA,WAAW,UAAU,CAAC,GAAG;AACvB,WAAK,EAAE,MAAM,mBAAmB,QAAQ,CAAC;AAAA,IAC3C;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,QAAQ;AAAA,QACvB,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,QAChC,GAAG,MAAM,MAAM;AAAA,QACf,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,aAAa;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,IAEA,mBAAmB;AACjB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,SAAS;AAAA,QAClB,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,aAAa;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,IAEA,iBAAiB;AACf,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,OAAO;AAAA,QAChB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,YAAY,MAAM,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB;AAChB,aAAO,UAAU,OAAO;AAAA,QACtB,GAAG,MAAM,QAAQ;AAAA,QACjB,KAAK,MAAM,QAAQ;AAAA,QACnB,MAAM;AAAA,QACN,kBAAkB;AAAA,QAClB,IAAI,IAAI,aAAa,MAAM,OAAO;AAAA,QAClC,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,cAAc,OAAO,SAAS;AAAA,QAC9B,iBAAiB,IAAI,aAAa,MAAM,OAAO;AAAA,QAC/C,QAAQ,OAAO;AACb,cAAI,MAAM,iBAAkB;AAC5B,eAAK,QAAQ;AAAA,QACf;AAAA,QACA,OAAO,OAAO;AACZ,eAAK,EAAE,MAAM,gBAAgB,QAAQ,MAAM,cAAc,CAAC;AAAA,QAC5D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,oBAAoB;AAClB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,UAAU;AAAA,QACnB,KAAK,MAAM,QAAQ;AAAA,QACnB,cAAc,OAAO,SAAS;AAAA,MAChC,CAAC;AAAA,IACH;AAAA,IAEA,qBAAqB;AACnB,aAAO,UAAU,QAAQ;AAAA,QACvB,IAAI,IAAI,gBAAgB,MAAM,OAAO;AAAA,QACrC,GAAG,MAAM,WAAW;AAAA,QACpB,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,aAAa;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB;AAChB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,QAAQ;AAAA,QACjB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,aAAa,MAAM,OAAO;AAAA,QAClC,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,CAAC;AAAA,QACT,cAAc,OAAO,SAAS;AAAA,QAC9B,qBAAiB,4BAAS,IAAI;AAAA,QAC9B,mBAAmB,SAAS,QAAQ,IAAI,WAAW,MAAM,OAAO,IAAI;AAAA,QACpE,oBAAoB,SAAS,cAAc,IAAI,iBAAiB,MAAM,OAAO,IAAI;AAAA,QACjF,kBAAkB;AAAA,MACpB,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,MAAM;AAAA,QACf,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,QAChC,KAAK,MAAM,QAAQ;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,IAEA,sBAAsB;AACpB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,YAAY;AAAA,QACrB,IAAI,IAAI,iBAAiB,MAAM,OAAO;AAAA,QACtC,KAAK,MAAM,QAAQ;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,IAEA,uBAAuB;AACrB,aAAO,UAAU,OAAO;AAAA,QACtB,GAAG,MAAM,aAAa;AAAA,QACtB,KAAK,MAAM,QAAQ;AAAA,QACnB,IAAI,IAAI,kBAAkB,MAAM,OAAO;AAAA,QACvC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,QAAQ,OAAO;AACb,cAAI,MAAM,iBAAkB;AAC5B,eAAK,OAAO;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AE3IA,yBAA2B;AAC3B,kBAA8B;AAC9B,yBAAwC;AACxC,IAAAC,oBAA8D;AAC9D,IAAAC,iBAA6B;AAC7B,2BAAkC;AAClC,mBAAwB;AACxB,wBAAgD;AAIzC,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,sBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS,IAAI,OAAO,SAAS;AAAA,MAC7B,SAAS;AAAA,QACP,wBAAwB;AAAA,QACxB,eAAe;AAAA,QACf,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,UACX,WAAW;AAAA,UACX,GAAG,IAAI;AAAA,QACT;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,QACH,kBAAkB;AAAA,UAChB,OAAO;AAAA,UACP,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,kBAAkB,CAACC,SAAQ,CAAC,CAACA,KAAI,SAAS,CAAC,CAACA,KAAI;AAAA,MAClD;AAAA,MAEA,OAAO;AAAA,QACL,MAAM,CAAC,kBAAkB;AAAA,MAC3B;AAAA,MAEA,OAAO,CAAC,uBAAuB;AAAA,MAE/B,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,YACF,mBAAmB;AAAA,cACjB,QAAQ;AAAA,cACR,SAAS,CAAC,iBAAiB;AAAA,YAC7B;AAAA,YACA,QAAQ;AAAA,cACN;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,cAAc;AAAA,cAC1B;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,CAAC,gBAAgB,iBAAiB;AAAA,cAC7C;AAAA,YACF;AAAA,YACA,MAAM;AAAA,cACJ;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,cAAc;AAAA,cAC1B;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,CAAC,gBAAgB,iBAAiB;AAAA,cAC7C;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,QAEA,MAAM;AAAA,UACJ,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,IAAI;AAAA,YACF,oBAAoB;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,CAAC,eAAe;AAAA,YAC3B;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,eAAe;AAAA,cAC3B;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,CAAC,iBAAiB,eAAe;AAAA,cAC5C;AAAA,YACF;AAAA,YACA,QAAQ;AAAA,cACN;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,eAAe;AAAA,cAC3B;AAAA,cACA;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,CAAC,eAAe;AAAA,cAC3B;AAAA,YACF;AAAA,YACA,mBAAmB;AAAA,cACjB,SAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,QACN,kBAAkB,CAACA,SAAQ,CAAC,CAACA,KAAI,iBAAiB;AAAA,MACpD;AAAA,MACA,YAAY;AAAA,QACV,iBAAiBA,MAAK;AACpB,UAAAA,KAAI,mBAAmBA,KAAI,YAAY;AACvC,gBAAM,WAAW,IAAI,YAAYA,IAAG,KAAK,IAAI,aAAaA,IAAG;AAC7D,gBAAM,kBAAkB,MAAM,IAAI,gBAAgBA,IAAG;AACrD,qBAAO,6BAAa,UAAU,iBAAiB;AAAA,YAC7C,GAAGA,KAAI;AAAA,YACP,OAAO;AAAA,YACP,WAAW,MAAM;AACf,cAAAA,KAAI,mBAAmB,KAAK;AAAA,YAC9B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,wBAAwBA,MAAK,MAAM,EAAE,KAAK,GAAG;AAC3C,gBAAM,eAAe,MAAM,IAAI,aAAaA,IAAG;AAC/C,cAAI,eAAe;AACnB,qBAAO,4CAAwB,cAAc;AAAA,YAC3C,iBAAiBA,KAAI;AAAA,YACrB,SAAS,IAAI,aAAaA,IAAG;AAAA,YAC7B,OAAO;AAAA,YACP,gBAAgB,OAAO;AACrB,cAAAA,KAAI,kBAAkB,KAAK;AAC3B,kBAAIA,KAAI,cAAe;AACvB,oBAAM,eAAe;AAAA,YACvB;AAAA,YACA,kBAAkB,OAAO;AACvB,cAAAA,KAAI,oBAAoB,KAAK;AAC7B,kBAAI,MAAM,iBAAkB;AAC5B,6BAAe,EAAE,MAAM,OAAO,aAAa,MAAM,OAAO;AACxD,kBAAI,CAACA,KAAI,wBAAwB;AAC/B,sBAAM,eAAe;AAAA,cACvB;AAAA,YACF;AAAA,YACA,sBAAsBA,KAAI;AAAA,YAC1B,gBAAgBA,KAAI;AAAA,YACpB,oBAAoBA,KAAI;AAAA,YACxB,YAAY;AACV,mBAAK,EAAE,MAAM,SAAS,KAAK,oBAAoB,aAAa,CAAC;AAAA,YAC/D;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,cAAcA,MAAK;AACjB,cAAIA,KAAI,SAAS,CAACA,KAAI,UAAW;AACjC,gBAAM,eAAe,MAAM,IAAI,aAAaA,IAAG;AAC/C,qBAAO,iCAAc,cAAc;AAAA,YACjC,gBAAgB,IAAI,aAAaA,IAAG;AAAA,YACpC,OAAO;AAAA,YACP,QAAQ,IAAI;AACV,iBAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,YAClC;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,iBAAiBA,MAAK;AACpB,cAAI,CAACA,KAAI,MAAO;AAChB,gBAAM,cAAc,MAAM,CAAC,IAAI,aAAaA,IAAG,GAAG,IAAI,aAAaA,IAAG,CAAC;AACvE,qBAAO,+BAAW,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,QAChD;AAAA,QACA,cAAcA,MAAK;AACjB,cAAI,CAACA,KAAI,MAAO;AAChB,qBAAO,wCAAkB,IAAI,OAAOA,IAAG,CAAC;AAAA,QAC1C;AAAA,QACA,UAAUA,MAAK;AACb,cAAI,CAACA,KAAI,MAAO;AAChB,cAAI;AACJ,0CAAS,MAAM;AACb,kBAAM,YAAY,IAAI,aAAaA,IAAG;AACtC,gBAAI,CAAC,UAAW;AAChB,uBAAO,mCAAgB,WAAW;AAAA,cAChC,mBAAmB;AAAA,cACnB,mBAAmB;AAAA,cACnB,eAAe;AAAA,cACf,yBAAyB;AAAA,cACzB,UAAU,IAAI,OAAOA,IAAG;AAAA,cACxB,eAAe;AAAA,cACf,kBAAc,mCAAgB;AAAA,gBAC5B,MAAM,IAAI,aAAaA,IAAG;AAAA,gBAC1B,cAAcA,KAAI;AAAA,gBAClB,SAASA,KAAI;AAAA,cACf,CAAC;AAAA,YACH,CAAC;AAED,gBAAI;AACF,mBAAK,SAAS;AAAA,YAChB,QAAQ;AAAA,YAAC;AAAA,UACX,CAAC;AACD,iBAAO,MAAM,MAAM,WAAW;AAAA,QAChC;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,WAAWA,MAAK,KAAK;AACnB,gBAAM,WAAW,IAAI,YAAYA,IAAG,KAAK,IAAI,aAAaA,IAAG;AAC7D,gBAAM,kBAAkB,MAAM,IAAI,gBAAgBA,IAAG;AACrD,2CAAa,UAAU,iBAAiB;AAAA,YACtC,GAAGA,KAAI;AAAA,YACP,GAAG,IAAI;AAAA,YACP,OAAO;AAAA,YACP,WAAW;AAAA,YACX,WAAW,MAAM;AACf,cAAAA,KAAI,mBAAmB,KAAK;AAAA,YAC9B;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,sBAAsBA,MAAK;AACzB,qCAAI,MAAM;AACR,mBAAO,OAAOA,KAAI,kBAAkB;AAAA,cAClC,OAAO,CAAC,CAAC,IAAI,WAAWA,IAAG;AAAA,cAC3B,aAAa,CAAC,CAAC,IAAI,iBAAiBA,IAAG;AAAA,YACzC,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AAAA,QACA,gBAAgBA,MAAK;AAEnB,cAAIA,KAAI,MAAO;AACf,qCAAI,MAAM;AACR,kBAAM,cAAU,mCAAgB;AAAA,cAC9B,MAAM,IAAI,aAAaA,IAAG;AAAA,cAC1B,cAAcA,KAAI;AAAA,cAClB,SAASA,KAAI;AAAA,YACf,CAAC;AACD,qBAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UACxC,CAAC;AAAA,QACH;AAAA,QACA,cAAcA,MAAK,KAAK;AACtB,gBAAM,eAAe,IAAI,gBAAgB,IAAI,eAAe;AAC5D,cAAI,gBAAgB,QAAQ,CAAC,aAAc;AAC3C,qCAAI,MAAM;AACR,kBAAM,UAAU,IAAI,aAAaA,IAAG;AACpC,qBAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UACxC,CAAC;AAAA,QACH;AAAA,QACA,aAAaA,MAAK;AAChB,UAAAA,KAAI,eAAe,EAAE,MAAM,KAAK,CAAC;AAAA,QACnC;AAAA,QACA,cAAcA,MAAK;AACjB,UAAAA,KAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAAA,QACpC;AAAA,QACA,iBAAiBA,MAAK,KAAK,EAAE,KAAK,GAAG;AACnC,eAAK,EAAE,MAAMA,KAAI,OAAO,oBAAoB,oBAAoB,eAAe,IAAI,CAAC;AAAA,QACtF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;;;ACtQA,mBAA4B;AAC5B,IAAAC,gBAAiC;AAG1B,IAAM,YAAQ,0BAAgC,EAAE;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,iBAAa,gCAA8C,KAAK;","names":["import_dom_query","import_dom_query","import_popper","ctx","import_utils"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/popover.anatomy.ts","../src/popover.connect.ts","../src/popover.dom.ts","../src/popover.machine.ts","../src/popover.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"popover\").parts(\n \"arrow\",\n \"arrowTip\",\n \"anchor\",\n \"trigger\",\n \"indicator\",\n \"positioner\",\n \"content\",\n \"title\",\n \"description\",\n \"closeTrigger\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\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 { MachineApi, Send, State } from \"./popover.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const open = 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 ...state.context.positioning,\n placement: currentPlacement,\n })\n\n return {\n portalled,\n open: open,\n setOpen(nextOpen) {\n if (nextOpen === open) return\n send(nextOpen ? \"OPEN\" : \"CLOSE\")\n },\n reposition(options = {}) {\n send({ type: \"POSITIONING.SET\", options })\n },\n\n getArrowProps() {\n return normalize.element({\n id: dom.getArrowId(state.context),\n ...parts.arrow.attrs,\n dir: state.context.dir,\n style: popperStyles.arrow,\n })\n },\n\n getArrowTipProps() {\n return normalize.element({\n ...parts.arrowTip.attrs,\n dir: state.context.dir,\n style: popperStyles.arrowTip,\n })\n },\n\n getAnchorProps() {\n return normalize.element({\n ...parts.anchor.attrs,\n dir: state.context.dir,\n id: dom.getAnchorId(state.context),\n })\n },\n\n getTriggerProps() {\n return normalize.button({\n ...parts.trigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n \"data-placement\": currentPlacement,\n id: dom.getTriggerId(state.context),\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": open,\n \"data-state\": open ? \"open\" : \"closed\",\n \"aria-controls\": dom.getContentId(state.context),\n onClick(event) {\n if (event.defaultPrevented) return\n send(\"TOGGLE\")\n },\n onBlur(event) {\n send({ type: \"TRIGGER_BLUR\", target: event.relatedTarget })\n },\n })\n },\n\n getIndicatorProps() {\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"data-state\": open ? \"open\" : \"closed\",\n })\n },\n\n getPositionerProps() {\n return normalize.element({\n id: dom.getPositionerId(state.context),\n ...parts.positioner.attrs,\n dir: state.context.dir,\n style: popperStyles.floating,\n })\n },\n\n getContentProps() {\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: dom.getContentId(state.context),\n tabIndex: -1,\n role: \"dialog\",\n hidden: !open,\n \"data-state\": open ? \"open\" : \"closed\",\n \"data-expanded\": dataAttr(open),\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\n getTitleProps() {\n return normalize.element({\n ...parts.title.attrs,\n id: dom.getTitleId(state.context),\n dir: state.context.dir,\n })\n },\n\n getDescriptionProps() {\n return normalize.element({\n ...parts.description.attrs,\n id: dom.getDescriptionId(state.context),\n dir: state.context.dir,\n })\n },\n\n getCloseTriggerProps() {\n return normalize.button({\n ...parts.closeTrigger.attrs,\n dir: state.context.dir,\n id: dom.getCloseTriggerId(state.context),\n type: \"button\",\n \"aria-label\": \"close\",\n onClick(event) {\n if (event.defaultPrevented) return\n send(\"CLOSE\")\n },\n })\n },\n }\n}\n","import { createScope, getFocusables } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./popover.types\"\n\nexport const dom = createScope({\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","import { ariaHidden } from \"@zag-js/aria-hidden\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackDismissableElement } from \"@zag-js/dismissable\"\nimport { getInitialFocus, nextTick, proxyTabFocus, raf } from \"@zag-js/dom-query\"\nimport { getPlacement } from \"@zag-js/popper\"\nimport { preventBodyScroll } from \"@zag-js/remove-scroll\"\nimport { compact } from \"@zag-js/utils\"\nimport { createFocusTrap, type FocusTrap } 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 closeOnEscape: true,\n autoFocus: true,\n modal: false,\n portalled: true,\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 \"CONTROLLED.OPEN\": {\n target: \"open\",\n actions: [\"setInitialFocus\"],\n },\n TOGGLE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnOpen\"],\n },\n {\n target: \"open\",\n actions: [\"invokeOnOpen\", \"setInitialFocus\"],\n },\n ],\n OPEN: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnOpen\"],\n },\n {\n target: \"open\",\n actions: [\"invokeOnOpen\", \"setInitialFocus\"],\n },\n ],\n },\n },\n\n open: {\n activities: [\n \"trapFocus\",\n \"preventScroll\",\n \"hideContentBelow\",\n \"trackPositioning\",\n \"trackDismissableElement\",\n \"proxyTabFocus\",\n ],\n on: {\n \"CONTROLLED.CLOSE\": {\n target: \"closed\",\n actions: [\"setFinalFocus\"],\n },\n CLOSE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnClose\"],\n },\n {\n target: \"closed\",\n actions: [\"invokeOnClose\", \"setFinalFocus\"],\n },\n ],\n TOGGLE: [\n {\n guard: \"isOpenControlled\",\n actions: [\"invokeOnClose\"],\n },\n {\n target: \"closed\",\n actions: [\"invokeOnClose\"],\n },\n ],\n \"POSITIONING.SET\": {\n actions: \"reposition\",\n },\n },\n },\n },\n },\n {\n guards: {\n isOpenControlled: (ctx) => !!ctx[\"open.controlled\"],\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 })\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.closeOnEscape) 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: ctx.onPointerDownOutside,\n onFocusOutside: ctx.onFocusOutside,\n persistentElements: ctx.persistentElements,\n onDismiss() {\n send({ type: \"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 contentEl = dom.getContentEl(ctx)\n if (!contentEl) return\n trap = createFocusTrap(contentEl, {\n escapeDeactivates: false,\n allowOutsideClick: true,\n preventScroll: true,\n returnFocusOnDeactivate: true,\n document: dom.getDoc(ctx),\n fallbackFocus: contentEl,\n initialFocus: getInitialFocus({\n root: dom.getContentEl(ctx),\n getInitialEl: ctx.initialFocusEl,\n enabled: ctx.autoFocus,\n }),\n })\n\n try {\n trap.activate()\n } catch {}\n })\n return () => trap?.deactivate()\n },\n },\n actions: {\n reposition(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 onComplete(data) {\n ctx.currentPlacement = data.placement\n },\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 // handoff to `trapFocus` activity for initial focus\n if (ctx.modal) return\n raf(() => {\n const element = getInitialFocus({\n root: dom.getContentEl(ctx),\n getInitialEl: ctx.initialFocusEl,\n enabled: ctx.autoFocus,\n })\n element?.focus({ preventScroll: true })\n })\n },\n setFinalFocus(ctx, evt) {\n const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus\n if (restoreFocus != null && !restoreFocus) return\n raf(() => {\n const element = dom.getTriggerEl(ctx)\n element?.focus({ preventScroll: true })\n })\n },\n invokeOnOpen(ctx) {\n ctx.onOpenChange?.({ open: true })\n },\n invokeOnClose(ctx) {\n ctx.onOpenChange?.({ open: false })\n },\n toggleVisibility(ctx, evt, { send }) {\n send({ type: ctx.open ? \"CONTROLLED.OPEN\" : \"CONTROLLED.CLOSE\", previousEvent: evt })\n },\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./popover.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"autoFocus\",\n \"closeOnEscape\",\n \"closeOnInteractOutside\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"initialFocusEl\",\n \"modal\",\n \"onEscapeKeyDown\",\n \"onFocusOutside\",\n \"onInteractOutside\",\n \"onOpenChange\",\n \"onPointerDownOutside\",\n \"open.controlled\",\n \"open\",\n \"persistentElements\",\n \"portalled\",\n \"positioning\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["ctx"]}
package/src/index.ts DELETED
@@ -1,14 +0,0 @@
1
- export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from "@zag-js/dismissable"
2
- export { anatomy } from "./popover.anatomy"
3
- export { connect } from "./popover.connect"
4
- export { machine } from "./popover.machine"
5
- export * from "./popover.props"
6
- export type {
7
- MachineApi as Api,
8
- UserDefinedContext as Context,
9
- ElementIds,
10
- OpenChangeDetails,
11
- Placement,
12
- PositioningOptions,
13
- Service,
14
- } from "./popover.types"
@@ -1,16 +0,0 @@
1
- import { createAnatomy } from "@zag-js/anatomy"
2
-
3
- export const anatomy = createAnatomy("popover").parts(
4
- "arrow",
5
- "arrowTip",
6
- "anchor",
7
- "trigger",
8
- "indicator",
9
- "positioner",
10
- "content",
11
- "title",
12
- "description",
13
- "closeTrigger",
14
- )
15
-
16
- export const parts = anatomy.build()
@@ -1,140 +0,0 @@
1
- import { dataAttr } from "@zag-js/dom-query"
2
- import { getPlacementStyles } from "@zag-js/popper"
3
- import type { NormalizeProps, PropTypes } from "@zag-js/types"
4
- import { parts } from "./popover.anatomy"
5
- import { dom } from "./popover.dom"
6
- import type { MachineApi, Send, State } from "./popover.types"
7
-
8
- export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
9
- const open = state.matches("open")
10
-
11
- const currentPlacement = state.context.currentPlacement
12
- const portalled = state.context.currentPortalled
13
- const rendered = state.context.renderedElements
14
-
15
- const popperStyles = getPlacementStyles({
16
- ...state.context.positioning,
17
- placement: currentPlacement,
18
- })
19
-
20
- return {
21
- portalled,
22
- open: open,
23
- setOpen(nextOpen) {
24
- if (nextOpen === open) return
25
- send(nextOpen ? "OPEN" : "CLOSE")
26
- },
27
- reposition(options = {}) {
28
- send({ type: "POSITIONING.SET", options })
29
- },
30
-
31
- getArrowProps() {
32
- return normalize.element({
33
- id: dom.getArrowId(state.context),
34
- ...parts.arrow.attrs,
35
- dir: state.context.dir,
36
- style: popperStyles.arrow,
37
- })
38
- },
39
-
40
- getArrowTipProps() {
41
- return normalize.element({
42
- ...parts.arrowTip.attrs,
43
- dir: state.context.dir,
44
- style: popperStyles.arrowTip,
45
- })
46
- },
47
-
48
- getAnchorProps() {
49
- return normalize.element({
50
- ...parts.anchor.attrs,
51
- dir: state.context.dir,
52
- id: dom.getAnchorId(state.context),
53
- })
54
- },
55
-
56
- getTriggerProps() {
57
- return normalize.button({
58
- ...parts.trigger.attrs,
59
- dir: state.context.dir,
60
- type: "button",
61
- "data-placement": currentPlacement,
62
- id: dom.getTriggerId(state.context),
63
- "aria-haspopup": "dialog",
64
- "aria-expanded": open,
65
- "data-state": open ? "open" : "closed",
66
- "aria-controls": dom.getContentId(state.context),
67
- onClick(event) {
68
- if (event.defaultPrevented) return
69
- send("TOGGLE")
70
- },
71
- onBlur(event) {
72
- send({ type: "TRIGGER_BLUR", target: event.relatedTarget })
73
- },
74
- })
75
- },
76
-
77
- getIndicatorProps() {
78
- return normalize.element({
79
- ...parts.indicator.attrs,
80
- dir: state.context.dir,
81
- "data-state": open ? "open" : "closed",
82
- })
83
- },
84
-
85
- getPositionerProps() {
86
- return normalize.element({
87
- id: dom.getPositionerId(state.context),
88
- ...parts.positioner.attrs,
89
- dir: state.context.dir,
90
- style: popperStyles.floating,
91
- })
92
- },
93
-
94
- getContentProps() {
95
- return normalize.element({
96
- ...parts.content.attrs,
97
- dir: state.context.dir,
98
- id: dom.getContentId(state.context),
99
- tabIndex: -1,
100
- role: "dialog",
101
- hidden: !open,
102
- "data-state": open ? "open" : "closed",
103
- "data-expanded": dataAttr(open),
104
- "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : undefined,
105
- "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : undefined,
106
- "data-placement": currentPlacement,
107
- })
108
- },
109
-
110
- getTitleProps() {
111
- return normalize.element({
112
- ...parts.title.attrs,
113
- id: dom.getTitleId(state.context),
114
- dir: state.context.dir,
115
- })
116
- },
117
-
118
- getDescriptionProps() {
119
- return normalize.element({
120
- ...parts.description.attrs,
121
- id: dom.getDescriptionId(state.context),
122
- dir: state.context.dir,
123
- })
124
- },
125
-
126
- getCloseTriggerProps() {
127
- return normalize.button({
128
- ...parts.closeTrigger.attrs,
129
- dir: state.context.dir,
130
- id: dom.getCloseTriggerId(state.context),
131
- type: "button",
132
- "aria-label": "close",
133
- onClick(event) {
134
- if (event.defaultPrevented) return
135
- send("CLOSE")
136
- },
137
- })
138
- },
139
- }
140
- }
@@ -1,23 +0,0 @@
1
- import { createScope, getFocusables } from "@zag-js/dom-query"
2
- import type { MachineContext as Ctx } from "./popover.types"
3
-
4
- export const dom = createScope({
5
- getAnchorId: (ctx: Ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
6
- getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
7
- getContentId: (ctx: Ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
8
- getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
9
- getArrowId: (ctx: Ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
10
- getTitleId: (ctx: Ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
11
- getDescriptionId: (ctx: Ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
12
- getCloseTriggerId: (ctx: Ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
13
-
14
- getAnchorEl: (ctx: Ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
15
- getTriggerEl: (ctx: Ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
16
- getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),
17
- getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
18
- getTitleEl: (ctx: Ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
19
- getDescriptionEl: (ctx: Ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
20
-
21
- getFocusableEls: (ctx: Ctx) => getFocusables(dom.getContentEl(ctx)),
22
- getFirstFocusableEl: (ctx: Ctx) => dom.getFocusableEls(ctx)[0],
23
- })
@@ -1,263 +0,0 @@
1
- import { ariaHidden } from "@zag-js/aria-hidden"
2
- import { createMachine } from "@zag-js/core"
3
- import { trackDismissableElement } from "@zag-js/dismissable"
4
- import { getInitialFocus, nextTick, proxyTabFocus, raf } from "@zag-js/dom-query"
5
- import { getPlacement } from "@zag-js/popper"
6
- import { preventBodyScroll } from "@zag-js/remove-scroll"
7
- import { compact } from "@zag-js/utils"
8
- import { createFocusTrap, type FocusTrap } from "focus-trap"
9
- import { dom } from "./popover.dom"
10
- import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types"
11
-
12
- export function machine(userContext: UserDefinedContext) {
13
- const ctx = compact(userContext)
14
- return createMachine<MachineContext, MachineState>(
15
- {
16
- id: "popover",
17
- initial: ctx.open ? "open" : "closed",
18
- context: {
19
- closeOnInteractOutside: true,
20
- closeOnEscape: true,
21
- autoFocus: true,
22
- modal: false,
23
- portalled: true,
24
- positioning: {
25
- placement: "bottom",
26
- ...ctx.positioning,
27
- },
28
- currentPlacement: undefined,
29
- ...ctx,
30
- renderedElements: {
31
- title: true,
32
- description: true,
33
- },
34
- },
35
-
36
- computed: {
37
- currentPortalled: (ctx) => !!ctx.modal || !!ctx.portalled,
38
- },
39
-
40
- watch: {
41
- open: ["toggleVisibility"],
42
- },
43
-
44
- entry: ["checkRenderedElements"],
45
-
46
- states: {
47
- closed: {
48
- on: {
49
- "CONTROLLED.OPEN": {
50
- target: "open",
51
- actions: ["setInitialFocus"],
52
- },
53
- TOGGLE: [
54
- {
55
- guard: "isOpenControlled",
56
- actions: ["invokeOnOpen"],
57
- },
58
- {
59
- target: "open",
60
- actions: ["invokeOnOpen", "setInitialFocus"],
61
- },
62
- ],
63
- OPEN: [
64
- {
65
- guard: "isOpenControlled",
66
- actions: ["invokeOnOpen"],
67
- },
68
- {
69
- target: "open",
70
- actions: ["invokeOnOpen", "setInitialFocus"],
71
- },
72
- ],
73
- },
74
- },
75
-
76
- open: {
77
- activities: [
78
- "trapFocus",
79
- "preventScroll",
80
- "hideContentBelow",
81
- "trackPositioning",
82
- "trackDismissableElement",
83
- "proxyTabFocus",
84
- ],
85
- on: {
86
- "CONTROLLED.CLOSE": {
87
- target: "closed",
88
- actions: ["setFinalFocus"],
89
- },
90
- CLOSE: [
91
- {
92
- guard: "isOpenControlled",
93
- actions: ["invokeOnClose"],
94
- },
95
- {
96
- target: "closed",
97
- actions: ["invokeOnClose", "setFinalFocus"],
98
- },
99
- ],
100
- TOGGLE: [
101
- {
102
- guard: "isOpenControlled",
103
- actions: ["invokeOnClose"],
104
- },
105
- {
106
- target: "closed",
107
- actions: ["invokeOnClose"],
108
- },
109
- ],
110
- "POSITIONING.SET": {
111
- actions: "reposition",
112
- },
113
- },
114
- },
115
- },
116
- },
117
- {
118
- guards: {
119
- isOpenControlled: (ctx) => !!ctx["open.controlled"],
120
- },
121
- activities: {
122
- trackPositioning(ctx) {
123
- ctx.currentPlacement = ctx.positioning.placement
124
- const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx)
125
- const getPositionerEl = () => dom.getPositionerEl(ctx)
126
- return getPlacement(anchorEl, getPositionerEl, {
127
- ...ctx.positioning,
128
- defer: true,
129
- onComplete(data) {
130
- ctx.currentPlacement = data.placement
131
- },
132
- })
133
- },
134
- trackDismissableElement(ctx, _evt, { send }) {
135
- const getContentEl = () => dom.getContentEl(ctx)
136
- let restoreFocus = true
137
- return trackDismissableElement(getContentEl, {
138
- pointerBlocking: ctx.modal,
139
- exclude: dom.getTriggerEl(ctx),
140
- defer: true,
141
- onEscapeKeyDown(event) {
142
- ctx.onEscapeKeyDown?.(event)
143
- if (ctx.closeOnEscape) return
144
- event.preventDefault()
145
- },
146
- onInteractOutside(event) {
147
- ctx.onInteractOutside?.(event)
148
- if (event.defaultPrevented) return
149
- restoreFocus = !(event.detail.focusable || event.detail.contextmenu)
150
- if (!ctx.closeOnInteractOutside) {
151
- event.preventDefault()
152
- }
153
- },
154
- onPointerDownOutside: ctx.onPointerDownOutside,
155
- onFocusOutside: ctx.onFocusOutside,
156
- persistentElements: ctx.persistentElements,
157
- onDismiss() {
158
- send({ type: "CLOSE", src: "interact-outside", restoreFocus })
159
- },
160
- })
161
- },
162
- proxyTabFocus(ctx) {
163
- if (ctx.modal || !ctx.portalled) return
164
- const getContentEl = () => dom.getContentEl(ctx)
165
- return proxyTabFocus(getContentEl, {
166
- triggerElement: dom.getTriggerEl(ctx),
167
- defer: true,
168
- onFocus(el) {
169
- el.focus({ preventScroll: true })
170
- },
171
- })
172
- },
173
- hideContentBelow(ctx) {
174
- if (!ctx.modal) return
175
- const getElements = () => [dom.getContentEl(ctx), dom.getTriggerEl(ctx)]
176
- return ariaHidden(getElements, { defer: true })
177
- },
178
- preventScroll(ctx) {
179
- if (!ctx.modal) return
180
- return preventBodyScroll(dom.getDoc(ctx))
181
- },
182
- trapFocus(ctx) {
183
- if (!ctx.modal) return
184
- let trap: FocusTrap | undefined
185
- nextTick(() => {
186
- const contentEl = dom.getContentEl(ctx)
187
- if (!contentEl) return
188
- trap = createFocusTrap(contentEl, {
189
- escapeDeactivates: false,
190
- allowOutsideClick: true,
191
- preventScroll: true,
192
- returnFocusOnDeactivate: true,
193
- document: dom.getDoc(ctx),
194
- fallbackFocus: contentEl,
195
- initialFocus: getInitialFocus({
196
- root: dom.getContentEl(ctx),
197
- getInitialEl: ctx.initialFocusEl,
198
- enabled: ctx.autoFocus,
199
- }),
200
- })
201
-
202
- try {
203
- trap.activate()
204
- } catch {}
205
- })
206
- return () => trap?.deactivate()
207
- },
208
- },
209
- actions: {
210
- reposition(ctx, evt) {
211
- const anchorEl = dom.getAnchorEl(ctx) ?? dom.getTriggerEl(ctx)
212
- const getPositionerEl = () => dom.getPositionerEl(ctx)
213
- getPlacement(anchorEl, getPositionerEl, {
214
- ...ctx.positioning,
215
- ...evt.options,
216
- defer: true,
217
- listeners: false,
218
- onComplete(data) {
219
- ctx.currentPlacement = data.placement
220
- },
221
- })
222
- },
223
- checkRenderedElements(ctx) {
224
- raf(() => {
225
- Object.assign(ctx.renderedElements, {
226
- title: !!dom.getTitleEl(ctx),
227
- description: !!dom.getDescriptionEl(ctx),
228
- })
229
- })
230
- },
231
- setInitialFocus(ctx) {
232
- // handoff to `trapFocus` activity for initial focus
233
- if (ctx.modal) return
234
- raf(() => {
235
- const element = getInitialFocus({
236
- root: dom.getContentEl(ctx),
237
- getInitialEl: ctx.initialFocusEl,
238
- enabled: ctx.autoFocus,
239
- })
240
- element?.focus({ preventScroll: true })
241
- })
242
- },
243
- setFinalFocus(ctx, evt) {
244
- const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus
245
- if (restoreFocus != null && !restoreFocus) return
246
- raf(() => {
247
- const element = dom.getTriggerEl(ctx)
248
- element?.focus({ preventScroll: true })
249
- })
250
- },
251
- invokeOnOpen(ctx) {
252
- ctx.onOpenChange?.({ open: true })
253
- },
254
- invokeOnClose(ctx) {
255
- ctx.onOpenChange?.({ open: false })
256
- },
257
- toggleVisibility(ctx, evt, { send }) {
258
- send({ type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt })
259
- },
260
- },
261
- },
262
- )
263
- }
@@ -1,27 +0,0 @@
1
- import { createProps } from "@zag-js/types"
2
- import { createSplitProps } from "@zag-js/utils"
3
- import type { UserDefinedContext } from "./popover.types"
4
-
5
- export const props = createProps<UserDefinedContext>()([
6
- "autoFocus",
7
- "closeOnEscape",
8
- "closeOnInteractOutside",
9
- "dir",
10
- "getRootNode",
11
- "id",
12
- "ids",
13
- "initialFocusEl",
14
- "modal",
15
- "onEscapeKeyDown",
16
- "onFocusOutside",
17
- "onInteractOutside",
18
- "onOpenChange",
19
- "onPointerDownOutside",
20
- "open.controlled",
21
- "open",
22
- "persistentElements",
23
- "portalled",
24
- "positioning",
25
- ])
26
-
27
- export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
@@ -1,170 +0,0 @@
1
- import type { Machine, StateMachine as S } from "@zag-js/core"
2
- import type { DismissableElementHandlers, PersistentElementOptions } from "@zag-js/dismissable"
3
- import type { Placement, PositioningOptions } from "@zag-js/popper"
4
- import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
5
-
6
- /* -----------------------------------------------------------------------------
7
- * Callback details
8
- * -----------------------------------------------------------------------------*/
9
-
10
- export interface OpenChangeDetails {
11
- open: boolean
12
- }
13
-
14
- /* -----------------------------------------------------------------------------
15
- * Machine context
16
- * -----------------------------------------------------------------------------*/
17
-
18
- export type ElementIds = Partial<{
19
- anchor: string
20
- trigger: string
21
- content: string
22
- title: string
23
- description: string
24
- closeTrigger: string
25
- positioner: string
26
- arrow: string
27
- }>
28
-
29
- interface PublicContext
30
- extends CommonProperties,
31
- DirectionProperty,
32
- DismissableElementHandlers,
33
- PersistentElementOptions {
34
- /**
35
- * The ids of the elements in the popover. Useful for composition.
36
- */
37
- ids?: ElementIds
38
- /**
39
- * Whether the popover should be modal. When set to `true`:
40
- * - interaction with outside elements will be disabled
41
- * - only popover content will be visible to screen readers
42
- * - scrolling is blocked
43
- * - focus is trapped within the popover
44
- *
45
- * @default false
46
- */
47
- modal?: boolean
48
- /**
49
- * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
50
- * of the popover content.
51
- *
52
- * @default true
53
- */
54
- portalled?: boolean
55
- /**
56
- * Whether to automatically set focus on the first focusable
57
- * content within the popover when opened.
58
- *
59
- * @default true
60
- */
61
- autoFocus?: boolean
62
- /**
63
- * The element to focus on when the popover is opened.
64
- */
65
- initialFocusEl?: () => HTMLElement | null
66
- /**
67
- * Whether to close the popover when the user clicks outside of the popover.
68
- * @default true
69
- */
70
- closeOnInteractOutside?: boolean
71
- /**
72
- * Whether to close the popover when the escape key is pressed.
73
- * @default true
74
- */
75
- closeOnEscape?: boolean
76
- /**
77
- * Function invoked when the popover opens or closes
78
- */
79
- onOpenChange?: (details: OpenChangeDetails) => void
80
- /**
81
- * The user provided options used to position the popover content
82
- */
83
- positioning: PositioningOptions
84
- /**
85
- * Whether the popover is open
86
- */
87
- open?: boolean
88
- /**
89
- * Whether the popover is controlled by the user
90
- */
91
- "open.controlled"?: boolean
92
- }
93
-
94
- export type UserDefinedContext = RequiredBy<PublicContext, "id">
95
-
96
- type ComputedContext = Readonly<{
97
- /**
98
- * @computed
99
- * The computed value of `portalled`
100
- */
101
- currentPortalled: boolean
102
- }>
103
-
104
- interface PrivateContext {
105
- /**
106
- * @internal
107
- * The elements that are rendered on mount
108
- */
109
- renderedElements: {
110
- title: boolean
111
- description: boolean
112
- }
113
- /**
114
- * @internal
115
- * The computed placement (maybe different from initial placement)
116
- */
117
- currentPlacement?: Placement
118
- }
119
-
120
- export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
121
-
122
- export interface MachineState {
123
- value: "open" | "closed"
124
- }
125
-
126
- export type State = S.State<MachineContext, MachineState>
127
-
128
- export type Send = S.Send<S.AnyEventObject>
129
-
130
- export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
131
-
132
- /* -----------------------------------------------------------------------------
133
- * Component API
134
- * -----------------------------------------------------------------------------*/
135
-
136
- export interface MachineApi<T extends PropTypes = PropTypes> {
137
- /**
138
- * Whether the popover is portalled.
139
- */
140
- portalled: boolean
141
- /**
142
- * Whether the popover is open
143
- */
144
- open: boolean
145
- /**
146
- * Function to open or close the popover
147
- */
148
- setOpen(open: boolean): void
149
- /**
150
- * Function to reposition the popover
151
- */
152
- reposition(options?: Partial<PositioningOptions>): void
153
-
154
- getArrowProps(): T["element"]
155
- getArrowTipProps(): T["element"]
156
- getAnchorProps(): T["element"]
157
- getTriggerProps(): T["button"]
158
- getIndicatorProps(): T["element"]
159
- getPositionerProps(): T["element"]
160
- getContentProps(): T["element"]
161
- getTitleProps(): T["element"]
162
- getDescriptionProps(): T["element"]
163
- getCloseTriggerProps(): T["button"]
164
- }
165
-
166
- /* -----------------------------------------------------------------------------
167
- * Re-exported types
168
- * -----------------------------------------------------------------------------*/
169
-
170
- export type { Placement, PositioningOptions }