@zag-js/popover 0.0.0-dev-20220526121406 → 0.0.0-dev-20220604091726

package/dist/index.js

@@ -42,36 +42,36 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../../node_modules/compute-scroll-into-view/dist/index.module.js
-function t(t3) {
-  return typeof t3 == "object" && t3 != null && t3.nodeType === 1;
+function t(t2) {
+  return typeof t2 == "object" && t2 != null && t2.nodeType === 1;
 }
-function e(t3, e2) {
-  return (!e2 || t3 !== "hidden") && t3 !== "visible" && t3 !== "clip";
+function e(t2, e2) {
+  return (!e2 || t2 !== "hidden") && t2 !== "visible" && t2 !== "clip";
 }
-function n(t3, n2) {
-  if (t3.clientHeight < t3.scrollHeight || t3.clientWidth < t3.scrollWidth) {
-    var r2 = getComputedStyle(t3, null);
-    return e(r2.overflowY, n2) || e(r2.overflowX, n2) || function(t4) {
-      var e2 = function(t5) {
-        if (!t5.ownerDocument || !t5.ownerDocument.defaultView)
+function n(t2, n2) {
+  if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
+    var r2 = getComputedStyle(t2, null);
+    return e(r2.overflowY, n2) || e(r2.overflowX, n2) || function(t3) {
+      var e2 = function(t4) {
+        if (!t4.ownerDocument || !t4.ownerDocument.defaultView)
           return null;
         try {
-          return t5.ownerDocument.defaultView.frameElement;
-        } catch (t6) {
+          return t4.ownerDocument.defaultView.frameElement;
+        } catch (t5) {
           return null;
         }
-      }(t4);
-      return !!e2 && (e2.clientHeight < t4.scrollHeight || e2.clientWidth < t4.scrollWidth);
-    }(t3);
+      }(t3);
+      return !!e2 && (e2.clientHeight < t3.scrollHeight || e2.clientWidth < t3.scrollWidth);
+    }(t2);
   }
   return false;
 }
-function r(t3, e2, n2, r2, i, o, l, d) {
-  return o < t3 && l > e2 || o > t3 && l < e2 ? 0 : o <= t3 && d <= n2 || l >= e2 && d >= n2 ? o - t3 - r2 : l > e2 && d < n2 || o < t3 && d > n2 ? l - e2 + i : 0;
+function r(t2, e2, n2, r2, i, o, l, d) {
+  return o < t2 && l > e2 || o > t2 && l < e2 ? 0 : o <= t2 && d <= n2 || l >= e2 && d >= n2 ? o - t2 - r2 : l > e2 && d < n2 || o < t2 && d > n2 ? l - e2 + i : 0;
 }
 function index_module_default(e2, i) {
-  var o = window, l = i.scrollMode, d = i.block, u = i.inline, h = i.boundary, a = i.skipOverflowHiddenElements, c = typeof h == "function" ? h : function(t3) {
-    return t3 !== h;
+  var o = window, l = i.scrollMode, d = i.block, u = i.inline, h = i.boundary, a = i.skipOverflowHiddenElements, c = typeof h == "function" ? h : function(t2) {
+    return t2 !== h;
   };
   if (!t(e2))
     throw new TypeError("Invalid target");
@@ -191,15 +191,20 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
 var noop = () => {
 };
 var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
 var platform = (v) => isDom() && v.test(navigator.platform);
-var isDom = () => !!(typeof window !== "undefined");
+var isDom = () => typeof window !== "undefined";
 var isMac = () => platform(/^Mac/);
 var isIPhone = () => platform(/^iPhone/);
 var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
 var isIos = () => isIPhone() || isIPad();
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isLeftClick = (v) => v.button === 0;
 function getListenerElements() {
   ;
@@ -211,7 +216,7 @@ function getListenerCache() {
   globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
   return globalThis.__listenerCache__;
 }
-function globalEventBus(node, type, handler, options) {
+function addGlobalEventListener(node, type, handler, options) {
   var _a;
   if (!node)
     return noop;
@@ -263,12 +268,10 @@ function globalEventBus(node, type, handler, options) {
     }
   };
 }
-var t2 = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t2(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t2(fn) === "Function" ? fn() : fn;
+var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, event, listener, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
+  return addGlobalEventListener(node, event, listener, options);
 }
 var changeCount = 0;
 var originalBodyPointerEvents;
@@ -509,7 +512,8 @@ var getFocusables = (el, includeContainer = false) => {
   if (!el)
     return [];
   let els = Array.from(el.querySelectorAll(focusableSelector));
-  if (includeContainer && isHTMLElement(el)) {
+  const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
+  if (shouldAddContainer && isHTMLElement(el)) {
     els.unshift(el);
   }
   return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
@@ -520,6 +524,8 @@ var isFocusable = (el) => {
   return el == null ? void 0 : el.matches(focusableSelector);
 };
 var getTabbables = (el, includeContainer = false) => {
+  if (!el)
+    return [];
   return getFocusables(el, includeContainer).filter(isTabbable);
 };
 var isTabbable = (el) => {
@@ -672,15 +678,16 @@ var dom = {
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
   getDocTabbableEls: (ctx) => getTabbables(cast(dom.getDoc(ctx))),
-  getTabbableEls: (ctx) => {
-    const el = dom.getContentEl(ctx);
-    return el ? getTabbables(el) : [];
-  },
+  getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
   getFirstTabbableEl: (ctx) => first(dom.getTabbableEls(ctx)),
   getLastTabbableEl: (ctx) => last(dom.getTabbableEls(ctx)),
   getInitialFocusEl: (ctx) => {
-    var _a;
-    return (_a = runIfFn2(ctx.initialFocusEl)) != null ? _a : dom.getFirstFocusableEl(ctx);
+    let el = runIfFn2(ctx.initialFocusEl);
+    if (!el && ctx.autoFocus)
+      el = dom.getFirstFocusableEl(ctx);
+    if (!el)
+      el = dom.getContentEl(ctx);
+    return el;
   }
 };
 
@@ -688,9 +695,10 @@ var dom = {
 function connect(state, send, normalize = normalizeProp) {
   const isOpen = state.matches("open");
   const pointerdownNode = state.context.pointerdownNode;
+  const currentPlacement = state.context.currentPlacement;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     measured: !!state.context.isPlacementComplete,
-    placement: state.context.currentPlacement
+    placement: currentPlacement
   });
   return {
     portalled: state.context.currentPortalled,
@@ -717,7 +725,7 @@ function connect(state, send, normalize = normalizeProp) {
     triggerProps: normalize.button({
       "data-part": "trigger",
       type: "button",
-      "data-placement": state.context.currentPlacement,
+      "data-placement": currentPlacement,
       id: dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -725,6 +733,11 @@ function connect(state, send, normalize = normalizeProp) {
       "aria-controls": dom.getContentId(state.context),
       onClick() {
         send("TRIGGER_CLICK");
+      },
+      onKeyDown(event) {
+        if (event.key === "Escape") {
+          send("ESCAPE");
+        }
       }
     }),
     positionerProps: normalize.element({
@@ -739,9 +752,9 @@ function connect(state, send, normalize = normalizeProp) {
       role: "dialog",
       hidden: !isOpen,
       "data-expanded": dataAttr(isOpen),
-      "aria-labelledby": state.context.isTitleRendered ? dom.getTitleId(state.context) : void 0,
-      "aria-describedby": state.context.isDescriptionRendered ? dom.getDescriptionId(state.context) : void 0,
-      "data-placement": state.context.currentPlacement,
+      "aria-labelledby": state.context.renderedElements.title ? dom.getTitleId(state.context) : void 0,
+      "aria-describedby": state.context.renderedElements.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-placement": currentPlacement,
       onKeyDown(event) {
         const keyMap = {
           Escape(event2) {
@@ -789,19 +802,16 @@ function connect(state, send, normalize = normalizeProp) {
 }
 
 // src/popover.machine.ts
+var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
 var import_popper2 = require("@zag-js/popper");
-var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_focus_trap = require("focus-trap");
 var { and, or } = import_core.guards;
 function machine(ctx = {}) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
-    context: __spreadValues({
-      isTitleRendered: true,
-      isDescriptionRendered: true,
-      isAnchorRendered: false,
+    context: __spreadProps(__spreadValues({
       uid: "",
       closeOnBlur: true,
       closeOnEsc: true,
@@ -811,7 +821,13 @@ function machine(ctx = {}) {
         placement: "bottom"
       }, ctx.positioning),
       currentPlacement: void 0
-    }, ctx),
+    }, ctx), {
+      renderedElements: {
+        title: true,
+        description: true,
+        anchor: false
+      }
+    }),
     computed: {
       currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
     },
@@ -840,13 +856,7 @@ function machine(ctx = {}) {
           "disableOutsidePointerEvents",
           "computePlacement"
         ],
-        entry: (0, import_core.choose)([
-          {
-            guard: "autoFocus",
-            actions: ["setInitialFocus", "invokeOnOpen"]
-          },
-          { actions: ["focusContent", "invokeOnOpen"] }
-        ]),
+        entry: ["setInitialFocus", "invokeOnOpen"],
         on: {
           CLOSE: {
             target: "closed",
@@ -889,7 +899,7 @@ function machine(ctx = {}) {
     activities: {
       computePlacement(ctx2) {
         ctx2.currentPlacement = ctx2.positioning.placement;
-        const anchorEl = ctx2.isAnchorRendered ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+        const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
         return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
           onComplete(data) {
             ctx2.currentPlacement = data.placement;
@@ -967,9 +977,11 @@ function machine(ctx = {}) {
     actions: {
       checkRenderedElements(ctx2) {
         raf(() => {
-          ctx2.isAnchorRendered = !!dom.getAnchorEl(ctx2);
-          ctx2.isTitleRendered = !!dom.getTitleEl(ctx2);
-          ctx2.isDescriptionRendered = !!dom.getDescriptionEl(ctx2);
+          Object.assign(ctx2.renderedElements, {
+            title: !!dom.getTitleEl(ctx2),
+            description: !!dom.getDescriptionEl(ctx2),
+            anchor: !!dom.getAnchorEl(ctx2)
+          });
         });
       },
       setupDocument(ctx2, evt) {
@@ -982,12 +994,6 @@ function machine(ctx = {}) {
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
-      focusContent(ctx2) {
-        raf(() => {
-          var _a;
-          (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
       setInitialFocus(ctx2) {
         raf(() => {
           var _a;