formanitor 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -181,10 +181,6 @@ var NO_OP_PROVIDER = {
 function applyPrefill(currentValues, fields, prefilledData = {}) {
   const newValues = { ...currentValues };
   fields.forEach((field) => {
-    const currentValue = newValues[field.id];
-    if (!isEmpty(currentValue)) {
-      return;
-    }
     if (field.prefill?.value !== void 0) {
       newValues[field.id] = field.prefill.value;
       return;
@@ -196,9 +192,6 @@ function applyPrefill(currentValues, fields, prefilledData = {}) {
   });
   return newValues;
 }
-function isEmpty(val) {
-  return val === void 0 || val === null || val === "";
-}
 
 // src/core/store.ts
 var FormStore = class {
@@ -230,7 +223,8 @@ var FormStore = class {
       workflowState: initialWorkflowState,
       isValid: true,
       isSubmitting: false,
-      submitAttempted: false
+      submitAttempted: false,
+      pendingUploads: 0
     };
     this.initializeDefaults();
     this.evaluate();
@@ -492,9 +486,52 @@ var FormStore = class {
       this.config.onEvent(event, finalPayload);
     }
   }
+  /**
+   * Update mutable config properties (callbacks, role) without recreating
+   * the store.  This allows the host app to pass fresh closures (e.g. an
+   * upload handler whose auth token was initially undefined) after the
+   * initial render.
+   */
+  updateConfig(next) {
+    let needsReeval = false;
+    if (next.onUpload !== void 0) this.config.onUpload = next.onUpload;
+    if (next.onEvent !== void 0) this.config.onEvent = next.onEvent;
+    if (next.role !== void 0 && next.role !== this.config.role) {
+      this.config.role = next.role;
+      needsReeval = true;
+    }
+    if (needsReeval) {
+      this.evaluate();
+      this.notify();
+    }
+  }
   getUploadHandler() {
     return this.config.onUpload;
   }
+  preSubmitHandlers = /* @__PURE__ */ new Map();
+  registerPreSubmitHandler(fieldId, fn) {
+    this.preSubmitHandlers.set(fieldId, fn);
+  }
+  unregisterPreSubmitHandler(fieldId) {
+    this.preSubmitHandlers.delete(fieldId);
+  }
+  /**
+   * Runs all registered pre-submit handlers in parallel.
+   * Call this before getSerializedValuesForSubmission() to ensure any
+   * unconfirmed signatures (or similar) are uploaded first.
+   */
+  async flushPendingUploads() {
+    const handlers = Array.from(this.preSubmitHandlers.values());
+    await Promise.all(handlers.map((fn) => fn()));
+  }
+  incrementPendingUploads() {
+    this.state.pendingUploads = (this.state.pendingUploads ?? 0) + 1;
+    this.notify();
+  }
+  decrementPendingUploads() {
+    this.state.pendingUploads = Math.max(0, (this.state.pendingUploads ?? 0) - 1);
+    this.notify();
+  }
   // Mark that a submit attempt has been made so UI can decide when to show errors
   markSubmitAttempted() {
     if (!this.state.submitAttempted) {
@@ -526,6 +563,11 @@ var FormProvider = ({ schema, config, children }) => {
   if (!storeRef.current) {
     storeRef.current = new FormStore(schema, config);
   }
+  React11.useEffect(() => {
+    if (storeRef.current && config) {
+      storeRef.current.updateConfig(config);
+    }
+  });
   React11.useEffect(() => {
     storeRef.current?.load();
   }, []);
@@ -556,7 +598,8 @@ function useForm() {
     availableTransitions: store.getAvailableTransitions(),
     hasPersistence: store.hasPersistence(),
     getSerializedValues: store.getSerializedValuesForSubmission.bind(store),
-    markSubmitAttempted: store.markSubmitAttempted.bind(store)
+    markSubmitAttempted: store.markSubmitAttempted.bind(store),
+    flushPendingUploads: store.flushPendingUploads.bind(store)
   };
 }
 function useField(fieldId) {
@@ -1464,6 +1507,7 @@ var ImageUploadWidget = ({ fieldId }) => {
     }
     setIsUploading(true);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const previewUrl = URL.createObjectURL(file);
       setPreview(previewUrl);
@@ -1476,6 +1520,7 @@ var ImageUploadWidget = ({ fieldId }) => {
       setPreview(null);
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
   const handleRemove = () => {
@@ -1575,6 +1620,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const [hasDrawing, setHasDrawing] = React11.useState(false);
   const [isUploading, setIsUploading] = React11.useState(false);
   const [isConfirmed, setIsConfirmed] = React11.useState(false);
+  const [uploadError, setUploadError] = React11.useState(null);
+  const confirmSignatureRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (hasDrawing && !isConfirmed) {
+      store.registerPreSubmitHandler(fieldId, async () => {
+        if (confirmSignatureRef.current) {
+          await confirmSignatureRef.current();
+        }
+      });
+    } else {
+      store.unregisterPreSubmitHandler(fieldId);
+    }
+    return () => {
+      store.unregisterPreSubmitHandler(fieldId);
+    };
+  }, [hasDrawing, isConfirmed, fieldId, store]);
   const showError = !!error && (touched || state.submitAttempted);
   const displayUrl = React11.useMemo(() => extractDisplayUrl(value), [value]);
   const showPreview = displayUrl !== null;
@@ -1613,6 +1674,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
     if (disabled) return;
     setIsDrawing(true);
     setIsConfirmed(false);
+    setUploadError(null);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1693,7 +1755,9 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const confirmSignature = async () => {
     if (!hasDrawing) return;
     setIsUploading(true);
+    setUploadError(null);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const svg = generateSVG();
       const blob = new Blob([svg], { type: "image/svg+xml" });
@@ -1704,10 +1768,15 @@ var SignatureUploadWidget = ({ fieldId }) => {
       setHasDrawing(false);
     } catch (err) {
       console.error("[SignatureUpload] Upload failed:", err);
+      setUploadError(
+        err instanceof Error ? err.message : "Signature upload failed. Please try again."
+      );
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
+  confirmSignatureRef.current = confirmSignature;
   const canClear = showPreview ? !disabled : hasDrawing || isConfirmed;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
@@ -1775,19 +1844,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
         isConfirmed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Signature saved" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            type: "button",
-            onClick: confirmSignature,
-            disabled: !hasDrawing || isUploading,
-            className: "text-xs",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
-              isUploading ? "Saving\u2026" : "Confirm"
-            ]
-          }
-        )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: confirmSignature,
+              disabled: !hasDrawing || isUploading,
+              className: "text-xs",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
+                isUploading ? "Saving\u2026" : "Confirm"
+              ]
+            }
+          ),
+          uploadError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500 mt-1", children: uploadError })
+        ] })
       ] })
     ),
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
@@ -2367,10 +2439,10 @@ var ReadOnlySelect = ({ fieldDef, value }) => {
     return String(opt.value) === String(value) || opt.value === value;
   });
   const displayValue = selectedOption ? selectedOption.label : value ?? "";
-  const isEmpty2 = !value && value !== 0;
+  const isEmpty = !value && value !== 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
   ] });
 };
 var ReadOnlyMultiSelect = ({ fieldDef, value }) => {
@@ -2394,10 +2466,10 @@ var ReadOnlyMultiSelect = ({ fieldDef, value }) => {
     });
     return option ? option.label : String(val);
   }).filter(Boolean);
-  const isEmpty2 = selectedLabels.length === 0;
+  const isEmpty = selectedLabels.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem]", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No values selected" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: selectedLabels.map((label, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem]", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No values selected" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: selectedLabels.map((label, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800",
@@ -2600,10 +2672,10 @@ var ReadOnlyRadio = ({ fieldDef, value }) => {
     (opt) => String(opt.value) === String(value) || opt.value === value
   );
   const displayValue = selectedOption ? selectedOption.label : value ?? "";
-  const isEmpty2 = value == null || value === "";
+  const isEmpty = value == null || value === "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
   ] });
 };
 function isOptionSelected2(selected, optValue) {
@@ -2773,6 +2845,7 @@ var FormControls = ({
   onSubmit
 }) => {
   const { state, availableTransitions, submit, transition, hasPersistence, markSubmitAttempted } = useForm();
+  const hasUploadsInFlight = (state.pendingUploads ?? 0) > 0;
   const draftAvailable = onSaveDraft || hasPersistence && submit;
   const submitAvailable = onSubmit || availableTransitions.length > 0 && transition;
   if (!draftAvailable && !submitAvailable) {
@@ -2793,7 +2866,8 @@ var FormControls = ({
           onClick: onSaveDraft || submit,
           variant: "outline",
           size: "sm",
-          children: "Save Draft"
+          disabled: hasUploadsInFlight,
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : "Save Draft"
         }
       ),
       submitAvailable && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: availableTransitions.length > 0 ? availableTransitions.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2807,9 +2881,9 @@ var FormControls = ({
               transition(t.to);
             }
           },
-          disabled: !state.isValid,
+          disabled: !state.isValid || hasUploadsInFlight,
           size: "sm",
-          children: availableTransitions.length > 1 ? `Submit to ${t.to}` : "Submit"
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : availableTransitions.length > 1 ? `Submit to ${t.to}` : "Submit"
         },
         t.to
       )) : onSubmit ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2819,9 +2893,9 @@ var FormControls = ({
             markSubmitAttempted();
             onSubmit(state.workflowState || "submit");
           },
-          disabled: !state.isValid,
+          disabled: !state.isValid || hasUploadsInFlight,
           size: "sm",
-          children: "Submit"
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : "Submit"
         }
       ) : null })
     ] })