@zag-js/popover 0.82.1 → 1.0.0

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, getFocusables, isSafari, dataAttr, proxyTabFocus, getInitialFocus, raf } from '@zag-js/dom-query';
-import { getPlacementStyles, getPlacement } from '@zag-js/popper';
+import { proxyTabFocus, getInitialFocus, raf, isSafari, dataAttr } from '@zag-js/dom-query';
+import { getPlacement, getPlacementStyles } from '@zag-js/popper';
 import { ariaHidden } from '@zag-js/aria-hidden';
 import { createMachine } from '@zag-js/core';
 import { trackDismissableElement } from '@zag-js/dismissable';
 import { trapFocus } from '@zag-js/focus-trap';
 import { preventBodyScroll } from '@zag-js/remove-scroll';
-import { createSplitProps, compact } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
+import { createSplitProps } from '@zag-js/utils';
 
 // src/popover.anatomy.ts
 var anatomy = createAnatomy("popover").parts(
@@ -23,33 +23,30 @@ var anatomy = createAnatomy("popover").parts(
   "closeTrigger"
 );
 var parts = anatomy.build();
-var dom = createScope({
-  getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
-  getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
-  getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
-  getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
-  getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
-  getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
-  getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
-  getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
-  getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
-  getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
-  getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
-  getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0]
-});
+var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
+var getTriggerId = (scope) => scope.ids?.trigger ?? `popover:${scope.id}:trigger`;
+var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
+var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
+var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
+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 getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+var getContentEl = (scope) => scope.getById(getContentId(scope));
+var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
+var getTitleEl = (scope) => scope.getById(getTitleId(scope));
+var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
 
 // src/popover.connect.ts
-function connect(state, send, normalize) {
+function connect(service, normalize) {
+  const { state, context, send, computed, prop, scope } = service;
   const open = state.matches("open");
-  const currentPlacement = state.context.currentPlacement;
-  const portalled = state.context.currentPortalled;
-  const rendered = state.context.renderedElements;
+  const currentPlacement = context.get("currentPlacement");
+  const portalled = computed("currentPortalled");
+  const rendered = context.get("renderedElements");
   const popperStyles = getPlacementStyles({
-    ...state.context.positioning,
+    ...prop("positioning"),
     placement: currentPlacement
   });
   return {
@@ -57,44 +54,44 @@ function connect(state, send, normalize) {
     open,
     setOpen(nextOpen) {
       if (nextOpen === open) return;
-      send(nextOpen ? "OPEN" : "CLOSE");
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     reposition(options = {}) {
       send({ type: "POSITIONING.SET", options });
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(state.context),
+        id: getArrowId(scope),
         ...parts.arrow.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
         ...parts.arrowTip.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getAnchorProps() {
       return normalize.element({
         ...parts.anchor.attrs,
-        dir: state.context.dir,
-        id: dom.getAnchorId(state.context)
+        dir: prop("dir"),
+        id: getAnchorId(scope)
       });
     },
     getTriggerProps() {
       return normalize.button({
         ...parts.trigger.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
-        id: dom.getTriggerId(state.context),
+        id: getTriggerId(scope),
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "data-state": open ? "open" : "closed",
-        "aria-controls": dom.getContentId(state.context),
+        "aria-controls": getContentId(scope),
         onPointerDown(event) {
           if (isSafari()) {
             event.currentTarget.focus();
@@ -102,7 +99,7 @@ function connect(state, send, normalize) {
         },
         onClick(event) {
           if (event.defaultPrevented) return;
-          send("TOGGLE");
+          send({ type: "TOGGLE" });
         },
         onBlur(event) {
           send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
@@ -112,293 +109,299 @@ function connect(state, send, normalize) {
     getIndicatorProps() {
       return normalize.element({
         ...parts.indicator.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-state": open ? "open" : "closed"
       });
     },
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(state.context),
+        id: getPositionerId(scope),
         ...parts.positioner.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.floating
       });
     },
     getContentProps() {
       return normalize.element({
         ...parts.content.attrs,
-        dir: state.context.dir,
-        id: dom.getContentId(state.context),
+        dir: prop("dir"),
+        id: getContentId(scope),
         tabIndex: -1,
         role: "dialog",
         hidden: !open,
         "data-state": open ? "open" : "closed",
         "data-expanded": dataAttr(open),
-        "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
-        "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+        "aria-labelledby": rendered.title ? getTitleId(scope) : void 0,
+        "aria-describedby": rendered.description ? getDescriptionId(scope) : void 0,
         "data-placement": currentPlacement
       });
     },
     getTitleProps() {
       return normalize.element({
         ...parts.title.attrs,
-        id: dom.getTitleId(state.context),
-        dir: state.context.dir
+        id: getTitleId(scope),
+        dir: prop("dir")
       });
     },
     getDescriptionProps() {
       return normalize.element({
         ...parts.description.attrs,
-        id: dom.getDescriptionId(state.context),
-        dir: state.context.dir
+        id: getDescriptionId(scope),
+        dir: prop("dir")
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
         ...parts.closeTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getCloseTriggerId(state.context),
+        dir: prop("dir"),
+        id: getCloseTriggerId(scope),
         type: "button",
         "aria-label": "close",
         onClick(event) {
           if (event.defaultPrevented) return;
-          send("CLOSE");
+          send({ type: "CLOSE" });
         }
       });
     }
   };
 }
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "popover",
-      initial: ctx.open ? "open" : "closed",
-      context: {
-        closeOnInteractOutside: true,
-        closeOnEscape: true,
-        autoFocus: true,
-        modal: false,
-        portalled: true,
-        positioning: {
-          placement: "bottom",
-          ...ctx.positioning
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      closeOnInteractOutside: true,
+      closeOnEscape: true,
+      autoFocus: true,
+      modal: false,
+      portalled: true,
+      ...props2,
+      positioning: {
+        placement: "bottom",
+        ...props2.positioning
+      }
+    };
+  },
+  initialState({ prop }) {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "closed";
+  },
+  context({ bindable }) {
+    return {
+      currentPlacement: bindable(() => ({
+        defaultValue: void 0
+      })),
+      renderedElements: bindable(() => ({
+        defaultValue: { title: true, description: true }
+      }))
+    };
+  },
+  computed: {
+    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
+  },
+  watch({ track, prop, action }) {
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  entry: ["checkRenderedElements"],
+  states: {
+    closed: {
+      on: {
+        "CONTROLLED.OPEN": {
+          target: "open",
+          actions: ["setInitialFocus"]
         },
-        currentPlacement: void 0,
-        ...ctx,
-        renderedElements: {
-          title: true,
-          description: true
-        }
-      },
-      computed: {
-        currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
-      },
-      watch: {
-        open: ["toggleVisibility"]
-      },
-      entry: ["checkRenderedElements"],
-      states: {
-        closed: {
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open",
-              actions: ["setInitialFocus"]
-            },
-            TOGGLE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ]
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
+          }
+        ],
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
           }
+        ]
+      }
+    },
+    open: {
+      effects: [
+        "trapFocus",
+        "preventScroll",
+        "hideContentBelow",
+        "trackPositioning",
+        "trackDismissableElement",
+        "proxyTabFocus"
+      ],
+      on: {
+        "CONTROLLED.CLOSE": {
+          target: "closed",
+          actions: ["setFinalFocus"]
         },
-        open: {
-          activities: [
-            "trapFocus",
-            "preventScroll",
-            "hideContentBelow",
-            "trackPositioning",
-            "trackDismissableElement",
-            "proxyTabFocus"
-          ],
-          on: {
-            "CONTROLLED.CLOSE": {
-              target: "closed",
-              actions: ["setFinalFocus"]
-            },
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose", "setFinalFocus"]
-              }
-            ],
-            TOGGLE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "POSITIONING.SET": {
-              actions: "reposition"
-            }
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose", "setFinalFocus"]
           }
+        ],
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "POSITIONING.SET": {
+          actions: ["reposition"]
         }
       }
+    }
+  },
+  implementations: {
+    guards: {
+      isOpenControlled: ({ prop }) => prop("open") != void 0
     },
-    {
-      guards: {
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
+    effects: {
+      trackPositioning({ context, prop, scope }) {
+        context.set("currentPlacement", prop("positioning").placement);
+        const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
+        const getPositionerEl2 = () => getPositionerEl(scope);
+        return getPlacement(anchorEl, getPositionerEl2, {
+          ...prop("positioning"),
+          defer: true,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
       },
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return getPlacement(anchorEl, getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
-          let restoreFocus = true;
-          return trackDismissableElement(getContentEl, {
-            pointerBlocking: ctx2.modal,
-            exclude: dom.getTriggerEl(ctx2),
-            defer: true,
-            onEscapeKeyDown(event) {
-              ctx2.onEscapeKeyDown?.(event);
-              if (ctx2.closeOnEscape) return;
+      trackDismissableElement({ send, prop, scope }) {
+        const getContentEl2 = () => getContentEl(scope);
+        let restoreFocus = true;
+        return trackDismissableElement(getContentEl2, {
+          pointerBlocking: prop("modal"),
+          exclude: getTriggerEl(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();
-            },
-            onInteractOutside(event) {
-              ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented) return;
-              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-              if (!ctx2.closeOnInteractOutside) {
-                event.preventDefault();
-              }
-            },
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onFocusOutside: ctx2.onFocusOutside,
-            persistentElements: ctx2.persistentElements,
-            onDismiss() {
-              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
             }
-          });
-        },
-        proxyTabFocus(ctx2) {
-          if (ctx2.modal || !ctx2.portalled) return;
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return proxyTabFocus(getContentEl, {
-            triggerElement: dom.getTriggerEl(ctx2),
-            defer: true,
-            onFocus(el) {
-              el.focus({ preventScroll: true });
-            }
-          });
-        },
-        hideContentBelow(ctx2) {
-          if (!ctx2.modal) return;
-          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
-          return ariaHidden(getElements, { defer: true });
-        },
-        preventScroll(ctx2) {
-          if (!ctx2.modal) return;
-          return preventBodyScroll(dom.getDoc(ctx2));
-        },
-        trapFocus(ctx2) {
-          if (!ctx2.modal) return;
-          const contentEl = () => dom.getContentEl(ctx2);
-          return trapFocus(contentEl, {
-            initialFocus: () => getInitialFocus({
-              root: dom.getContentEl(ctx2),
-              getInitialEl: ctx2.initialFocusEl,
-              enabled: ctx2.autoFocus
-            })
-          });
-        }
+          },
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onFocusOutside: prop("onFocusOutside"),
+          persistentElements: prop("persistentElements"),
+          onDismiss() {
+            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
+          }
+        });
       },
-      actions: {
-        reposition(ctx2, evt) {
-          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          getPlacement(anchorEl, getPositionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        checkRenderedElements(ctx2) {
-          raf(() => {
-            Object.assign(ctx2.renderedElements, {
-              title: !!dom.getTitleEl(ctx2),
-              description: !!dom.getDescriptionEl(ctx2)
-            });
-          });
-        },
-        setInitialFocus(ctx2) {
-          if (ctx2.modal) return;
-          raf(() => {
-            const element = getInitialFocus({
-              root: dom.getContentEl(ctx2),
-              getInitialEl: ctx2.initialFocusEl,
-              enabled: ctx2.autoFocus
-            });
-            element?.focus({ preventScroll: true });
+      proxyTabFocus({ prop, scope }) {
+        if (prop("modal") || !prop("portalled")) return;
+        const getContentEl2 = () => getContentEl(scope);
+        return proxyTabFocus(getContentEl2, {
+          triggerElement: getTriggerEl(scope),
+          defer: true,
+          onFocus(el) {
+            el.focus({ preventScroll: true });
+          }
+        });
+      },
+      hideContentBelow({ prop, scope }) {
+        if (!prop("modal")) return;
+        const getElements = () => [getContentEl(scope), getTriggerEl(scope)];
+        return ariaHidden(getElements, { defer: true });
+      },
+      preventScroll({ prop, scope }) {
+        if (!prop("modal")) return;
+        return preventBodyScroll(scope.getDoc());
+      },
+      trapFocus({ prop, scope }) {
+        if (!prop("modal")) return;
+        const contentEl = () => getContentEl(scope);
+        return trapFocus(contentEl, {
+          initialFocus: () => getInitialFocus({
+            root: getContentEl(scope),
+            getInitialEl: prop("initialFocusEl"),
+            enabled: prop("autoFocus")
+          })
+        });
+      }
+    },
+    actions: {
+      reposition({ event, prop, scope, context }) {
+        const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
+        const getPositionerEl2 = () => getPositionerEl(scope);
+        getPlacement(anchorEl, getPositionerEl2, {
+          ...prop("positioning"),
+          ...event.options,
+          defer: true,
+          listeners: false,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
+      checkRenderedElements({ context, scope }) {
+        raf(() => {
+          Object.assign(context.get("renderedElements"), {
+            title: !!getTitleEl(scope),
+            description: !!getDescriptionEl(scope)
           });
-        },
-        setFinalFocus(ctx2, evt) {
-          const restoreFocus = evt.restoreFocus ?? evt.previousEvent?.restoreFocus;
-          if (restoreFocus != null && !restoreFocus) return;
-          raf(() => {
-            const element = dom.getTriggerEl(ctx2);
-            element?.focus({ preventScroll: true });
+        });
+      },
+      setInitialFocus({ prop, scope }) {
+        if (prop("modal")) return;
+        raf(() => {
+          const element = getInitialFocus({
+            root: getContentEl(scope),
+            getInitialEl: prop("initialFocusEl"),
+            enabled: prop("autoFocus")
           });
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
+          element?.focus({ preventScroll: true });
+        });
+      },
+      setFinalFocus({ event, scope }) {
+        const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+        if (restoreFocus != null && !restoreFocus) return;
+        raf(() => {
+          const element = getTriggerEl(scope);
+          element?.focus({ preventScroll: true });
+        });
+      },
+      invokeOnOpen({ prop }) {
+        prop("onOpenChange")?.({ open: true });
+      },
+      invokeOnClose({ prop }) {
+        prop("onOpenChange")?.({ open: false });
+      },
+      toggleVisibility({ event, send, prop }) {
+        send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event });
       }
     }
-  );
-}
+  }
+});
 var props = createProps()([
   "autoFocus",
   "closeOnEscape",
@@ -414,7 +417,7 @@ var props = createProps()([
   "onInteractOutside",
   "onOpenChange",
   "onPointerDownOutside",
-  "open.controlled",
+  "defaultOpen",
   "open",
   "persistentElements",
   "portalled",