@octaviaflow/core 3.1.0-beta.108 → 3.1.0-beta.109

package/dist/index.js

@@ -34446,6 +34446,7 @@ import {
   useRef as useRef50,
   useState as useState71
 } from "react";
+import { createPortal as createPortal19 } from "react-dom";
 import { AddIcon as AddIcon6, CloseIcon as CloseIcon20 } from "@octaviaflow/icons";
 
 // src/components/ExpressionField/parseExpression.ts
@@ -34666,6 +34667,16 @@ function insideCallArguments(textBeforeCaret) {
   }
   return depth > 0;
 }
+function anchorRect(el) {
+  const box = el.getBoundingClientRect();
+  const width = Math.max(300, box.width);
+  return {
+    top: box.bottom + 4,
+    // Keep it on screen when the chip sits near the right edge.
+    left: Math.max(8, Math.min(box.left, window.innerWidth - width - 8)),
+    width
+  };
+}
 function argSummary(arg, nameOf, depth = 2) {
   const trimmed = arg.trim();
   const call = parseCall(trimmed);
@@ -34854,17 +34865,7 @@ function ExpressionField({
   const openEditor = useCallback50((chip) => {
     const raw = chip.getAttribute("data-value") ?? "";
     if (!parseCall(raw)) return;
-    const box = chip.getBoundingClientRect();
-    const host = fieldRef.current?.getBoundingClientRect();
-    setEditing({
-      el: chip,
-      raw,
-      rect: {
-        top: box.bottom - (host?.top ?? 0) + 4,
-        left: Math.max(0, box.left - (host?.left ?? 0)),
-        width: Math.max(300, box.width)
-      }
-    });
+    setEditing({ el: chip, raw, rect: anchorRect(chip) });
   }, []);
   const applyEditor = useCallback50(
     (raw) => {
@@ -35090,158 +35091,173 @@ function CallEditor({
     setDraft((d) => replaceArgument(d, [...path, index], bare));
     if (kind === "function" || parseCall(bare)) setPath((pth) => [...pth, index]);
   };
-  return /* @__PURE__ */ jsxs141(
-    "div",
-    {
-      ref: panelRef,
-      className: "ods-expression-field__editor",
-      style: { top: rect.top, left: rect.left, width: rect.width },
-      role: "dialog",
-      "aria-label": `Edit ${crumbs[0]?.label ?? "function"}`,
-      children: [
-        /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-head", children: [
-          /* @__PURE__ */ jsx147(
-            Breadcrumb,
+  const [pos, setPos] = useState71(rect);
+  useEffect56(() => {
+    const follow = () => setPos(anchorRect(anchor));
+    window.addEventListener("scroll", follow, true);
+    window.addEventListener("resize", follow);
+    return () => {
+      window.removeEventListener("scroll", follow, true);
+      window.removeEventListener("resize", follow);
+    };
+  }, [anchor]);
+  if (typeof document === "undefined") return null;
+  return createPortal19(
+    /* @__PURE__ */ jsxs141(
+      "div",
+      {
+        ref: panelRef,
+        "data-ods-floating": "",
+        className: "ods-expression-field__editor",
+        style: { top: pos.top, left: pos.left, width: pos.width },
+        role: "dialog",
+        "aria-label": `Edit ${crumbs[0]?.label ?? "function"}`,
+        children: [
+          /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-head", children: [
+            /* @__PURE__ */ jsx147(
+              Breadcrumb,
+              {
+                className: "ods-expression-field__editor-crumbs",
+                items: crumbs.map((crumb) => ({
+                  label: crumb.label,
+                  onClick: () => setPath(crumb.path)
+                }))
+              }
+            ),
+            /* @__PURE__ */ jsx147(Button, { variant: "ghost", size: "sm", onClick: () => setRawMode((r) => !r), children: rawMode ? "Back to fields" : "Edit as text" })
+          ] }),
+          rawMode ? /* @__PURE__ */ jsx147(
+            "textarea",
             {
-              className: "ods-expression-field__editor-crumbs",
-              items: crumbs.map((crumb) => ({
-                label: crumb.label,
-                onClick: () => setPath(crumb.path)
-              }))
+              className: "ods-expression-field__editor-raw",
+              value: draft,
+              rows: 3,
+              "aria-label": "Expression",
+              onChange: (e) => setDraft(e.target.value)
             }
-          ),
-          /* @__PURE__ */ jsx147(Button, { variant: "ghost", size: "sm", onClick: () => setRawMode((r) => !r), children: rawMode ? "Back to fields" : "Edit as text" })
-        ] }),
-        rawMode ? /* @__PURE__ */ jsx147(
-          "textarea",
-          {
-            className: "ods-expression-field__editor-raw",
-            value: draft,
-            rows: 3,
-            "aria-label": "Expression",
-            onChange: (e) => setDraft(e.target.value)
-          }
-        ) : /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-rows", children: [
-          args.map((arg, index) => {
-            const kind = argumentKind(arg);
-            const rowLabel = names[index] ?? `argument ${index + 1}`;
-            const nested = kind === "call" ? parseCall(arg) : void 0;
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-row", children: [
-                /* @__PURE__ */ jsxs141("span", { className: "ods-expression-field__editor-row-head", children: [
-                  /* @__PURE__ */ jsx147("span", { className: "ods-expression-field__editor-row-name", id: `arg-${index}-label`, children: rowLabel }),
-                  /* @__PURE__ */ jsx147(
-                    Button,
-                    {
-                      variant: "icon",
-                      size: "sm",
-                      "aria-label": `Remove ${rowLabel}`,
-                      title: "Remove this argument",
-                      onClick: () => removeArg(index),
-                      children: /* @__PURE__ */ jsx147(CloseIcon20, { size: "sm" })
-                    }
-                  )
-                ] }),
-                nested ? /* @__PURE__ */ jsxs141(
-                  "div",
-                  {
-                    className: "ods-expression-field__editor-nested",
-                    onDragOver: (e) => {
-                      if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
-                    },
-                    onDrop: dropInto(index),
-                    children: [
-                      /* @__PURE__ */ jsx147("code", { children: argSummary(arg, nameOf) }),
-                      /* @__PURE__ */ jsxs141("span", { children: [
-                        /* @__PURE__ */ jsx147(Button, { variant: "secondary", size: "sm", onClick: () => setPath([...path, index]), children: "Open" }),
-                        /* @__PURE__ */ jsx147(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            "aria-label": `Clear ${rowLabel}`,
-                            onClick: () => setArg(index, ""),
-                            children: "Clear"
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                ) : kind === "reference" ? (
-                  // A reference is a value from somewhere else — named, never
-                  // its raw `ods://…` path, here as much as in the field.
-                  /* @__PURE__ */ jsxs141(
+          ) : /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-rows", children: [
+            args.map((arg, index) => {
+              const kind = argumentKind(arg);
+              const rowLabel = names[index] ?? `argument ${index + 1}`;
+              const nested = kind === "call" ? parseCall(arg) : void 0;
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-row", children: [
+                  /* @__PURE__ */ jsxs141("span", { className: "ods-expression-field__editor-row-head", children: [
+                    /* @__PURE__ */ jsx147("span", { className: "ods-expression-field__editor-row-name", id: `arg-${index}-label`, children: rowLabel }),
+                    /* @__PURE__ */ jsx147(
+                      Button,
+                      {
+                        variant: "icon",
+                        size: "sm",
+                        "aria-label": `Remove ${rowLabel}`,
+                        title: "Remove this argument",
+                        onClick: () => removeArg(index),
+                        children: /* @__PURE__ */ jsx147(CloseIcon20, { size: "sm" })
+                      }
+                    )
+                  ] }),
+                  nested ? /* @__PURE__ */ jsxs141(
                     "div",
                     {
-                      className: "ods-expression-field__editor-ref",
+                      className: "ods-expression-field__editor-nested",
                       onDragOver: (e) => {
                         if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
                       },
                       onDrop: dropInto(index),
                       children: [
-                        /* @__PURE__ */ jsx147(
-                          "span",
-                          {
-                            className: "ods-expression-field__pill",
-                            title: arg,
-                            "aria-labelledby": `arg-${index}-label`,
-                            children: labelFor(arg.startsWith("ods://") ? `{{${arg}}}` : arg)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx147(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            "aria-label": `Clear ${rowLabel}`,
-                            onClick: () => setArg(index, ""),
-                            children: "Clear"
-                          }
-                        )
+                        /* @__PURE__ */ jsx147("code", { children: argSummary(arg, nameOf) }),
+                        /* @__PURE__ */ jsxs141("span", { children: [
+                          /* @__PURE__ */ jsx147(Button, { variant: "secondary", size: "sm", onClick: () => setPath([...path, index]), children: "Open" }),
+                          /* @__PURE__ */ jsx147(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              "aria-label": `Clear ${rowLabel}`,
+                              onClick: () => setArg(index, ""),
+                              children: "Clear"
+                            }
+                          )
+                        ] })
                       ]
                     }
+                  ) : kind === "reference" ? (
+                    // A reference is a value from somewhere else — named, never
+                    // its raw `ods://…` path, here as much as in the field.
+                    /* @__PURE__ */ jsxs141(
+                      "div",
+                      {
+                        className: "ods-expression-field__editor-ref",
+                        onDragOver: (e) => {
+                          if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
+                        },
+                        onDrop: dropInto(index),
+                        children: [
+                          /* @__PURE__ */ jsx147(
+                            "span",
+                            {
+                              className: "ods-expression-field__pill",
+                              title: arg,
+                              "aria-labelledby": `arg-${index}-label`,
+                              children: labelFor(arg.startsWith("ods://") ? `{{${arg}}}` : arg)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx147(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              "aria-label": `Clear ${rowLabel}`,
+                              onClick: () => setArg(index, ""),
+                              children: "Clear"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ) : /* @__PURE__ */ jsx147(
+                    "input",
+                    {
+                      "aria-labelledby": `arg-${index}-label`,
+                      value: arg,
+                      placeholder: 'a value, "text", or drag one in',
+                      "data-kind": kind,
+                      onChange: (e) => setArg(index, e.target.value),
+                      onDragOver: (e) => {
+                        if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
+                      },
+                      onDrop: dropInto(index)
+                    }
                   )
-                ) : /* @__PURE__ */ jsx147(
-                  "input",
-                  {
-                    "aria-labelledby": `arg-${index}-label`,
-                    value: arg,
-                    placeholder: 'a value, "text", or drag one in',
-                    "data-kind": kind,
-                    onChange: (e) => setArg(index, e.target.value),
-                    onDragOver: (e) => {
-                      if (e.dataTransfer.types.includes("application/x-fx-insert")) e.preventDefault();
-                    },
-                    onDrop: dropInto(index)
-                  }
-                )
-              ] }, index)
-            );
-          }),
-          /* @__PURE__ */ jsx147(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              fullWidth: true,
-              leftIcon: /* @__PURE__ */ jsx147(AddIcon6, { size: "sm" }),
-              onClick: () => setDraft((d) => {
-                const at = callAt(d, path);
-                if (!at) return d;
-                const next = [...at.args, '""'];
-                return path.length === 0 ? formatCall(at.name, next) : replaceArgument(d, path, `${at.name}(${next.join(", ")})`);
-              }),
-              children: "Add argument"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-foot", children: [
-          /* @__PURE__ */ jsx147(Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsx147(Button, { variant: "primary", size: "sm", onClick: () => onApply(draft), children: "Apply" })
-        ] })
-      ]
-    }
+                ] }, index)
+              );
+            }),
+            /* @__PURE__ */ jsx147(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                fullWidth: true,
+                leftIcon: /* @__PURE__ */ jsx147(AddIcon6, { size: "sm" }),
+                onClick: () => setDraft((d) => {
+                  const at = callAt(d, path);
+                  if (!at) return d;
+                  const next = [...at.args, '""'];
+                  return path.length === 0 ? formatCall(at.name, next) : replaceArgument(d, path, `${at.name}(${next.join(", ")})`);
+                }),
+                children: "Add argument"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-foot", children: [
+            /* @__PURE__ */ jsx147(Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }),
+            /* @__PURE__ */ jsx147(Button, { variant: "primary", size: "sm", onClick: () => onApply(draft), children: "Apply" })
+          ] })
+        ]
+      }
+    ),
+    document.body
   );
 }