@zag-js/popover 1.39.0 → 1.40.0

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",
@@ -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
         });
       }
@@ -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",
@@ -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
         });
       }
@@ -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.0",
+  "version": "1.40.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.0",
-    "@zag-js/aria-hidden": "1.39.0",
-    "@zag-js/core": "1.39.0",
-    "@zag-js/dom-query": "1.39.0",
-    "@zag-js/utils": "1.39.0",
-    "@zag-js/dismissable": "1.39.0",
-    "@zag-js/popper": "1.39.0",
-    "@zag-js/remove-scroll": "1.39.0",
-    "@zag-js/types": "1.39.0",
-    "@zag-js/focus-trap": "1.39.0"
+    "@zag-js/anatomy": "1.40.0",
+    "@zag-js/aria-hidden": "1.40.0",
+    "@zag-js/core": "1.40.0",
+    "@zag-js/dom-query": "1.40.0",
+    "@zag-js/utils": "1.40.0",
+    "@zag-js/dismissable": "1.40.0",
+    "@zag-js/popper": "1.40.0",
+    "@zag-js/remove-scroll": "1.40.0",
+    "@zag-js/types": "1.40.0",
+    "@zag-js/focus-trap": "1.40.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"