@zag-js/popover 1.34.0 → 1.35.0

package/dist/popover.connect.js

@@ -0,0 +1,173 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/popover.connect.ts
+var popover_connect_exports = {};
+__export(popover_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(popover_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_popper = require("@zag-js/popper");
+var import_popover = require("./popover.anatomy.cjs");
+var dom = __toESM(require("./popover.dom.cjs"));
+function connect(service, normalize) {
+  const { state, context, send, computed, prop, scope } = service;
+  const open = state.matches("open");
+  const currentPlacement = context.get("currentPlacement");
+  const portalled = computed("currentPortalled");
+  const rendered = context.get("renderedElements");
+  const popperStyles = (0, import_popper.getPlacementStyles)({
+    ...prop("positioning"),
+    placement: currentPlacement
+  });
+  return {
+    portalled,
+    open,
+    setOpen(nextOpen) {
+      const open2 = state.matches("open");
+      if (open2 === nextOpen) return;
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+    },
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options });
+    },
+    getArrowProps() {
+      return normalize.element({
+        id: dom.getArrowId(scope),
+        ...import_popover.parts.arrow.attrs,
+        dir: prop("dir"),
+        style: popperStyles.arrow
+      });
+    },
+    getArrowTipProps() {
+      return normalize.element({
+        ...import_popover.parts.arrowTip.attrs,
+        dir: prop("dir"),
+        style: popperStyles.arrowTip
+      });
+    },
+    getAnchorProps() {
+      return normalize.element({
+        ...import_popover.parts.anchor.attrs,
+        dir: prop("dir"),
+        id: dom.getAnchorId(scope)
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...import_popover.parts.trigger.attrs,
+        dir: prop("dir"),
+        type: "button",
+        "data-placement": currentPlacement,
+        id: dom.getTriggerId(scope),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": dom.getContentId(scope),
+        onPointerDown(event) {
+          if (!(0, import_dom_query.isLeftClick)(event)) return;
+          if ((0, import_dom_query.isSafari)()) {
+            event.currentTarget.focus();
+          }
+        },
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "TOGGLE" });
+        },
+        onBlur(event) {
+          send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
+        }
+      });
+    },
+    getIndicatorProps() {
+      return normalize.element({
+        ...import_popover.parts.indicator.attrs,
+        dir: prop("dir"),
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        id: dom.getPositionerId(scope),
+        ...import_popover.parts.positioner.attrs,
+        dir: prop("dir"),
+        style: popperStyles.floating
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...import_popover.parts.content.attrs,
+        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-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
+        "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
+        "data-placement": currentPlacement
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...import_popover.parts.title.attrs,
+        id: dom.getTitleId(scope),
+        dir: prop("dir")
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...import_popover.parts.description.attrs,
+        id: dom.getDescriptionId(scope),
+        dir: prop("dir")
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...import_popover.parts.closeTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getCloseTriggerId(scope),
+        type: "button",
+        "aria-label": "close",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          event.stopPropagation();
+          send({ type: "CLOSE" });
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/popover.connect.mjs

@@ -0,0 +1,138 @@
+// src/popover.connect.ts
+import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
+import { getPlacementStyles } from "@zag-js/popper";
+import { parts } from "./popover.anatomy.mjs";
+import * as dom from "./popover.dom.mjs";
+function connect(service, normalize) {
+  const { state, context, send, computed, prop, scope } = service;
+  const open = state.matches("open");
+  const currentPlacement = context.get("currentPlacement");
+  const portalled = computed("currentPortalled");
+  const rendered = context.get("renderedElements");
+  const popperStyles = getPlacementStyles({
+    ...prop("positioning"),
+    placement: currentPlacement
+  });
+  return {
+    portalled,
+    open,
+    setOpen(nextOpen) {
+      const open2 = state.matches("open");
+      if (open2 === nextOpen) return;
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+    },
+    reposition(options = {}) {
+      send({ type: "POSITIONING.SET", options });
+    },
+    getArrowProps() {
+      return normalize.element({
+        id: dom.getArrowId(scope),
+        ...parts.arrow.attrs,
+        dir: prop("dir"),
+        style: popperStyles.arrow
+      });
+    },
+    getArrowTipProps() {
+      return normalize.element({
+        ...parts.arrowTip.attrs,
+        dir: prop("dir"),
+        style: popperStyles.arrowTip
+      });
+    },
+    getAnchorProps() {
+      return normalize.element({
+        ...parts.anchor.attrs,
+        dir: prop("dir"),
+        id: dom.getAnchorId(scope)
+      });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        dir: prop("dir"),
+        type: "button",
+        "data-placement": currentPlacement,
+        id: dom.getTriggerId(scope),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": dom.getContentId(scope),
+        onPointerDown(event) {
+          if (!isLeftClick(event)) return;
+          if (isSafari()) {
+            event.currentTarget.focus();
+          }
+        },
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "TOGGLE" });
+        },
+        onBlur(event) {
+          send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
+        }
+      });
+    },
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        dir: prop("dir"),
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        id: dom.getPositionerId(scope),
+        ...parts.positioner.attrs,
+        dir: prop("dir"),
+        style: popperStyles.floating
+      });
+    },
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        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-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
+        "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
+        "data-placement": currentPlacement
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        id: dom.getTitleId(scope),
+        dir: prop("dir")
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        id: dom.getDescriptionId(scope),
+        dir: prop("dir")
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...parts.closeTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getCloseTriggerId(scope),
+        type: "button",
+        "aria-label": "close",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          event.stopPropagation();
+          send({ type: "CLOSE" });
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/popover.dom.d.mts

@@ -0,0 +1,20 @@
+import { Scope } from '@zag-js/core';
+
+declare const getAnchorId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope) => any;
+declare const getContentId: (scope: Scope) => any;
+declare const getPositionerId: (scope: Scope) => any;
+declare const getArrowId: (scope: Scope) => any;
+declare const getTitleId: (scope: Scope) => any;
+declare const getDescriptionId: (scope: Scope) => any;
+declare const getCloseTriggerId: (scope: Scope) => any;
+declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
+declare const getContentEl: (scope: Scope) => HTMLElement | null;
+declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
+declare const getTitleEl: (scope: Scope) => HTMLElement | null;
+declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
+declare const getFocusableEls: (scope: Scope) => HTMLElement[];
+declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
+
+export { getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerId };

package/dist/popover.dom.d.ts

@@ -0,0 +1,20 @@
+import { Scope } from '@zag-js/core';
+
+declare const getAnchorId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope) => any;
+declare const getContentId: (scope: Scope) => any;
+declare const getPositionerId: (scope: Scope) => any;
+declare const getArrowId: (scope: Scope) => any;
+declare const getTitleId: (scope: Scope) => any;
+declare const getDescriptionId: (scope: Scope) => any;
+declare const getCloseTriggerId: (scope: Scope) => any;
+declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
+declare const getContentEl: (scope: Scope) => HTMLElement | null;
+declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
+declare const getTitleEl: (scope: Scope) => HTMLElement | null;
+declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
+declare const getFocusableEls: (scope: Scope) => HTMLElement[];
+declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
+
+export { getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerId };

package/dist/popover.dom.js

@@ -0,0 +1,76 @@
+"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);
+
+// src/popover.dom.ts
+var popover_dom_exports = {};
+__export(popover_dom_exports, {
+  getAnchorEl: () => getAnchorEl,
+  getAnchorId: () => getAnchorId,
+  getArrowId: () => getArrowId,
+  getCloseTriggerId: () => getCloseTriggerId,
+  getContentEl: () => getContentEl,
+  getContentId: () => getContentId,
+  getDescriptionEl: () => getDescriptionEl,
+  getDescriptionId: () => getDescriptionId,
+  getFirstFocusableEl: () => getFirstFocusableEl,
+  getFocusableEls: () => getFocusableEls,
+  getPositionerEl: () => getPositionerEl,
+  getPositionerId: () => getPositionerId,
+  getTitleEl: () => getTitleEl,
+  getTitleId: () => getTitleId,
+  getTriggerEl: () => getTriggerEl,
+  getTriggerId: () => getTriggerId
+});
+module.exports = __toCommonJS(popover_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+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));
+var getFocusableEls = (scope) => (0, import_dom_query.getFocusables)(getContentEl(scope));
+var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAnchorEl,
+  getAnchorId,
+  getArrowId,
+  getCloseTriggerId,
+  getContentEl,
+  getContentId,
+  getDescriptionEl,
+  getDescriptionId,
+  getFirstFocusableEl,
+  getFocusableEls,
+  getPositionerEl,
+  getPositionerId,
+  getTitleEl,
+  getTitleId,
+  getTriggerEl,
+  getTriggerId
+});

package/dist/popover.dom.mjs

@@ -0,0 +1,36 @@
+// src/popover.dom.ts
+import { getFocusables } from "@zag-js/dom-query";
+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));
+var getFocusableEls = (scope) => getFocusables(getContentEl(scope));
+var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
+export {
+  getAnchorEl,
+  getAnchorId,
+  getArrowId,
+  getCloseTriggerId,
+  getContentEl,
+  getContentId,
+  getDescriptionEl,
+  getDescriptionId,
+  getFirstFocusableEl,
+  getFocusableEls,
+  getPositionerEl,
+  getPositionerId,
+  getTitleEl,
+  getTitleId,
+  getTriggerEl,
+  getTriggerId
+};

package/dist/popover.machine.d.mts

@@ -0,0 +1,9 @@
+import * as _zag_js_core from '@zag-js/core';
+import { PopoverSchema } from './popover.types.mjs';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<PopoverSchema>;
+
+export { machine };

package/dist/popover.machine.d.ts

@@ -0,0 +1,9 @@
+import * as _zag_js_core from '@zag-js/core';
+import { PopoverSchema } from './popover.types.js';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<PopoverSchema>;
+
+export { machine };