@octaviaflow/core 3.1.0-beta.105 → 3.1.0-beta.107

package/dist/index.js

@@ -34682,13 +34682,19 @@ function ExpressionField({
   const fieldId = id ?? generatedId;
   const helperId = `${fieldId}-helper`;
   const [editing, setEditing] = useState71(null);
+  const resolveLabelRef = useRef50(resolveLabel);
+  const resolveCallRef = useRef50(resolveCall);
+  const pillEveryTokenRef = useRef50(pillEveryToken);
+  resolveLabelRef.current = resolveLabel;
+  resolveCallRef.current = resolveCall;
+  pillEveryTokenRef.current = pillEveryToken;
   const labelFor = useCallback50(
-    (token) => resolveLabel?.(token) ?? shortReferenceLabel(token),
-    [resolveLabel]
+    (token) => resolveLabelRef.current?.(token) ?? shortReferenceLabel(token),
+    []
   );
   const callLabel = useCallback50(
-    (name) => resolveCall?.(name)?.label ?? (name.startsWith("user.") ? name.slice(5) : name),
-    [resolveCall]
+    (name) => resolveCallRef.current?.(name)?.label ?? (name.startsWith("user.") ? name.slice(5) : name),
+    []
   );
   const chipText = useCallback50(
     (name, args) => {
@@ -34734,7 +34740,7 @@ function ExpressionField({
       if (!el) return;
       el.innerHTML = "";
       if (!raw) return;
-      for (const segment of parseExpression(raw, pillEveryToken)) {
+      for (const segment of parseExpression(raw, pillEveryTokenRef.current)) {
         if (segment.kind === "text") {
           el.appendChild(document.createTextNode(segment.raw));
           continue;
@@ -34746,7 +34752,7 @@ function ExpressionField({
         }
       }
     },
-    [pillEveryToken, makeToken]
+    [makeToken]
   );
   useEffect56(() => {
     if (fromSelf.current) {
@@ -34857,6 +34863,10 @@ function ExpressionField({
     },
     [editing, chipText, commit]
   );
+  const handleMouseDown = useCallback50((e) => {
+    const token = e.target.closest(`.${PILL}, .${CHIP}`);
+    if (token) e.preventDefault();
+  }, []);
   const handleClick = useCallback50(
     (e) => {
       const node = e.target;
@@ -34971,6 +34981,7 @@ function ExpressionField({
           style: { minHeight: `${Math.max(1, rows) * 1.5 + 1}rem` },
           onInput: commit,
           onBlur: handleBlur,
+          onMouseDown: handleMouseDown,
           onClick: handleClick,
           onKeyDown: handleKeyDown,
           onCopy: handleCopy,
@@ -34985,6 +34996,7 @@ function ExpressionField({
         CallEditor,
         {
           raw: editing.raw,
+          anchor: editing.el,
           rect: editing.rect,
           nameOf: callLabel,
           labelFor,
@@ -34999,6 +35011,7 @@ function ExpressionField({
 }
 function CallEditor({
   raw,
+  anchor,
   rect,
   nameOf,
   labelFor,
@@ -35010,13 +35023,27 @@ function CallEditor({
   const [path, setPath] = useState71([]);
   const [rawMode, setRawMode] = useState71(false);
   const panelRef = useRef50(null);
+  const onApplyRef = useRef50(onApply);
+  onApplyRef.current = onApply;
+  const draftRef = useRef50(draft);
+  draftRef.current = draft;
   useEffect56(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onCancel();
     };
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (panelRef.current?.contains(target)) return;
+      if (anchor.contains(target)) return;
+      onApplyRef.current(draftRef.current);
+    };
     document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onCancel]);
+    document.addEventListener("mousedown", onPointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onPointerDown, true);
+    };
+  }, [anchor, onCancel]);
   const current = callAt(draft, path);
   const signature = current ? resolveCall?.(current.name) : void 0;
   const names = signature?.args ?? [];
@@ -35027,6 +35054,13 @@ function CallEditor({
     if (at) crumbs.push({ label: nameOf(at.name), path: path.slice(0, i) });
   }
   const setArg = (index, next) => setDraft((d) => replaceArgument(d, [...path, index], next));
+  const removeArg = (index) => setDraft((d) => {
+    const at = callAt(d, path);
+    if (!at) return d;
+    const next = at.args.filter((_, i) => i !== index);
+    const rebuilt = path.length === 0 ? formatCall(at.name, next) : `${at.name}(${next.join(", ")})`;
+    return path.length === 0 ? rebuilt : replaceArgument(d, path, rebuilt);
+  });
   const dropInto = (index) => (e) => {
     const dropped = e.dataTransfer.getData("application/x-fx-insert");
     if (!dropped) return;
@@ -35086,7 +35120,20 @@ function CallEditor({
             return (
               // eslint-disable-next-line react/no-array-index-key
               /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-row", children: [
-                /* @__PURE__ */ jsx147("span", { id: `arg-${index}-label`, children: rowLabel }),
+                /* @__PURE__ */ jsxs141("span", { className: "ods-expression-field__editor-row-head", children: [
+                  /* @__PURE__ */ jsx147("span", { id: `arg-${index}-label`, children: rowLabel }),
+                  /* @__PURE__ */ jsx147(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ods-expression-field__editor-remove",
+                      "aria-label": `Remove ${rowLabel}`,
+                      title: "Remove this argument",
+                      onClick: () => removeArg(index),
+                      children: "\u2715"
+                    }
+                  )
+                ] }),
                 nested ? /* @__PURE__ */ jsxs141(
                   "div",
                   {
@@ -35149,14 +35196,14 @@ function CallEditor({
             "button",
             {
               type: "button",
-              className: "ods-expression-field__editor-link",
+              className: "ods-expression-field__editor-add",
               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: "+ argument"
+              children: "+ Add argument"
             }
           )
         ] }),