@bombillazo/rhf-plus 7.64.0-plus.2 → 7.67.0-plus.0

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export * from './useFormContext';
 export * from './useFormState';
 export * from './useWatch';
 export * from './utils';
+export * from './watch';
 //# sourceMappingURL=index.d.ts.map

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,cAAc,QAAQ,CAAC;AACvB,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,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

@@ -179,7 +179,7 @@ HookFormContext.displayName = 'HookFormContext';
  */
 const useFormContext = () => React.useContext(HookFormContext);
 /**
- * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
+ * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
  *
  * @remarks
  * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
@@ -318,7 +318,7 @@ var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
+        return Object.is(object1, object2);
     }
     if (isDateObject(object1) && isDateObject(object2)) {
         return object1.getTime() === object2.getTime();
@@ -344,7 +344,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2, _internal_visited)
-                : val1 !== val2) {
+                : !Object.is(val1, val2)) {
                 return false;
             }
         }
@@ -374,33 +374,68 @@ function useWatch(props) {
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
     const _computeFormValues = React.useRef(undefined);
+    const _prevControl = React.useRef(control);
+    const _prevName = React.useRef(name);
     _compute.current = compute;
-    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-    useIsomorphicLayoutEffect(() => control._subscribe({
-        name,
-        formState: {
-            values: true,
-        },
-        exact,
-        callback: (formState) => {
-            if (!disabled) {
-                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
-                if (_compute.current) {
-                    const computedFormValues = _compute.current(formValues);
-                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-                        updateValue(computedFormValues);
-                        _computeFormValues.current = computedFormValues;
-                    }
-                }
-                else {
-                    updateValue(formValues);
+    const [value, updateValue] = React.useState(() => {
+        const defaultValue = control._getWatch(name, _defaultValue.current);
+        return _compute.current ? _compute.current(defaultValue) : defaultValue;
+    });
+    const getCurrentOutput = React.useCallback((values) => {
+        const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+        return _compute.current ? _compute.current(formValues) : formValues;
+    }, [control._formValues, control._names, name]);
+    const refreshValue = React.useCallback((values) => {
+        if (!disabled) {
+            const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+            if (_compute.current) {
+                const computedFormValues = _compute.current(formValues);
+                if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                    updateValue(computedFormValues);
+                    _computeFormValues.current = computedFormValues;
                 }
             }
-        },
-    }), [control, disabled, name, exact]);
+            else {
+                updateValue(formValues);
+            }
+        }
+    }, [control._formValues, control._names, disabled, name]);
+    useIsomorphicLayoutEffect(() => {
+        if (_prevControl.current !== control ||
+            !deepEqual(_prevName.current, name)) {
+            _prevControl.current = control;
+            _prevName.current = name;
+            refreshValue();
+        }
+        return control._subscribe({
+            name,
+            formState: {
+                values: true,
+            },
+            exact,
+            callback: (formState) => {
+                refreshValue(formState.values);
+            },
+        });
+    }, [control, exact, name, refreshValue]);
     React.useEffect(() => control._removeUnmounted());
-    return value;
+    // If name or control changed for this render, synchronously reflect the
+    // latest value so callers (like useController) see the correct value
+    // immediately on the same render.
+    // 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(() => {
+        if (disabled) {
+            return null;
+        }
+        const nameChanged = !controlChanged && !deepEqual(prevName, name);
+        const shouldReturnImmediate = controlChanged || nameChanged;
+        return shouldReturnImmediate ? getCurrentOutput() : null;
+    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+    return computedOutput !== null ? computedOutput : value;
 }
 
 /**
@@ -972,11 +1007,12 @@ function isTraversable(value) {
 }
 function markFieldsDirty(data, fields = {}) {
     for (const key in data) {
-        if (isTraversable(data[key])) {
-            fields[key] = Array.isArray(data[key]) ? [] : {};
-            markFieldsDirty(data[key], fields[key]);
+        const value = data[key];
+        if (isTraversable(value)) {
+            fields[key] = Array.isArray(value) ? [] : {};
+            markFieldsDirty(value, fields[key]);
         }
-        else if (!isNullOrUndefined(data[key])) {
+        else if (!isUndefined(value)) {
             fields[key] = true;
         }
     }
@@ -987,16 +1023,18 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
         dirtyFieldsFromValues = markFieldsDirty(formValues);
     }
     for (const key in data) {
-        if (isTraversable(data[key])) {
+        const value = data[key];
+        if (isTraversable(value)) {
             if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-                dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
+                dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
             }
             else {
-                getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+                getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
             }
         }
         else {
-            dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+            const formValue = formValues[key];
+            dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
         }
     }
     return dirtyFieldsFromValues;
@@ -1630,7 +1668,7 @@ function createFormControl(props = {}) {
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
-            _state.mount && _setValid();
+            _state.mount && !_state.action && _setValid();
         }
     };
     const updateTouchAndDirty = (name, fieldValue, isBlurEvent, isFocusEvent, shouldDirty, shouldRender) => {
@@ -2558,7 +2596,8 @@ function createFormControl(props = {}) {
         _state.mount =
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
-                !!keepStateOptions.keepDirtyValues;
+                !!keepStateOptions.keepDirtyValues ||
+                (!_options.shouldUnregister && !isEmptyObject(values));
         _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
@@ -2892,7 +2931,8 @@ function useFieldArray(props) {
     const _actioned = React.useRef(false);
     control._names.array.add(name);
     React.useMemo(() => rules &&
-        control.register(name, rules), [control, rules, name]);
+        fields.length >= 0 &&
+        control.register(name, rules), [control, name, fields.length, rules]);
     useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === name || !fieldArrayName) {
@@ -3216,11 +3256,15 @@ function useForm(props = {}) {
         }
     }, [control, formState.isDirty]);
     React.useEffect(() => {
+        var _a;
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, {
                 keepFieldsRef: true,
                 ...control._options.resetOptions,
             });
+            if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+                control._setValid();
+            }
             _values.current = props.values;
             updateFormState((state) => ({ ...state }));
         }
@@ -3255,5 +3299,29 @@ function useForm(props = {}) {
     return _formControl.current;
 }
 
-export { Controller, Form, FormProvider, appendErrors, createFormControl, get, set, submitForm as submit, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+/**
+ * Watch component that subscribes to form field changes and re-renders when watched fields update.
+ *
+ * @param control - The form control object from useForm
+ * @param names - Array of field names to watch for changes
+ * @param render - The function that receives watched values and returns ReactNode
+ * @returns The result of calling render function with watched values
+ *
+ * @example
+ * The `Watch` component only re-render when the values of `foo`, `bar`, and `baz.qux` change.
+ * The types of `foo`, `bar`, and `baz.qux` are precisely inferred.
+ *
+ * ```tsx
+ * const { control } = useForm();
+ *
+ * <Watch
+ *   control={control}
+ *   names={['foo', 'bar', 'baz.qux']}
+ *   render={([foo, bar, baz_qux]) => <div>{foo}{bar}{baz_qux}</div>}
+ * />
+ * ```
+ */
+const Watch = ({ control, names, render, }) => render(useWatch({ control, name: names }));
+
+export { Controller, Form, FormProvider, Watch, appendErrors, createFormControl, get, set, submitForm as submit, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map