@zag-js/popover 1.40.0 → 1.41.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/popover.connect.js +4 -1
  2. package/dist/popover.connect.mjs +5 -2
  3. package/dist/popover.dom.d.mts +2 -1
  4. package/dist/popover.dom.d.ts +2 -1
  5. package/dist/popover.dom.js +8 -2
  6. package/dist/popover.dom.mjs +7 -2
  7. package/dist/popover.machine.js +5 -5
  8. package/dist/popover.machine.mjs +5 -5
  9. package/package.json +11 -11
package/dist/popover.connect.js CHANGED
@@ -42,6 +42,7 @@ function connect(service, normalize) {
42
42
  const translations = prop("translations");
43
43
  const open = state.matches("open");
44
44
  const currentPlacement = context.get("currentPlacement");
45
+ const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
45
46
  const portalled = computed("currentPortalled");
46
47
  const rendered = context.get("renderedElements");
47
48
  const triggerValue = context.get("triggerValue");
@@ -94,6 +95,7 @@ function connect(service, normalize) {
94
95
  dir: prop("dir"),
95
96
  type: "button",
96
97
  "data-placement": currentPlacement,
98
+ "data-side": currentPlacementSide,
97
99
  id: dom.getTriggerId(scope, value),
98
100
  "data-ownedby": scope.id,
99
101
  "data-value": value,
@@ -146,7 +148,8 @@ function connect(service, normalize) {
146
148
  "data-expanded": (0, import_dom_query.dataAttr)(open),
147
149
  "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
148
150
  "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
149
- "data-placement": currentPlacement
151
+ "data-placement": currentPlacement,
152
+ "data-side": currentPlacementSide
150
153
  });
151
154
  },
152
155
  getTitleProps() {
package/dist/popover.connect.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  // src/popover.connect.ts
2
2
  import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
3
- import { getPlacementStyles } from "@zag-js/popper";
3
+ import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
4
4
  import { parts } from "./popover.anatomy.mjs";
5
5
  import * as dom from "./popover.dom.mjs";
6
6
  function connect(service, normalize) {
@@ -8,6 +8,7 @@ function connect(service, normalize) {
8
8
  const translations = prop("translations");
9
9
  const open = state.matches("open");
10
10
  const currentPlacement = context.get("currentPlacement");
11
+ const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
11
12
  const portalled = computed("currentPortalled");
12
13
  const rendered = context.get("renderedElements");
13
14
  const triggerValue = context.get("triggerValue");
@@ -60,6 +61,7 @@ function connect(service, normalize) {
60
61
  dir: prop("dir"),
61
62
  type: "button",
62
63
  "data-placement": currentPlacement,
64
+ "data-side": currentPlacementSide,
63
65
  id: dom.getTriggerId(scope, value),
64
66
  "data-ownedby": scope.id,
65
67
  "data-value": value,
@@ -112,7 +114,8 @@ function connect(service, normalize) {
112
114
  "data-expanded": dataAttr(open),
113
115
  "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
114
116
  "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
115
- "data-placement": currentPlacement
117
+ "data-placement": currentPlacement,
118
+ "data-side": currentPlacementSide
116
119
  });
117
120
  },
118
121
  getTitleProps() {
package/dist/popover.dom.d.mts CHANGED
@@ -9,6 +9,7 @@ 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;
12
13
  declare const getTriggerEls: (scope: Scope) => HTMLElement[];
13
14
  declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
14
15
  declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -18,4 +19,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
18
19
  declare const getFocusableEls: (scope: Scope) => HTMLElement[];
19
20
  declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
20
21
 
21
- export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
22
+ export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerEls, getTriggerId };
package/dist/popover.dom.d.ts CHANGED
@@ -9,6 +9,7 @@ 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;
12
13
  declare const getTriggerEls: (scope: Scope) => HTMLElement[];
13
14
  declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
14
15
  declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -18,4 +19,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
18
19
  declare const getFocusableEls: (scope: Scope) => HTMLElement[];
19
20
  declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
20
21
 
21
- export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
22
+ export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerEls, getTriggerId };
package/dist/popover.dom.js CHANGED
@@ -35,6 +35,7 @@ __export(popover_dom_exports, {
35
35
  getPositionerId: () => getPositionerId,
36
36
  getTitleEl: () => getTitleEl,
37
37
  getTitleId: () => getTitleId,
38
+ getTriggerEl: () => getTriggerEl,
38
39
  getTriggerEls: () => getTriggerEls,
39
40
  getTriggerId: () => getTriggerId
40
41
  });
@@ -54,9 +55,13 @@ var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
54
55
  var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
55
56
  var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
56
57
  var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
57
- var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
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}"]`);
58
60
  var getActiveTriggerEl = (scope, value) => {
59
- return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
61
+ if (value == null) {
62
+ return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
63
+ }
64
+ return scope.getById(getTriggerId(scope, value));
60
65
  };
61
66
  var getContentEl = (scope) => scope.getById(getContentId(scope));
62
67
  var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
@@ -81,6 +86,7 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
81
86
  getPositionerId,
82
87
  getTitleEl,
83
88
  getTitleId,
89
+ getTriggerEl,
84
90
  getTriggerEls,
85
91
  getTriggerId
86
92
  });
package/dist/popover.dom.mjs CHANGED
@@ -14,9 +14,13 @@ var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
14
14
  var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
15
15
  var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
16
16
  var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
17
- var getTriggerEls = (scope) => queryAll(scope.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
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}"]`);
18
19
  var getActiveTriggerEl = (scope, value) => {
19
- return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
20
+ if (value == null) {
21
+ return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
22
+ }
23
+ return scope.getById(getTriggerId(scope, value));
20
24
  };
21
25
  var getContentEl = (scope) => scope.getById(getContentId(scope));
22
26
  var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
@@ -40,6 +44,7 @@ export {
40
44
  getPositionerId,
41
45
  getTitleEl,
42
46
  getTitleId,
47
+ getTriggerEl,
43
48
  getTriggerEls,
44
49
  getTriggerId
45
50
  };
package/dist/popover.machine.js CHANGED
@@ -177,8 +177,8 @@ var machine = (0, import_core.createMachine)({
177
177
  context.set("currentPlacement", prop("positioning").placement);
178
178
  const anchorEl = dom.getAnchorEl(scope);
179
179
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
180
- const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
181
- return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
180
+ const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
181
+ return (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
182
182
  ...prop("positioning"),
183
183
  defer: true,
184
184
  onComplete(data) {
@@ -192,7 +192,7 @@ var machine = (0, import_core.createMachine)({
192
192
  return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
193
193
  type: "popover",
194
194
  pointerBlocking: prop("modal"),
195
- exclude: dom.getTriggerEls(scope),
195
+ exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
196
196
  defer: true,
197
197
  onEscapeKeyDown(event) {
198
198
  prop("onEscapeKeyDown")?.(event);
@@ -268,8 +268,8 @@ var machine = (0, import_core.createMachine)({
268
268
  reposition({ event, prop, scope, context }) {
269
269
  const anchorEl = dom.getAnchorEl(scope);
270
270
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
271
- const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
272
- (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
271
+ const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
272
+ (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
273
273
  ...prop("positioning"),
274
274
  ...event.options,
275
275
  defer: true,
package/dist/popover.machine.mjs CHANGED
@@ -143,8 +143,8 @@ var machine = createMachine({
143
143
  context.set("currentPlacement", prop("positioning").placement);
144
144
  const anchorEl = dom.getAnchorEl(scope);
145
145
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
146
- const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
147
- return getPlacement(getTriggerEl, getPositionerEl2, {
146
+ const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
147
+ return getPlacement(getTriggerEl2, getPositionerEl2, {
148
148
  ...prop("positioning"),
149
149
  defer: true,
150
150
  onComplete(data) {
@@ -158,7 +158,7 @@ var machine = createMachine({
158
158
  return trackDismissableElement(getContentEl2, {
159
159
  type: "popover",
160
160
  pointerBlocking: prop("modal"),
161
- exclude: dom.getTriggerEls(scope),
161
+ exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
162
162
  defer: true,
163
163
  onEscapeKeyDown(event) {
164
164
  prop("onEscapeKeyDown")?.(event);
@@ -234,8 +234,8 @@ var machine = createMachine({
234
234
  reposition({ event, prop, scope, context }) {
235
235
  const anchorEl = dom.getAnchorEl(scope);
236
236
  const getPositionerEl2 = () => dom.getPositionerEl(scope);
237
- const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
238
- getPlacement(getTriggerEl, getPositionerEl2, {
237
+ const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
238
+ getPlacement(getTriggerEl2, getPositionerEl2, {
239
239
  ...prop("positioning"),
240
240
  ...event.options,
241
241
  defer: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popover",
3
- "version": "1.40.0",
3
+ "version": "1.41.1",
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.40.0",
30
- "@zag-js/aria-hidden": "1.40.0",
31
- "@zag-js/core": "1.40.0",
32
- "@zag-js/dom-query": "1.40.0",
33
- "@zag-js/utils": "1.40.0",
34
- "@zag-js/dismissable": "1.40.0",
35
- "@zag-js/popper": "1.40.0",
36
- "@zag-js/remove-scroll": "1.40.0",
37
- "@zag-js/types": "1.40.0",
38
- "@zag-js/focus-trap": "1.40.0"
29
+ "@zag-js/anatomy": "1.41.1",
30
+ "@zag-js/aria-hidden": "1.41.1",
31
+ "@zag-js/core": "1.41.1",
32
+ "@zag-js/dom-query": "1.41.1",
33
+ "@zag-js/utils": "1.41.1",
34
+ "@zag-js/dismissable": "1.41.1",
35
+ "@zag-js/popper": "1.41.1",
36
+ "@zag-js/remove-scroll": "1.41.1",
37
+ "@zag-js/types": "1.41.1",
38
+ "@zag-js/focus-trap": "1.41.1"
39
39
  },
40
40
  "devDependencies": {
41
41
  "clean-package": "2.2.0"