@zag-js/popover 0.10.2 → 0.10.4

package/dist/popover.machine.js

@@ -1,78 +1,21 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/popover.machine.ts
-var popover_machine_exports = {};
-__export(popover_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(popover_machine_exports);
-var import_aria_hidden = require("@zag-js/aria-hidden");
-var import_core = require("@zag-js/core");
-var import_dismissable = require("@zag-js/dismissable");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_popper = require("@zag-js/popper");
-var import_remove_scroll = require("@zag-js/remove-scroll");
-var import_tabbable2 = require("@zag-js/tabbable");
-var import_utils2 = require("@zag-js/utils");
-var import_focus_trap = require("focus-trap");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/popover.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var import_tabbable = require("@zag-js/tabbable");
-var import_utils = require("@zag-js/utils");
-var dom = (0, import_dom_query.createScope)({
-  getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
-  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) => (0, import_tabbable.getFocusables)(dom.getContentEl(ctx)),
-  getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
-  getDocTabbableEls: (ctx) => (0, import_tabbable.getTabbables)(dom.getDoc(ctx).body),
-  getTabbableEls: (ctx) => (0, import_tabbable.getTabbables)(dom.getContentEl(ctx), "if-empty"),
-  getFirstTabbableEl: (ctx) => (0, import_tabbable.getFirstTabbable)(dom.getContentEl(ctx), "if-empty"),
-  getLastTabbableEl: (ctx) => (0, import_tabbable.getLastTabbable)(dom.getContentEl(ctx), "if-empty"),
-  getInitialFocusEl: (ctx) => {
-    let el = (0, import_utils.runIfFn)(ctx.initialFocusEl);
-    if (!el && ctx.autoFocus)
-      el = dom.getFirstFocusableEl(ctx);
-    if (!el)
-      el = dom.getContentEl(ctx);
-    return el;
-  }
-});
+const ariaHidden = require('@zag-js/aria-hidden');
+const core = require('@zag-js/core');
+const dismissable = require('@zag-js/dismissable');
+const domQuery = require('@zag-js/dom-query');
+const popper = require('@zag-js/popper');
+const removeScroll = require('@zag-js/remove-scroll');
+const tabbable = require('@zag-js/tabbable');
+const utils = require('@zag-js/utils');
+const focusTrap = require('focus-trap');
+const popover_dom = require('./popover.dom.js');
 
-// src/popover.machine.ts
 function machine(userContext) {
-  const ctx = (0, import_utils2.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "popover",
       initial: ctx.open ? "open" : "closed",
@@ -146,9 +89,9 @@ function machine(userContext) {
       activities: {
         trackPositioning(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return (0, import_popper.getPlacement)(anchorEl, getPositionerEl, {
+          const anchorEl = popover_dom.dom.getAnchorEl(ctx2) ?? popover_dom.dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => popover_dom.dom.getPositionerEl(ctx2);
+          return popper.getPlacement(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
             defer: true,
             onComplete(data) {
@@ -160,11 +103,11 @@ function machine(userContext) {
           });
         },
         trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
+          const getContentEl = () => popover_dom.dom.getContentEl(ctx2);
           let restoreFocus = true;
-          return (0, import_dismissable.trackDismissableElement)(getContentEl, {
+          return dismissable.trackDismissableElement(getContentEl, {
             pointerBlocking: ctx2.modal,
-            exclude: dom.getTriggerEl(ctx2),
+            exclude: popover_dom.dom.getTriggerEl(ctx2),
             defer: true,
             onEscapeKeyDown(event) {
               ctx2.onEscapeKeyDown?.(event);
@@ -195,9 +138,9 @@ function machine(userContext) {
         proxyTabFocus(ctx2) {
           if (ctx2.modal || !ctx2.portalled)
             return;
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return (0, import_tabbable2.proxyTabFocus)(getContentEl, {
-            triggerElement: dom.getTriggerEl(ctx2),
+          const getContentEl = () => popover_dom.dom.getContentEl(ctx2);
+          return tabbable.proxyTabFocus(getContentEl, {
+            triggerElement: popover_dom.dom.getTriggerEl(ctx2),
             defer: true,
             onFocus(el) {
               el.focus({ preventScroll: true });
@@ -207,30 +150,30 @@ function machine(userContext) {
         hideContentBelow(ctx2) {
           if (!ctx2.modal)
             return;
-          const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
-          return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
+          const getElements = () => [popover_dom.dom.getContentEl(ctx2), popover_dom.dom.getTriggerEl(ctx2)];
+          return ariaHidden.ariaHidden(getElements, { defer: true });
         },
         preventScroll(ctx2) {
           if (!ctx2.modal)
             return;
-          return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
+          return removeScroll.preventBodyScroll(popover_dom.dom.getDoc(ctx2));
         },
         trapFocus(ctx2) {
           if (!ctx2.modal)
             return;
           let trap;
-          (0, import_dom_query2.nextTick)(() => {
-            const el = dom.getContentEl(ctx2);
+          domQuery.nextTick(() => {
+            const el = popover_dom.dom.getContentEl(ctx2);
             if (!el)
               return;
-            trap = (0, import_focus_trap.createFocusTrap)(el, {
+            trap = focusTrap.createFocusTrap(el, {
               escapeDeactivates: false,
               allowOutsideClick: true,
               preventScroll: true,
               returnFocusOnDeactivate: true,
-              document: dom.getDoc(ctx2),
+              document: popover_dom.dom.getDoc(ctx2),
               fallbackFocus: el,
-              initialFocus: (0, import_utils2.runIfFn)(ctx2.initialFocusEl)
+              initialFocus: utils.runIfFn(ctx2.initialFocusEl)
             });
             try {
               trap.activate();
@@ -242,9 +185,9 @@ function machine(userContext) {
       },
       actions: {
         setPositioning(ctx2, evt) {
-          const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          (0, import_popper.getPlacement)(anchorEl, getPositionerEl, {
+          const anchorEl = popover_dom.dom.getAnchorEl(ctx2) ?? popover_dom.dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => popover_dom.dom.getPositionerEl(ctx2);
+          popper.getPlacement(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
             ...evt.options,
             defer: true,
@@ -252,23 +195,23 @@ function machine(userContext) {
           });
         },
         checkRenderedElements(ctx2) {
-          (0, import_dom_query2.raf)(() => {
+          domQuery.raf(() => {
             Object.assign(ctx2.renderedElements, {
-              title: !!dom.getTitleEl(ctx2),
-              description: !!dom.getDescriptionEl(ctx2)
+              title: !!popover_dom.dom.getTitleEl(ctx2),
+              description: !!popover_dom.dom.getDescriptionEl(ctx2)
             });
           });
         },
         setInitialFocus(ctx2) {
-          (0, import_dom_query2.raf)(() => {
-            dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
+          domQuery.raf(() => {
+            popover_dom.dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         restoreFocusIfNeeded(ctx2, evt) {
           if (!evt.restoreFocus)
             return;
-          (0, import_dom_query2.raf)(() => {
-            dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
+          domQuery.raf(() => {
+            popover_dom.dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         invokeOnOpen(ctx2) {
@@ -284,7 +227,5 @@ function machine(userContext) {
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;

package/dist/popover.machine.mjs

@@ -1,7 +1,227 @@
-import {
-  machine
-} from "./chunk-EDQUDEDS.mjs";
-import "./chunk-UA4OMIJI.mjs";
-export {
-  machine
-};
+import { ariaHidden } from '@zag-js/aria-hidden';
+import { createMachine } from '@zag-js/core';
+import { trackDismissableElement } from '@zag-js/dismissable';
+import { nextTick, raf } from '@zag-js/dom-query';
+import { getPlacement } from '@zag-js/popper';
+import { preventBodyScroll } from '@zag-js/remove-scroll';
+import { proxyTabFocus } from '@zag-js/tabbable';
+import { compact, runIfFn } from '@zag-js/utils';
+import { createFocusTrap } from 'focus-trap';
+import { dom } from './popover.dom.mjs';
+
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "popover",
+      initial: ctx.open ? "open" : "closed",
+      context: {
+        closeOnInteractOutside: true,
+        closeOnEsc: true,
+        autoFocus: true,
+        modal: false,
+        positioning: {
+          placement: "bottom",
+          ...ctx.positioning
+        },
+        currentPlacement: void 0,
+        ...ctx,
+        renderedElements: {
+          title: true,
+          description: true
+        }
+      },
+      computed: {
+        currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
+      },
+      watch: {
+        open: ["toggleVisibility"]
+      },
+      entry: ["checkRenderedElements"],
+      states: {
+        closed: {
+          on: {
+            TOGGLE: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            },
+            OPEN: {
+              target: "open",
+              actions: ["invokeOnOpen"]
+            }
+          }
+        },
+        open: {
+          activities: [
+            "trapFocus",
+            "preventScroll",
+            "hideContentBelow",
+            "trackPositioning",
+            "trackDismissableElement",
+            "proxyTabFocus"
+          ],
+          entry: ["setInitialFocus"],
+          on: {
+            CLOSE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
+            },
+            REQUEST_CLOSE: {
+              target: "closed",
+              actions: ["restoreFocusIfNeeded", "invokeOnClose"]
+            },
+            TOGGLE: {
+              target: "closed",
+              actions: ["invokeOnClose"]
+            },
+            SET_POSITIONING: {
+              actions: "setPositioning"
+            }
+          }
+        }
+      }
+    },
+    {
+      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;
+            },
+            onCleanup() {
+              ctx2.currentPlacement = void 0;
+            }
+          });
+        },
+        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.closeOnEsc)
+                return;
+              event.preventDefault();
+            },
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (event.defaultPrevented)
+                return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!ctx2.closeOnInteractOutside) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside(event) {
+              ctx2.onPointerDownOutside?.(event);
+            },
+            onFocusOutside(event) {
+              ctx2.onFocusOutside?.(event);
+            },
+            onDismiss() {
+              send({ type: "REQUEST_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;
+          let trap;
+          nextTick(() => {
+            const el = dom.getContentEl(ctx2);
+            if (!el)
+              return;
+            trap = createFocusTrap(el, {
+              escapeDeactivates: false,
+              allowOutsideClick: true,
+              preventScroll: true,
+              returnFocusOnDeactivate: true,
+              document: dom.getDoc(ctx2),
+              fallbackFocus: el,
+              initialFocus: runIfFn(ctx2.initialFocusEl)
+            });
+            try {
+              trap.activate();
+            } catch {
+            }
+          });
+          return () => trap?.deactivate();
+        }
+      },
+      actions: {
+        setPositioning(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
+          });
+        },
+        checkRenderedElements(ctx2) {
+          raf(() => {
+            Object.assign(ctx2.renderedElements, {
+              title: !!dom.getTitleEl(ctx2),
+              description: !!dom.getDescriptionEl(ctx2)
+            });
+          });
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        restoreFocusIfNeeded(ctx2, evt) {
+          if (!evt.restoreFocus)
+            return;
+          raf(() => {
+            dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpen?.();
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onClose?.();
+        },
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
+        }
+      }
+    }
+  );
+}
+
+export { machine };

package/dist/popover.types.d.ts

@@ -1,8 +1,7 @@
-import { StateMachine } from '@zag-js/core';
-import { DismissableElementHandlers } from '@zag-js/dismissable';
-import { PositioningOptions } from '@zag-js/popper';
-import { RequiredBy, CommonProperties, MaybeElement, Context } from '@zag-js/types';
-
+import type { StateMachine as S } from "@zag-js/core";
+import type { DismissableElementHandlers } from "@zag-js/dismissable";
+import type { PositioningOptions, Placement } from "@zag-js/popper";
+import type { CommonProperties, Context, MaybeElement, RequiredBy } from "@zag-js/types";
 type ElementIds = Partial<{
     anchor: string;
     trigger: string;
@@ -66,7 +65,7 @@ type PublicContext = DismissableElementHandlers & CommonProperties & {
      */
     open?: boolean;
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
@@ -75,11 +74,10 @@ type ComputedContext = Readonly<{
     currentPortalled: boolean;
 }>;
 type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
+export type MachineContext = PublicContext & ComputedContext & PrivateContext;
+export type MachineState = {
     value: "open" | "closed";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-export { MachineContext, MachineState, Send, State, UserDefinedContext };
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export type { PositioningOptions, Placement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,17 +27,17 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "focus-trap": "7.4.3",
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/aria-hidden": "0.10.2",
-    "@zag-js/core": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/dismissable": "0.10.2",
-    "@zag-js/tabbable": "0.10.2",
-    "@zag-js/popper": "0.10.2",
-    "@zag-js/remove-scroll": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "focus-trap": "7.5.1",
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/aria-hidden": "0.10.4",
+    "@zag-js/core": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/dismissable": "0.10.4",
+    "@zag-js/tabbable": "0.10.4",
+    "@zag-js/popper": "0.10.4",
+    "@zag-js/remove-scroll": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -55,13 +55,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/index.ts

@@ -1,4 +1,4 @@
 export { anatomy } from "./popover.anatomy"
 export { connect } from "./popover.connect"
 export { machine } from "./popover.machine"
-export type { UserDefinedContext as Context } from "./popover.types"
+export type { UserDefinedContext as Context, Placement, PositioningOptions } from "./popover.types"

package/src/popover.types.ts

@@ -104,3 +104,5 @@ export type MachineState = {
 export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
+
+export type { PositioningOptions, Placement }