@zag-js/popover 0.1.1 → 0.1.4

package/dist/index.mjs

@@ -502,6 +502,30 @@ var getTabbables = (el, includeContainer = false) => {
 var isTabbable = (el) => {
   return isFocusable(el) && !isDisabled(el) && !isHidden(el);
 };
+function itemById(v, id) {
+  return v.find((node) => node.id === id);
+}
+function indexOfId(v, id) {
+  const item = itemById(v, id);
+  return item ? v.indexOf(item) : -1;
+}
+var getValueText = (item) => {
+  var _a, _b;
+  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
+};
+var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
+var wrap = (v, idx) => {
+  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
+};
+function findByText(v, text, currentId) {
+  const index = currentId ? indexOfId(v, currentId) : -1;
+  let items = currentId ? wrap(v, index) : v;
+  const isSingleKey = text.length === 1;
+  if (isSingleKey) {
+    items = items.filter((item) => item.id !== currentId);
+  }
+  return items.find((item) => match(getValueText(item), text));
+}
 function trackPointerDown(doc, onPointerDown) {
   var _a;
   const win = (_a = doc.defaultView) != null ? _a : window;
@@ -512,6 +536,34 @@ function trackPointerDown(doc, onPointerDown) {
   };
   return addDomEvent(doc, "pointerdown", fn);
 }
+function findByTypeahead(_items, options) {
+  const { state: state2, activeId, key, timeout = 350 } = options;
+  const search = state2.keysSoFar + key;
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const query2 = isRepeated ? search[0] : search;
+  let items = _items.slice();
+  const next2 = findByText(items, query2, activeId);
+  function cleanup() {
+    clearTimeout(state2.timer);
+    state2.timer = -1;
+  }
+  function update(value) {
+    state2.keysSoFar = value;
+    cleanup();
+    if (value !== "") {
+      state2.timer = +setTimeout(() => {
+        update("");
+        cleanup();
+      }, timeout);
+    }
+  }
+  update(search);
+  return next2;
+}
+findByTypeahead.defaultOptions = {
+  keysSoFar: "",
+  timer: -1
+};
 
 // src/popover.connect.ts
 import { getPlacementStyles } from "@zag-js/popper";
@@ -554,6 +606,10 @@ var dom = {
     return (_a = ctx.doc) != null ? _a : document;
   },
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
+  getRootNode: (ctx) => {
+    var _a;
+    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
+  },
   getAnchorId: (ctx) => {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.anchor) != null ? _b : `popover:${ctx.uid}:anchor`;
@@ -580,12 +636,12 @@ var dom = {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.closeBtn) != null ? _b : `popover:${ctx.uid}:close-button`;
   },
-  getAnchorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getAnchorId(ctx)),
-  getTriggerEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPositionerId(ctx)),
-  getTitleEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTitleId(ctx)),
-  getDescriptionEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getDescriptionId(ctx)),
+  getAnchorEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getAnchorId(ctx)),
+  getTriggerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPositionerId(ctx)),
+  getTitleEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getTitleId(ctx)),
+  getDescriptionEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDescriptionId(ctx)),
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
   getDocTabbableEls: (ctx) => getTabbables(cast(dom.getDoc(ctx))),
@@ -606,7 +662,8 @@ function connect(state, send, normalize = normalizeProp) {
   const isOpen = state.matches("open");
   const pointerdownNode = state.context.pointerdownNode;
   const popperStyles = getPlacementStyles({
-    measured: !!state.context.isPlacementComplete
+    measured: !!state.context.isPlacementComplete,
+    placement: state.context.currentPlacement
   });
   return {
     portalled: state.context.currentPortalled,
@@ -890,25 +947,27 @@ function machine(ctx = {}) {
       setupDocument(ctx2, evt) {
         if (evt.doc)
           ctx2.doc = ref(evt.doc);
+        if (evt.root)
+          ctx2.rootNode = ref(evt.root);
         ctx2.uid = evt.id;
       },
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
       focusContent(ctx2) {
-        nextTick(() => {
+        raf(() => {
           var _a;
           (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
       setInitialFocus(ctx2) {
-        nextTick(() => {
+        raf(() => {
           var _a;
           (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
       focusTrigger(ctx2) {
-        nextTick(() => {
+        raf(() => {
           var _a;
           (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
         });
@@ -943,7 +1002,7 @@ function machine(ctx = {}) {
         if (!elementAfterTrigger || elementAfterTrigger === button)
           return;
         evt.preventDefault();
-        nextTick(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
+        raf(() => elementAfterTrigger == null ? void 0 : elementAfterTrigger.focus());
       }
     }
   });