react-f0rm 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { a as FieldPath, N as Name, F as Form$1, P as PathValueOf, b as FieldError, c as Path, O as Options } from './form-rTlcIiWH.js';
-export { d as FieldErrorEntry, e as FieldState, H as HandleSubmitOptions, f as PathValue, R as ReValidateMode, g as ResetFieldOptions, h as ResetOptions, S as SetFieldOptions, i as SetFocusOptions, j as SetServerErrorsOptions, V as VALIDATION_OUTCOME, k as ValidateResult, l as ValidationMode, m as ValidationOutcome, n as clearErrors, o as createForm, p as ensureValidate, q as getDirtyFields, r as getError, s as getErrorByPath, t as getErrors, u as getFieldErrors, v as getFieldErrorsByPath, w as getFieldState, x as getFirstError, y as getTouchedFields, z as getValue, A as getValueByPath, B as getValues, C as handleSubmit, D as hasErrors, E as hasTouched, G as hasTouchedByPath, I as incrementSubmitCount, J as isDirty, K as isTouched, L as removeField, M as removeFieldByPath, Q as reset, T as resetField, U as setDisabled, W as setError, X as setErrorByPath, Y as setFocus, Z as setInitialValues, _ as setIsSubmitting, $ as setServerErrors, a0 as setSubmitSuccessful, a1 as setTouched, a2 as setTouchedByPath, a3 as setValidatingByPath, a4 as setValue, a5 as setValueByPath, a6 as trigger, a7 as unsetValidatingByPath, a8 as validate } from './form-rTlcIiWH.js';
-import { V as Validator } from './validate-CQX7BJOD.js';
+import { a as FieldPath, N as Name, F as Form$1, V as ValidationMode, P as PathValueOf, b as FieldError, c as Path, O as Options } from './form-D9COEt0-.js';
+export { d as FieldErrorEntry, e as FieldState, H as HandleSubmitOptions, f as PathValue, R as ReValidateMode, g as ResetFieldOptions, h as ResetOptions, S as SetFieldOptions, i as SetFocusOptions, j as SetServerErrorsOptions, k as VALIDATION_OUTCOME, l as ValidateResult, m as ValidationOutcome, n as clearErrors, o as createForm, p as ensureValidate, q as getDirtyFields, r as getError, s as getErrorByPath, t as getErrors, u as getFieldErrors, v as getFieldErrorsByPath, w as getFieldState, x as getFirstError, y as getTouchedFields, z as getValue, A as getValueByPath, B as getValues, C as handleSubmit, D as hasErrors, E as hasTouched, G as hasTouchedByPath, I as incrementSubmitCount, J as isDirty, K as isTouched, L as removeField, M as removeFieldByPath, Q as reset, T as resetField, U as setDisabled, W as setError, X as setErrorByPath, Y as setFocus, Z as setInitialValues, _ as setIsSubmitting, $ as setServerErrors, a0 as setSubmitSuccessful, a1 as setTouched, a2 as setTouchedByPath, a3 as setValidatingByPath, a4 as setValue, a5 as setValueByPath, a6 as trigger, a7 as unsetValidatingByPath, a8 as validate } from './form-D9COEt0-.js';
+import { V as Validator } from './validate-Cu43SqhV.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { EventEmitter } from '@for-fun/event-emitter';
@@ -78,6 +78,17 @@ interface UseFieldOptions$1<TValues extends Record<string, any> = any, TPath ext
      * `disabled`. A field cannot opt out of a disabled form.
      */
     disabled?: boolean;
+    /**
+     * Field-level validation mode override: when given, this field validates
+     * on its own schedule instead of `form.mode` — every other field keeps
+     * the form-level timing (e.g. a form that defaults to `'onSubmit'` with
+     * one field declared `'onBlur'` shows that field's error on blur while
+     * the rest wait for submit). `reValidateMode` stays form-level: once any
+     * field has an error (after a failed submit, say), re-validation follows
+     * the form's `reValidateMode` for every field, overriding this one too.
+     * See {@link ValidationMode}.
+     */
+    mode?: ValidationMode;
 }
 /**
  * The result of {@link useField}. Deliberately a closed shape: no index
@@ -421,6 +432,14 @@ interface UseFieldOptions<TValues extends Record<string, any> = any, TPath exten
      * changes apply immediately. Passed through to useField.
      */
     delayError?: number;
+    /**
+     * Field-level validation mode override: this field validates on its own
+     * schedule instead of the form's `mode` (other fields are unaffected);
+     * the form's `reValidateMode` still governs re-validation once the
+     * field has an error. Passed through to useField, never spread onto
+     * the DOM element.
+     */
+    mode?: ValidationMode;
     [key: string]: any;
 }
 interface FieldProps<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | Name = Name> extends UseFieldOptions<TValues, TPath> {
@@ -484,5 +503,5 @@ interface SelectComponent {
 }
 declare const Select: SelectComponent;
 
-export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, FieldError, FieldPath, Form, FormContext, Form$1 as FormInstance, FormProvider, Name, Options, Path, PathValueOf, Select, Validator, createFormContext, fieldErrorId, subscribe, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch };
+export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, FieldError, FieldPath, Form, FormContext, Form$1 as FormInstance, FormProvider, Name, Options, Path, PathValueOf, Select, ValidationMode, Validator, createFormContext, fieldErrorId, subscribe, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch };
 export type { FieldRules, SubscribeEvent, SubscribeOptions, WatchScope };

package/dist/index.mjs

@@ -1260,7 +1260,8 @@ function useFieldCore({
   rules,
   validateDebounce,
   delayError,
-  disabled
+  disabled,
+  mode: modeOption
 }, Context) {
   const contextForm = useContext(Context);
   const form = f1 || contextForm;
@@ -1280,6 +1281,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;
   useEffect(() => {
     if (initialValue === void 0) return;
     if (getValueByPath(form, path) === void 0) {
@@ -1288,12 +1290,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();
   });
   useEffect(
@@ -1512,6 +1514,7 @@ const Field = React.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const innerRef = React.useRef(null);
@@ -1540,6 +1543,7 @@ const Field = React.forwardRef(
       validateDebounce,
       delayError,
       disabled,
+      mode,
       validate: (...params) => {
         const el = innerRef.current;
         if (el && typeof el.checkValidity === "function") {
@@ -1613,6 +1617,7 @@ const Checkbox = React.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const {
@@ -1631,7 +1636,8 @@ const Checkbox = React.forwardRef(
       rules,
       validateDebounce,
       delayError,
-      disabled
+      disabled,
+      mode
     });
     return /* @__PURE__ */ React.createElement(
       "input",
@@ -1667,6 +1673,7 @@ const Select = React.forwardRef(
     validateDebounce,
     disabled,
     delayError,
+    mode,
     ...props
   }, ref) => {
     const {
@@ -1685,7 +1692,8 @@ const Select = React.forwardRef(
       rules,
       validateDebounce,
       delayError,
-      disabled
+      disabled,
+      mode
     });
     return /* @__PURE__ */ React.createElement(
       "select",