@depup/react-hook-form 7.85.0-depup.0 → 7.86.0-depup.0

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export * from './controller';
 export { FieldArray } from './fieldArray';
 export * from './form';
-export type { FormStateProps, FormStateSubscribeProps, } from './formStateSubscribe';
-export { FormState, FormStateSubscribe } from './formStateSubscribe';
+export type { FormStateProps, FormStateSubscribeProps } from './formState';
+export { FormState, FormStateSubscribe } from './formState';
 export * from './logic';
 export * from './types';
 export * from './useController';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,YAAY,EACV,cAAc,EACd,uBAAuB,GACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC5D,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.esm.mjs

@@ -26,16 +26,14 @@ var isNameInFieldArray = (names, name) => name
     .split('.')
     .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
-
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
+    if (data === null || typeof data !== 'object') {
+        return data;
+    }
     if (data instanceof Date) {
         return new Date(data);
     }
@@ -44,7 +42,7 @@ function cloneObject(data) {
         return data;
     }
     const isArray = Array.isArray(data);
-    if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    if (!isArray && data.constructor !== Object) {
         return data;
     }
     const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
@@ -170,6 +168,11 @@ const useIsomorphicLayoutEffect = isWeb
     ? React.useLayoutEffect
     : React.useEffect;
 
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
@@ -427,17 +430,17 @@ function useWatch(props) {
     // Optimize: Check control reference first before expensive deepEqual
     const controlChanged = _prevControl.current !== control;
     const prevName = _prevName.current;
-    // Cache the computed output to avoid duplicate calls within the same render
-    // We include shouldReturnImmediate in deps to ensure proper recomputation
-    const computedOutput = React.useMemo(() => {
+    // `null`/`undefined` are valid watched values, so a boolean flag (rather
+    // than a sentinel return value) decides whether to return the freshly
+    // computed output instead of the possibly-stale state value.
+    const shouldReturnImmediate = React.useMemo(() => {
         if (disabled) {
-            return null;
+            return false;
         }
         const nameChanged = !controlChanged && !deepEqual(prevName, name);
-        const shouldReturnImmediate = controlChanged || nameChanged;
-        return shouldReturnImmediate ? getCurrentOutput() : null;
-    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
-    return computedOutput !== null ? computedOutput : value;
+        return controlChanged || nameChanged;
+    }, [disabled, controlChanged, name, prevName]);
+    return shouldReturnImmediate ? getCurrentOutput() : value;
 }
 
 /**
@@ -653,16 +656,12 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
-var generateId = () => {
-    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-        return crypto.randomUUID();
-    }
-    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = ((Math.random() * 16 + d) % 16) | 0;
-        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+var generateId = () => typeof crypto !== 'undefined' && crypto.randomUUID
+    ? crypto.randomUUID()
+    : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
     });
-};
 
 var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
     ? options.focusName ||
@@ -759,23 +758,25 @@ const defaultResult = {
 };
 const validResult = { value: true, isValid: true };
 var getCheckboxValue = (options) => {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            const values = options
-                .filter((option) => option && option.checked && !option.disabled)
-                .map((option) => option.value);
-            return { value: values, isValid: !!values.length };
-        }
-        return options[0].checked && !options[0].disabled
-            ? // @ts-expect-error expected to work in the browser
-                options[0].attributes && !isUndefined(options[0].attributes.value)
-                    ? isUndefined(options[0].value) || options[0].value === ''
-                        ? validResult
-                        : { value: options[0].value, isValid: true }
-                    : validResult
-            : defaultResult;
-    }
-    return defaultResult;
+    if (!Array.isArray(options)) {
+        return defaultResult;
+    }
+    if (options.length > 1) {
+        const values = options
+            .filter((option) => option && option.checked && !option.disabled)
+            .map((option) => option.value);
+        return { value: values, isValid: !!values.length };
+    }
+    const option = options[0];
+    if (!option || !option.checked || option.disabled) {
+        return defaultResult;
+    }
+    if (!option.attributes || !('value' in option.attributes)) {
+        return validResult;
+    }
+    return isUndefined(option.value) || option.value === ''
+        ? validResult
+        : { value: option.value, isValid: true };
 };
 
 const defaultReturn = {
@@ -993,7 +994,8 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
             }
         }
     }
-    setCustomValidity(true);
+    const fieldError = error[name];
+    setCustomValidity(fieldError ? fieldError.message : true);
     return error;
 };
 
@@ -1272,8 +1274,8 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
             argA: index,
-            argB: updateValue,
-        }, true, false);
+            argB: fillEmptyArray(value),
+        });
     };
     const replace = (value) => {
         if (disabled) {
@@ -1333,10 +1335,7 @@ function useFieldArray(props) {
             }
             else {
                 const field = get(control._fields, name);
-                if (field &&
-                    field._f &&
-                    !(getValidationModes(control._options.reValidateMode).isOnSubmit &&
-                        getValidationModes(control._options.mode).isOnSubmit)) {
+                if (field && field._f) {
                     validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
                         control._subjects.state.next({
                             errors: updateFieldArrayRootError(control._formState.errors, error, name),
@@ -1454,12 +1453,15 @@ function useFieldArray(props) {
  */
 const FieldArray = (props) => props.render(useFieldArray(props));
 
+const isFileLike = (value) => (typeof Blob !== 'undefined' && value instanceof Blob) ||
+    (typeof File !== 'undefined' && value instanceof File);
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
         if (isObjectType(obj[key]) &&
             obj[key] !== null &&
-            !isDateObject(obj[key])) {
+            !isDateObject(obj[key]) &&
+            !isFileLike(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -1555,10 +1557,11 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
+const FormProvider = ({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
     const memoizedValue = React.useMemo(() => ({
         watch,
         getValues,
+        getErrors,
         getFieldState,
         setError,
         clearErrors,
@@ -1579,6 +1582,7 @@ const FormProvider = ({ children, watch, getValues, getFieldState, setError, cle
         clearErrors,
         control,
         formState,
+        getErrors,
         getFieldState,
         getValues,
         handleSubmit,
@@ -1766,6 +1770,24 @@ function extractFormValues(fieldsState, formValues) {
     return values;
 }
 
+const hasOwn = (value, key) => value !== null &&
+    isObjectType(value) &&
+    Object.prototype.hasOwnProperty.call(value, key);
+var has = (object, path) => {
+    if (!path) {
+        return false;
+    }
+    let result = object;
+    for (const key of isKey(path) ? [path] : stringToPath(path)) {
+        if (!hasOwn(result, key)) {
+            // `get` also resolves a path held as a single literal key, eg `{ 'a.b': 1 }`
+            return hasOwn(object, path);
+        }
+        result = result[key];
+    }
+    return true;
+};
+
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
 var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
@@ -1865,6 +1887,18 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues, fieldRefs) {
     return dirtyFieldsFromValues;
 }
 
+var getFieldArrayItemNames = (names, name) => {
+    const segments = name.split('.');
+    const matches = [];
+    let prefix = segments[0];
+    for (let i = 1; i < segments.length; prefix += '.' + segments[i++]) {
+        if (!isNaN(+segments[i]) && names.has(prefix)) {
+            matches.push(`${prefix}.${segments[i]}`);
+        }
+    }
+    return matches;
+};
+
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
     ? value
     : valueAsNumber
@@ -1940,10 +1974,11 @@ var hasPromiseValidation = (fieldReference) => {
 
 var hasValidation = (options) => options.mount &&
     (options.required ||
-        options.min ||
-        options.max ||
-        options.maxLength ||
-        options.minLength ||
+        (!isUndefined(options.required) && options.required !== false) ||
+        !isUndefined(options.min) ||
+        !isUndefined(options.max) ||
+        !isUndefined(options.maxLength) ||
+        !isUndefined(options.minLength) ||
         options.pattern ||
         options.validate);
 
@@ -2147,7 +2182,7 @@ function createFormControl(props = {}) {
                 _proxyFormState.validatingFields ||
                 _proxySubscribeFormState.isValidating ||
                 _proxySubscribeFormState.validatingFields)) {
-            (names || Array.from(_names.mount)).forEach((name) => {
+            (names || _names.mount).forEach((name) => {
                 if (name) {
                     isValidating
                         ? set(_formState.validatingFields, name, isValidating)
@@ -2166,17 +2201,16 @@ function createFormControl(props = {}) {
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
+            const fields = get(_fields, name);
             if (!_state.actionArrayLengths.has(name)) {
-                const preActionFields = get(_fields, name);
-                _state.actionArrayLengths.set(name, Array.isArray(preActionFields) ? preActionFields.length : 0);
+                _state.actionArrayLengths.set(name, Array.isArray(fields) ? fields.length : 0);
             }
-            if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
-                const fieldValues = method(get(_fields, name), args.argA, args.argB);
+            if (shouldUpdateFieldsAndState && Array.isArray(fields)) {
+                const fieldValues = method(fields, args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
-            if (shouldUpdateFieldsAndState &&
-                Array.isArray(get(_formState.errors, name))) {
-                const fieldArrayErrors = get(_formState.errors, name);
+            const fieldArrayErrors = get(_formState.errors, name);
+            if (shouldUpdateFieldsAndState && Array.isArray(fieldArrayErrors)) {
                 const rootError = fieldArrayErrors.root;
                 const errors = method(fieldArrayErrors, args.argA, args.argB) || fieldArrayErrors;
                 if (rootError) {
@@ -2185,11 +2219,12 @@ function createFormControl(props = {}) {
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
+            const touchedFieldsArray = get(_formState.touchedFields, name);
             if ((_proxyFormState.touchedFields ||
                 _proxySubscribeFormState.touchedFields) &&
                 shouldUpdateFieldsAndState &&
-                Array.isArray(get(_formState.touchedFields, name))) {
-                const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+                Array.isArray(touchedFieldsArray)) {
+                const touchedFields = method(touchedFieldsArray, args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
@@ -2375,10 +2410,6 @@ function createFormControl(props = {}) {
                 errors: _formState.errors,
                 name,
             };
-            _formState = {
-                ..._formState,
-                ...updatedFormState,
-            };
             _subjects.state.next(updatedFormState);
         }
     };
@@ -2647,6 +2678,11 @@ function createFormControl(props = {}) {
                 name: _state.mount || watched ? name : undefined,
                 values,
             });
+            if (!isFieldArray) {
+                for (const itemName of getFieldArrayItemNames(_names.array, name)) {
+                    _subjects.state.next({ name: itemName, values });
+                }
+            }
         }
     };
     const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
@@ -2659,10 +2695,9 @@ function createFormControl(props = {}) {
                 ..._formValues,
                 ...updatedFormValues,
             };
-            const flattenedUpdates = flatten(updatedFormValues);
             for (const fieldName of _names.mount) {
-                if (fieldName in flattenedUpdates) {
-                    _setValue(fieldName, flattenedUpdates[fieldName], options, true, true);
+                if (has(updatedFormValues, fieldName)) {
+                    _setValue(fieldName, get(updatedFormValues, fieldName), options, true, true);
                 }
             }
             _subjects.state.next({
@@ -2862,13 +2897,22 @@ function createFormControl(props = {}) {
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
-    const getFieldState = (name, formState) => ({
-        invalid: !!get((formState || _formState).errors, name),
-        isDirty: !!get((formState || _formState).dirtyFields, name),
-        error: get((formState || _formState).errors, name),
-        isValidating: !!get(_formState.validatingFields, name),
-        isTouched: !!get((formState || _formState).touchedFields, name),
-    });
+    const getErrors = (fieldNames) => isUndefined(fieldNames)
+        ? { ..._formState.errors }
+        : isString(fieldNames)
+            ? get(_formState.errors, fieldNames)
+            : fieldNames.map((name) => get(_formState.errors, name));
+    const getFieldState = (name, formState) => {
+        const targetFormState = formState || _formState;
+        const error = get(targetFormState.errors, name);
+        return {
+            invalid: !!error,
+            isDirty: !!get(targetFormState.dirtyFields, name),
+            error,
+            isValidating: !!get(_formState.validatingFields, name),
+            isTouched: !!get(targetFormState.touchedFields, name),
+        };
+    };
     const clearErrors = (name) => {
         const names = name ? convertToArrayPayload(name) : undefined;
         names === null || names === void 0 ? void 0 : names.forEach((inputName) => unset(_formState.errors, inputName));
@@ -2988,12 +3032,13 @@ function createFormControl(props = {}) {
                 !options.keepDefaultValue &&
                 unset(_defaultValues, fieldName);
         }
-        _subjects.state.next({
-            values: cloneObject(_formValues),
-        });
+        _valuesSubscriberCount &&
+            _subjects.state.next({
+                values: cloneObject(_formValues),
+            });
         _subjects.state.next({
             ..._formState,
-            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
+            ...(options.keepDirty ? {} : { isDirty: _getDirty() }),
         });
         !options.keepIsValid && _setValid();
     };
@@ -3219,7 +3264,7 @@ function createFormControl(props = {}) {
                     ..._names.mount,
                     ...collectDirtyFieldNames(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs), _formState.dirtyFields),
                 ]);
-                for (const fieldName of Array.from(fieldsToCheck)) {
+                for (const fieldName of fieldsToCheck) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
                     const existingValue = get(_formValues, fieldName);
                     const newValue = get(values, fieldName);
@@ -3462,6 +3507,7 @@ function createFormControl(props = {}) {
         setValue,
         setValues,
         getValues,
+        getErrors,
         reset,
         resetField,
         resetDefaultValues,