@formality-ui/react 0.2.0 → 0.2.2

package/dist/index.d.cts

@@ -581,7 +581,15 @@ interface FormProps<TFieldValues extends FieldValues = FieldValues> {
     record?: Partial<TFieldValues>;
     /** Enable auto-save on field changes */
     autoSave?: boolean;
-    /** Debounce milliseconds for auto-save. false = immediate submission, number = delay in milliseconds (default: 1000) */
+    /**
+     * Form-level auto-save debounce, used as the fallback for any field whose
+     * `InputConfig.debounce` is unset.
+     * - `false` — submit immediately (no debounce timer).
+     * - `number` — delay auto-save by this many milliseconds (default: 1000).
+     *
+     * A field can override its own cadence via `InputConfig.debounce`
+     * (`false` for immediate, or a number for a per-field delay).
+     */
     debounce?: number | false;
     /** Form-level validation */
     validate?: (values: Partial<TFieldValues>) => Record<string, string> | Promise<Record<string, string>>;

package/dist/index.d.ts

@@ -581,7 +581,15 @@ interface FormProps<TFieldValues extends FieldValues = FieldValues> {
     record?: Partial<TFieldValues>;
     /** Enable auto-save on field changes */
     autoSave?: boolean;
-    /** Debounce milliseconds for auto-save. false = immediate submission, number = delay in milliseconds (default: 1000) */
+    /**
+     * Form-level auto-save debounce, used as the fallback for any field whose
+     * `InputConfig.debounce` is unset.
+     * - `false` — submit immediately (no debounce timer).
+     * - `number` — delay auto-save by this many milliseconds (default: 1000).
+     *
+     * A field can override its own cadence via `InputConfig.debounce`
+     * (`false` for immediate, or a number for a per-field delay).
+     */
     debounce?: number | false;
     /** Form-level validation */
     validate?: (values: Partial<TFieldValues>) => Record<string, string> | Promise<Record<string, string>>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { createContext, useContext, useMemo, useRef, useState, useCallback, useEffect, createElement } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useForm, FormProvider, useWatch, Controller, useFormContext as useFormContext$1 } from 'react-hook-form';
 import { debounce } from 'lodash-es';
@@ -179,6 +179,8 @@ function Form({
   const pendingChangedFields = useRef(/* @__PURE__ */ new Set());
   const pendingAffectedFields = useRef(/* @__PURE__ */ new Set());
   const executionVersionRef = useRef(0);
+  const fieldDebouncersRef = useRef(/* @__PURE__ */ new Map());
+  const getOrCreateDebouncedRef = useRef();
   const registerField = useCallback((name) => {
     fieldRegistry.current.add(name);
     setRegisteredFields(new Set(fieldRegistry.current));
@@ -279,8 +281,11 @@ function Form({
         for (const field of affected) {
           pendingAffectedFields.current.add(field);
         }
-        if (inputConfig?.debounce === false) {
+        const fieldDebounce = inputConfig?.debounce;
+        if (fieldDebounce === false) {
           executeAutoSaveRef.current?.();
+        } else if (typeof fieldDebounce === "number") {
+          getOrCreateDebouncedRef.current?.(fieldDebounce)();
         } else {
           debouncedSubmitRef.current?.();
         }
@@ -421,53 +426,67 @@ function Form({
         return;
       }
     }
-    const formState = methods.formState;
-    if (Object.keys(formState.errors).length > 0) {
-      return;
-    }
     const values = methods.getValues();
     await handleSubmit(values);
   }, [methods, handleSubmit, waitForFieldValidation]);
   executeAutoSaveRef.current = executeAutoSave;
+  const getOrCreateDebounced = useCallback(
+    (ms) => {
+      const cached = fieldDebouncersRef.current.get(ms);
+      if (cached) return cached;
+      const debouncedFn = debounce(() => {
+        executeAutoSaveRef.current?.();
+      }, ms);
+      const fn = Object.assign(debouncedFn, {
+        pending: () => false
+        // lodash debounce tracks pending internally
+      });
+      fieldDebouncersRef.current.set(ms, fn);
+      return fn;
+    },
+    []
+  );
+  getOrCreateDebouncedRef.current = getOrCreateDebounced;
   useEffect(() => {
+    return () => {
+      fieldDebouncersRef.current.forEach((fn) => fn.cancel());
+      fieldDebouncersRef.current.clear();
+    };
+  }, [getOrCreateDebounced]);
+  const debouncedSubmit = useMemo(() => {
     if (debounceMs === false) {
-      const immediateFn = Object.assign(
+      return Object.assign(
         () => {
-          executeAutoSave();
+          executeAutoSaveRef.current?.();
         },
         {
           cancel: () => {
           },
           // No-op for immediate function
-          flush: () => executeAutoSave(),
+          flush: () => executeAutoSaveRef.current?.(),
           // Execute immediately on flush
           pending: () => false
           // Never pending when immediate
         }
       );
-      debouncedSubmitRef.current = immediateFn;
-      return () => {
-      };
     }
     const debouncedFn = debounce(() => {
-      executeAutoSave();
+      executeAutoSaveRef.current?.();
     }, debounceMs);
-    const fn = Object.assign(debouncedFn, {
+    return Object.assign(debouncedFn, {
       pending: () => false
       // lodash debounce handles this internally
     });
-    debouncedSubmitRef.current = fn;
+  }, [debounceMs]);
+  debouncedSubmitRef.current = debouncedSubmit;
+  useEffect(() => {
     return () => {
-      debouncedFn.cancel();
+      debouncedSubmit.cancel();
     };
-  }, [executeAutoSave, debounceMs]);
+  }, [debouncedSubmit]);
   const submitImmediate = useCallback(() => {
-    if (debouncedSubmitRef.current?.flush) {
-      debouncedSubmitRef.current.flush();
-    } else {
-      executeAutoSave();
-    }
-  }, [executeAutoSave]);
+    debouncedSubmitRef.current?.flush();
+  }, []);
   const unusedFields = useMemo(() => {
     const allFields = Object.keys(config);
     return allFields.filter((name) => !registeredFields.has(name));
@@ -506,7 +525,7 @@ function Form({
       setFieldValidating,
       getFormState,
       onSubmit,
-      debouncedSubmit: debouncedSubmitRef.current,
+      debouncedSubmit,
       submitImmediate,
       unusedFields,
       methods
@@ -525,6 +544,7 @@ function Form({
       setFieldValidating,
       getFormState,
       onSubmit,
+      debouncedSubmit,
       submitImmediate,
       unusedFields,
       methods
@@ -560,11 +580,18 @@ function useInferredInputs(options) {
     selectProps,
     formDefaultFieldProps,
     providerDefaultFieldProps,
-    conditions = [],
-    subscribesTo = []
+    conditions,
+    subscribesTo
   } = options;
+  const signature = JSON.stringify({
+    selectProps,
+    formDefaultFieldProps,
+    providerDefaultFieldProps,
+    conditions,
+    subscribesTo
+  });
   return useMemo(() => {
-    const inferred = [...subscribesTo];
+    const inferred = [...subscribesTo ?? []];
     if (providerDefaultFieldProps) {
       inferred.push(...inferFieldsFromDescriptor(providerDefaultFieldProps));
     }
@@ -574,17 +601,11 @@ function useInferredInputs(options) {
     if (selectProps) {
       inferred.push(...inferFieldsFromDescriptor(selectProps));
     }
-    if (conditions.length > 0) {
+    if (conditions && conditions.length > 0) {
       inferred.push(...inferFieldsFromConditions(conditions));
     }
     return [...new Set(inferred)];
-  }, [
-    providerDefaultFieldProps,
-    formDefaultFieldProps,
-    selectProps,
-    conditions,
-    subscribesTo
-  ]);
+  }, [signature]);
 }
 
 // src/hooks/useConditions.ts
@@ -1119,17 +1140,29 @@ function Field({
           }
         });
         const Component = inputConfig.component;
+        const isHostComponent = typeof inputConfig.component === "string";
         const template = inputConfig.template ?? providerConfig.inputTemplates[type] ?? providerConfig.defaultInputTemplate;
         const TemplateComponent = template;
-        const renderedField = TemplateComponent ? /* @__PURE__ */ jsx(
-          TemplateComponent,
-          {
-            Field: Component,
-            fieldProps: finalProps,
-            fieldState,
-            formState
-          }
-        ) : /* @__PURE__ */ jsx(Component, { ...finalProps });
+        let renderedField;
+        if (TemplateComponent) {
+          renderedField = /* @__PURE__ */ jsx(
+            TemplateComponent,
+            {
+              Field: Component,
+              fieldProps: finalProps,
+              fieldState,
+              formState
+            }
+          );
+        } else if (isHostComponent) {
+          const { forwardRef: hostRef, ...restHostProps } = finalProps;
+          renderedField = createElement(inputConfig.component, {
+            ...restHostProps,
+            ref: hostRef
+          });
+        } else {
+          renderedField = /* @__PURE__ */ jsx(Component, { ...finalProps });
+        }
         if (typeof children === "function") {
           const result = children({
             fieldState,