@zag-js/popover 1.39.1 → 1.41.0

package/dist/popover.connect.js

@@ -42,6 +42,7 @@ function connect(service, normalize) {
   const translations = prop("translations");
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
+  const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
   const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
   const triggerValue = context.get("triggerValue");
@@ -94,6 +95,7 @@ function connect(service, normalize) {
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         id: dom.getTriggerId(scope, value),
         "data-ownedby": scope.id,
         "data-value": value,
@@ -146,7 +148,8 @@ function connect(service, normalize) {
         "data-expanded": (0, import_dom_query.dataAttr)(open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement
+        "data-placement": currentPlacement,
+        "data-side": currentPlacementSide
       });
     },
     getTitleProps() {

package/dist/popover.connect.mjs

@@ -1,6 +1,6 @@
 // src/popover.connect.ts
 import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
-import { getPlacementStyles } from "@zag-js/popper";
+import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./popover.anatomy.mjs";
 import * as dom from "./popover.dom.mjs";
 function connect(service, normalize) {
@@ -8,6 +8,7 @@ function connect(service, normalize) {
   const translations = prop("translations");
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
+  const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
   const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
   const triggerValue = context.get("triggerValue");
@@ -60,6 +61,7 @@ function connect(service, normalize) {
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         id: dom.getTriggerId(scope, value),
         "data-ownedby": scope.id,
         "data-value": value,
@@ -112,7 +114,8 @@ function connect(service, normalize) {
         "data-expanded": dataAttr(open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement
+        "data-placement": currentPlacement,
+        "data-side": currentPlacementSide
       });
     },
     getTitleProps() {

package/dist/popover.dom.d.mts

@@ -9,6 +9,7 @@ declare const getTitleId: (scope: Scope) => any;
 declare const getDescriptionId: (scope: Scope) => any;
 declare const getCloseTriggerId: (scope: Scope) => any;
 declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -18,4 +19,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
+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

@@ -9,6 +9,7 @@ declare const getTitleId: (scope: Scope) => any;
 declare const getDescriptionId: (scope: Scope) => any;
 declare const getCloseTriggerId: (scope: Scope) => any;
 declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -18,4 +19,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerEls, getTriggerId };

package/dist/popover.dom.js

@@ -35,6 +35,7 @@ __export(popover_dom_exports, {
   getPositionerId: () => getPositionerId,
   getTitleEl: () => getTitleEl,
   getTitleId: () => getTitleId,
+  getTriggerEl: () => getTriggerEl,
   getTriggerEls: () => getTriggerEls,
   getTriggerId: () => getTriggerId
 });
@@ -54,9 +55,13 @@ var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
 var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
 var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
 var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
-var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
 var getActiveTriggerEl = (scope, value) => {
-  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+  if (value == null) {
+    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
+  }
+  return scope.getById(getTriggerId(scope, value));
 };
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
@@ -81,6 +86,7 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
   getPositionerId,
   getTitleEl,
   getTitleId,
+  getTriggerEl,
   getTriggerEls,
   getTriggerId
 });

package/dist/popover.dom.mjs

@@ -14,9 +14,13 @@ var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
 var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
 var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
 var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
-var getTriggerEls = (scope) => queryAll(scope.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+var getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
 var getActiveTriggerEl = (scope, value) => {
-  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+  if (value == null) {
+    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
+  }
+  return scope.getById(getTriggerId(scope, value));
 };
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
@@ -40,6 +44,7 @@ export {
   getPositionerId,
   getTitleEl,
   getTitleId,
+  getTriggerEl,
   getTriggerEls,
   getTriggerId
 };

package/dist/popover.machine.js

@@ -49,6 +49,7 @@ var machine = (0, import_core.createMachine)({
       autoFocus: true,
       modal: false,
       portalled: true,
+      restoreFocus: true,
       ...props,
       translations: {
         closeTriggerLabel: "close",
@@ -176,8 +177,8 @@ var machine = (0, import_core.createMachine)({
         context.set("currentPlacement", prop("positioning").placement);
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -191,7 +192,7 @@ var machine = (0, import_core.createMachine)({
         return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
           type: "popover",
           pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEls(scope),
+          exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -236,15 +237,29 @@ var machine = (0, import_core.createMachine)({
         if (!prop("modal")) return;
         return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
       },
-      trapFocus({ prop, scope }) {
+      trapFocus({ prop, scope, context }) {
         if (!prop("modal")) return;
         const contentEl = () => dom.getContentEl(scope);
         return (0, import_focus_trap.trapFocus)(contentEl, {
+          preventScroll: true,
+          returnFocusOnDeactivate: !!prop("restoreFocus"),
           initialFocus: () => (0, import_dom_query.getInitialFocus)({
             root: dom.getContentEl(scope),
             getInitialEl: prop("initialFocusEl"),
             enabled: prop("autoFocus")
           }),
+          setReturnFocus: (el) => {
+            const finalFocusEl = prop("finalFocusEl")?.();
+            if (finalFocusEl) return finalFocusEl;
+            const triggerValue = context.get("triggerValue");
+            if (triggerValue) {
+              const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
+              if (activeTriggerEl) return activeTriggerEl;
+            }
+            const fallbackTrigger = dom.getTriggerEls(scope)[0];
+            if (fallbackTrigger) return fallbackTrigger;
+            return el;
+          },
           getShadowRoot: true
         });
       }
@@ -253,8 +268,8 @@ var machine = (0, import_core.createMachine)({
       reposition({ event, prop, scope, context }) {
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,
@@ -287,10 +302,16 @@ var machine = (0, import_core.createMachine)({
           element?.focus({ preventScroll: true });
         });
       },
-      setFinalFocus({ event, scope, context }) {
-        const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
-        if (restoreFocus != null && !restoreFocus) return;
+      setFinalFocus({ event, prop, scope, context }) {
+        const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+        if (eventRestoreFocus != null && !eventRestoreFocus) return;
+        if (!prop("restoreFocus")) return;
         (0, import_dom_query.raf)(() => {
+          const finalFocusEl = prop("finalFocusEl")?.();
+          if (finalFocusEl) {
+            finalFocusEl.focus({ preventScroll: true });
+            return;
+          }
           const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
           element?.focus({ preventScroll: true });
         });

package/dist/popover.machine.mjs

@@ -15,6 +15,7 @@ var machine = createMachine({
       autoFocus: true,
       modal: false,
       portalled: true,
+      restoreFocus: true,
       ...props,
       translations: {
         closeTriggerLabel: "close",
@@ -142,8 +143,8 @@ var machine = createMachine({
         context.set("currentPlacement", prop("positioning").placement);
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        return getPlacement(getTriggerEl, getPositionerEl2, {
+        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return getPlacement(getTriggerEl2, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -157,7 +158,7 @@ var machine = createMachine({
         return trackDismissableElement(getContentEl2, {
           type: "popover",
           pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEls(scope),
+          exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -202,15 +203,29 @@ var machine = createMachine({
         if (!prop("modal")) return;
         return preventBodyScroll(scope.getDoc());
       },
-      trapFocus({ prop, scope }) {
+      trapFocus({ prop, scope, context }) {
         if (!prop("modal")) return;
         const contentEl = () => dom.getContentEl(scope);
         return trapFocus(contentEl, {
+          preventScroll: true,
+          returnFocusOnDeactivate: !!prop("restoreFocus"),
           initialFocus: () => getInitialFocus({
             root: dom.getContentEl(scope),
             getInitialEl: prop("initialFocusEl"),
             enabled: prop("autoFocus")
           }),
+          setReturnFocus: (el) => {
+            const finalFocusEl = prop("finalFocusEl")?.();
+            if (finalFocusEl) return finalFocusEl;
+            const triggerValue = context.get("triggerValue");
+            if (triggerValue) {
+              const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
+              if (activeTriggerEl) return activeTriggerEl;
+            }
+            const fallbackTrigger = dom.getTriggerEls(scope)[0];
+            if (fallbackTrigger) return fallbackTrigger;
+            return el;
+          },
           getShadowRoot: true
         });
       }
@@ -219,8 +234,8 @@ var machine = createMachine({
       reposition({ event, prop, scope, context }) {
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        getPlacement(getTriggerEl, getPositionerEl2, {
+        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        getPlacement(getTriggerEl2, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,
@@ -253,10 +268,16 @@ var machine = createMachine({
           element?.focus({ preventScroll: true });
         });
       },
-      setFinalFocus({ event, scope, context }) {
-        const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
-        if (restoreFocus != null && !restoreFocus) return;
+      setFinalFocus({ event, prop, scope, context }) {
+        const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+        if (eventRestoreFocus != null && !eventRestoreFocus) return;
+        if (!prop("restoreFocus")) return;
         raf(() => {
+          const finalFocusEl = prop("finalFocusEl")?.();
+          if (finalFocusEl) {
+            finalFocusEl.focus({ preventScroll: true });
+            return;
+          }
           const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
           element?.focus({ preventScroll: true });
         });

package/dist/popover.props.js

@@ -36,6 +36,7 @@ var props = (0, import_types.createProps)()([
   "getRootNode",
   "id",
   "ids",
+  "finalFocusEl",
   "initialFocusEl",
   "modal",
   "onEscapeKeyDown",
@@ -48,6 +49,7 @@ var props = (0, import_types.createProps)()([
   "open",
   "persistentElements",
   "portalled",
+  "restoreFocus",
   "positioning",
   "translations",
   "triggerValue"

package/dist/popover.props.mjs

@@ -11,6 +11,7 @@ var props = createProps()([
   "getRootNode",
   "id",
   "ids",
+  "finalFocusEl",
   "initialFocusEl",
   "modal",
   "onEscapeKeyDown",
@@ -23,6 +24,7 @@ var props = createProps()([
   "open",
   "persistentElements",
   "portalled",
+  "restoreFocus",
   "positioning",
   "translations",
   "triggerValue"

package/dist/popover.types.d.mts

@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag-js/types';
+import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -67,6 +67,16 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * The element to focus on when the popover is opened.
      */
     initialFocusEl?: (() => HTMLElement | null) | undefined;
+    /**
+     * Element to receive focus when the popover is closed.
+     */
+    finalFocusEl?: (() => MaybeElement) | undefined;
+    /**
+     * Whether to restore focus to the element that had focus before the popover was opened.
+     *
+     * @default true
+     */
+    restoreFocus?: boolean | undefined;
     /**
      * Whether to close the popover when the user clicks outside of the popover.
      * @default true
@@ -108,7 +118,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning" | "translations";
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
 type ComputedContext = Readonly<{
     /**
      * The computed value of `portalled`

package/dist/popover.types.d.ts

@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag-js/types';
+import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -67,6 +67,16 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * The element to focus on when the popover is opened.
      */
     initialFocusEl?: (() => HTMLElement | null) | undefined;
+    /**
+     * Element to receive focus when the popover is closed.
+     */
+    finalFocusEl?: (() => MaybeElement) | undefined;
+    /**
+     * Whether to restore focus to the element that had focus before the popover was opened.
+     *
+     * @default true
+     */
+    restoreFocus?: boolean | undefined;
     /**
      * Whether to close the popover when the user clicks outside of the popover.
      * @default true
@@ -108,7 +118,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning" | "translations";
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
 type ComputedContext = Readonly<{
     /**
      * The computed value of `portalled`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "1.39.1",
+  "version": "1.41.0",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.39.1",
-    "@zag-js/aria-hidden": "1.39.1",
-    "@zag-js/core": "1.39.1",
-    "@zag-js/dom-query": "1.39.1",
-    "@zag-js/utils": "1.39.1",
-    "@zag-js/dismissable": "1.39.1",
-    "@zag-js/popper": "1.39.1",
-    "@zag-js/remove-scroll": "1.39.1",
-    "@zag-js/types": "1.39.1",
-    "@zag-js/focus-trap": "1.39.1"
+    "@zag-js/anatomy": "1.41.0",
+    "@zag-js/aria-hidden": "1.41.0",
+    "@zag-js/core": "1.41.0",
+    "@zag-js/dom-query": "1.41.0",
+    "@zag-js/utils": "1.41.0",
+    "@zag-js/dismissable": "1.41.0",
+    "@zag-js/popper": "1.41.0",
+    "@zag-js/remove-scroll": "1.41.0",
+    "@zag-js/types": "1.41.0",
+    "@zag-js/focus-trap": "1.41.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"