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

package/dist/forms.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("formik"), require("react"), require("@hello-pangea/dnd"), require("@overmap-ai/core"), require("lodash.get"), require("lodash.set"), require("lodash.clonedeep")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "formik", "react", "@hello-pangea/dnd", "@overmap-ai/core", "lodash.get", "lodash.set", "lodash.clonedeep"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.forms = {}, global.jsxRuntime, global.blocks, global.formik, global.React, global.dnd, global.core, global.get, global.set, global.cloneDeep));
-})(this, function(exports2, jsxRuntime, blocks, formik, React, dnd, core, get, set, cloneDeep) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("formik"), require("react"), require("@hello-pangea/dnd"), require("@overmap-ai/core"), require("lodash.get"), require("lodash.set"), require("lodash.clonedeep"), require("react-xarrows")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "formik", "react", "@hello-pangea/dnd", "@overmap-ai/core", "lodash.get", "lodash.set", "lodash.clonedeep", "react-xarrows"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.forms = {}, global.jsxRuntime, global.blocks, global.formik, global.React, global.dnd, global.core, global.get, global.set, global.cloneDeep, global.Xarrow));
+})(this, function(exports2, jsxRuntime, blocks, formik, React, dnd, core, get, set, cloneDeep, Xarrow) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -98,9 +98,11 @@ var __publicField = (obj, key, value) => {
   }
   __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;
@@ -2062,12 +2064,8 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(blocks.Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
   });
   const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  const forMobile = (mobile, display) => ({
-    initial: mobile ? display : "none",
-    sm: mobile ? "none" : display
-  });
   const FieldActions = React.memo(function FieldActions2(props) {
-    const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+    const { remove: remove2, editProps, insertAfterProps, duplicateProps, type } = props;
     const actions = React.useMemo(
       () => [
         {
@@ -2093,53 +2091,39 @@ var __publicField = (obj, key, value) => {
           Wrapper: FieldBuilder,
           wrapperProps: insertAfterProps,
           Icon: blocks.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__ */ jsxRuntime.jsx("div", { ...props2, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
-        const Wrapper = Action.Wrapper ?? DefaultWrapper;
-        return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}) }) }, Action.text);
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsxRuntime.jsx(
-        blocks.DropdownMenu,
-        {
-          trigger: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.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__ */ jsxRuntime.jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
-                Action.text
-              ] }) })
-            };
-          }).filter((x) => x !== null)
-        }
-      ) })
-    ] });
+    const actionItems = actions.map((Action) => {
+      var _a;
+      const Wrapper = Action.Wrapper ?? DefaultWrapper;
+      return {
+        ...Action.buttonProps,
+        onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
+        content: /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "2", align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Action.Icon, {}),
+          Action.text
+        ] }) })
+      };
+    });
+    console.log(actionItems);
+    return /* @__PURE__ */ jsxRuntime.jsx(blocks.Box, { display: "block", children: /* @__PURE__ */ jsxRuntime.jsx(
+      blocks.DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.DotsVerticalIcon, {}) }),
+        closeOnSelect: false,
+        items: actionItems
+      }
+    ) });
   });
   const formId = "form-builder";
   const FieldWithActions = React.memo(function FieldWithActions2(props) {
     const { field, index, sectionIndex, takenLabels, remove: remove2 } = props;
     const deserializedField = React.useMemo(() => deserialize(field), [field]);
     const input = useFieldInput(deserializedField, { formId, disabled: true });
+    const updateXarrow = Xarrow.useXarrow();
     const duplicateField = React.useCallback(
       (field2) => {
         if (field2.label === null) {
@@ -2180,6 +2164,8 @@ var __publicField = (obj, key, value) => {
         ref: draggableProvided.innerRef,
         ...draggableProvided.draggableProps,
         ...draggableProvided.dragHandleProps,
+        onDragStart: updateXarrow,
+        id: `${field.identifier}-card`,
         mb: "4",
         children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "4", justify: "between", align: "center", children: [
           input,
@@ -2189,20 +2175,91 @@ var __publicField = (obj, key, value) => {
               remove: remove2,
               editProps: editFieldProps,
               duplicateProps: duplicateFieldProps,
-              insertAfterProps,
-              dragHandleProps: draggableProvided.dragHandleProps
+              insertAfterProps
             }
           )
         ] })
       }
     ) });
   });
+  const ArrowSpacingDiv = React.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__ */ jsxRuntime.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] = React.useState(primaryColor);
+    const [zIndex, setZIndex] = React.useState(0);
+    const handleMouseEnter = React.useCallback(() => {
+      setColor(hoverColor);
+      setZIndex(1);
+    }, [hoverColor]);
+    const handleMouseLeave = React.useCallback(() => {
+      setColor(primaryColor);
+      setZIndex(0);
+    }, [primaryColor]);
+    const settings = React.useMemo(() => {
+      return {
+        strokeWidth: 1,
+        showHead: false,
+        color,
+        zIndex,
+        arrowBodyProps: {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave
+        }
+      };
+    }, [color, handleMouseEnter, handleMouseLeave, zIndex]);
+    if (!condition)
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Xarrow,
+        {
+          start: `${identifier}-card`,
+          end: `${identifier}-floating-point`,
+          startAnchor: "right",
+          endAnchor: "left",
+          path: "straight",
+          ...settings
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Xarrow,
+        {
+          start: `${identifier}-floating-point`,
+          end: `${condition.identifier}-card`,
+          startAnchor: "left",
+          endAnchor: "right",
+          path: "grid",
+          gridBreak: "0",
+          ...settings
+        }
+      )
+    ] });
+  };
   const FieldSectionWithActions = React.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 } = formik.useFormikContext();
     const alertDialog = blocks.useAlertDialog();
+    const updateXarrow = Xarrow.useXarrow();
     const takenFieldLabels = getTakenFieldLabels(values.fields);
     const removeSectionConditions = React.useCallback(
       (sectionsToUpdate, allSections) => {
@@ -2353,64 +2410,95 @@ var __publicField = (obj, key, value) => {
       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__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsxRuntime.jsx(
-      blocks.Card,
+      blocks.Flex,
       {
+        className: styles$3.sectionContainer,
         ref: draggableProvided.innerRef,
         ...draggableProvided.draggableProps,
-        ...draggableProvided.dragHandleProps,
+        direction: "row",
+        justify: "center",
+        align: "center",
         mb: "4",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "3", justify: "between", align: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", grow: "1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Heading, { as: "h3", size: "3", children: field.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$3.description, children: field.description })
-            ] }),
-            field.condition && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Em, { children: [
-              "Display only if ",
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Strong, { children: conditionLabel }),
-              " ",
-              conditionComparison,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Strong, { children: conditionValue })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: field.identifier, type: "SECTION", isDropDisabled, children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
-              blocks.Flex,
-              {
-                ref: droppableProvided.innerRef,
-                ...droppableProvided.droppableProps,
-                direction: "column",
-                gap: "0",
-                children: [
-                  field.fields.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                    FieldWithActions,
-                    {
-                      field: child,
-                      index: i,
-                      sectionIndex,
-                      remove: () => removeField(i),
-                      takenLabels: takenFieldLabels
-                    },
-                    child.identifier
-                  )),
-                  droppableProvided.placeholder,
-                  /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "outline", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(blocks.PlusIcon, {}),
-                    " Add a field"
-                  ] }) })
-                ]
-              }
-            ) })
-          ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Xarrow.Xwrapper, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            FieldActions,
+            blocks.Card,
             {
-              remove: removeSection,
-              insertAfterProps: insertSectionProps,
-              dragHandleProps: draggableProvided.dragHandleProps,
-              editProps: editSectionProps,
-              duplicateProps: duplicateSectionProps
+              ...draggableProvided.dragHandleProps,
+              onDragStart: updateXarrow,
+              id: `${field.identifier}-card`,
+              style: { flexGrow: "1" },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { gap: "3", justify: "between", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "2", grow: "1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(blocks.Heading, { as: "h3", size: "3", children: field.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { className: styles$3.description, children: field.description })
+                  ] }),
+                  field.condition && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Em, { children: [
+                    "Display only if ",
+                    /* @__PURE__ */ jsxRuntime.jsx(blocks.Strong, { children: conditionLabel }),
+                    " ",
+                    conditionComparison,
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(blocks.Strong, { children: conditionValue })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    dnd.Droppable,
+                    {
+                      droppableId: field.identifier,
+                      type: "SECTION",
+                      isDropDisabled,
+                      children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        blocks.Flex,
+                        {
+                          ref: droppableProvided.innerRef,
+                          ...droppableProvided.droppableProps,
+                          direction: "column",
+                          gap: "0",
+                          children: [
+                            field.fields.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                              FieldWithActions,
+                              {
+                                field: child,
+                                index: i,
+                                sectionIndex,
+                                remove: () => removeField(i),
+                                takenLabels: takenFieldLabels
+                              },
+                              child.identifier
+                            )),
+                            droppableProvided.placeholder,
+                            /* @__PURE__ */ jsxRuntime.jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "outline", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(blocks.PlusIcon, {}),
+                              " Add a field"
+                            ] }) })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  FieldActions,
+                  {
+                    remove: removeSection,
+                    insertAfterProps: insertSectionProps,
+                    editProps: editSectionProps,
+                    duplicateProps: duplicateSectionProps,
+                    type: "section"
+                  }
+                )
+              ] })
             }
-          )
+          ),
+          conditionalFieldCounts.some((count) => count !== null) && /* @__PURE__ */ jsxRuntime.jsx(
+            ArrowSpacingDiv,
+            {
+              identifier: field.identifier,
+              index: sectionIndex,
+              conditionalFieldCounts
+            }
+          ),
+          field.condition && /* @__PURE__ */ jsxRuntime.jsx(ConditionalArrow, { identifier: field.identifier, condition: field.condition })
         ] })
       }
     ) });
@@ -2548,6 +2636,12 @@ var __publicField = (obj, key, value) => {
       }),
       [values.fields]
     );
+    const conditionalFieldCounts = () => {
+      let conditionalCount = 1;
+      return values.fields.map((field) => {
+        return field.conditional ? conditionalCount++ : null;
+      });
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: "droppable", type: "ROOT", children: (droppableProvided) => /* @__PURE__ */ jsxRuntime.jsxs(
       blocks.Flex,
       {
@@ -2561,7 +2655,8 @@ var __publicField = (obj, key, value) => {
             {
               field,
               index,
-              dropState
+              dropState,
+              conditionalFieldCounts: conditionalFieldCounts()
             },
             field.label
           )),