@zag-js/popover 0.0.0-dev-20220603082742 → 0.0.0-dev-20220604091934

package/dist/index.js

@@ -512,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));
@@ -523,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) => {
@@ -675,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;
   }
 };
 
@@ -691,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,
@@ -720,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,
@@ -728,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({
@@ -742,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) {
@@ -792,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,
@@ -814,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
     },
@@ -843,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",
@@ -892,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;
@@ -970,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) {
@@ -985,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;