@overmap-ai/forms 1.0.9 → 1.0.10-conditional-arrows-2.0

package/dist/builder/FieldActions.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
 import { FieldBuilderArgs } from "./FieldBuilder";
 interface FieldActionsProps {
     remove: () => void;
-    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
     editProps: FieldBuilderArgs;
     insertAfterProps: FieldBuilderArgs;
     duplicateProps: FieldBuilderArgs;
+    type?: string;
 }
 export declare const FieldActions: import("react").NamedExoticComponent<FieldActionsProps>;
 export {};

package/dist/builder/FieldSectionWithActions.d.ts

@@ -4,6 +4,7 @@ import { DropState } from "./DropDispatch";
 interface FieldSectionWithActionsProps {
     field: SerializedFieldSection;
     index: number;
+    conditionalFieldCounts: (number | null)[];
     dropState: DropState;
 }
 export declare const FieldSectionWithActions: import("react").NamedExoticComponent<FieldSectionWithActionsProps>;

package/dist/forms.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Flex, Text, useSeverityColor, Checkbox, CheckCircledIcon, TextField as TextField$1, FontFamilyIcon, CalendarIcon, InputIcon, TextArea, RowsIcon, Select, Box, IconButton, PlusIcon, Badge, Cross1Icon, ListBulletIcon, DropdownMenuIcon, MultiSelect, CheckboxIcon, Card, Heading, Button, UploadIcon, ButtonList, divButtonProps, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Tooltip, Avatar, Separator, useDiscardAlertDialog, Dialog, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DropdownMenu, DotsVerticalIcon, useAlertDialog, Em, Strong, useToast, Tabs } from "@overmap-ai/blocks";
+import { Flex, Text, useSeverityColor, Checkbox, CheckCircledIcon, TextField as TextField$1, FontFamilyIcon, CalendarIcon, InputIcon, TextArea, RowsIcon, Select, Box, IconButton, PlusIcon, Badge, Cross1Icon, ListBulletIcon, DropdownMenuIcon, MultiSelect, CheckboxIcon, Card, Heading, Button, UploadIcon, ButtonList, divButtonProps, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Tooltip, Avatar, Separator, useDiscardAlertDialog, Dialog, Pencil1Icon, TrashIcon, CopyIcon, DropdownMenu, DotsVerticalIcon, useAlertDialog, Em, Strong, useToast, Tabs } from "@overmap-ai/blocks";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
 import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, useReducer } from "react";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -13,6 +13,7 @@ import { slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAt
 import get from "lodash.get";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
+import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";
 class BaseFormElement {
   constructor(options) {
     __publicField(this, "type");
@@ -103,9 +104,11 @@ class BaseField extends BaseFormElement {
 }
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
-const description$1 = "_description_17zed_1";
+const description$1 = "_description_1se5r_1";
+const sectionContainer = "_sectionContainer_1se5r_5";
 const styles$3 = {
-  description: description$1
+  description: description$1,
+  sectionContainer
 };
 const InputWithLabel = (props) => {
   const { label, children, severity, inputId, labelId, flexProps } = props;
@@ -2067,12 +2070,8 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
   return /* @__PURE__ */ jsx(Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
 });
 const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
-const forMobile = (mobile, display) => ({
-  initial: mobile ? display : "none",
-  sm: mobile ? "none" : display
-});
 const FieldActions = memo(function FieldActions2(props) {
-  const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+  const { remove: remove2, editProps, insertAfterProps, duplicateProps, type } = props;
   const actions = useMemo(
     () => [
       {
@@ -2098,53 +2097,37 @@ const FieldActions = memo(function FieldActions2(props) {
         Wrapper: FieldBuilder,
         wrapperProps: insertAfterProps,
         Icon: PlusIcon,
-        text: "Add after"
-      },
-      {
-        // Wrapping icon in a div so that the asChild turns the button into a div
-        // so that the drag handle props are not applied to the icon
-        // Note: b/c the <button> does not handle the space-press event correctly
-        Icon: (props2) => /* @__PURE__ */ jsx("div", { ...props2, children: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}) }),
-        text: "Reorder",
-        disableOnMobile: true,
-        buttonProps: { ...dragHandleProps, asChild: true }
+        text: `Add ${type === "section" ? "section" : "field"}`
       }
     ],
-    [dragHandleProps, duplicateProps, editProps, insertAfterProps, remove2]
+    [duplicateProps, editProps, insertAfterProps, remove2, type]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
-      const Wrapper = Action.Wrapper ?? DefaultWrapper;
-      return /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }) }, Action.text);
-    }) }),
-    /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsx(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
-        closeOnSelect: false,
-        items: actions.map((Action) => {
-          var _a;
-          if (Action.disableOnMobile)
-            return null;
-          const Wrapper = Action.Wrapper ?? DefaultWrapper;
-          return {
-            ...Action.buttonProps,
-            onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
-            content: /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
-              /* @__PURE__ */ jsx(Action.Icon, {}),
-              Action.text
-            ] }) })
-          };
-        }).filter((x) => x !== null)
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsx(Box, { display: "block", children: /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
+      closeOnSelect: false,
+      items: actions.map((Action) => {
+        var _a;
+        const Wrapper = Action.Wrapper ?? DefaultWrapper;
+        return {
+          ...Action.buttonProps,
+          onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
+          content: /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+            /* @__PURE__ */ jsx(Action.Icon, {}),
+            Action.text
+          ] }) })
+        };
+      })
+    }
+  ) });
 });
 const formId = "form-builder";
 const FieldWithActions = memo(function FieldWithActions2(props) {
   const { field, index, sectionIndex, takenLabels, remove: remove2 } = props;
   const deserializedField = useMemo(() => deserialize(field), [field]);
   const input = useFieldInput(deserializedField, { formId, disabled: true });
+  const updateXarrow = useXarrow();
   const duplicateField = useCallback(
     (field2) => {
       if (field2.label === null) {
@@ -2185,6 +2168,8 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
       ref: draggableProvided.innerRef,
       ...draggableProvided.draggableProps,
       ...draggableProvided.dragHandleProps,
+      onDragStart: updateXarrow,
+      id: `${field.identifier}-card`,
       mb: "4",
       children: /* @__PURE__ */ jsxs(Flex, { gap: "4", justify: "between", align: "center", children: [
         input,
@@ -2194,20 +2179,91 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
             remove: remove2,
             editProps: editFieldProps,
             duplicateProps: duplicateFieldProps,
-            insertAfterProps,
-            dragHandleProps: draggableProvided.dragHandleProps
+            insertAfterProps
           }
         )
       ] })
     }
   ) });
 });
+const ArrowSpacingDiv = memo(function ArrowSpacingDiv2(props) {
+  const { identifier, index, conditionalFieldCounts } = props;
+  const HORIZONTAL_SPACE = 3;
+  const totalConditionals = conditionalFieldCounts.filter((count) => count !== null).length;
+  const conditionalNum = conditionalFieldCounts[index] ?? 0;
+  const marginLeft = HORIZONTAL_SPACE / totalConditionals * conditionalNum;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: `${identifier}-floating-point`,
+      style: {
+        width: `${HORIZONTAL_SPACE - marginLeft}%`,
+        marginLeft: `${marginLeft}%`
+      }
+    }
+  );
+});
+const ConditionalArrow = (props) => {
+  const { identifier, condition } = props;
+  const primaryColor = "var(--gray-a4)";
+  const hoverColor = "var(--primary-color)";
+  const [color, setColor] = useState(primaryColor);
+  const [zIndex, setZIndex] = useState(0);
+  const handleMouseEnter = useCallback(() => {
+    setColor(hoverColor);
+    setZIndex(1);
+  }, [hoverColor]);
+  const handleMouseLeave = useCallback(() => {
+    setColor(primaryColor);
+    setZIndex(0);
+  }, [primaryColor]);
+  const settings = useMemo(() => {
+    return {
+      strokeWidth: 1,
+      showHead: false,
+      color,
+      zIndex,
+      arrowBodyProps: {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }
+    };
+  }, [color, handleMouseEnter, handleMouseLeave, zIndex]);
+  if (!condition)
+    return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Xarrow,
+      {
+        start: `${identifier}-card`,
+        end: `${identifier}-floating-point`,
+        startAnchor: "right",
+        endAnchor: "left",
+        path: "straight",
+        ...settings
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Xarrow,
+      {
+        start: `${identifier}-floating-point`,
+        end: `${condition.identifier}-card`,
+        startAnchor: "left",
+        endAnchor: "right",
+        path: "grid",
+        gridBreak: "0",
+        ...settings
+      }
+    )
+  ] });
+};
 const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { field, index: sectionIndex, dropState } = props;
+  const { field, index: sectionIndex, dropState, conditionalFieldCounts } = props;
   const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
   const { setFieldValue, values } = useFormikContext();
   const alertDialog = useAlertDialog();
+  const updateXarrow = useXarrow();
   const takenFieldLabels = getTakenFieldLabels(values.fields);
   const removeSectionConditions = useCallback(
     (sectionsToUpdate, allSections) => {
@@ -2358,64 +2414,95 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
     throw new Error("File values are not supported for conditions.");
   const conditionValue = Array.isArray((_e = field.condition) == null ? void 0 : _e.value) ? (_g = (_f = field.condition) == null ? void 0 : _f.value) == null ? void 0 : _g.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_i = (_h = field.condition) == null ? void 0 : _h.value) == null ? void 0 : _i.toString();
   return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsx(
-    Card,
+    Flex,
     {
+      className: styles$3.sectionContainer,
       ref: draggableProvided.innerRef,
       ...draggableProvided.draggableProps,
-      ...draggableProvided.dragHandleProps,
+      direction: "row",
+      justify: "center",
+      align: "center",
       mb: "4",
-      children: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", align: "center", children: [
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
-          /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-            /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
-            /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
-          ] }),
-          field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
-            "Display only if ",
-            /* @__PURE__ */ jsx(Strong, { children: conditionLabel }),
-            " ",
-            conditionComparison,
-            " ",
-            /* @__PURE__ */ jsx(Strong, { children: conditionValue })
-          ] }) }),
-          /* @__PURE__ */ jsx(Droppable, { droppableId: field.identifier, type: "SECTION", isDropDisabled, children: (droppableProvided) => /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              ref: droppableProvided.innerRef,
-              ...droppableProvided.droppableProps,
-              direction: "column",
-              gap: "0",
-              children: [
-                field.fields.map((child, i) => /* @__PURE__ */ jsx(
-                  FieldWithActions,
-                  {
-                    field: child,
-                    index: i,
-                    sectionIndex,
-                    remove: () => removeField(i),
-                    takenLabels: takenFieldLabels
-                  },
-                  child.identifier
-                )),
-                droppableProvided.placeholder,
-                /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
-                  /* @__PURE__ */ jsx(PlusIcon, {}),
-                  " Add a field"
-                ] }) })
-              ]
-            }
-          ) })
-        ] }),
+      children: /* @__PURE__ */ jsxs(Xwrapper, { children: [
         /* @__PURE__ */ jsx(
-          FieldActions,
+          Card,
+          {
+            ...draggableProvided.dragHandleProps,
+            onDragStart: updateXarrow,
+            id: `${field.identifier}-card`,
+            style: { flexGrow: "1" },
+            children: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", align: "center", children: [
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+                  /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
+                  /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
+                ] }),
+                field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
+                  "Display only if ",
+                  /* @__PURE__ */ jsx(Strong, { children: conditionLabel }),
+                  " ",
+                  conditionComparison,
+                  " ",
+                  /* @__PURE__ */ jsx(Strong, { children: conditionValue })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  Droppable,
+                  {
+                    droppableId: field.identifier,
+                    type: "SECTION",
+                    isDropDisabled,
+                    children: (droppableProvided) => /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        ref: droppableProvided.innerRef,
+                        ...droppableProvided.droppableProps,
+                        direction: "column",
+                        gap: "0",
+                        children: [
+                          field.fields.map((child, i) => /* @__PURE__ */ jsx(
+                            FieldWithActions,
+                            {
+                              field: child,
+                              index: i,
+                              sectionIndex,
+                              remove: () => removeField(i),
+                              takenLabels: takenFieldLabels
+                            },
+                            child.identifier
+                          )),
+                          droppableProvided.placeholder,
+                          /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+                            /* @__PURE__ */ jsx(PlusIcon, {}),
+                            " Add a field"
+                          ] }) })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                FieldActions,
+                {
+                  remove: removeSection,
+                  insertAfterProps: insertSectionProps,
+                  editProps: editSectionProps,
+                  duplicateProps: duplicateSectionProps,
+                  type: "section"
+                }
+              )
+            ] })
+          }
+        ),
+        conditionalFieldCounts.some((count) => count !== null) && /* @__PURE__ */ jsx(
+          ArrowSpacingDiv,
           {
-            remove: removeSection,
-            insertAfterProps: insertSectionProps,
-            dragHandleProps: draggableProvided.dragHandleProps,
-            editProps: editSectionProps,
-            duplicateProps: duplicateSectionProps
+            identifier: field.identifier,
+            index: sectionIndex,
+            conditionalFieldCounts
           }
-        )
+        ),
+        field.condition && /* @__PURE__ */ jsx(ConditionalArrow, { identifier: field.identifier, condition: field.condition })
       ] })
     }
   ) });
@@ -2553,6 +2640,12 @@ const FieldsEditor = memo(function FieldsEditor2() {
     }),
     [values.fields]
   );
+  const conditionalFieldCounts = () => {
+    let conditionalCount = 1;
+    return values.fields.map((field) => {
+      return field.conditional ? conditionalCount++ : null;
+    });
+  };
   return /* @__PURE__ */ jsx(DragDropContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable", type: "ROOT", children: (droppableProvided) => /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2566,7 +2659,8 @@ const FieldsEditor = memo(function FieldsEditor2() {
           {
             field,
             index,
-            dropState
+            dropState,
+            conditionalFieldCounts: conditionalFieldCounts()
           },
           field.label
         )),