@zag-js/popover 0.2.11 → 0.2.12

package/dist/popover.machine.js

@@ -26,190 +26,18 @@ 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");
-
-// ../../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)
-  };
-  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.machine.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
 var import_popper = 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");
 
 // 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`,
@@ -225,14 +53,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)
@@ -244,7 +72,7 @@ var dom = defineDomHelpers({
 // src/popover.machine.ts
 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",
@@ -373,11 +201,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({
@@ -392,7 +220,7 @@ function machine(userContext) {
           if (!ctx2.modal)
             return;
           let cleanup;
-          nextTick(() => {
+          (0, import_dom_query2.nextTick)(() => {
             cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
           });
           return () => cleanup?.();
@@ -406,7 +234,7 @@ function machine(userContext) {
           if (!ctx2.modal)
             return;
           let trap;
-          nextTick(() => {
+          (0, import_dom_query2.nextTick)(() => {
             const el = dom.getContentEl(ctx2);
             if (!el)
               return;
@@ -416,7 +244,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();
@@ -428,7 +256,7 @@ function machine(userContext) {
       },
       guards: {
         portalled: (ctx2) => ctx2.currentPortalled,
-        isRelatedTargetWithinContent: (ctx2, evt) => contains(dom.getContentEl(ctx2), evt.target),
+        isRelatedTargetWithinContent: (ctx2, evt) => (0, import_dom_query2.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),
@@ -437,7 +265,7 @@ function machine(userContext) {
       },
       actions: {
         checkRenderedElements(ctx2) {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             Object.assign(ctx2.renderedElements, {
               title: !!dom.getTitleEl(ctx2),
               description: !!dom.getDescriptionEl(ctx2),
@@ -446,14 +274,14 @@ function machine(userContext) {
           });
         },
         setInitialFocus(ctx2) {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             dom.getInitialFocusEl(ctx2)?.focus();
           });
         },
         focusTriggerIfNeeded(ctx2) {
           if (!ctx2.focusTriggerOnClose)
             return;
-          raf(() => dom.getTriggerEl(ctx2)?.focus());
+          (0, import_dom_query2.raf)(() => dom.getTriggerEl(ctx2)?.focus());
         },
         focusFirstTabbableElement(ctx2, evt) {
           evt.preventDefault();
@@ -478,15 +306,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_query2.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_query2.raf)(() => elementAfterTrigger?.focus());
         }
       }
     }

package/dist/popover.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-NMCDKPIS.mjs";
-import "./chunk-2EVL5G6H.mjs";
+} from "./chunk-JT2RXXW4.mjs";
+import "./chunk-4IGGT6KB.mjs";
 export {
   machine
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,19 +26,21 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "focus-trap": "7.2.0",
+    "focus-trap": "7.3.1",
     "@zag-js/anatomy": "0.1.4",
+    "@zag-js/core": "0.2.10",
+    "@zag-js/dom-event": "0.0.1",
     "@zag-js/aria-hidden": "0.2.2",
-    "@zag-js/core": "0.2.9",
-    "@zag-js/dismissable": "0.2.2",
-    "@zag-js/popper": "0.2.3",
-    "@zag-js/remove-scroll": "0.2.2",
-    "@zag-js/types": "0.3.4"
+    "@zag-js/utils": "0.3.3",
+    "@zag-js/dom-query": "0.1.3",
+    "@zag-js/dismissable": "0.2.3",
+    "@zag-js/remove-scroll": "0.2.3",
+    "@zag-js/popper": "0.2.4",
+    "@zag-js/types": "0.3.4",
+    "@zag-js/tabbable": "0.0.1"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-2EVL5G6H.mjs

@@ -1,148 +0,0 @@
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-
-// ../../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)
-  };
-  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/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;
-}
-
-// src/popover.dom.ts
-var dom = defineDomHelpers({
-  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 {
-  runIfFn,
-  contains,
-  dom
-};