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

package/dist/index.js

@@ -2420,14 +2420,32 @@ import { useBreadcrumbItem, useBreadcrumbs } from "react-aria";
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function BreadcrumbItem({ item, isCurrent }) {
   const ref = useRef3(null);
+  const interactive = !isCurrent && (!!item.href || !!item.onClick);
   const { itemProps } = useBreadcrumbItem(
-    { children: item.label, isCurrent, elementType: item.href ? "a" : "span" },
+    {
+      children: item.label,
+      isCurrent,
+      elementType: item.href ? "a" : item.onClick && !isCurrent ? "button" : "span"
+    },
     ref
   );
   const content = /* @__PURE__ */ jsxs8(Fragment5, { children: [
     item.icon && /* @__PURE__ */ jsx8("span", { className: "ods-breadcrumb__icon", children: item.icon }),
     /* @__PURE__ */ jsx8("span", { children: item.label })
   ] });
+  if (item.onClick && !item.href && interactive) {
+    return /* @__PURE__ */ jsx8(
+      "button",
+      {
+        ...itemProps,
+        ref,
+        type: "button",
+        onClick: item.onClick,
+        className: cn("ods-breadcrumb__link", "ods-breadcrumb__link--button"),
+        children: content
+      }
+    );
+  }
   if (item.href && !isCurrent) {
     return /* @__PURE__ */ jsx8(
       "a",
@@ -34428,6 +34446,8 @@ 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
 var CALL_NAME_SOURCE = "(?:[A-Z_][A-Z0-9_]*|user\\.[A-Za-z_][A-Za-z0-9_]*)";
@@ -34647,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);
@@ -34835,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) => {
@@ -35071,156 +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("nav", { className: "ods-expression-field__editor-crumbs", "aria-label": "Nested functions", children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs141("span", { children: [
-            i > 0 && /* @__PURE__ */ jsx147("span", { "aria-hidden": "true", children: " \u203A " }),
+  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(
-              "button",
+              Breadcrumb,
               {
-                type: "button",
-                disabled: i === crumbs.length - 1,
-                onClick: () => setPath(crumb.path),
-                children: crumb.label
+                className: "ods-expression-field__editor-crumbs",
+                items: crumbs.map((crumb) => ({
+                  label: crumb.label,
+                  onClick: () => setPath(crumb.path)
+                }))
               }
-            )
-          ] }, crumb.path.join(".") || "root")) }),
-          /* @__PURE__ */ jsx147(
-            "button",
+            ),
+            /* @__PURE__ */ jsx147(Button, { variant: "ghost", size: "sm", onClick: () => setRawMode((r) => !r), children: rawMode ? "Back to fields" : "Edit as text" })
+          ] }),
+          rawMode ? /* @__PURE__ */ jsx147(
+            "textarea",
             {
-              type: "button",
-              className: "ods-expression-field__editor-link",
-              onClick: () => setRawMode((r) => !r),
-              children: rawMode ? "Back to fields" : "Edit as text"
+              className: "ods-expression-field__editor-raw",
+              value: draft,
+              rows: 3,
+              "aria-label": "Expression",
+              onChange: (e) => setDraft(e.target.value)
             }
-          )
-        ] }),
-        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", { 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",
-                  {
-                    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", { type: "button", onClick: () => setPath([...path, index]), children: "Open" }),
-                        /* @__PURE__ */ jsx147("button", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, 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", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, 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",
-            {
-              type: "button",
-              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: "+ Add argument"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs141("div", { className: "ods-expression-field__editor-foot", children: [
-          /* @__PURE__ */ jsx147("button", { type: "button", onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsx147(
-            "button",
-            {
-              type: "button",
-              className: "ods-expression-field__editor-primary",
-              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
   );
 }
 
@@ -39613,7 +39650,7 @@ function draftFromChannel(channel, fallbackType = "slack") {
 }
 
 // src/notifications/components/NotificationChannelForm/NotificationChannelForm.tsx
-import { AddIcon as AddIcon6, CheckmarkFilledIcon as CheckmarkFilledIcon3, LaunchIcon as LaunchIcon2 } from "@octaviaflow/icons";
+import { AddIcon as AddIcon7, CheckmarkFilledIcon as CheckmarkFilledIcon3, LaunchIcon as LaunchIcon2 } from "@octaviaflow/icons";
 import { useId as useId68, useState as useState83 } from "react";
 import { jsx as jsx164, jsxs as jsxs156 } from "react/jsx-runtime";
 var DEFAULT_TYPES = [
@@ -39779,7 +39816,7 @@ function NotificationChannelForm({
             {
               size,
               variant: "ghost",
-              leftIcon: /* @__PURE__ */ jsx164(AddIcon6, { size: "sm", "aria-hidden": "true" }),
+              leftIcon: /* @__PURE__ */ jsx164(AddIcon7, { size: "sm", "aria-hidden": "true" }),
               onClick: () => onConnectNew(value.type),
               className: "ods-notif-channel-form__connect",
               children: "Connect new"
@@ -40069,7 +40106,7 @@ function NotificationChannelDialog({
 NotificationChannelDialog.displayName = "NotificationChannelDialog";
 
 // src/notifications/components/NotificationChannelList/NotificationChannelList.tsx
-import { AddIcon as AddIcon7, ConnectIcon } from "@octaviaflow/icons";
+import { AddIcon as AddIcon8, ConnectIcon } from "@octaviaflow/icons";
 import { jsx as jsx166, jsxs as jsxs158 } from "react/jsx-runtime";
 function NotificationChannelList({
   channels,
@@ -40098,7 +40135,7 @@ function NotificationChannelList({
         {
           size: "sm",
           variant: "secondary",
-          leftIcon: /* @__PURE__ */ jsx166(AddIcon7, { size: "sm", "aria-hidden": "true" }),
+          leftIcon: /* @__PURE__ */ jsx166(AddIcon8, { size: "sm", "aria-hidden": "true" }),
           onClick: onAdd,
           children: "Add channel"
         }
@@ -40114,7 +40151,7 @@ function NotificationChannelList({
           Button,
           {
             variant: "primary",
-            leftIcon: /* @__PURE__ */ jsx166(AddIcon7, { size: "sm", "aria-hidden": "true" }),
+            leftIcon: /* @__PURE__ */ jsx166(AddIcon8, { size: "sm", "aria-hidden": "true" }),
             onClick: onAdd,
             children: "Add channel"
           }
@@ -40138,7 +40175,7 @@ function NotificationChannelList({
         channel.id
       )),
       canAdd && /* @__PURE__ */ jsxs158("button", { type: "button", className: "ods-notif-channels__add", onClick: onAdd, children: [
-        /* @__PURE__ */ jsx166("span", { className: "ods-notif-channels__add-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx166(AddIcon7, { size: "sm" }) }),
+        /* @__PURE__ */ jsx166("span", { className: "ods-notif-channels__add-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx166(AddIcon8, { size: "sm" }) }),
         "Add channel"
       ] })
     ] })
@@ -40420,7 +40457,7 @@ function NotificationPreferenceMatrix({
 NotificationPreferenceMatrix.displayName = "NotificationPreferenceMatrix";
 
 // src/notifications/components/NotificationRuleEditor/NotificationRuleEditor.tsx
-import { AddIcon as AddIcon8, RuleIcon } from "@octaviaflow/icons";
+import { AddIcon as AddIcon9, RuleIcon } from "@octaviaflow/icons";
 import { useId as useId70, useMemo as useMemo45 } from "react";
 import { Fragment as Fragment68, jsx as jsx168, jsxs as jsxs160 } from "react/jsx-runtime";
 var COOLDOWN_OPTIONS = [
@@ -40571,7 +40608,7 @@ function NotificationRuleEditor({
           {
             size: "sm",
             variant: "ghost",
-            leftIcon: /* @__PURE__ */ jsx168(AddIcon8, { size: "sm", "aria-hidden": "true" }),
+            leftIcon: /* @__PURE__ */ jsx168(AddIcon9, { size: "sm", "aria-hidden": "true" }),
             onClick: onAddChannel,
             children: "Add channel"
           }
@@ -40765,7 +40802,7 @@ function NotificationRuleEditor({
 NotificationRuleEditor.displayName = "NotificationRuleEditor";
 
 // src/notifications/components/NotificationRuleList/NotificationRuleList.tsx
-import { AddIcon as AddIcon9, CopyIcon as CopyIcon6, EditIcon as EditIcon2, RuleIcon as RuleIcon2, TrashCanIcon as TrashCanIcon4 } from "@octaviaflow/icons";
+import { AddIcon as AddIcon10, CopyIcon as CopyIcon6, EditIcon as EditIcon2, RuleIcon as RuleIcon2, TrashCanIcon as TrashCanIcon4 } from "@octaviaflow/icons";
 import { Fragment as Fragment69, jsx as jsx169, jsxs as jsxs161 } from "react/jsx-runtime";
 function NotificationRuleList({
   rules,
@@ -40795,7 +40832,7 @@ function NotificationRuleList({
         {
           size: "sm",
           variant: "secondary",
-          leftIcon: /* @__PURE__ */ jsx169(AddIcon9, { size: "sm", "aria-hidden": "true" }),
+          leftIcon: /* @__PURE__ */ jsx169(AddIcon10, { size: "sm", "aria-hidden": "true" }),
           onClick: onCreate,
           children: "New rule"
         }
@@ -40812,7 +40849,7 @@ function NotificationRuleList({
             Button,
             {
               variant: "primary",
-              leftIcon: /* @__PURE__ */ jsx169(AddIcon9, { size: "sm", "aria-hidden": "true" }),
+              leftIcon: /* @__PURE__ */ jsx169(AddIcon10, { size: "sm", "aria-hidden": "true" }),
               onClick: onCreate,
               children: "New rule"
             }