react-f0rm 0.5.1 → 0.6.0

package/README.md

@@ -349,6 +349,39 @@ const form = createForm({
 });
 ```
 
+#### Per-field mode override
+
+Sometimes one field deserves a different schedule than the rest of the form — a signup form that validates on submit, except the email field whose check should fire as soon as the user leaves the input. Any field can declare its own `mode`: it replaces the form-level `mode` for that field only, while every other field keeps the form's timing.
+
+```jsx
+import {Form, Field, useForm} from 'react-f0rm';
+
+function Register() {
+  // Form default: validate on submit.
+  const form = useForm({initialValues: {email: '', bio: ''}});
+
+  return (
+    <Form form={form}>
+      {/* This field alone validates on blur... */}
+      <Field name="email" mode="onBlur" validate={checkEmail} />
+      {/* ...while every other field waits for submit. */}
+      <Field name="bio" />
+    </Form>
+  );
+}
+```
+
+The same option exists on `useField` (and `Checkbox` / `Select`):
+
+```jsx
+const email = useField({name: 'email', mode: 'onBlur', validate: checkEmail});
+```
+
+- Accepted values are the same `ValidationMode` union as the form's `mode`; omit it and the field follows `form.mode` exactly as before.
+- Precedence is per field: `field.mode ?? form.mode`. A field cannot change another field's timing, and declaring `mode: 'onSubmit'` opts a field out of an `'onChange'` form.
+- `reValidateMode` stays form-level for every field: once a field has an error (after a failed submit, say), re-validation follows the form's `reValidateMode` regardless of the field's own `mode` — a `mode: 'onBlur'` field with the default `reValidateMode: 'onChange'` still re-validates on every keystroke while errored.
+- Manual `trigger` and submit validation are unaffected — they always run the field's validators regardless of any mode.
+
 ### Triggering validation manually
 
 `trigger` runs field validators on demand. Without a name it runs every registered validator; a single name — or an array of names — narrows it to those fields:

package/dist/{form-rTlcIiWH.d.ts → form-D9COEt0-.d.ts}

@@ -603,5 +603,5 @@ interface SetFocusOptions {
  */
 declare function setFocus(form: Form, name: Name, options?: SetFocusOptions): void;
 
-export { setServerErrors as $, getValueByPath as A, getValues as B, handleSubmit as C, hasErrors as D, hasTouched as E, hasTouchedByPath as G, incrementSubmitCount as I, isDirty as J, isTouched as K, removeField as L, removeFieldByPath as M, reset as Q, resetField as T, setDisabled as U, VALIDATION_OUTCOME as V, setError as W, setErrorByPath as X, setFocus as Y, setInitialValues as Z, setIsSubmitting as _, setSubmitSuccessful as a0, setTouched as a1, setTouchedByPath as a2, setValidatingByPath as a3, setValue as a4, setValueByPath as a5, trigger as a6, unsetValidatingByPath as a7, validate as a8, clearErrors as n, create as o, ensureValidate as p, getDirtyFields as q, getError as r, getErrorByPath as s, getErrors as t, getFieldErrors as u, getFieldErrorsByPath as v, getFieldState as w, getFirstError as x, getTouchedFields as y, getValue as z };
-export type { Form as F, HandleSubmitOptions as H, Name as N, Options as O, PathValueOf as P, ReValidateMode as R, SetFieldOptions as S, FieldPath as a, FieldError as b, Path as c, FieldErrorEntry as d, FieldState as e, PathValue as f, ResetFieldOptions as g, ResetOptions as h, SetFocusOptions as i, SetServerErrorsOptions as j, ValidateResult as k, ValidationMode as l, ValidationOutcome as m };
+export { setServerErrors as $, getValueByPath as A, getValues as B, handleSubmit as C, hasErrors as D, hasTouched as E, hasTouchedByPath as G, incrementSubmitCount as I, isDirty as J, isTouched as K, removeField as L, removeFieldByPath as M, reset as Q, resetField as T, setDisabled as U, setError as W, setErrorByPath as X, setFocus as Y, setInitialValues as Z, setIsSubmitting as _, setSubmitSuccessful as a0, setTouched as a1, setTouchedByPath as a2, setValidatingByPath as a3, setValue as a4, setValueByPath as a5, trigger as a6, unsetValidatingByPath as a7, validate as a8, VALIDATION_OUTCOME as k, clearErrors as n, create as o, ensureValidate as p, getDirtyFields as q, getError as r, getErrorByPath as s, getErrors as t, getFieldErrors as u, getFieldErrorsByPath as v, getFieldState as w, getFirstError as x, getTouchedFields as y, getValue as z };
+export type { Form as F, HandleSubmitOptions as H, Name as N, Options as O, PathValueOf as P, ReValidateMode as R, SetFieldOptions as S, ValidationMode as V, FieldPath as a, FieldError as b, Path as c, FieldErrorEntry as d, FieldState as e, PathValue as f, ResetFieldOptions as g, ResetOptions as h, SetFocusOptions as i, SetServerErrorsOptions as j, ValidateResult as l, ValidationOutcome as m };

package/dist/index.cjs.js

@@ -1280,7 +1280,8 @@ function useFieldCore({
   rules,
   validateDebounce,
   delayError,
-  disabled
+  disabled,
+  mode: modeOption
 }, Context) {
   const contextForm = React.useContext(Context);
   const form = f1 || contextForm;
@@ -1300,6 +1301,7 @@ function useFieldCore({
   const error = errorObject?.message;
   const value = useValueByPath(form, path);
   const formDisabled = useWatch(form.emitter, "disabled", () => form.disabled);
+  const mode = modeOption ?? form.mode;
   React.useEffect(() => {
     if (initialValue === void 0) return;
     if (getValueByPath(form, path) === void 0) {
@@ -1308,12 +1310,12 @@ function useFieldCore({
   }, [form, path, initialValue]);
   const onChange = useStageFn((v) => {
     setValueByPath(form, path, v);
-    if (form.mode === "onChange" || form.mode === "all" || form.mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
+    if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
       validator();
   });
   const onBlur = useStageFn(() => {
     setTouchedByPath(form, path);
-    if (form.mode === "onBlur" || form.mode === "onTouched" || form.mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
+    if (mode === "onBlur" || mode === "onTouched" || mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
       validator();
   });
   React.useEffect(
@@ -1532,6 +1534,7 @@ const Field = React__namespace.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const innerRef = React__namespace.useRef(null);
@@ -1560,6 +1563,7 @@ const Field = React__namespace.forwardRef(
       validateDebounce,
       delayError,
       disabled,
+      mode,
       validate: (...params) => {
         const el = innerRef.current;
         if (el && typeof el.checkValidity === "function") {
@@ -1633,6 +1637,7 @@ const Checkbox = React__namespace.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const {
@@ -1651,7 +1656,8 @@ const Checkbox = React__namespace.forwardRef(
       rules,
       validateDebounce,
       delayError,
-      disabled
+      disabled,
+      mode
     });
     return /* @__PURE__ */ React__namespace.createElement(
       "input",
@@ -1687,6 +1693,7 @@ const Select = React__namespace.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const {
@@ -1705,7 +1712,8 @@ const Select = React__namespace.forwardRef(
       rules,
       validateDebounce,
       delayError,
-      disabled
+      disabled,
+      mode
     });
     return /* @__PURE__ */ React__namespace.createElement(
       "select",