@octaviaflow/core 3.1.0-beta.104 → 3.1.0-beta.106

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) => {
@@ -34711,8 +34717,18 @@ function ExpressionField({
       } else {
         el.className = CHIP;
         el.setAttribute("data-call", segment.name);
-        el.textContent = chipText(segment.name, segment.args);
         el.title = segment.raw;
+        const text = document.createElement("span");
+        text.className = "ods-expression-field__chip-text";
+        text.textContent = chipText(segment.name, segment.args);
+        el.appendChild(text);
+        const open = document.createElement("span");
+        open.className = "ods-expression-field__chip-open";
+        open.setAttribute("data-open", "true");
+        open.setAttribute("role", "button");
+        open.setAttribute("aria-label", "Edit arguments");
+        open.textContent = "\u2304";
+        el.appendChild(open);
       }
       return el;
     },
@@ -34724,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;
@@ -34736,7 +34752,7 @@ function ExpressionField({
         }
       }
     },
-    [pillEveryToken, makeToken]
+    [makeToken]
   );
   useEffect56(() => {
     if (fromSelf.current) {
@@ -34837,7 +34853,9 @@ function ExpressionField({
       const call = parseCall(raw);
       if (!call) return;
       editing.el.setAttribute("data-value", raw);
-      editing.el.textContent = chipText(call.name, call.args);
+      const text = editing.el.querySelector(".ods-expression-field__chip-text");
+      if (text) text.textContent = chipText(call.name, call.args);
+      else editing.el.textContent = chipText(call.name, call.args);
       editing.el.title = raw;
       setEditing(null);
       commit();
@@ -34845,14 +34863,19 @@ 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 target = e.target.closest(`.${PILL}, .${CHIP}`);
+      const node = e.target;
+      const target = node.closest(`.${PILL}, .${CHIP}`);
       if (!target) return;
-      selectToken(target);
-      if (!disabled && target.classList.contains(CHIP) && e.detail >= 2) {
-        openEditor(target);
-      }
+      const chipEl = target;
+      const wantsEditor = chipEl.classList.contains(CHIP) && (!!node.closest("[data-open]") || e.detail >= 2);
+      selectToken(chipEl);
+      if (!disabled && wantsEditor) openEditor(chipEl);
     },
     [disabled, openEditor, selectToken]
   );
@@ -34958,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,
@@ -35014,6 +35038,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;
@@ -35073,7 +35104,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",
                   {
@@ -35136,14 +35180,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"
             }
           )
         ] }),