@zag-js/popover 1.41.0 → 2.0.0-next.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.
Files changed (11) hide show
  1. package/dist/popover.connect.js +13 -18
  2. package/dist/popover.connect.mjs +13 -18
  3. package/dist/popover.dom.d.mts +1 -2
  4. package/dist/popover.dom.d.ts +1 -2
  5. package/dist/popover.dom.js +17 -21
  6. package/dist/popover.dom.mjs +18 -21
  7. package/dist/popover.machine.js +8 -6
  8. package/dist/popover.machine.mjs +8 -6
  9. package/dist/popover.types.d.mts +4 -0
  10. package/dist/popover.types.d.ts +4 -0
  11. package/package.json +11 -11
package/dist/popover.connect.js CHANGED
@@ -48,7 +48,8 @@ function connect(service, normalize) {
48
48
  const triggerValue = context.get("triggerValue");
49
49
  const popperStyles = (0, import_popper.getPlacementStyles)({
50
50
  ...prop("positioning"),
51
- placement: currentPlacement
51
+ placement: currentPlacement,
52
+ positioned: context.get("positioned")
52
53
  });
53
54
  return {
54
55
  portalled,
@@ -67,37 +68,33 @@ function connect(service, normalize) {
67
68
  },
68
69
  getArrowProps() {
69
70
  return normalize.element({
70
- id: dom.getArrowId(scope),
71
- ...import_popover.parts.arrow.attrs,
71
+ ...import_popover.parts.arrow.attrs(scope.id),
72
72
  dir: prop("dir"),
73
73
  style: popperStyles.arrow
74
74
  });
75
75
  },
76
76
  getArrowTipProps() {
77
77
  return normalize.element({
78
- ...import_popover.parts.arrowTip.attrs,
78
+ ...import_popover.parts.arrowTip.attrs(scope.id),
79
79
  dir: prop("dir"),
80
80
  style: popperStyles.arrowTip
81
81
  });
82
82
  },
83
83
  getAnchorProps() {
84
84
  return normalize.element({
85
- ...import_popover.parts.anchor.attrs,
86
- dir: prop("dir"),
87
- id: dom.getAnchorId(scope)
85
+ ...import_popover.parts.anchor.attrs(scope.id),
86
+ dir: prop("dir")
88
87
  });
89
88
  },
90
89
  getTriggerProps(props = {}) {
91
90
  const { value } = props;
92
91
  const current = value == null ? false : triggerValue === value;
93
92
  return normalize.button({
94
- ...import_popover.parts.trigger.attrs,
93
+ ...import_popover.parts.trigger.attrs(scope.id),
95
94
  dir: prop("dir"),
96
95
  type: "button",
97
96
  "data-placement": currentPlacement,
98
97
  "data-side": currentPlacementSide,
99
- id: dom.getTriggerId(scope, value),
100
- "data-ownedby": scope.id,
101
98
  "data-value": value,
102
99
  "data-current": (0, import_dom_query.dataAttr)(current),
103
100
  "aria-haspopup": "dialog",
@@ -122,22 +119,21 @@ function connect(service, normalize) {
122
119
  },
123
120
  getIndicatorProps() {
124
121
  return normalize.element({
125
- ...import_popover.parts.indicator.attrs,
122
+ ...import_popover.parts.indicator.attrs(scope.id),
126
123
  dir: prop("dir"),
127
124
  "data-state": open ? "open" : "closed"
128
125
  });
129
126
  },
130
127
  getPositionerProps() {
131
128
  return normalize.element({
132
- id: dom.getPositionerId(scope),
133
- ...import_popover.parts.positioner.attrs,
129
+ ...import_popover.parts.positioner.attrs(scope.id),
134
130
  dir: prop("dir"),
135
131
  style: popperStyles.floating
136
132
  });
137
133
  },
138
134
  getContentProps() {
139
135
  return normalize.element({
140
- ...import_popover.parts.content.attrs,
136
+ ...import_popover.parts.content.attrs(scope.id),
141
137
  dir: prop("dir"),
142
138
  id: dom.getContentId(scope),
143
139
  tabIndex: -1,
@@ -154,23 +150,22 @@ function connect(service, normalize) {
154
150
  },
155
151
  getTitleProps() {
156
152
  return normalize.element({
157
- ...import_popover.parts.title.attrs,
153
+ ...import_popover.parts.title.attrs(scope.id),
158
154
  id: dom.getTitleId(scope),
159
155
  dir: prop("dir")
160
156
  });
161
157
  },
162
158
  getDescriptionProps() {
163
159
  return normalize.element({
164
- ...import_popover.parts.description.attrs,
160
+ ...import_popover.parts.description.attrs(scope.id),
165
161
  id: dom.getDescriptionId(scope),
166
162
  dir: prop("dir")
167
163
  });
168
164
  },
169
165
  getCloseTriggerProps() {
170
166
  return normalize.button({
171
- ...import_popover.parts.closeTrigger.attrs,
167
+ ...import_popover.parts.closeTrigger.attrs(scope.id),
172
168
  dir: prop("dir"),
173
- id: dom.getCloseTriggerId(scope),
174
169
  type: "button",
175
170
  "aria-label": translations.closeTriggerLabel,
176
171
  onClick(event) {
package/dist/popover.connect.mjs CHANGED
@@ -14,7 +14,8 @@ function connect(service, normalize) {
14
14
  const triggerValue = context.get("triggerValue");
15
15
  const popperStyles = getPlacementStyles({
16
16
  ...prop("positioning"),
17
- placement: currentPlacement
17
+ placement: currentPlacement,
18
+ positioned: context.get("positioned")
18
19
  });
19
20
  return {
20
21
  portalled,
@@ -33,37 +34,33 @@ function connect(service, normalize) {
33
34
  },
34
35
  getArrowProps() {
35
36
  return normalize.element({
36
- id: dom.getArrowId(scope),
37
- ...parts.arrow.attrs,
37
+ ...parts.arrow.attrs(scope.id),
38
38
  dir: prop("dir"),
39
39
  style: popperStyles.arrow
40
40
  });
41
41
  },
42
42
  getArrowTipProps() {
43
43
  return normalize.element({
44
- ...parts.arrowTip.attrs,
44
+ ...parts.arrowTip.attrs(scope.id),
45
45
  dir: prop("dir"),
46
46
  style: popperStyles.arrowTip
47
47
  });
48
48
  },
49
49
  getAnchorProps() {
50
50
  return normalize.element({
51
- ...parts.anchor.attrs,
52
- dir: prop("dir"),
53
- id: dom.getAnchorId(scope)
51
+ ...parts.anchor.attrs(scope.id),
52
+ dir: prop("dir")
54
53
  });
55
54
  },
56
55
  getTriggerProps(props = {}) {
57
56
  const { value } = props;
58
57
  const current = value == null ? false : triggerValue === value;
59
58
  return normalize.button({
60
- ...parts.trigger.attrs,
59
+ ...parts.trigger.attrs(scope.id),
61
60
  dir: prop("dir"),
62
61
  type: "button",
63
62
  "data-placement": currentPlacement,
64
63
  "data-side": currentPlacementSide,
65
- id: dom.getTriggerId(scope, value),
66
- "data-ownedby": scope.id,
67
64
  "data-value": value,
68
65
  "data-current": dataAttr(current),
69
66
  "aria-haspopup": "dialog",
@@ -88,22 +85,21 @@ function connect(service, normalize) {
88
85
  },
89
86
  getIndicatorProps() {
90
87
  return normalize.element({
91
- ...parts.indicator.attrs,
88
+ ...parts.indicator.attrs(scope.id),
92
89
  dir: prop("dir"),
93
90
  "data-state": open ? "open" : "closed"
94
91
  });
95
92
  },
96
93
  getPositionerProps() {
97
94
  return normalize.element({
98
- id: dom.getPositionerId(scope),
99
- ...parts.positioner.attrs,
95
+ ...parts.positioner.attrs(scope.id),
100
96
  dir: prop("dir"),
101
97
  style: popperStyles.floating
102
98
  });
103
99
  },
104
100
  getContentProps() {
105
101
  return normalize.element({
106
- ...parts.content.attrs,
102
+ ...parts.content.attrs(scope.id),
107
103
  dir: prop("dir"),
108
104
  id: dom.getContentId(scope),
109
105
  tabIndex: -1,
@@ -120,23 +116,22 @@ function connect(service, normalize) {
120
116
  },
121
117
  getTitleProps() {
122
118
  return normalize.element({
123
- ...parts.title.attrs,
119
+ ...parts.title.attrs(scope.id),
124
120
  id: dom.getTitleId(scope),
125
121
  dir: prop("dir")
126
122
  });
127
123
  },
128
124
  getDescriptionProps() {
129
125
  return normalize.element({
130
- ...parts.description.attrs,
126
+ ...parts.description.attrs(scope.id),
131
127
  id: dom.getDescriptionId(scope),
132
128
  dir: prop("dir")
133
129
  });
134
130
  },
135
131
  getCloseTriggerProps() {
136
132
  return normalize.button({
137
- ...parts.closeTrigger.attrs,
133
+ ...parts.closeTrigger.attrs(scope.id),
138
134
  dir: prop("dir"),
139
- id: dom.getCloseTriggerId(scope),
140
135
  type: "button",
141
136
  "aria-label": translations.closeTriggerLabel,
142
137
  onClick(event) {
package/dist/popover.dom.d.mts CHANGED
@@ -9,7 +9,6 @@ declare const getTitleId: (scope: Scope) => any;
9
9
  declare const getDescriptionId: (scope: Scope) => any;
10
10
  declare const getCloseTriggerId: (scope: Scope) => any;
11
11
  declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
12
- declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
13
12
  declare const getTriggerEls: (scope: Scope) => HTMLElement[];
14
13
  declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
15
14
  declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -19,4 +18,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
19
18
  declare const getFocusableEls: (scope: Scope) => HTMLElement[];
20
19
  declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
21
20
 
22
- export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerEls, getTriggerId };
21
+ export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
package/dist/popover.dom.d.ts CHANGED
@@ -9,7 +9,6 @@ declare const getTitleId: (scope: Scope) => any;
9
9
  declare const getDescriptionId: (scope: Scope) => any;
10
10
  declare const getCloseTriggerId: (scope: Scope) => any;
11
11
  declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
12
- declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
13
12
  declare const getTriggerEls: (scope: Scope) => HTMLElement[];
14
13
  declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
15
14
  declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -19,4 +18,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
19
18
  declare const getFocusableEls: (scope: Scope) => HTMLElement[];
20
19
  declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
21
20
 
22
- export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerEls, getTriggerId };
21
+ export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
package/dist/popover.dom.js CHANGED
@@ -35,38 +35,35 @@ __export(popover_dom_exports, {
35
35
  getPositionerId: () => getPositionerId,
36
36
  getTitleEl: () => getTitleEl,
37
37
  getTitleId: () => getTitleId,
38
- getTriggerEl: () => getTriggerEl,
39
38
  getTriggerEls: () => getTriggerEls,
40
39
  getTriggerId: () => getTriggerId
41
40
  });
42
41
  module.exports = __toCommonJS(popover_dom_exports);
43
42
  var import_dom_query = require("@zag-js/dom-query");
44
43
  var import_utils = require("@zag-js/utils");
45
- var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
44
+ var import_popover = require("./popover.anatomy.js");
45
+ var getAnchorId = (scope) => scope.ids?.anchor ?? `${scope.id}:anchor`;
46
46
  var getTriggerId = (scope, value) => {
47
47
  const customId = scope.ids?.trigger;
48
48
  if (customId != null) return (0, import_utils.isFunction)(customId) ? customId(value) : customId;
49
- return value ? `popover:${scope.id}:trigger:${value}` : `popover:${scope.id}:trigger`;
49
+ return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
50
50
  };
51
- var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
52
- var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
53
- var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
54
- var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
55
- var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
56
- var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
57
- var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
58
- var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
59
- var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
51
+ var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
52
+ var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:positioner`;
53
+ var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
54
+ var getTitleId = (scope) => scope.ids?.title ?? `${scope.id}:title`;
55
+ var getDescriptionId = (scope) => scope.ids?.description ?? `${scope.id}:desc`;
56
+ var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `${scope.id}:close`;
57
+ var getAnchorEl = (scope) => scope.query(scope.selector(import_popover.parts.anchor));
58
+ var getTriggerEls = (scope) => scope.queryAll(scope.selector(import_popover.parts.trigger));
60
59
  var getActiveTriggerEl = (scope, value) => {
61
- if (value == null) {
62
- return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
63
- }
64
- return scope.getById(getTriggerId(scope, value));
60
+ if (value == null) return getTriggerEls(scope)[0];
61
+ return scope.query(`${scope.selector(import_popover.parts.trigger)}[data-value="${value}"]`);
65
62
  };
66
- var getContentEl = (scope) => scope.getById(getContentId(scope));
67
- var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
68
- var getTitleEl = (scope) => scope.getById(getTitleId(scope));
69
- var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
63
+ var getContentEl = (scope) => scope.query(scope.selector(import_popover.parts.content));
64
+ var getPositionerEl = (scope) => scope.query(scope.selector(import_popover.parts.positioner));
65
+ var getTitleEl = (scope) => scope.query(scope.selector(import_popover.parts.title));
66
+ var getDescriptionEl = (scope) => scope.query(scope.selector(import_popover.parts.description));
70
67
  var getFocusableEls = (scope) => (0, import_dom_query.getFocusables)(getContentEl(scope));
71
68
  var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
72
69
  // Annotate the CommonJS export names for ESM import in node:
@@ -86,7 +83,6 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
86
83
  getPositionerId,
87
84
  getTitleEl,
88
85
  getTitleId,
89
- getTriggerEl,
90
86
  getTriggerEls,
91
87
  getTriggerId
92
88
  });
package/dist/popover.dom.mjs CHANGED
@@ -1,31 +1,29 @@
1
1
  // src/popover.dom.ts
2
- import { getFocusables, queryAll } from "@zag-js/dom-query";
2
+ import { getFocusables } from "@zag-js/dom-query";
3
3
  import { isFunction } from "@zag-js/utils";
4
- var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
4
+ import { parts } from "./popover.anatomy.mjs";
5
+ var getAnchorId = (scope) => scope.ids?.anchor ?? `${scope.id}:anchor`;
5
6
  var getTriggerId = (scope, value) => {
6
7
  const customId = scope.ids?.trigger;
7
8
  if (customId != null) return isFunction(customId) ? customId(value) : customId;
8
- return value ? `popover:${scope.id}:trigger:${value}` : `popover:${scope.id}:trigger`;
9
+ return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
9
10
  };
10
- var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
11
- var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
12
- var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
13
- var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
14
- var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
15
- var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
16
- var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
17
- var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
18
- var getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
11
+ var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
12
+ var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:positioner`;
13
+ var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
14
+ var getTitleId = (scope) => scope.ids?.title ?? `${scope.id}:title`;
15
+ var getDescriptionId = (scope) => scope.ids?.description ?? `${scope.id}:desc`;
16
+ var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `${scope.id}:close`;
17
+ var getAnchorEl = (scope) => scope.query(scope.selector(parts.anchor));
18
+ var getTriggerEls = (scope) => scope.queryAll(scope.selector(parts.trigger));
19
19
  var getActiveTriggerEl = (scope, value) => {
20
- if (value == null) {
21
- return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
22
- }
23
- return scope.getById(getTriggerId(scope, value));
20
+ if (value == null) return getTriggerEls(scope)[0];
21
+ return scope.query(`${scope.selector(parts.trigger)}[data-value="${value}"]`);
24
22
  };
25
- var getContentEl = (scope) => scope.getById(getContentId(scope));
26
- var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
27
- var getTitleEl = (scope) => scope.getById(getTitleId(scope));
28
- var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
23
+ var getContentEl = (scope) => scope.query(scope.selector(parts.content));
24
+ var getPositionerEl = (scope) => scope.query(scope.selector(parts.positioner));
25
+ var getTitleEl = (scope) => scope.query(scope.selector(parts.title));
26
+ var getDescriptionEl = (scope) => scope.query(scope.selector(parts.description));
29
27
  var getFocusableEls = (scope) => getFocusables(getContentEl(scope));
30
28
  var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
31
29
  export {
@@ -44,7 +42,6 @@ export {
44
42
  getPositionerId,
45
43
  getTitleEl,
46
44
  getTitleId,
47
- getTriggerEl,
48
45
  getTriggerEls,
49
46
  getTriggerId
50
47
  };
package/dist/popover.machine.js CHANGED
@@ -82,7 +82,8 @@ var machine = (0, import_core.createMachine)({
82
82
  const triggerElement = dom.getActiveTriggerEl(scope, value);
83
83
  onTriggerValueChange({ value, triggerElement });
84
84
  }
85
- }))
85
+ })),
86
+ positioned: bindable(() => ({ defaultValue: false }))
86
87
  };
87
88
  },
88
89
  computed: {
@@ -177,12 +178,13 @@ var machine = (0, import_core.createMachine)({
177
178
  context.set("currentPlacement", prop("positioning").placement);
178
179
  const anchorEl = dom.getAnchorEl(scope);
179
180
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
180
- const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
181
- return (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
181
+ const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
182
+ return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
182
183
  ...prop("positioning"),
183
184
  defer: true,
184
185
  onComplete(data) {
185
186
  context.set("currentPlacement", data.placement);
187
+ context.set("positioned", true);
186
188
  }
187
189
  });
188
190
  },
@@ -192,7 +194,7 @@ var machine = (0, import_core.createMachine)({
192
194
  return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
193
195
  type: "popover",
194
196
  pointerBlocking: prop("modal"),
195
- exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
197
+ exclude: dom.getTriggerEls(scope),
196
198
  defer: true,
197
199
  onEscapeKeyDown(event) {
198
200
  prop("onEscapeKeyDown")?.(event);
@@ -268,8 +270,8 @@ var machine = (0, import_core.createMachine)({
268
270
  reposition({ event, prop, scope, context }) {
269
271
  const anchorEl = dom.getAnchorEl(scope);
270
272
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
271
- const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
272
- (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
273
+ const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
274
+ (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
273
275
  ...prop("positioning"),
274
276
  ...event.options,
275
277
  defer: true,
package/dist/popover.machine.mjs CHANGED
@@ -48,7 +48,8 @@ var machine = createMachine({
48
48
  const triggerElement = dom.getActiveTriggerEl(scope, value);
49
49
  onTriggerValueChange({ value, triggerElement });
50
50
  }
51
- }))
51
+ })),
52
+ positioned: bindable(() => ({ defaultValue: false }))
52
53
  };
53
54
  },
54
55
  computed: {
@@ -143,12 +144,13 @@ var machine = createMachine({
143
144
  context.set("currentPlacement", prop("positioning").placement);
144
145
  const anchorEl = dom.getAnchorEl(scope);
145
146
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
146
- const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
147
- return getPlacement(getTriggerEl2, getPositionerEl2, {
147
+ const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
148
+ return getPlacement(getTriggerEl, getPositionerEl2, {
148
149
  ...prop("positioning"),
149
150
  defer: true,
150
151
  onComplete(data) {
151
152
  context.set("currentPlacement", data.placement);
153
+ context.set("positioned", true);
152
154
  }
153
155
  });
154
156
  },
@@ -158,7 +160,7 @@ var machine = createMachine({
158
160
  return trackDismissableElement(getContentEl2, {
159
161
  type: "popover",
160
162
  pointerBlocking: prop("modal"),
161
- exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
163
+ exclude: dom.getTriggerEls(scope),
162
164
  defer: true,
163
165
  onEscapeKeyDown(event) {
164
166
  prop("onEscapeKeyDown")?.(event);
@@ -234,8 +236,8 @@ var machine = createMachine({
234
236
  reposition({ event, prop, scope, context }) {
235
237
  const anchorEl = dom.getAnchorEl(scope);
236
238
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
237
- const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
238
- getPlacement(getTriggerEl2, getPositionerEl2, {
239
+ const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
240
+ getPlacement(getTriggerEl, getPositionerEl2, {
239
241
  ...prop("positioning"),
240
242
  ...event.options,
241
243
  defer: true,
package/dist/popover.types.d.mts CHANGED
@@ -141,6 +141,10 @@ interface PrivateContext {
141
141
  * The trigger value
142
142
  */
143
143
  triggerValue: string | null;
144
+ /**
145
+ * Whether the popover has been positioned
146
+ */
147
+ positioned: boolean;
144
148
  }
145
149
  interface PopoverSchema {
146
150
  props: RequiredBy<PopoverProps, PropsWithDefault>;
package/dist/popover.types.d.ts CHANGED
@@ -141,6 +141,10 @@ interface PrivateContext {
141
141
  * The trigger value
142
142
  */
143
143
  triggerValue: string | null;
144
+ /**
145
+ * Whether the popover has been positioned
146
+ */
147
+ positioned: boolean;
144
148
  }
145
149
  interface PopoverSchema {
146
150
  props: RequiredBy<PopoverProps, PropsWithDefault>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popover",
3
- "version": "1.41.0",
3
+ "version": "2.0.0-next.0",
4
4
  "description": "Core logic for the popover widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,16 +26,16 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "1.41.0",
30
- "@zag-js/aria-hidden": "1.41.0",
31
- "@zag-js/core": "1.41.0",
32
- "@zag-js/dom-query": "1.41.0",
33
- "@zag-js/utils": "1.41.0",
34
- "@zag-js/dismissable": "1.41.0",
35
- "@zag-js/popper": "1.41.0",
36
- "@zag-js/remove-scroll": "1.41.0",
37
- "@zag-js/types": "1.41.0",
38
- "@zag-js/focus-trap": "1.41.0"
29
+ "@zag-js/anatomy": "2.0.0-next.0",
30
+ "@zag-js/aria-hidden": "2.0.0-next.0",
31
+ "@zag-js/core": "2.0.0-next.0",
32
+ "@zag-js/dom-query": "2.0.0-next.0",
33
+ "@zag-js/utils": "2.0.0-next.0",
34
+ "@zag-js/dismissable": "2.0.0-next.0",
35
+ "@zag-js/popper": "2.0.0-next.0",
36
+ "@zag-js/remove-scroll": "2.0.0-next.0",
37
+ "@zag-js/types": "2.0.0-next.0",
38
+ "@zag-js/focus-trap": "2.0.0-next.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "clean-package": "2.2.0"