@zag-js/popover 1.45.0 → 1.47.0

package/dist/popover.anatomy.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "description" | "closeTrigger">;
-declare const parts: Record<"title" | "arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/popover.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "description" | "closeTrigger">;
-declare const parts: Record<"title" | "arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/popover.machine.js

@@ -125,6 +125,7 @@ var machine = (0, import_core.createMachine)({
       }
     },
     open: {
+      entry: ["checkRenderedElements"],
       effects: [
         "trapFocus",
         "preventScroll",
@@ -190,6 +191,8 @@ var machine = (0, import_core.createMachine)({
           pointerBlocking: prop("modal"),
           exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
           defer: true,
+          getRootNode: scope.getRootNode,
+          layerStyleTargets: [() => dom.getPositionerEl(scope)],
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
             if (prop("closeOnEscape")) return;
@@ -207,8 +210,8 @@ var machine = (0, import_core.createMachine)({
           onFocusOutside: prop("onFocusOutside"),
           persistentElements: prop("persistentElements"),
           onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
+          onDismiss(event) {
+            send({ type: "CLOSE", src: "interact-outside", restoreFocus, focusVisible: event?.type === "keydown" });
           }
         });
       },
@@ -281,7 +284,7 @@ var machine = (0, import_core.createMachine)({
       },
       checkRenderedElements({ context, scope }) {
         (0, import_dom_query.raf)(() => {
-          Object.assign(context.get("renderedElements"), {
+          context.set("renderedElements", {
             title: !!dom.getTitleEl(scope),
             description: !!dom.getDescriptionEl(scope)
           });
@@ -303,14 +306,15 @@ var machine = (0, import_core.createMachine)({
         const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
         if (eventRestoreFocus != null && !eventRestoreFocus) return;
         if (!prop("restoreFocus")) return;
+        const focusOptions = getReturnFocusOptions(event);
         (0, import_dom_query.raf)(() => {
           const finalFocusEl = prop("finalFocusEl")?.();
           if (finalFocusEl) {
-            finalFocusEl.focus({ preventScroll: true });
+            finalFocusEl.focus(focusOptions);
             return;
           }
           const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-          element?.focus({ preventScroll: true });
+          element?.focus(focusOptions);
         });
       },
       invokeOnOpen({ prop, flush }) {
@@ -329,6 +333,10 @@ var machine = (0, import_core.createMachine)({
     }
   }
 });
+function getReturnFocusOptions(event) {
+  const focusVisible = event.focusVisible ?? event.previousEvent?.focusVisible;
+  return focusVisible ? { preventScroll: true, focusVisible: true } : { preventScroll: true };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   machine

package/dist/popover.machine.mjs

@@ -91,6 +91,7 @@ var machine = createMachine({
       }
     },
     open: {
+      entry: ["checkRenderedElements"],
       effects: [
         "trapFocus",
         "preventScroll",
@@ -156,6 +157,8 @@ var machine = createMachine({
           pointerBlocking: prop("modal"),
           exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
           defer: true,
+          getRootNode: scope.getRootNode,
+          layerStyleTargets: [() => dom.getPositionerEl(scope)],
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
             if (prop("closeOnEscape")) return;
@@ -173,8 +176,8 @@ var machine = createMachine({
           onFocusOutside: prop("onFocusOutside"),
           persistentElements: prop("persistentElements"),
           onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
+          onDismiss(event) {
+            send({ type: "CLOSE", src: "interact-outside", restoreFocus, focusVisible: event?.type === "keydown" });
           }
         });
       },
@@ -247,7 +250,7 @@ var machine = createMachine({
       },
       checkRenderedElements({ context, scope }) {
         raf(() => {
-          Object.assign(context.get("renderedElements"), {
+          context.set("renderedElements", {
             title: !!dom.getTitleEl(scope),
             description: !!dom.getDescriptionEl(scope)
           });
@@ -269,14 +272,15 @@ var machine = createMachine({
         const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
         if (eventRestoreFocus != null && !eventRestoreFocus) return;
         if (!prop("restoreFocus")) return;
+        const focusOptions = getReturnFocusOptions(event);
         raf(() => {
           const finalFocusEl = prop("finalFocusEl")?.();
           if (finalFocusEl) {
-            finalFocusEl.focus({ preventScroll: true });
+            finalFocusEl.focus(focusOptions);
             return;
           }
           const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-          element?.focus({ preventScroll: true });
+          element?.focus(focusOptions);
         });
       },
       invokeOnOpen({ prop, flush }) {
@@ -295,6 +299,10 @@ var machine = createMachine({
     }
   }
 });
+function getReturnFocusOptions(event) {
+  const focusVisible = event.focusVisible ?? event.previousEvent?.focusVisible;
+  return focusVisible ? { preventScroll: true, focusVisible: true } : { preventScroll: true };
+}
 export {
   machine
 };

package/package.json

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