formanitor 0.0.8 → 0.0.10

package/dist/index.d.cts

@@ -224,6 +224,7 @@ interface FormState {
     isValid: boolean;
     isSubmitting: boolean;
     submitAttempted?: boolean;
+    pendingUploads: number;
 }
 
 interface SavedState {
@@ -298,7 +299,25 @@ declare class FormStore {
     transition(toState: string): void;
     private checkEvents;
     private emit;
+    /**
+     * 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: Partial<StoreConfig>): void;
     getUploadHandler(): UploadHandler | undefined;
+    private preSubmitHandlers;
+    registerPreSubmitHandler(fieldId: string, fn: () => Promise<void>): void;
+    unregisterPreSubmitHandler(fieldId: string): void;
+    /**
+     * Runs all registered pre-submit handlers in parallel.
+     * Call this before getSerializedValuesForSubmission() to ensure any
+     * unconfirmed signatures (or similar) are uploaded first.
+     */
+    flushPendingUploads(): Promise<void>;
+    incrementPendingUploads(): void;
+    decrementPendingUploads(): void;
     markSubmitAttempted(): void;
     subscribe(listener: Listener): () => void;
     private notify;
@@ -332,6 +351,7 @@ declare function useForm(): {
     hasPersistence: boolean;
     getSerializedValues: () => FormValues;
     markSubmitAttempted: () => void;
+    flushPendingUploads: () => Promise<void>;
 };
 
 declare function useField(fieldId: string): {

package/dist/index.d.ts

@@ -224,6 +224,7 @@ interface FormState {
     isValid: boolean;
     isSubmitting: boolean;
     submitAttempted?: boolean;
+    pendingUploads: number;
 }
 
 interface SavedState {
@@ -298,7 +299,25 @@ declare class FormStore {
     transition(toState: string): void;
     private checkEvents;
     private emit;
+    /**
+     * 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: Partial<StoreConfig>): void;
     getUploadHandler(): UploadHandler | undefined;
+    private preSubmitHandlers;
+    registerPreSubmitHandler(fieldId: string, fn: () => Promise<void>): void;
+    unregisterPreSubmitHandler(fieldId: string): void;
+    /**
+     * Runs all registered pre-submit handlers in parallel.
+     * Call this before getSerializedValuesForSubmission() to ensure any
+     * unconfirmed signatures (or similar) are uploaded first.
+     */
+    flushPendingUploads(): Promise<void>;
+    incrementPendingUploads(): void;
+    decrementPendingUploads(): void;
     markSubmitAttempted(): void;
     subscribe(listener: Listener): () => void;
     private notify;
@@ -332,6 +351,7 @@ declare function useForm(): {
     hasPersistence: boolean;
     getSerializedValues: () => FormValues;
     markSubmitAttempted: () => void;
+    flushPendingUploads: () => Promise<void>;
 };
 
 declare function useField(fieldId: string): {

package/dist/index.mjs

@@ -155,10 +155,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;
@@ -170,9 +166,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 {
@@ -204,7 +197,8 @@ var FormStore = class {
       workflowState: initialWorkflowState,
       isValid: true,
       isSubmitting: false,
-      submitAttempted: false
+      submitAttempted: false,
+      pendingUploads: 0
     };
     this.initializeDefaults();
     this.evaluate();
@@ -466,9 +460,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) {
@@ -500,6 +537,11 @@ var FormProvider = ({ schema, config, children }) => {
   if (!storeRef.current) {
     storeRef.current = new FormStore(schema, config);
   }
+  useEffect(() => {
+    if (storeRef.current && config) {
+      storeRef.current.updateConfig(config);
+    }
+  });
   useEffect(() => {
     storeRef.current?.load();
   }, []);
@@ -530,7 +572,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) {
@@ -1438,6 +1481,7 @@ var ImageUploadWidget = ({ fieldId }) => {
     }
     setIsUploading(true);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const previewUrl = URL.createObjectURL(file);
       setPreview(previewUrl);
@@ -1450,6 +1494,7 @@ var ImageUploadWidget = ({ fieldId }) => {
       setPreview(null);
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
   const handleRemove = () => {
@@ -1549,6 +1594,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const [hasDrawing, setHasDrawing] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [isConfirmed, setIsConfirmed] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const confirmSignatureRef = useRef(null);
+  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 = useMemo(() => extractDisplayUrl(value), [value]);
   const showPreview = displayUrl !== null;
@@ -1587,6 +1648,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
     if (disabled) return;
     setIsDrawing(true);
     setIsConfirmed(false);
+    setUploadError(null);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1667,7 +1729,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" });
@@ -1678,10 +1742,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__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs(Label, { children: [
@@ -1749,19 +1818,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
         isConfirmed ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600", children: [
           /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { children: "Signature saved" })
-        ] }) : /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "button",
-            onClick: confirmSignature,
-            disabled: !hasDrawing || isUploading,
-            className: "text-xs",
-            children: [
-              /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
-              isUploading ? "Saving\u2026" : "Confirm"
-            ]
-          }
-        )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: confirmSignature,
+              disabled: !hasDrawing || isUploading,
+              className: "text-xs",
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
+                isUploading ? "Saving\u2026" : "Confirm"
+              ]
+            }
+          ),
+          uploadError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 mt-1", children: uploadError })
+        ] })
       ] })
     ),
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
@@ -2341,10 +2413,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__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
+    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
   ] });
 };
 var ReadOnlyMultiSelect = ({ fieldDef, value }) => {
@@ -2368,10 +2440,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__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem]", children: loading ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No values selected" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedLabels.map((label, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem]", children: loading ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No values selected" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedLabels.map((label, idx) => /* @__PURE__ */ 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",
@@ -2574,10 +2646,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__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty2 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
+    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-gray-400 italic", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No value" }) : displayValue })
   ] });
 };
 function isOptionSelected2(selected, optValue) {
@@ -2747,6 +2819,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) {
@@ -2767,7 +2840,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__ */ jsx(Fragment, { children: availableTransitions.length > 0 ? availableTransitions.map((t) => /* @__PURE__ */ jsx(
@@ -2781,9 +2855,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__ */ jsx(
@@ -2793,9 +2867,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 })
     ] })