@overmap-ai/forms 1.0.6 → 1.0.9-handle-patchform-errors.0

package/dist/builder/FieldBuilder.d.ts

@@ -8,6 +8,7 @@ interface FieldOptionsFormProps {
     /** fields that can be used as a condition */
     conditionalSourceFields?: ISerializedField[];
     handleCancel: () => void;
+    handleDirtyChange: (dirty: boolean) => void;
     handleCreateField: (form: Form) => void;
 }
 interface FieldBuilderProps extends Pick<FieldOptionsFormProps, "conditionalSourceFields"> {

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, 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, useToast, Separator, useDiscardAlertDialog, Dialog, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DropdownMenu, DotsVerticalIcon, useAlertDialog, Em, Strong, 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";
@@ -1503,6 +1503,7 @@ const FormRenderer = memo(
       cancelText,
       onCancel,
       onDirty,
+      onDirtyChange,
       // if the title isn't provided, hide it by default
       hideTitle = !schema.title,
       hideDescription,
@@ -1531,7 +1532,9 @@ const FormRenderer = memo(
     useEffect(() => {
       if (dirty && onDirty)
         onDirty();
-    }, [dirty, onDirty]);
+      if (onDirtyChange)
+        onDirtyChange(dirty);
+    }, [dirty, onDirty, onDirtyChange]);
     return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx(Flex, { ref, direction: "column", gap: "2", className, asChild: true, children: /* @__PURE__ */ jsxs("form", { id: formId2, onSubmit: formik.handleSubmit, children: [
       !hideTitle && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
         Title,
@@ -1830,6 +1833,7 @@ const PatchField = memo(function PatchField2(props) {
 const PatchFormProvider = memo(
   forwardRef((props, ref) => {
     const { children, schema, values, onPatch, onError, ...rest } = props;
+    const { showError } = useToast();
     const initialValues2 = useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
     const handlePatch = useCallback(
       (values2) => {
@@ -1842,6 +1846,7 @@ const PatchFormProvider = memo(
         }
         if (!hasKeys(diff))
           return;
+        console.log("onpatch runs", diff);
         onPatch(diff);
       },
       [initialValues2, onPatch]
@@ -1867,9 +1872,13 @@ const PatchFormProvider = memo(
     const { errors, resetForm } = formik;
     useEffect(() => {
       if (hasKeys(errors)) {
-        resetForm({ values: initialValues2, errors: {} });
+        console.log(errors);
+        showError({
+          title: "test title",
+          description: "Sections with conditions must be below the fields they reference."
+        });
       }
-    }, [errors, initialValues2, resetForm]);
+    }, [showError, errors, initialValues2, resetForm]);
     return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit: formik.handleSubmit, children }) });
   })
 );
@@ -1943,7 +1952,7 @@ const commonFields = (takenLabels, type) => {
   ];
 };
 const FieldOptionsForm = memo(function FieldOptionsForm2(props) {
-  const { fieldType, handleCancel, handleCreateField, defaultField, conditionalSourceFields } = props;
+  const { fieldType, handleCancel, handleCreateField, handleDirtyChange, defaultField, conditionalSourceFields } = props;
   const fieldCls = CompleteFieldTypeToClsMapping[fieldType];
   const formik = useFormikContext();
   const schema = useMemo(() => {
@@ -1974,26 +1983,44 @@ const FieldOptionsForm = memo(function FieldOptionsForm2(props) {
       values: defaultField,
       onSubmit: handleCreateField,
       cancelText: defaultField ? void 0 : "Back",
-      onCancel: handleCancel
+      onCancel: handleCancel,
+      onDirtyChange: handleDirtyChange
     }
   );
 });
 const FieldBuilder = memo(function FieldBuilder2(props) {
   const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
   const [fieldType, setFieldType] = useState();
+  const [formIsDirty, setFormIsDirty] = useState(false);
   const type = (initial == null ? void 0 : initial.type) ?? fieldType;
   const typeName = type ? CompleteFieldTypeToClsMapping[type].fieldTypeName : void 0;
   const { setFieldValue, values } = useFormikContext();
   if (editing && !initial)
     throw new Error("Initial field must be provided if editing is true.");
+  const openConfirmDiscardChangesDialog = useDiscardAlertDialog();
   const showChooseField = !type && !editing && !initial;
   const title2 = showChooseField ? "Choose a field type" : `${typeName} settings`;
   const description2 = showChooseField ? "Select a field type to add to this section." : (typeName == null ? void 0 : typeName.toLowerCase()) === "section" ? "Customize your section" : `Customize your ${typeName == null ? void 0 : typeName.toLowerCase()} field.`;
-  const handleCancel = useCallback(() => setFieldType(void 0), []);
-  const handleCloseInterrupt = useCallback((confirmClose) => {
+  const handleCancel = useCallback(() => {
     setFieldType(void 0);
-    confirmClose();
+    setFormIsDirty(false);
   }, []);
+  const handleCloseInterrupt = useCallback(
+    (confirmClose) => {
+      if (formIsDirty) {
+        openConfirmDiscardChangesDialog({
+          onDiscard: () => {
+            setFieldType(void 0);
+            confirmClose();
+          }
+        });
+      } else {
+        setFieldType(void 0);
+        confirmClose();
+      }
+    },
+    [formIsDirty, openConfirmDiscardChangesDialog]
+  );
   const handleCreateField = useCallback(
     (form, closeDialog) => {
       const { label } = form;
@@ -2019,10 +2046,11 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
         newFields = insert(parent, index, field);
       }
       setFieldValue(parentPath, newFields).then();
-      closeDialog();
+      closeDialog({ force: true });
     },
     [editing, type, values, parentPath, setFieldValue, index]
   );
+  const handleDirtyChange = useCallback((dirty) => setFormIsDirty(dirty), []);
   const dialogContent = useCallback(
     (closeDialog) => {
       if (showChooseField) {
@@ -2035,11 +2063,12 @@ const FieldBuilder = memo(function FieldBuilder2(props) {
           handleCancel,
           handleCreateField: (form) => handleCreateField(form, closeDialog),
           fieldType: type,
-          defaultField: initial
+          defaultField: initial,
+          handleDirtyChange
         }
       );
     },
-    [conditionalSourceFields, handleCancel, handleCreateField, initial, showChooseField, type]
+    [conditionalSourceFields, handleCancel, handleCreateField, handleDirtyChange, initial, showChooseField, type]
   );
   return /* @__PURE__ */ jsx(Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
 });
@@ -2180,7 +2209,7 @@ const FieldWithActions = memo(function FieldWithActions2(props) {
   ) });
 });
 const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { field, index: sectionIndex, dropState } = props;
   const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
   const { setFieldValue, values } = useFormikContext();
@@ -2333,7 +2362,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
   const conditionComparison = Array.isArray((_c = field.condition) == null ? void 0 : _c.value) ? "contains all of" : "equals";
   if (valueIsFile((_d = field.condition) == null ? void 0 : _d.value))
     throw new Error("File values are not supported for conditions.");
-  const conditionValue = Array.isArray((_e = field.condition) == null ? void 0 : _e.value) ? (_f = field.condition) == null ? void 0 : _f.value.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_g = field.condition) == null ? void 0 : _g.value.toString();
+  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,
     {