@zag-js/popover 2.0.0-next.0 → 2.0.0-next.2

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { anatomy } from './popover.anatomy.mjs';
 export { connect } from './popover.connect.mjs';
 export { machine } from './popover.machine.mjs';
 export { props, splitProps } from './popover.props.mjs';
-export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerValueChangeDetails } from './popover.types.mjs';
+export { PopoverApi as Api, ContentState, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PositionerState, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './popover.types.mjs';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { anatomy } from './popover.anatomy.js';
 export { connect } from './popover.connect.js';
 export { machine } from './popover.machine.js';
 export { props, splitProps } from './popover.props.js';
-export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerValueChangeDetails } from './popover.types.js';
+export { PopoverApi as Api, ContentState, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PositionerState, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './popover.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/popover.connect.js

@@ -33,26 +33,47 @@ __export(popover_connect_exports, {
   connect: () => connect
 });
 module.exports = __toCommonJS(popover_connect_exports);
+var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
+var import_utils = require("@zag-js/utils");
 var import_popover = require("./popover.anatomy.js");
 var dom = __toESM(require("./popover.dom.js"));
+var defaultTranslations = {
+  closeTriggerLabel: "close"
+};
 function connect(service, normalize) {
-  const { state, context, send, computed, prop, scope } = service;
-  const translations = prop("translations");
+  const { state, context, send, prop, scope } = service;
+  const layer = context.get("layer");
+  const translations = (0, import_utils.mergeWithDefault)(defaultTranslations, 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");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getPositionerState() {
+    return { nested: !!layer?.nested, hasNested: !!layer?.hasNested };
+  }
+  function getContentState() {
+    return {
+      open,
+      modal: !!prop("modal"),
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
-    portalled,
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open");
@@ -86,9 +107,11 @@ function connect(service, normalize) {
         dir: prop("dir")
       });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const triggerState = getTriggerState(props);
+      const { current } = triggerState;
       return normalize.button({
         ...import_popover.parts.trigger.attrs(scope.id),
         dir: prop("dir"),
@@ -98,7 +121,7 @@ function connect(service, normalize) {
         "data-value": value,
         "data-current": (0, import_dom_query.dataAttr)(current),
         "aria-haspopup": "dialog",
-        "aria-expanded": value == null ? open : open && current,
+        "aria-expanded": triggerState.open,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -124,28 +147,37 @@ function connect(service, normalize) {
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
         ...import_popover.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: {
+          ...popperStyles.floating,
+          ...(0, import_dismissable.getDismissableLayerStyle)(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...import_popover.parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope),
         tabIndex: -1,
         role: "dialog",
-        "aria-modal": (0, import_dom_query.ariaAttr)(prop("modal")),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-expanded": (0, import_dom_query.dataAttr)(open),
+        "aria-modal": (0, import_dom_query.ariaAttr)(contentState.modal),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-expanded": (0, import_dom_query.dataAttr)(contentState.open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: (0, import_dismissable.getDismissableLayerStyle)(layer, { pointerEvents: true })
       });
     },
     getTitleProps() {

package/dist/popover.connect.mjs

@@ -1,24 +1,45 @@
 // src/popover.connect.ts
+import { getDismissableLayerAttrs, getDismissableLayerStyle } from "@zag-js/dismissable";
 import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
+import { mergeWithDefault } from "@zag-js/utils";
 import { parts } from "./popover.anatomy.mjs";
 import * as dom from "./popover.dom.mjs";
+var defaultTranslations = {
+  closeTriggerLabel: "close"
+};
 function connect(service, normalize) {
-  const { state, context, send, computed, prop, scope } = service;
-  const translations = prop("translations");
+  const { state, context, send, prop, scope } = service;
+  const layer = context.get("layer");
+  const translations = mergeWithDefault(defaultTranslations, 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");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getPositionerState() {
+    return { nested: !!layer?.nested, hasNested: !!layer?.hasNested };
+  }
+  function getContentState() {
+    return {
+      open,
+      modal: !!prop("modal"),
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
-    portalled,
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open");
@@ -52,9 +73,11 @@ function connect(service, normalize) {
         dir: prop("dir")
       });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const triggerState = getTriggerState(props);
+      const { current } = triggerState;
       return normalize.button({
         ...parts.trigger.attrs(scope.id),
         dir: prop("dir"),
@@ -64,7 +87,7 @@ function connect(service, normalize) {
         "data-value": value,
         "data-current": dataAttr(current),
         "aria-haspopup": "dialog",
-        "aria-expanded": value == null ? open : open && current,
+        "aria-expanded": triggerState.open,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -90,28 +113,37 @@ function connect(service, normalize) {
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
         ...parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...getDismissableLayerAttrs(layer),
+        style: {
+          ...popperStyles.floating,
+          ...getDismissableLayerStyle(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope),
         tabIndex: -1,
         role: "dialog",
-        "aria-modal": ariaAttr(prop("modal")),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-expanded": dataAttr(open),
+        "aria-modal": ariaAttr(contentState.modal),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-expanded": dataAttr(contentState.open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        ...getDismissableLayerAttrs(layer),
+        style: getDismissableLayerStyle(layer, { pointerEvents: true })
       });
     },
     getTitleProps() {

package/dist/popover.machine.js

@@ -48,13 +48,8 @@ var machine = (0, import_core.createMachine)({
       closeOnEscape: true,
       autoFocus: true,
       modal: false,
-      portalled: true,
       restoreFocus: true,
       ...props,
-      translations: {
-        closeTriggerLabel: "close",
-        ...props.translations
-      },
       positioning: {
         placement: "bottom",
         ...props.positioning
@@ -67,6 +62,9 @@ var machine = (0, import_core.createMachine)({
   },
   context({ bindable, prop, scope }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
@@ -82,13 +80,9 @@ var machine = (0, import_core.createMachine)({
           const triggerElement = dom.getActiveTriggerEl(scope, value);
           onTriggerValueChange({ value, triggerElement });
         }
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -184,85 +178,110 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
-      trackDismissableElement({ send, prop, scope }) {
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let restoreFocus = true;
-        return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
-          type: "popover",
-          pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEls(scope),
-          defer: true,
-          onEscapeKeyDown(event) {
-            prop("onEscapeKeyDown")?.(event);
-            if (prop("closeOnEscape")) return;
-            event.preventDefault();
-          },
-          onInteractOutside(event) {
-            prop("onInteractOutside")?.(event);
-            if (event.defaultPrevented) return;
-            restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            if (!prop("closeOnInteractOutside")) {
+      trackDismissableElement({ send, prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let restoreFocus = true;
+          return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
+            type: "popover",
+            pointerBlocking: prop("modal"),
+            onLayerChange(layer) {
+              context.set("layer", layer);
+            },
+            exclude: dom.getTriggerEls(scope),
+            defer: true,
+            onEscapeKeyDown(event) {
+              prop("onEscapeKeyDown")?.(event);
+              if (prop("closeOnEscape")) return;
               event.preventDefault();
+            },
+            onInteractOutside(event) {
+              prop("onInteractOutside")?.(event);
+              if (event.defaultPrevented) return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!prop("closeOnInteractOutside")) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside: prop("onPointerDownOutside"),
+            onFocusOutside: prop("onFocusOutside"),
+            persistentElements: prop("persistentElements"),
+            onRequestDismiss: prop("onRequestDismiss"),
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
             }
-          },
-          onPointerDownOutside: prop("onPointerDownOutside"),
-          onFocusOutside: prop("onFocusOutside"),
-          persistentElements: prop("persistentElements"),
-          onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
-          }
+          });
         });
       },
-      proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal") || !prop("portalled")) return;
-        const getContentEl2 = () => dom.getContentEl(scope);
-        return (0, import_dom_query.proxyTabFocus)(getContentEl2, {
-          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
-          defer: true,
-          getShadowRoot: true,
-          onFocus(el) {
-            el.focus({ preventScroll: true });
-          }
+      proxyTabFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (prop("modal")) return;
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let cleanup;
+          const rafCleanup = (0, import_dom_query.raf)(() => {
+            const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+            const contentEl = getContentEl2();
+            if (!triggerEl || !contentEl || (0, import_dom_query.contains)(triggerEl.parentElement, contentEl)) return;
+            cleanup = (0, import_dom_query.proxyTabFocus)(getContentEl2, {
+              triggerElement: triggerEl,
+              getShadowRoot: true,
+              onFocus(el) {
+                el.focus({ preventScroll: true });
+              }
+            });
+          });
+          return () => {
+            rafCleanup();
+            cleanup?.();
+          };
         });
       },
-      hideContentBelow({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
-        return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
+      hideContentBelow({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const getElements = () => [
+            dom.getContentEl(scope),
+            dom.getActiveTriggerEl(scope, context.get("triggerValue"))
+          ];
+          return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
+        });
       },
-      preventScroll({ prop, scope }) {
-        if (!prop("modal")) return;
-        return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
+      preventScroll({ prop, scope, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
+        });
       },
-      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
+      trapFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const contentEl = () => dom.getContentEl(scope);
+          const destroy = (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
+          });
+          return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
         });
       }
     },

package/dist/popover.machine.mjs

@@ -2,7 +2,7 @@
 import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-import { getInitialFocus, proxyTabFocus, raf } from "@zag-js/dom-query";
+import { contains, getInitialFocus, proxyTabFocus, raf } from "@zag-js/dom-query";
 import { trapFocus } from "@zag-js/focus-trap";
 import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
@@ -14,13 +14,8 @@ var machine = createMachine({
       closeOnEscape: true,
       autoFocus: true,
       modal: false,
-      portalled: true,
       restoreFocus: true,
       ...props,
-      translations: {
-        closeTriggerLabel: "close",
-        ...props.translations
-      },
       positioning: {
         placement: "bottom",
         ...props.positioning
@@ -33,6 +28,9 @@ var machine = createMachine({
   },
   context({ bindable, prop, scope }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
@@ -48,13 +46,9 @@ var machine = createMachine({
           const triggerElement = dom.getActiveTriggerEl(scope, value);
           onTriggerValueChange({ value, triggerElement });
         }
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -150,85 +144,110 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
-      trackDismissableElement({ send, prop, scope }) {
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let restoreFocus = true;
-        return trackDismissableElement(getContentEl2, {
-          type: "popover",
-          pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEls(scope),
-          defer: true,
-          onEscapeKeyDown(event) {
-            prop("onEscapeKeyDown")?.(event);
-            if (prop("closeOnEscape")) return;
-            event.preventDefault();
-          },
-          onInteractOutside(event) {
-            prop("onInteractOutside")?.(event);
-            if (event.defaultPrevented) return;
-            restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            if (!prop("closeOnInteractOutside")) {
+      trackDismissableElement({ send, prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let restoreFocus = true;
+          return trackDismissableElement(getContentEl2, {
+            type: "popover",
+            pointerBlocking: prop("modal"),
+            onLayerChange(layer) {
+              context.set("layer", layer);
+            },
+            exclude: dom.getTriggerEls(scope),
+            defer: true,
+            onEscapeKeyDown(event) {
+              prop("onEscapeKeyDown")?.(event);
+              if (prop("closeOnEscape")) return;
               event.preventDefault();
+            },
+            onInteractOutside(event) {
+              prop("onInteractOutside")?.(event);
+              if (event.defaultPrevented) return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!prop("closeOnInteractOutside")) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside: prop("onPointerDownOutside"),
+            onFocusOutside: prop("onFocusOutside"),
+            persistentElements: prop("persistentElements"),
+            onRequestDismiss: prop("onRequestDismiss"),
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
             }
-          },
-          onPointerDownOutside: prop("onPointerDownOutside"),
-          onFocusOutside: prop("onFocusOutside"),
-          persistentElements: prop("persistentElements"),
-          onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
-          }
+          });
         });
       },
-      proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal") || !prop("portalled")) return;
-        const getContentEl2 = () => dom.getContentEl(scope);
-        return proxyTabFocus(getContentEl2, {
-          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
-          defer: true,
-          getShadowRoot: true,
-          onFocus(el) {
-            el.focus({ preventScroll: true });
-          }
+      proxyTabFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (prop("modal")) return;
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let cleanup;
+          const rafCleanup = raf(() => {
+            const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+            const contentEl = getContentEl2();
+            if (!triggerEl || !contentEl || contains(triggerEl.parentElement, contentEl)) return;
+            cleanup = proxyTabFocus(getContentEl2, {
+              triggerElement: triggerEl,
+              getShadowRoot: true,
+              onFocus(el) {
+                el.focus({ preventScroll: true });
+              }
+            });
+          });
+          return () => {
+            rafCleanup();
+            cleanup?.();
+          };
         });
       },
-      hideContentBelow({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
-        return ariaHidden(getElements, { defer: true });
+      hideContentBelow({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const getElements = () => [
+            dom.getContentEl(scope),
+            dom.getActiveTriggerEl(scope, context.get("triggerValue"))
+          ];
+          return ariaHidden(getElements, { defer: true });
+        });
       },
-      preventScroll({ prop, scope }) {
-        if (!prop("modal")) return;
-        return preventBodyScroll(scope.getDoc());
+      preventScroll({ prop, scope, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          return preventBodyScroll(scope.getDoc());
+        });
       },
-      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
+      trapFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const contentEl = () => dom.getContentEl(scope);
+          const destroy = 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
+          });
+          return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
         });
       }
     },

package/dist/popover.props.js

@@ -48,7 +48,6 @@ var props = (0, import_types.createProps)()([
   "onRequestDismiss",
   "open",
   "persistentElements",
-  "portalled",
   "restoreFocus",
   "positioning",
   "translations",

package/dist/popover.props.mjs

@@ -23,7 +23,6 @@ var props = createProps()([
   "onRequestDismiss",
   "open",
   "persistentElements",
-  "portalled",
   "restoreFocus",
   "positioning",
   "translations",

package/dist/popover.types.d.mts

@@ -1,8 +1,8 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
+import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    anchor: string;
-    trigger: string | ((value?: string) => string);
-    content: string;
-    title: string;
-    description: string;
-    closeTrigger: string;
-    positioner: string;
-    arrow: string;
-}>;
+interface ElementIds {
+    anchor?: string | undefined;
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    closeTrigger?: string | undefined;
+    positioner?: string | undefined;
+    arrow?: string | undefined;
+}
 interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -49,13 +49,6 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * @default false
      */
     modal?: boolean | undefined;
-    /**
-     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
-     * of the popover content.
-     *
-     * @default true
-     */
-    portalled?: boolean | undefined;
     /**
      * Whether to automatically set focus on the first focusable
      * content within the popover when opened.
@@ -66,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
     /**
      * The element to focus on when the popover is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * Element to receive focus when the popover is closed.
      */
@@ -118,14 +111,12 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
-type ComputedContext = Readonly<{
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+interface PrivateContext {
     /**
-     * The computed value of `portalled`
+     * The computed layer stack state used for declarative styles and attributes.
      */
-    currentPortalled: boolean;
-}>;
-interface PrivateContext {
+    layer: LayerSnapshot | null;
     /**
      * The elements that are rendered on mount
      */
@@ -141,16 +132,13 @@ interface PrivateContext {
      * The trigger value
      */
     triggerValue: string | null;
-    /**
-     * Whether the popover has been positioned
-     */
-    positioned: boolean;
 }
 interface PopoverSchema {
-    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    props: PopoverProps;
+    defaultPropKey: PropsWithDefault;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -162,13 +150,59 @@ interface TriggerProps {
     /**
      * The value that identifies this specific trigger
      */
-    value?: string;
+    value?: string | undefined;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
     /**
-     * Whether the popover is portalled.
+     * The value that identifies this specific trigger
      */
-    portalled: boolean;
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the popover
+     */
+    current: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+}
+interface PositionerState {
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Whether the popover is modal
+     */
+    modal: boolean;
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is open
      */
@@ -192,13 +226,25 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
+    /**
+     * Returns the state of the positioner
+     */
+    getPositionerState: () => PositionerState;
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getTitleProps: () => T["element"];
     getDescriptionProps: () => T["element"];
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, PositionerState, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/dist/popover.types.d.ts

@@ -1,8 +1,8 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
+import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    anchor: string;
-    trigger: string | ((value?: string) => string);
-    content: string;
-    title: string;
-    description: string;
-    closeTrigger: string;
-    positioner: string;
-    arrow: string;
-}>;
+interface ElementIds {
+    anchor?: string | undefined;
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    closeTrigger?: string | undefined;
+    positioner?: string | undefined;
+    arrow?: string | undefined;
+}
 interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -49,13 +49,6 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * @default false
      */
     modal?: boolean | undefined;
-    /**
-     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
-     * of the popover content.
-     *
-     * @default true
-     */
-    portalled?: boolean | undefined;
     /**
      * Whether to automatically set focus on the first focusable
      * content within the popover when opened.
@@ -66,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
     /**
      * The element to focus on when the popover is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * Element to receive focus when the popover is closed.
      */
@@ -118,14 +111,12 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
-type ComputedContext = Readonly<{
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+interface PrivateContext {
     /**
-     * The computed value of `portalled`
+     * The computed layer stack state used for declarative styles and attributes.
      */
-    currentPortalled: boolean;
-}>;
-interface PrivateContext {
+    layer: LayerSnapshot | null;
     /**
      * The elements that are rendered on mount
      */
@@ -141,16 +132,13 @@ interface PrivateContext {
      * The trigger value
      */
     triggerValue: string | null;
-    /**
-     * Whether the popover has been positioned
-     */
-    positioned: boolean;
 }
 interface PopoverSchema {
-    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    props: PopoverProps;
+    defaultPropKey: PropsWithDefault;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -162,13 +150,59 @@ interface TriggerProps {
     /**
      * The value that identifies this specific trigger
      */
-    value?: string;
+    value?: string | undefined;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
     /**
-     * Whether the popover is portalled.
+     * The value that identifies this specific trigger
      */
-    portalled: boolean;
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the popover
+     */
+    current: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+}
+interface PositionerState {
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Whether the popover is modal
+     */
+    modal: boolean;
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is open
      */
@@ -192,13 +226,25 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
+    /**
+     * Returns the state of the positioner
+     */
+    getPositionerState: () => PositionerState;
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getTitleProps: () => T["element"];
     getDescriptionProps: () => T["element"];
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, PositionerState, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/popover",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/popover"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,16 +29,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/aria-hidden": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/dismissable": "2.0.0-next.0",
-    "@zag-js/popper": "2.0.0-next.0",
-    "@zag-js/remove-scroll": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0",
-    "@zag-js/focus-trap": "2.0.0-next.0"
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/aria-hidden": "2.0.0-next.2",
+    "@zag-js/core": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2",
+    "@zag-js/dismissable": "2.0.0-next.2",
+    "@zag-js/popper": "2.0.0-next.2",
+    "@zag-js/remove-scroll": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2",
+    "@zag-js/focus-trap": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -69,7 +72,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }