@zag-js/popover 0.2.10 → 0.2.12

package/dist/popover.connect.js

@@ -23,122 +23,29 @@ __export(popover_connect_exports, {
   connect: () => connect
 });
 module.exports = __toCommonJS(popover_connect_exports);
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 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 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.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
 
+// 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();
+
 // 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`,
@@ -154,14 +61,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)
@@ -170,21 +77,6 @@ var dom = defineDomHelpers({
   }
 });
 
-// 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();
-
 // src/popover.connect.ts
 function connect(state, send, normalize) {
   const isOpen = state.matches("open");
@@ -196,11 +88,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");
     },
@@ -224,7 +128,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");
@@ -244,7 +148,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

package/dist/popover.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-JNFEFPEH.mjs";
+} from "./chunk-GKHXQZZB.mjs";
 import "./chunk-KTOPDXGV.mjs";
-import "./chunk-2EVL5G6H.mjs";
+import "./chunk-4IGGT6KB.mjs";
 export {
   connect
 };

package/dist/popover.dom.d.ts

@@ -6,20 +6,23 @@ import '@zag-js/types';
 
 declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }) => Document | ShadowRoot;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+    }) => ShadowRoot | Document;
     getDoc: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => HTMLElement | null;
-    getById: <T = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+    }, id: string) => T_1;
 } & {
     getActiveEl: (ctx: MachineContext) => Element | null;
     getAnchorId: (ctx: MachineContext) => string;

package/dist/popover.dom.js

@@ -23,114 +23,10 @@ __export(popover_dom_exports, {
   dom: () => dom
 });
 module.exports = __toCommonJS(popover_dom_exports);
-
-// ../../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 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({
+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`,
@@ -146,14 +42,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)

package/dist/popover.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-2EVL5G6H.mjs";
+} from "./chunk-4IGGT6KB.mjs";
 export {
   dom
 };