@zag-js/popover 0.0.0-dev-20230221113221 → 0.0.0-dev-20230222181847

package/dist/chunk-4IGGT6KB.mjs

@@ -0,0 +1,39 @@
+// src/popover.dom.ts
+import { createScope } from "@zag-js/dom-query";
+import { getFirstTabbable, getFocusables, getLastTabbable, getTabbables } from "@zag-js/tabbable";
+import { runIfFn } from "@zag-js/utils";
+var 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) => `popover:${ctx.id}:popper`,
+  getArrowId: (ctx) => `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/{chunk-JDSPKDIN.mjs → chunk-GKHXQZZB.mjs}

@@ -3,14 +3,10 @@ import {
 } from "./chunk-KTOPDXGV.mjs";
 import {
   dom
-} from "./chunk-Z2WON7A5.mjs";
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
+} from "./chunk-4IGGT6KB.mjs";
 
 // src/popover.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
 import { getPlacementStyles } from "@zag-js/popper";
 function connect(state, send, normalize) {
   const isOpen = state.matches("open");
@@ -22,11 +18,23 @@ function connect(state, send, normalize) {
     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");
     },

package/dist/{chunk-FRFRU5PG.mjs → chunk-JT2RXXW4.mjs}

@@ -1,83 +1,16 @@
 import {
-  contains,
-  dom,
-  runIfFn
-} from "./chunk-Z2WON7A5.mjs";
+  dom
+} from "./chunk-4IGGT6KB.mjs";
 
 // src/popover.machine.ts
 import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine, guards } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-
-// ../../utilities/core/src/array.ts
-function nextIndex(v, idx, opts = {}) {
-  const { step = 1, loop = true } = opts;
-  const next2 = idx + step;
-  const len = v.length;
-  const last = len - 1;
-  if (idx === -1)
-    return step > 0 ? 0 : last;
-  if (next2 < 0)
-    return loop ? last : 0;
-  if (next2 >= len)
-    return loop ? 0 : idx > len ? len : idx;
-  return next2;
-}
-function next(v, idx, opts = {}) {
-  return v[nextIndex(v, idx, opts)];
-}
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/event.ts
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// src/popover.machine.ts
+import { contains, nextTick, raf } from "@zag-js/dom-query";
+import { addDomEvent, isModifiedEvent } from "@zag-js/dom-event";
 import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
+import { compact, next, runIfFn } from "@zag-js/utils";
 import { createFocusTrap } from "focus-trap";
 var { and, or, not } = guards;
 function machine(userContext) {

package/dist/index.js

@@ -41,198 +41,15 @@ var anatomy = (0, import_anatomy.createAnatomy)("popover").parts(
 );
 var parts = anatomy.build();
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/core/src/array.ts
-function nextIndex(v, idx, opts = {}) {
-  const { step = 1, loop = true } = opts;
-  const next2 = idx + step;
-  const len = v.length;
-  const last = len - 1;
-  if (idx === -1)
-    return step > 0 ? 0 : last;
-  if (next2 < 0)
-    return loop ? last : 0;
-  if (next2 >= len)
-    return loop ? 0 : idx > len ? len : idx;
-  return next2;
-}
-function next(v, idx, opts = {}) {
-  return v[nextIndex(v, idx, opts)];
-}
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function isFrame(element) {
-  return element.localName === "iframe";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    queryById: (ctx, id) => {
-      const el = dom2.getById(ctx, id);
-      if (!el)
-        throw new Error(`Element with id "${id}" not found.`);
-      return el;
-    }
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-function contains(parent, child) {
-  if (!parent)
-    return false;
-  return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
-}
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-function isVisible(el) {
-  if (!isHTMLElement(el))
-    return false;
-  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
-}
-
-// ../../utilities/dom/src/event.ts
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../utilities/dom/src/focusable.ts
-function hasNegativeTabIndex(element) {
-  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
-  return tabIndex < 0;
-}
-var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
-var getFocusables = (container, includeContainer = false) => {
-  if (!container)
-    return [];
-  const elements = Array.from(container.querySelectorAll(focusableSelector));
-  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
-  if (include && isHTMLElement(container) && isFocusable(container)) {
-    elements.unshift(container);
-  }
-  const focusableElements = elements.filter(isFocusable);
-  focusableElements.forEach((element, i) => {
-    if (isFrame(element) && element.contentDocument) {
-      const frameBody = element.contentDocument.body;
-      focusableElements.splice(i, 1, ...getFocusables(frameBody));
-    }
-  });
-  return focusableElements;
-};
-function isFocusable(element) {
-  if (!element)
-    return false;
-  return element.matches(focusableSelector) && isVisible(element);
-}
-function getTabbables(container, includeContainer) {
-  if (!container)
-    return [];
-  const elements = Array.from(container.querySelectorAll(focusableSelector));
-  const tabbableElements = elements.filter(isTabbable);
-  if (includeContainer && isTabbable(container)) {
-    tabbableElements.unshift(container);
-  }
-  tabbableElements.forEach((element, i) => {
-    if (isFrame(element) && element.contentDocument) {
-      const frameBody = element.contentDocument.body;
-      const allFrameTabbable = getTabbables(frameBody);
-      tabbableElements.splice(i, 1, ...allFrameTabbable);
-    }
-  });
-  if (!tabbableElements.length && includeContainer) {
-    return elements;
-  }
-  return tabbableElements;
-}
-function isTabbable(el) {
-  return isFocusable(el) && !hasNegativeTabIndex(el);
-}
-function getFirstTabbable(container, includeContainer) {
-  const [first] = getTabbables(container, includeContainer);
-  return first || null;
-}
-function getLastTabbable(container, includeContainer) {
-  const elements = getTabbables(container, includeContainer);
-  return elements[elements.length - 1] || null;
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
 // src/popover.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
 
 // src/popover.dom.ts
-var dom = defineDomHelpers({
+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`,
@@ -248,14 +65,14 @@ var dom = defineDomHelpers({
   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)),
+  getFocusableEls: (ctx) => (0, import_tabbable.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"),
+  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 = runIfFn(ctx.initialFocusEl);
+    let el = (0, import_utils.runIfFn)(ctx.initialFocusEl);
     if (!el && ctx.autoFocus)
       el = dom.getFirstFocusableEl(ctx);
     if (!el)
@@ -275,11 +92,23 @@ function connect(state, send, normalize) {
     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");
     },
@@ -303,7 +132,7 @@ function connect(state, send, normalize) {
       id: dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
-      "data-expanded": dataAttr(isOpen),
+      "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
       "aria-controls": dom.getContentId(state.context),
       onClick() {
         send("TOGGLE");
@@ -323,7 +152,7 @@ function connect(state, send, normalize) {
       tabIndex: -1,
       role: "dialog",
       hidden: !isOpen,
-      "data-expanded": dataAttr(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-placement": currentPlacement
@@ -352,12 +181,15 @@ function connect(state, send, normalize) {
 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_query3 = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
 var import_popper2 = require("@zag-js/popper");
 var import_remove_scroll = require("@zag-js/remove-scroll");
+var import_utils2 = require("@zag-js/utils");
 var import_focus_trap = require("focus-trap");
 var { and, or, not } = import_core.guards;
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "popover",
@@ -486,11 +318,11 @@ function machine(userContext) {
         trackTabKeyDown(ctx2, _evt, { send }) {
           if (ctx2.modal)
             return;
-          return addDomEvent(
+          return (0, import_dom_event.addDomEvent)(
             dom.getWin(ctx2),
             "keydown",
             (event) => {
-              const isTabKey = event.key === "Tab" && !isModifiedEvent(event);
+              const isTabKey = event.key === "Tab" && !(0, import_dom_event.isModifiedEvent)(event);
               if (!isTabKey)
                 return;
               send({
@@ -505,7 +337,7 @@ function machine(userContext) {
           if (!ctx2.modal)
             return;
           let cleanup;
-          nextTick(() => {
+          (0, import_dom_query3.nextTick)(() => {
             cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
           });
           return () => cleanup?.();
@@ -519,7 +351,7 @@ function machine(userContext) {
           if (!ctx2.modal)
             return;
           let trap;
-          nextTick(() => {
+          (0, import_dom_query3.nextTick)(() => {
             const el = dom.getContentEl(ctx2);
             if (!el)
               return;
@@ -529,7 +361,7 @@ function machine(userContext) {
               returnFocusOnDeactivate: true,
               document: dom.getDoc(ctx2),
               fallbackFocus: el,
-              initialFocus: runIfFn(ctx2.initialFocusEl)
+              initialFocus: (0, import_utils2.runIfFn)(ctx2.initialFocusEl)
             });
             try {
               trap.activate();
@@ -541,7 +373,7 @@ function machine(userContext) {
       },
       guards: {
         portalled: (ctx2) => ctx2.currentPortalled,
-        isRelatedTargetWithinContent: (ctx2, evt) => contains(dom.getContentEl(ctx2), evt.target),
+        isRelatedTargetWithinContent: (ctx2, evt) => (0, import_dom_query3.contains)(dom.getContentEl(ctx2), evt.target),
         closeOnInteractOutside: (ctx2) => !!ctx2.closeOnInteractOutside,
         isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
         isTriggerFocused: (ctx2) => dom.getTriggerEl(ctx2) === dom.getActiveEl(ctx2),
@@ -550,7 +382,7 @@ function machine(userContext) {
       },
       actions: {
         checkRenderedElements(ctx2) {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             Object.assign(ctx2.renderedElements, {
               title: !!dom.getTitleEl(ctx2),
               description: !!dom.getDescriptionEl(ctx2),
@@ -559,14 +391,14 @@ function machine(userContext) {
           });
         },
         setInitialFocus(ctx2) {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             dom.getInitialFocusEl(ctx2)?.focus();
           });
         },
         focusTriggerIfNeeded(ctx2) {
           if (!ctx2.focusTriggerOnClose)
             return;
-          raf(() => dom.getTriggerEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
         focusFirstTabbableElement(ctx2, evt) {
           evt.preventDefault();
@@ -591,15 +423,15 @@ function machine(userContext) {
           if (lastTabbable !== dom.getActiveEl(ctx2))
             return;
           let tabbables = dom.getDocTabbableEls(ctx2);
-          let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+          let elementAfterTrigger = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
           if (elementAfterTrigger === content) {
-            tabbables = tabbables.filter((el) => !contains(content, el));
-            elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
+            tabbables = tabbables.filter((el) => !(0, import_dom_query3.contains)(content, el));
+            elementAfterTrigger = (0, import_utils2.next)(tabbables, tabbables.indexOf(button), { loop: false });
           }
           if (!elementAfterTrigger || elementAfterTrigger === button)
             return;
           evt.preventDefault();
-          raf(() => elementAfterTrigger?.focus());
+          (0, import_dom_query3.raf)(() => elementAfterTrigger?.focus());
         }
       }
     }

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-JDSPKDIN.mjs";
+} from "./chunk-GKHXQZZB.mjs";
 import {
   anatomy
 } from "./chunk-KTOPDXGV.mjs";
 import {
   machine
-} from "./chunk-FRFRU5PG.mjs";
-import "./chunk-Z2WON7A5.mjs";
+} from "./chunk-JT2RXXW4.mjs";
+import "./chunk-4IGGT6KB.mjs";
 export {
   anatomy,
   connect,

package/dist/popover.connect.d.ts

@@ -5,9 +5,21 @@ import '@zag-js/dismissable';
 import '@zag-js/popper';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the popover is portalled
+     */
     portalled: boolean;
+    /**
+     * Whether the popover is open
+     */
     isOpen: boolean;
+    /**
+     * Function to open the popover
+     */
     open(): void;
+    /**
+     * Function to close the popover
+     */
     close(): void;
     arrowProps: T["element"];
     arrowTipProps: T["element"];