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

package/dist/forms.umd.cjs

@@ -1498,6 +1498,7 @@ var __publicField = (obj, key, value) => {
         cancelText,
         onCancel,
         onDirty,
+        onDirtyChange,
         // if the title isn't provided, hide it by default
         hideTitle = !schema.title,
         hideDescription,
@@ -1526,7 +1527,9 @@ var __publicField = (obj, key, value) => {
       React.useEffect(() => {
         if (dirty && onDirty)
           onDirty();
-      }, [dirty, onDirty]);
+        if (onDirtyChange)
+          onDirtyChange(dirty);
+      }, [dirty, onDirty, onDirtyChange]);
       return /* @__PURE__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Flex, { ref, direction: "column", gap: "2", className, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { id: formId2, onSubmit: formik$1.handleSubmit, children: [
         !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(blocks.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Flex, { direction: "column", gap: "1", children: [
           Title,
@@ -1825,6 +1828,7 @@ var __publicField = (obj, key, value) => {
   const PatchFormProvider = React.memo(
     React.forwardRef((props, ref) => {
       const { children, schema, values, onPatch, onError, ...rest } = props;
+      const { showError } = blocks.useToast();
       const initialValues2 = React.useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
       const handlePatch = React.useCallback(
         (values2) => {
@@ -1837,6 +1841,7 @@ var __publicField = (obj, key, value) => {
           }
           if (!hasKeys(diff))
             return;
+          console.log("onpatch runs", diff);
           onPatch(diff);
         },
         [initialValues2, onPatch]
@@ -1862,9 +1867,13 @@ var __publicField = (obj, key, value) => {
       const { errors, resetForm } = formik$1;
       React.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__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children: /* @__PURE__ */ jsxRuntime.jsx("form", { ...rest, ref, onSubmit: formik$1.handleSubmit, children }) });
     })
   );
@@ -1938,7 +1947,7 @@ var __publicField = (obj, key, value) => {
     ];
   };
   const FieldOptionsForm = React.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$1 = formik.useFormikContext();
     const schema = React.useMemo(() => {
@@ -1969,26 +1978,44 @@ var __publicField = (obj, key, value) => {
         values: defaultField,
         onSubmit: handleCreateField,
         cancelText: defaultField ? void 0 : "Back",
-        onCancel: handleCancel
+        onCancel: handleCancel,
+        onDirtyChange: handleDirtyChange
       }
     );
   });
   const FieldBuilder = React.memo(function FieldBuilder2(props) {
     const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
     const [fieldType, setFieldType] = React.useState();
+    const [formIsDirty, setFormIsDirty] = React.useState(false);
     const type = (initial == null ? void 0 : initial.type) ?? fieldType;
     const typeName = type ? CompleteFieldTypeToClsMapping[type].fieldTypeName : void 0;
     const { setFieldValue, values } = formik.useFormikContext();
     if (editing && !initial)
       throw new Error("Initial field must be provided if editing is true.");
+    const openConfirmDiscardChangesDialog = blocks.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 = React.useCallback(() => setFieldType(void 0), []);
-    const handleCloseInterrupt = React.useCallback((confirmClose) => {
+    const handleCancel = React.useCallback(() => {
       setFieldType(void 0);
-      confirmClose();
+      setFormIsDirty(false);
     }, []);
+    const handleCloseInterrupt = React.useCallback(
+      (confirmClose) => {
+        if (formIsDirty) {
+          openConfirmDiscardChangesDialog({
+            onDiscard: () => {
+              setFieldType(void 0);
+              confirmClose();
+            }
+          });
+        } else {
+          setFieldType(void 0);
+          confirmClose();
+        }
+      },
+      [formIsDirty, openConfirmDiscardChangesDialog]
+    );
     const handleCreateField = React.useCallback(
       (form, closeDialog) => {
         const { label } = form;
@@ -2014,10 +2041,11 @@ var __publicField = (obj, key, value) => {
           newFields = insert(parent, index, field);
         }
         setFieldValue(parentPath, newFields).then();
-        closeDialog();
+        closeDialog({ force: true });
       },
       [editing, type, values, parentPath, setFieldValue, index]
     );
+    const handleDirtyChange = React.useCallback((dirty) => setFormIsDirty(dirty), []);
     const dialogContent = React.useCallback(
       (closeDialog) => {
         if (showChooseField) {
@@ -2030,11 +2058,12 @@ var __publicField = (obj, key, value) => {
             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__ */ jsxRuntime.jsx(blocks.Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
   });
@@ -2175,7 +2204,7 @@ var __publicField = (obj, key, value) => {
     ) });
   });
   const FieldSectionWithActions = React.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 } = formik.useFormikContext();
@@ -2328,7 +2357,7 @@ var __publicField = (obj, key, value) => {
     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__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsxRuntime.jsx(
       blocks.Card,
       {