@wildwinter/expr-editor 0.2.0 → 0.3.0

package/README.md

@@ -39,6 +39,10 @@ Notable options beyond the basics:
   host can suppress its own validation display mid-edit.
 - `messages: false` — hide the editor's internal validation list when the host
   renders its own.
+- `popoverContainer` — where the popover micro-editors mount (default
+  `document.body`). Pass a container inside a focus-trapping dialog (Radix,
+  etc.) so opening a pill's popover counts as "inside" that layer and does not
+  dismiss the dialog; the popover is then positioned relative to that container.
 - `setText(on)` — the host's raw-text toggle (`</>`); unparseable input falls
   back to raw text automatically.
 

package/dist/index.cjs

@@ -312,7 +312,8 @@ function button(cls, label, onClick, title) {
   b.addEventListener("click", onClick);
   return b;
 }
-function openPopover(anchor, render, onClose) {
+function openPopover(anchor, render, opts = {}) {
+  const container = opts.container ?? document.body;
   const pop = el("div", "exed-pop");
   let closed = false;
   const close = () => {
@@ -321,7 +322,7 @@ function openPopover(anchor, render, onClose) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     pop.remove();
-    onClose?.();
+    opts.onClose?.();
   };
   const onDown = (e) => {
     const t = e.target;
@@ -334,15 +335,21 @@ function openPopover(anchor, render, onClose) {
     }
   };
   pop.append(render(close));
-  document.body.append(pop);
+  container.append(pop);
   const a = anchor.getBoundingClientRect();
   const ph = pop.getBoundingClientRect();
   let top = a.bottom + 4;
   if (top + ph.height > window.innerHeight - 8 && a.top - ph.height - 4 > 8) top = a.top - ph.height - 4;
   let left = a.left;
   if (left + ph.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - 8 - ph.width);
-  pop.style.top = `${Math.round(top + window.scrollY)}px`;
-  pop.style.left = `${Math.round(left + window.scrollX)}px`;
+  if (container === document.body) {
+    pop.style.top = `${Math.round(top + window.scrollY)}px`;
+    pop.style.left = `${Math.round(left + window.scrollX)}px`;
+  } else {
+    const cr = container.getBoundingClientRect();
+    pop.style.top = `${Math.round(top - cr.top + container.scrollTop)}px`;
+    pop.style.left = `${Math.round(left - cr.left + container.scrollLeft)}px`;
+  }
   setTimeout(() => {
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -1039,9 +1046,12 @@ function mountExpressionEditor(host, opts) {
       apply: (next) => emit(toSrc(next)),
       openPopover: (anchor, r) => {
         closePopover();
-        const pop = openPopover(anchor, r, () => {
-          if (activePopover === pop) activePopover = null;
-          setEditing(false);
+        const pop = openPopover(anchor, r, {
+          container: opts.popoverContainer,
+          onClose: () => {
+            if (activePopover === pop) activePopover = null;
+            setEditing(false);
+          }
         });
         activePopover = pop;
         setEditing(true);
@@ -1333,7 +1343,7 @@ function mountEffectsEditor(host, opts) {
         close();
       },
       onCancel: close
-    }));
+    }), { container: opts.popoverContainer });
   };
   const targetType = (target) => opts.catalogue.find((e) => refOf(e, defaultScope) === target)?.type;
   const valueDisplay = (value, onChange, type) => {
@@ -1348,6 +1358,7 @@ function mountEffectsEditor(host, opts) {
       functions: opts.functions,
       mode: "flat",
       ...addTerm ? { addTerm } : {},
+      ...opts.popoverContainer ? { popoverContainer: opts.popoverContainer } : {},
       text: textMode,
       onChange
     }));
@@ -1387,7 +1398,7 @@ function mountEffectsEditor(host, opts) {
       wrap.append(search, list);
       setTimeout(() => search.focus(), 0);
       return wrap;
-    });
+    }, { container: opts.popoverContainer });
   };
   const iconBtn = (glyph, title, onClick, danger = false) => button(`exed-eff-icon${danger ? " danger" : ""}`, glyph, onClick, title);
   function setRow(eff, i) {
@@ -1460,7 +1471,7 @@ function mountEffectsEditor(host, opts) {
       wrap.append(button("exed-btn primary", "Apply", apply));
       setTimeout(() => input.focus(), 0);
       return wrap;
-    });
+    }, { container: opts.popoverContainer });
   };
   const rowActions2 = (i) => {
     const acts = el("div", "exed-effect-acts");