formanitor 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -204,6 +204,7 @@ var FormStore = class {
   config;
   // Cache for debounce
   saveTimeout = null;
+  draftCallbackTimeout = null;
   constructor(schema, config = {}) {
     this.schema = schema;
     this.config = config;
@@ -223,7 +224,8 @@ var FormStore = class {
       workflowState: initialWorkflowState,
       isValid: true,
       isSubmitting: false,
-      submitAttempted: false
+      submitAttempted: false,
+      pendingUploads: 0
     };
     this.initializeDefaults();
     this.evaluate();
@@ -272,7 +274,10 @@ var FormStore = class {
     this.checkEvents(fieldId, "onValueChange", value);
     this.evaluate();
     this.notify();
-    this.scheduleSave();
+    this.scheduleDraftCallback();
+    if (!this.config.onDraftChange) {
+      this.scheduleSave();
+    }
   }
   setTouched(fieldId) {
     if (this.state.touched[fieldId]) return;
@@ -308,6 +313,26 @@ var FormStore = class {
       this.save();
     }, 1e3);
   }
+  scheduleDraftCallback() {
+    if (!this.config.onDraftChange) return;
+    if (this.draftCallbackTimeout) {
+      clearTimeout(this.draftCallbackTimeout);
+    }
+    this.draftCallbackTimeout = setTimeout(() => {
+      const payload = {
+        // For consumer callbacks, send values in the same
+        // serialized shape used for outbound submissions so
+        // media/signature fields are wrapped consistently.
+        values: this.serializeValuesForSubmission(this.state.values),
+        meta: {
+          updatedAt: Date.now(),
+          workflowState: this.state.workflowState,
+          version: this.schema.version
+        }
+      };
+      this.config.onDraftChange?.(payload);
+    }, 2500);
+  }
   async save() {
     const payload = {
       values: this.state.values,
@@ -485,9 +510,53 @@ 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.onDraftChange !== void 0) this.config.onDraftChange = next.onDraftChange;
+    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) {
@@ -519,6 +588,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();
   }, []);
@@ -549,7 +623,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) {
@@ -1457,6 +1532,7 @@ var ImageUploadWidget = ({ fieldId }) => {
     }
     setIsUploading(true);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const previewUrl = URL.createObjectURL(file);
       setPreview(previewUrl);
@@ -1469,6 +1545,7 @@ var ImageUploadWidget = ({ fieldId }) => {
       setPreview(null);
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
   const handleRemove = () => {
@@ -1568,6 +1645,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;
@@ -1606,6 +1699,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
     if (disabled) return;
     setIsDrawing(true);
     setIsConfirmed(false);
+    setUploadError(null);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1686,7 +1780,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" });
@@ -1697,10 +1793,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: [
@@ -1768,19 +1869,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 })
@@ -2766,6 +2870,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) {
@@ -2786,7 +2891,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(
@@ -2800,9 +2906,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(
@@ -2812,9 +2918,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 })
     ] })