@zag-js/popover 0.10.2 → 0.10.4

package/dist/popover.connect.js

@@ -1,89 +1,18 @@
-"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.connect.ts
-var popover_connect_exports = {};
-__export(popover_connect_exports, {
-  connect: () => connect
-});
-module.exports = __toCommonJS(popover_connect_exports);
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_popper = require("@zag-js/popper");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/popover.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
-  "arrow",
-  "arrowTip",
-  "anchor",
-  "trigger",
-  "positioner",
-  "content",
-  "title",
-  "description",
-  "closeTrigger"
-);
-var parts = anatomy.build();
+const domQuery = require('@zag-js/dom-query');
+const popper = require('@zag-js/popper');
+const popover_anatomy = require('./popover.anatomy.js');
+const popover_dom = require('./popover.dom.js');
 
-// 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;
-  }
-});
-
-// src/popover.connect.ts
 function connect(state, send, normalize) {
   const isOpen = state.matches("open");
   const currentPlacement = state.context.currentPlacement;
   const portalled = state.context.currentPortalled;
   const rendered = state.context.renderedElements;
-  const popperStyles = (0, import_popper.getPlacementStyles)({
+  const popperStyles = popper.getPlacementStyles({
     placement: currentPlacement
   });
   return {
@@ -114,27 +43,27 @@ function connect(state, send, normalize) {
       send({ type: "SET_POSITIONING", options });
     },
     arrowProps: normalize.element({
-      id: dom.getArrowId(state.context),
-      ...parts.arrow.attrs,
+      id: popover_dom.dom.getArrowId(state.context),
+      ...popover_anatomy.parts.arrow.attrs,
       style: popperStyles.arrow
     }),
     arrowTipProps: normalize.element({
-      ...parts.arrowTip.attrs,
+      ...popover_anatomy.parts.arrowTip.attrs,
       style: popperStyles.arrowTip
     }),
     anchorProps: normalize.element({
-      ...parts.anchor.attrs,
-      id: dom.getAnchorId(state.context)
+      ...popover_anatomy.parts.anchor.attrs,
+      id: popover_dom.dom.getAnchorId(state.context)
     }),
     triggerProps: normalize.button({
-      ...parts.trigger.attrs,
+      ...popover_anatomy.parts.trigger.attrs,
       type: "button",
       "data-placement": currentPlacement,
-      id: dom.getTriggerId(state.context),
+      id: popover_dom.dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
-      "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
-      "aria-controls": dom.getContentId(state.context),
+      "data-expanded": domQuery.dataAttr(isOpen),
+      "aria-controls": popover_dom.dom.getContentId(state.context),
       onClick() {
         send("TOGGLE");
       },
@@ -143,32 +72,32 @@ function connect(state, send, normalize) {
       }
     }),
     positionerProps: normalize.element({
-      id: dom.getPositionerId(state.context),
-      ...parts.positioner.attrs,
+      id: popover_dom.dom.getPositionerId(state.context),
+      ...popover_anatomy.parts.positioner.attrs,
       style: popperStyles.floating
     }),
     contentProps: normalize.element({
-      ...parts.content.attrs,
-      id: dom.getContentId(state.context),
+      ...popover_anatomy.parts.content.attrs,
+      id: popover_dom.dom.getContentId(state.context),
       tabIndex: -1,
       role: "dialog",
       hidden: !isOpen,
-      "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
-      "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
-      "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-expanded": domQuery.dataAttr(isOpen),
+      "aria-labelledby": rendered.title ? popover_dom.dom.getTitleId(state.context) : void 0,
+      "aria-describedby": rendered.description ? popover_dom.dom.getDescriptionId(state.context) : void 0,
       "data-placement": currentPlacement
     }),
     titleProps: normalize.element({
-      ...parts.title.attrs,
-      id: dom.getTitleId(state.context)
+      ...popover_anatomy.parts.title.attrs,
+      id: popover_dom.dom.getTitleId(state.context)
     }),
     descriptionProps: normalize.element({
-      ...parts.description.attrs,
-      id: dom.getDescriptionId(state.context)
+      ...popover_anatomy.parts.description.attrs,
+      id: popover_dom.dom.getDescriptionId(state.context)
     }),
     closeTriggerProps: normalize.button({
-      ...parts.closeTrigger.attrs,
-      id: dom.getCloseTriggerId(state.context),
+      ...popover_anatomy.parts.closeTrigger.attrs,
+      id: popover_dom.dom.getCloseTriggerId(state.context),
       type: "button",
       "aria-label": "close",
       onClick() {
@@ -177,7 +106,5 @@ function connect(state, send, normalize) {
     })
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;

package/dist/popover.connect.mjs

@@ -1,8 +1,106 @@
-import {
-  connect
-} from "./chunk-HRZXZNMW.mjs";
-import "./chunk-KTOPDXGV.mjs";
-import "./chunk-UA4OMIJI.mjs";
-export {
-  connect
-};
+import { dataAttr } from '@zag-js/dom-query';
+import { getPlacementStyles } from '@zag-js/popper';
+import { parts } from './popover.anatomy.mjs';
+import { dom } from './popover.dom.mjs';
+
+function connect(state, send, normalize) {
+  const isOpen = state.matches("open");
+  const currentPlacement = state.context.currentPlacement;
+  const portalled = state.context.currentPortalled;
+  const rendered = state.context.renderedElements;
+  const popperStyles = getPlacementStyles({
+    placement: currentPlacement
+  });
+  return {
+    /**
+     * Whether the popover is portalled
+     */
+    portalled,
+    /**
+     * Whether the popover is open
+     */
+    isOpen,
+    /**
+     * Function to open the popover
+     */
+    open() {
+      send("OPEN");
+    },
+    /**
+     * Function to close the popover
+     */
+    close() {
+      send("CLOSE");
+    },
+    /**
+     * Function to reposition the popover
+     */
+    setPositioning(options = {}) {
+      send({ type: "SET_POSITIONING", options });
+    },
+    arrowProps: normalize.element({
+      id: dom.getArrowId(state.context),
+      ...parts.arrow.attrs,
+      style: popperStyles.arrow
+    }),
+    arrowTipProps: normalize.element({
+      ...parts.arrowTip.attrs,
+      style: popperStyles.arrowTip
+    }),
+    anchorProps: normalize.element({
+      ...parts.anchor.attrs,
+      id: dom.getAnchorId(state.context)
+    }),
+    triggerProps: normalize.button({
+      ...parts.trigger.attrs,
+      type: "button",
+      "data-placement": currentPlacement,
+      id: dom.getTriggerId(state.context),
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      "data-expanded": dataAttr(isOpen),
+      "aria-controls": dom.getContentId(state.context),
+      onClick() {
+        send("TOGGLE");
+      },
+      onBlur(event) {
+        send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
+      }
+    }),
+    positionerProps: normalize.element({
+      id: dom.getPositionerId(state.context),
+      ...parts.positioner.attrs,
+      style: popperStyles.floating
+    }),
+    contentProps: normalize.element({
+      ...parts.content.attrs,
+      id: dom.getContentId(state.context),
+      tabIndex: -1,
+      role: "dialog",
+      hidden: !isOpen,
+      "data-expanded": dataAttr(isOpen),
+      "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
+      "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-placement": currentPlacement
+    }),
+    titleProps: normalize.element({
+      ...parts.title.attrs,
+      id: dom.getTitleId(state.context)
+    }),
+    descriptionProps: normalize.element({
+      ...parts.description.attrs,
+      id: dom.getDescriptionId(state.context)
+    }),
+    closeTriggerProps: normalize.button({
+      ...parts.closeTrigger.attrs,
+      id: dom.getCloseTriggerId(state.context),
+      type: "button",
+      "aria-label": "close",
+      onClick() {
+        send("REQUEST_CLOSE");
+      }
+    })
+  };
+}
+
+export { connect };

package/dist/popover.dom.d.ts

@@ -1,10 +1,5 @@
-import { MachineContext } from './popover.types.js';
-import '@zag-js/core';
-import '@zag-js/dismissable';
-import '@zag-js/popper';
-import '@zag-js/types';
-
-declare const dom: {
+import type { MachineContext as Ctx } from "./popover.types";
+export declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
@@ -24,28 +19,26 @@ declare const dom: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }, id: string) => T_1;
 } & {
-    getActiveEl: (ctx: MachineContext) => Element | null;
-    getAnchorId: (ctx: MachineContext) => string;
-    getTriggerId: (ctx: MachineContext) => string;
-    getContentId: (ctx: MachineContext) => string;
-    getPositionerId: (ctx: MachineContext) => string;
-    getArrowId: (ctx: MachineContext) => string;
-    getTitleId: (ctx: MachineContext) => string;
-    getDescriptionId: (ctx: MachineContext) => string;
-    getCloseTriggerId: (ctx: MachineContext) => string;
-    getAnchorEl: (ctx: MachineContext) => HTMLElement | null;
-    getTriggerEl: (ctx: MachineContext) => HTMLElement | null;
-    getContentEl: (ctx: MachineContext) => HTMLElement | null;
-    getPositionerEl: (ctx: MachineContext) => HTMLElement | null;
-    getTitleEl: (ctx: MachineContext) => HTMLElement | null;
-    getDescriptionEl: (ctx: MachineContext) => HTMLElement | null;
-    getFocusableEls: (ctx: MachineContext) => HTMLElement[];
-    getFirstFocusableEl: (ctx: MachineContext) => HTMLElement;
-    getDocTabbableEls: (ctx: MachineContext) => HTMLElement[];
-    getTabbableEls: (ctx: MachineContext) => HTMLElement[];
-    getFirstTabbableEl: (ctx: MachineContext) => HTMLElement;
-    getLastTabbableEl: (ctx: MachineContext) => HTMLElement;
-    getInitialFocusEl: (ctx: MachineContext) => HTMLElement | null;
+    getActiveEl: (ctx: Ctx) => Element | null;
+    getAnchorId: (ctx: Ctx) => string;
+    getTriggerId: (ctx: Ctx) => string;
+    getContentId: (ctx: Ctx) => string;
+    getPositionerId: (ctx: Ctx) => string;
+    getArrowId: (ctx: Ctx) => string;
+    getTitleId: (ctx: Ctx) => string;
+    getDescriptionId: (ctx: Ctx) => string;
+    getCloseTriggerId: (ctx: Ctx) => string;
+    getAnchorEl: (ctx: Ctx) => HTMLElement | null;
+    getTriggerEl: (ctx: Ctx) => HTMLElement | null;
+    getContentEl: (ctx: Ctx) => HTMLElement | null;
+    getPositionerEl: (ctx: Ctx) => HTMLElement | null;
+    getTitleEl: (ctx: Ctx) => HTMLElement | null;
+    getDescriptionEl: (ctx: Ctx) => HTMLElement | null;
+    getFocusableEls: (ctx: Ctx) => HTMLElement[];
+    getFirstFocusableEl: (ctx: Ctx) => HTMLElement;
+    getDocTabbableEls: (ctx: Ctx) => HTMLElement[];
+    getTabbableEls: (ctx: Ctx) => HTMLElement[];
+    getFirstTabbableEl: (ctx: Ctx) => HTMLElement;
+    getLastTabbableEl: (ctx: Ctx) => HTMLElement;
+    getInitialFocusEl: (ctx: Ctx) => HTMLElement | null;
 };
-
-export { dom };

package/dist/popover.dom.js

@@ -1,32 +1,12 @@
-"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.dom.ts
-var popover_dom_exports = {};
-__export(popover_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(popover_dom_exports);
-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)({
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+const tabbable = require('@zag-js/tabbable');
+const utils = require('@zag-js/utils');
+
+const dom = domQuery.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`,
@@ -42,14 +22,14 @@ var dom = (0, import_dom_query.createScope)({
   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)),
+  getFocusableEls: (ctx) => 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"),
+  getDocTabbableEls: (ctx) => tabbable.getTabbables(dom.getDoc(ctx).body),
+  getTabbableEls: (ctx) => tabbable.getTabbables(dom.getContentEl(ctx), "if-empty"),
+  getFirstTabbableEl: (ctx) => tabbable.getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
+  getLastTabbableEl: (ctx) => tabbable.getLastTabbable(dom.getContentEl(ctx), "if-empty"),
   getInitialFocusEl: (ctx) => {
-    let el = (0, import_utils.runIfFn)(ctx.initialFocusEl);
+    let el = utils.runIfFn(ctx.initialFocusEl);
     if (!el && ctx.autoFocus)
       el = dom.getFirstFocusableEl(ctx);
     if (!el)
@@ -57,7 +37,5 @@ var dom = (0, import_dom_query.createScope)({
     return el;
   }
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/popover.dom.mjs

@@ -1,6 +1,37 @@
-import {
-  dom
-} from "./chunk-UA4OMIJI.mjs";
-export {
-  dom
-};
+import { createScope } from '@zag-js/dom-query';
+import { getFocusables, getTabbables, getFirstTabbable, getLastTabbable } from '@zag-js/tabbable';
+import { runIfFn } from '@zag-js/utils';
+
+const dom = 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) => getFocusables(dom.getContentEl(ctx)),
+  getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
+  getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
+  getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
+  getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
+  getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
+  getInitialFocusEl: (ctx) => {
+    let el = runIfFn(ctx.initialFocusEl);
+    if (!el && ctx.autoFocus)
+      el = dom.getFirstFocusableEl(ctx);
+    if (!el)
+      el = dom.getContentEl(ctx);
+    return el;
+  }
+});
+
+export { dom };

package/dist/popover.machine.d.ts

@@ -1,9 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedContext, MachineContext, MachineState } from './popover.types.js';
-import '@zag-js/dismissable';
-import '@zag-js/popper';
-import '@zag-js/types';
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { machine };
+import { Machine, StateMachine } from '@zag-js/core';
+import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types";
+export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;