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

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,7 @@ import {
   useRef as useRef50,
   useState as useState71
 } from "react";
+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_]*)";
@@ -34996,6 +35015,7 @@ function ExpressionField({
         CallEditor,
         {
           raw: editing.raw,
+          anchor: editing.el,
           rect: editing.rect,
           nameOf: callLabel,
           labelFor,
@@ -35010,6 +35030,7 @@ function ExpressionField({
 }
 function CallEditor({
   raw,
+  anchor,
   rect,
   nameOf,
   labelFor,
@@ -35021,13 +35042,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 ?? [];
@@ -35065,27 +35100,17 @@ function CallEditor({
       "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 " }),
-            /* @__PURE__ */ jsx147(
-              "button",
-              {
-                type: "button",
-                disabled: i === crumbs.length - 1,
-                onClick: () => setPath(crumb.path),
-                children: crumb.label
-              }
-            )
-          ] }, crumb.path.join(".") || "root")) }),
           /* @__PURE__ */ jsx147(
-            "button",
+            Breadcrumb,
             {
-              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-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",
@@ -35105,16 +35130,16 @@ function CallEditor({
               // 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("span", { className: "ods-expression-field__editor-row-name", id: `arg-${index}-label`, children: rowLabel }),
                   /* @__PURE__ */ jsx147(
-                    "button",
+                    Button,
                     {
-                      type: "button",
-                      className: "ods-expression-field__editor-remove",
+                      variant: "icon",
+                      size: "sm",
                       "aria-label": `Remove ${rowLabel}`,
                       title: "Remove this argument",
                       onClick: () => removeArg(index),
-                      children: "\u2715"
+                      children: /* @__PURE__ */ jsx147(CloseIcon20, { size: "sm" })
                     }
                   )
                 ] }),
@@ -35129,8 +35154,17 @@ function CallEditor({
                     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" })
+                        /* @__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"
+                          }
+                        )
                       ] })
                     ]
                   }
@@ -35155,7 +35189,16 @@ function CallEditor({
                             children: labelFor(arg.startsWith("ods://") ? `{{${arg}}}` : arg)
                           }
                         ),
-                        /* @__PURE__ */ jsx147("button", { type: "button", onClick: () => setArg(index, ""), "aria-label": `Clear ${rowLabel}`, children: "Clear" })
+                        /* @__PURE__ */ jsx147(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            "aria-label": `Clear ${rowLabel}`,
+                            onClick: () => setArg(index, ""),
+                            children: "Clear"
+                          }
+                        )
                       ]
                     }
                   )
@@ -35177,31 +35220,25 @@ function CallEditor({
             );
           }),
           /* @__PURE__ */ jsx147(
-            "button",
+            Button,
             {
-              type: "button",
-              className: "ods-expression-field__editor-add",
+              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"
+              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"
-            }
-          )
+          /* @__PURE__ */ jsx147(Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx147(Button, { variant: "primary", size: "sm", onClick: () => onApply(draft), children: "Apply" })
         ] })
       ]
     }
@@ -39597,7 +39634,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 = [
@@ -39763,7 +39800,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"
@@ -40053,7 +40090,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,
@@ -40082,7 +40119,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"
         }
@@ -40098,7 +40135,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"
           }
@@ -40122,7 +40159,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"
       ] })
     ] })
@@ -40404,7 +40441,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 = [
@@ -40555,7 +40592,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"
           }
@@ -40749,7 +40786,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,
@@ -40779,7 +40816,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"
         }
@@ -40796,7 +40833,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"
             }